Best practices for improving UX in ecommerce
Online shopping has become one of the fastest-growing trends in the world. Just five years ago, the global e-commerce market was worth 1.3 trillion dollars. In 2019 it’s worth almost three times that. More and more people are starting to appreciate the comfort of ordering online everything from clothes to groceries. For many e-commerce stores, even a 0.5% difference in conversion rate can make a difference of thousands of dollars in yearly revenue. This is why it’s of utmost importance that the user experience in your e-commerce store has your full attention, as it is directly related to profit.
Today a client has myriad choices when it comes to online shopping. If the website is confusing, unattractive, or even uses dark patterns, he will choose to buy somewhere else, or he will make his purchase but never return to your site. You can improve the user experience by following six important rules of usability in e-commerce. If you want to know these rules, keep reading!
P.S. There’s a bonus UX checklist at the end 😎
Rule #1 — Use Easy to Understand Categories
Easy navigation is one of the key challenges — users want to find their items quickly. It’s especially important if the user wants to find something specific on your website, e.g., white sneakers in a store with thousands of choices. Finding the right category is usually the first step (unless your user navigates using a search bar).
Categories should always reflect your users’ mental model — where they expect to find the item — and not the organization of your systems or warehouse. You can verify your categories by always testing the navigation with actual users. The most helpful and widely used techniques for testing categories are tree testing and card sorting.
Categories should also be easily accessible from the main navigation, but remember that having too many categories decreases readability, so if that’s the case with your store, try to create a couple of main categories and then list the rest as sub-categories. User should be able to go both to the main category page and a subcategory page.
Best practices for creating product categories:
- If a product fits in a few different categories, place it in every one of them. This makes the item easier to find.
- Names of the categories should reflect how users think, not how business/technology thinks.
- Try to limit the number of categories to not overwhelm users with too many choices.
- If you have many categories, divide them into main categories and subcategories.
- Always test the categories before going live to make sure the navigation is easy and intuitive.
Rule #2 — Support Searches
Using search bars is still popular, especially in e-commerce, but you should understand why some users use a search bar and others browse. A Cludo article sums it up perfectly:
People who use search box know specifically what they are looking for — often as specific as an actual product name. People who navigate explore more related content. Users who utilize the search are often in the late-stage of buying mode, when they have gathered all of the information they deem necessary and they have made a decision on which product to buy.
This is why it’s important to consider the search function on your website. Below are tips for supporting a robust search function.
Place a search bar in a visible place on the website, accessible from every subpage.
Users should be able to quickly find a search bar, so make sure it’s visible (including on mobiles). Showing just a search icon is not enough — display a whole text input or at least a partial input.
Suggest results dynamically as the user types a query.
As mentioned above, people usually use search boxes in e-commerce stores when they are looking for something specific. For example, it can be a brand name, a product model or a type of clothing (e.g. white dress).
By dynamically suggesting matching results when the user is typing, you substantially lower the time needed to complete the search activity and the number of mistakes (typos).
Support query mistakes.
People make spelling mistakes all the time. Sometimes they don’t remember the exact name of the item and so they guess. Therefore, you have to display search results in a way that takes mistakes into account. There’s nothing worse than a user seeing “No results”, so your job is to never allow this situation to happen.
Summary of best practices for search bars:
- Make the search bar visible and easily accessible from all pages.
- Support typos in search queries — users do make mistakes, so help them out.
- Display similar or suggested products when nothing matches the query.
- If possible, suggest search results dynamically.
- Think of edge cases (e.g. if some of your products have 2-character names, make sure you support 2-character searches).
Rule #3 — Use Helpful Filters
Some e-commerce stores have hundreds of thousands of products. It’s hard for users to navigate, so these companies use available filters. Filters should be easily accessible and visible on the product list. To design them, you have to understand first how users are searching for your products. Some filters are more important than others — e.g., price range is usually one of the most important factors for the customers.
When designing the filters, it’s important to not only consider their order, but also the input method. For filters where precision counts, it’s usually better to provide text inputs rather than sliders only; or you can provide both. You can also use predefined ranges, single or multiple selection fields, etc. Always select the input method that allows for the fastest use depending on the data type and user’s context.
You also have to choose between dynamic sorting and sorting on the user’s command. With dynamic sorting, the results immediately change after the user chooses a filter. With user-command sorting, the user has to first confirm his choice, and only then are the results shown. Both of these methods are used with nearly the same frequency. Choosing between them may depend mostly on two considerations:
- (1) The number of products in your e-commerce store and how the backend is designed.
For the dynamic sorting to work, the results need to be sorted almost immediately, and it’s not always possible due to technical issues. - (2) The typical use case
Are your users selecting more than one filter at a time? Or do they usually choose only one filter and then, if needed, select a second filter? Imagine that you’re looking for the perfect t-shirt, but you’re only interested in specific colours. You’d probably be irritated if the product list keeps refreshing after every colour you pick. But if you were browsing the hotel rental website and picking the maximum price per night, you would likely prefer the results to refresh faster.
Rule #4 — Use The Product List To Display Necessary Information
In a store where there are a lot of products, your users can easily experience the paradox of choice — the more options they have to choose from, the more overwhelmed they feel. A product list allows the user to make a decision on which products to view. You can support this process by displaying information that will help them find what they’re looking for more quickly. This information is usually price, but not always. It can be the size (or available sizes), colour variations, model type, etc. Besides the price, don’t display more than one or two additional pieces of information, as it will make the list harder to scan and make the page feel overwhelming.
There is also another decision you have to make — whether to provide (at the product list level) an option to add the product to the basket It depends solely on the product type. If it’s an item that users may want to buy without going into details (e.g. food products), then you can add an option to quickly add the product to the basket, so users don’t have to do an additional step every time. But if the product requires selecting some properties (like size or colour of a skirt) or it’s an expensive product (e.g. a camera) then it just doesn’t make sense to expect the users to add it to the basket without going to the product page.
Rule #5 — Design Easy-to-Scan Product Pages
It’s usually at the product page where the user will decide whether or not to buy a product. Therefore, it’s extremely important to display information that will support him in the decision-making process, but also won’t flood him with details.
Only critical information should be visible at first sight — everything else should be easily accessible, but not crowding the view. Some users are fine with making a purchase based only on the overview info, while others want to know everything there is about the product before buying. You need to accommodate both types on your website.
Elements that support good product pages:
- A set of high-quality photos of the product from different angles (sometimes even with a 360° view)
- Overview of the product
- Visible product price
- Eye-catching call-to-action button
Rule #6 — Have a Distraction-Free Checkout
The checkout process can make or break your conversion rate. Getting users through the final steps of the sales process is absolutely critical, so it must be as frictionless as possible.
Most common mistakes are:
- Crowding the checkout process onto one long page
- Crowding it with too much information (like recommended products or ads)
- Providing the users with an easy way out of the checkout process (such as displaying full navigation)
All of these mistakes can have a tremendous impact on the number of cart abandonments.
Breaking the checkout process into smaller steps reduces cognitive load and allows for easier progression estimation, which makes the process seem faster to complete. For checkouts with a high average-basket value, it’s good to display an order summary at every step (or at least before payment), because your clients may feel anxious about making any mistakes if they have to pay a lot.
After the order is complete, send an email with the order summary and display it on the website. In the order summary, it’s good to include things like the ordered product, the amount paid, estimation of the package arrival date, and delivery address.
Summary of best practices for the checkout process:
- Never use dark patterns to manipulate the user or to increase basket value.
- Show only information necessary to complete the purchase.
- Display visible steps of the checkout process and provide the ability to easily switch between steps without losing data.
- Show order summary where possible so that the user can have a sense of control and clarity. (This is especially important for expensive products.)
- Allow the user to easily edit basket contents (e.g., change quantity, remove from the basket, link to the product).
- Display minimal website navigation, preferably limiting the options to returning to the store page.
- Keep the contents of the user’s basket for some time (preferably indefinitely), even if he leaves the website. This way, he can easily continue from where he left off, if he decides to return to your site.
Summary
To make sure that the changes you’re introducing are working, you need to be very focused on data and check your results often. If you’re not sure about some ideas you’d like to try, you can use A/B testing to validate hypotheses before changing something for good.
And always remember that the user experience in your store doesn’t end when the customer pays. It’s also crucial that you:
- Send a clear order summary via e-mail.
- Provide updates about the shipment.
- Allow for fast contact with customer service.
- Pack the shipment with care.
- Allow easy returns, if needed.
Caring for the customer at every step will bring you a loyal customer who shops at your store often and recommends it to his friends.
Bonus! 🎁
If you want to quickly check your e-commerce website for usability, here’s a UX Checklist you can use.
If you would like to design or develop a project with us, feel free to contact us at hello@infullmobile.com
