Jose Gallego, UX/Front Designer a tiempo parcial, Arquero y Esclavo perruno a tiempo completo

UX Design Tips for an eCommerce Experience filled with Empathy

j

by JoseGallego

}

04.30.2019

Article originally writed for Empathy.co on Medium, you can also read it here:
https://medium.com/empathyco/ux-design-tips-for-an-ecommerce-experience-filled-with-empathy-85cfb92d951b

eCommerce sites have taken the high street and more traditional shopping by storm and you can now find literally any kind of shop online.

Whether that’s more material items like food, clothing, electronics, or experiences like flights and music concerts or even weird things like asteroid fragments or even coffins (who buys a coffin online?…). Despite the large variety in goods and services, all of these sites have something in common; they need to be usable.

User experience is fundamental in eCommerce if you want to keep a good flow of consumers visiting your site, and more importantly, give them an outstanding experience they’ll remember and want to come back for, even if you sell coffins!

Online shopping means No Queues, and to have full access whenever and wherever you are, and this means offering an easy, intuitive and useful customer journey that generates a positive experience.

So how can you achieve that? Well, there are tons of different options and solutions to consider but a good starting point is the design and here I want to share some UX Design Tips.

The Interface

User-friendly Sorting and Filtering

Filtering and sorting are a must, unless you sell less than 80–100 products.
Most users don’t want to spend time scrolling and moving between pages. A crucial element for a great experience is to have a good Filtering and Sorting system, letting the user specify the kind of features they’re interested in.

What’s more, the more specific the filters are, the more accurate and relevant the results will be and the more likely the user will find exactly what they’re looking for. Let’s take the example of a red dress in a size medium for under €10.

Image for post


Choice of the Display View

The display view is another really important element. Some users may just want to take a quick look around, reviewing only product thumbnails and quick info. While others will prefer to have a more detailed overview with large and multiple images.

Your on line shoppers should be able to make this choice and select how they’d like the product information displayed and, in the same way, how the number of products they’d like shown per page. This last feature is also something that’s evolving into an infinite scroll feature so that the more you scroll, the more the products that are automatically added to the bottom of the page.

Image for post


Suggestions and Related Tags

To help the user navigate through the product catalogue, it’s really useful to provide items that are related to the user’s initial search suggestion. This facilitates a shorter and quicker path to the final selection by offering similar alternatives to the current search, offering results that are specifically tailored to the user profile and interests. This solution is incredibly interesting for a more personalised and yet non-intrusive search flow.

Image for post

Using related tags to enhance the search experience


Enhance Product Details

Another way to help the user move fast and efficiently through the eCommerce site so they don’t make unnecessary clicks, wasting time and leading to a bad experience, is through use of the product grid to give the user as much information as they need.

The grid itself can offer a full array of different tools and features, such as:

  • Display relevant product information when users hover over the image.
  • Let shoppers swipe the image to see different product pictures and more detail.
  • Provide product-related details and notifications such as the Rating, Stock, a notification field if there is no stock, SKUs, even social media links to make items shareable.
  • Highlight the products that are already in the cart.

One-click ordering for fast delivery

According to the Wharton University of Pennsylvania this feature was a game-changer. The ability for users to enter their payment and postage information once and then keep on buying through a one-click ordering process was a concept that saved lots of clicks, time and unnecessary repeated checkout processes.

Image for post


Sharable Wishlists

It’s often the case that customers don’t want to make a purchase immediately. They want to list, compare, organise and share items with partners, friends or family. This is particularly useful and prevalent when needing to make a purchase for a specific event or buying a joint gift.

It’s great, therefore, to offer a wishlist or allow one or multiple wishlists to be shared. This could be for a joint trip, a wedding celebration, back to school items for the kids, or the monthly supermarket list. Our world is connected and facilitating the many connections and relationships is a big plus in eCommerce.

Featured

Related Posts

Tutorial SASS Framework.

Hoy os traigo el contenido del taller de SASS que impartí hace unas semanas conjuntamente con mi compañero Pixeltomas. Sass (acrónimo de Syntactically Awesome StyleSheets) es una extensión de CSS escrita en RUBY que añade características muy potentes y elegantes a...

leer más

Palettab y Colourlovers

Palettab es una extensión de Chrome que muestra selecciones de paletas de colores y fuentes distintas, extraidas de www.colourlovers.com cada vez que abres una nueva pestaña (Tab). Me parece una de esas extensiones útiles ya que cada vez que abras una nueva pestaña de...

leer más

Need Help?

Get In Touch

Follow Us

About the Author

JoseGallego

Comments

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Related Posts

Palettab y Colourlovers

Palettab y Colourlovers

Palettab es una extensión de Chrome que muestra selecciones de paletas de colores y fuentes distintas, extraidas de www.colourlovers.com cada vez que abres una nueva pestaña (Tab). Me parece una de esas extensiones útiles ya que cada vez que abras una nueva pestaña de...

Metodo Aplication Cache de HTML5

Metodo Aplication Cache de HTML5

Metodo Aplication Cache de HTML5 ¿Para qué sirve Aplication Cache?, Muy sencillo!Trabajar sin conexión en una web. ¿Qué ventajas tiene eso?…Pues según la W3c: Offline Browsing: Puedes explorar un sitio web por completo estando offline. Speed: Puedes almacenar todos...

Metodo Local Storage deHTML5

Metodo Local Storage deHTML5

Local Storage, es un método propio de HTML5 que nos permite almacenar datos localmente en nuestro navegador. Antes de su existencia, los datos tenían que ser almacenados en las llamadas cookies, las cuales se almacenaban por igual en cada petición al servidor....

Get In Touch

Get In Touch