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


by JoseGallego



Article originally writed for on Medium, you can also read it here:

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.

Related Posts

ECOSIA, Plantando árboles mientras navegas por la red

ECOSIA, Plantando árboles mientras navegas por la red

ECOSIA es el buscador que destina una gran parte de sus ganancias por anuncios/Ads  en plantar árboles. Según recogen en su web, llevan más de 3 millones (camino de 4) de árboles plantados en todo el mundo, sobre todo en la zona de Burkina Faso, África. También...

Tutorial SASS Framework.

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...

Get In Touch

Get In Touch