8 hacks for the best eCommerce UX

Care to share?

An incorrectly designed online store, in terms of usability, is one of the most common causes of low conversion rates. Here are eight hacks that you can implement quickly in your online store to make the user experience better and thus grow your revenue.

 Optimize the checkout

Order Form for MennicaWroclawska.pl
Order Form for MennicaWroclawska.pl

The checkout is a critical area for any eCommerce. If a user enters the first step in the purchasing path, it means they have already taken a preliminary decision to purchase. But in many cases, along the way, there are many traps and difficulties, set by the very creators of the online stores, that can prevent users from reaching their goal. Checkouts can be long and tedious, and potential customers often have trouble understanding commands and inputting data.

TOP 30 PWAs - Download FREE Benchmarking Study

Solutions for an excellent checkout:

  • Clear labels – users have to know exactly what info they need to give, or they will just leave;
  • Segment the info – segmenting inputs can create a great hierarchical structure. For example, you can use headers such as Payments or Address, you can even split those into separate pages;
  • Clear design – at this point you should remove everything that is not essential to finishing the checkout process, or your users might get distracted and run away up-selling or cross-selling at checkout? Only if it’s undisturbing and well-designed;
  • Resolutions – does your checkout work well on all resolutions? What would happen if somebody’s internet connection was laggy and he got disconnected during checkout? Think about using progressive web apps to let customers shop in offline mode!

Make the shopping cart accessible

Shopping Cart of Stalgast.com
Shopping Cart of Stalgast.com

The shopping cart is one of the most important functions of an online store. Here, users store products to keep an eye on and those they are going to buy. Again, adding a product to the cart doesn’t mean success yet, and it doesn’t mean that the customer will buy the product. The key here is a summary of all costs, additional charges (if any) and delivery fees. If we hide any additional costs, users may feel cheated and abandon their shopping cart.

Solutions for an excellent shopping cart:

  • Clear info – be clear about the price that users have to pay, and don’t hide additional fees;
  • Module – in many cases the shopping cart can be all-present module for quick access, this way users have better access to their cart and can manage it more easily;
  • Editable cart – let users manage the whole order easily from the cart -of course, changes should be applied live, without the necessity to reload the page;
  • Mobile cart – should your cart look the same way on mobile devices where reaching navigation icons at top of the screen is harder with a thumb? Consider experimenting with cart design to make it easily accessible on all devices.

Clearly show the product

Product Sheet - Reserved
Product Sheet – Reserved

The customer’s decision to purchase a product is often made when viewing a product sheet. It aims to present the product in a good light and provide the customer with all possible information. Here, all the possibilities to configure the product have to be presented, e.g. choosing color, size or other available parameters.

Solutions for excellent product exposition:

  • Many high quality images – in most cases users what to know exactly what a product looks like, so hi-res images are important. Also, there should be bunch of them so users have the possibility to take a closer look. In the fashion industry , it’s also a good idea to show the material close up
  • Configurable product – if you have one product in many sizes, make it one product with many possible configurations. It is considered bad practice to have sizes split up through your shop, as its harder for users to find;
  • Recommendation system – usually, our users rather browse through an online store,rather than knowing exactly what they need, that’s why it’s a good idea to show our users several similar items, or items that go well along with the already-picked products.

Make product search easier

Search engine in SMYK.com
Search engine in SMYK.com

A crucial point for any eCommerce site. In order for a customer to buy something in an online store, they first have to be able to find it and most users do it via a search engine. Whether users find what they are looking for, or abandon the online store, depends on the search functioning correctly. It often happens that improper functioning of the engine causes the user to draw a false conclusion that the product is not available in the store, where in fact the fault was with a wrongly operating search engine.

Solutions for excellent online store search:

  • Blank page – take care of blank page status, don’t let your users get disappointed. If you don’t have what you are searching for, show them some similar product or bestsellers;
  • Autosuggestion – suggesting to users what they need as they type is a perfect solution. This way, they can think about the results even before being redirected to the result page;
  • Make it fast – in some cases, live search is a great idea; you can browse through items as users type, and show them live results.

Make product filters outstanding

Filters - Enea
Filters – Enea.pl

An area which is often underappreciated and difficult to design. Users need a tool that allows them to move around an often-overwhelming number of products and filter them according to their needs. The difficulty of filters is knowing how to show many options in an accessible and readable form, allowing for making quick changes to the product list. Without it, users won’t be able to properly browse the offer and may leave the website.

Solutions for outstanding product filters:

  • Make filters visible – many people on your website might not even know that you have a filter option. You should mark it visibly, so everyone can find what they are looking for;
  • Live filtering – filtering should be easy and accessible. If your filtering reloads the whole page, users probably won’t use it;
  • Simple options – we can’t push too many options to our users, pick only the most important ones, and if you run some kind of specialist shop, show only the most important ones and add the possibility to “show more”;
  • Good labels – be sure that your users know what exactly they are filtering through to prevent disappointment.

Provide clear navigation

eShop - Solar.com.pl
eShop – Solar.com.pl

Navigation is used not only to browse the website, but also shows users what can they find. A well-prepared navigation and information architecture allows users to get an idea of the scope of products on the site.

Solutions for excellent eCommerce navigation:

  • Fixed nav – make navigation always accessible.A good solution is a navbar that hides when you scroll down, but shows when you scroll up, this way it does not interrupt our users, and is always there;
  • Visual hierarchy – give everything clear headers and spacing. It should be clear upfront which element works with which;
  • Clear clickables – make clickable elements stand out, don’t assume users know about them, make them know;
  • Drop the hamburger – in most cases, a hamburger menu is a poor UX solution. It’s better to provide clear upfront navigation, and if you have many positions, just segment them properly. This is of course the case for desktop.

Take care of mobile users

Books exposition on mobile – www.norstedts.se

These days, we are inextricably bound to our phones, thus having a version of your website adapted to mobile devices is a necessity. Mobile transactions now constitute about 35% of all transactions made in the eCommerce world. A cross-device trend is also gaining in popularity – a continuous shopping experience regardless of the equipment used. In light of these trends, not having even a decent, mobile-first solution for your online store should be regarded as a major fault.

Solutions for engaging mobile users:

  • Small size – optimize everything that you can, in this case using technologies such as PWAs can help in reducing the load time, and improving site speed;
  • Readability – think if every customer can access your website, is the font big enough? Will the color blind be users and will they be able to use it?
  • Thinking mobile – on mobile, everything should have a different size. Sometimes you also have to change proportions of the element – it can’t just be downscaled to a desktop version. In most cases, it is a good idea to start with the mobile-first approach.
Discover Vue Storefront the best PWA storefront for your eCommerce >

B2B dedicated tool

B2B website -TIM.pl
B2B website -TIM.pl

In the case of websites dedicated to B2B trading, one should pay attention to different areas. An important point is sales representatives’ contact details, and delivery terms. You should also look at a user panel, in particular the areas associated with a list of placed orders and a list of invoices. The processes of submitting inquiries and the refund system are also important. Clear rules and customer service processes are critical in the B2B sector.

Solution for excellent B2B tools:

  • Clear hierarchy – provide a clear visual hierarchy to each page;
  • Information – you should always provide all the information critical to consumers. Think if your customers can find everything they want on yours website;
  • Assistance – in many cases, providing an online guide is a good idea; having live chat or event bots can improve your sales greatly;
  • Condense data – aren’t you showing too much? Segment data properly so it’s easily reachable. Remember that most of your customers are mobile these days, so be sure to optimize content for fast, on-the-go search.

Use these 8 hacks to improve your eCommerce UX and build the engagement of your future customers.

If you are looking for UX inspirations, have a look at Divantes’ Dribbble and weekly UX design challenge.

Article by Michał Szwak (2016), updated by Stanisław Świątkiewicz (2018).

Published September 12, 2018