Online shopping is one of the most popular things to do now. Only five years ago, the eCommerce market around the world was worth $1.3 trillion. It's worth almost three times as much now. More and more people are starting to like how easy it is to order clothes, groceries, and other things online. Even a 0.5% difference in conversion rate can make a difference of thousands of dollars a year in sales for many online stores. This is why it's so important to pay close attention to the user experience in your e-commerce store, as it has a direct effect on how much money you make.  When it comes to online shopping, a customer has a lot of options today. If the website is hard to understand, doesn't look good, or even has dark patterns, he may decide to buy somewhere else, or he may buy something from your site but never come back. Follow these six important rules of usability in e-commerce to make the user experience better. Read on if you want to know what these rules are.  In the end, there's a bonus UX checklist.

Rule #1 — Use categories that are easy to understand

  [caption id="attachment_9493" align="aligncenter" width="640"] The idea of a fashion store has main categories and subcategories.[/caption] One of the biggest problems is that users want to find what they want quickly. It's especially important if the user wants to find something specific on your website, like white sneakers in a store with thousands of options. Usually, the first step is to find the right category (unless your user navigates using a search bar).  Your categories should always match how your users think about where to find an item, not how your systems or warehouse are set up. You can test your categories by having real people use the navigation. Tree testing and card sorting are two of the best and most common ways to test categories.  Categories should also be easy to find in the main navigation, but keep in mind that too many categories make it harder to read. If this is the case with your store, try making a few main categories and listing the rest as sub-categories. The user should be able to go to both the main page for a category and a page for a subcategory.

The best ways to set up product categories:

• If a product can be put in more than one category, put it in all of them. This makes it easier to find the thing. 
• The names of the categories should reflect how users think, not how businesses and technology think. 
• Try to keep the number of categories small so that users don't feel like they have too many options. 
• If you have a lot of categories, divide them into main categories and smaller ones that fit into those. 
• Before going live, you should always test the categories to make sure they are easy to use.

 

Rule #2 — Support Searches

  [caption id="attachment_9494" align="aligncenter" width="640"] In the fashion store concept, search results are suggested on the fly, and typos are taken into account.[/caption] People still use search bars, especially when shopping online, but you should know why some people use them and others just browse. An article on Cluedo says it all: 

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 think about your site's search function. Here are some tips for making a search function work well.

Put a search bar on the website where it can be seen and can be reached from every subpage

Users should be able to find a search bar quickly, so make sure it's out in the open (including on mobiles). It's not enough to just show a search icon—show the whole text input or at least a part of it.

As the user types a query, suggest results on the fly

As was already said, when people want to find something specific in an online store, they usually use the search box. It could be a brand name, a product model, or a type of clothing, for example (e.g. white dress).  By suggesting matching results as the user types, you can cut down on the time it takes to do a search and the number of mistakes that are made (typos).

Support query mistakes

People make spelling mistakes all the time. They sometimes can't remember the exact name of the item, so they make an educated guess. So, you need to show search results in a way that takes into account mistakes. "No results" is the worst thing a user can see, so it's your job to never let this happen.

Summary of how search bars should work:

• Make sure the search bar is visible and easy to find on every page. 
• Users will make mistakes in their search queries, so help them out. 
• Show similar or suggested products if none of the products match the search. 
• Whenever you can, suggest search results on the fly. 
• Consider 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

[caption id="attachment_9495" align="aligncenter" width="640"] Simple filters in the idea of a clothing store.[/caption] Some online stores sell tens of thousands or even hundreds of thousands of items. Users find it hard to get around, so these companies use filters. On the product list, filters should be easy to find and easy to see. Before you can make them, you need to know how people look for your products. Some filters are more important than others. For example, one of the most important things for customers is usually the price range.  When making the filters, it's important to think about not only the order of the filters but also how the data comes in. When it comes to filters where accuracy is important, it's usually better to have text inputs instead of just sliders, or you can have both. You can also use single or multiple selection fields, predefined ranges, etc. Always use the fastest way to enter data based on the type of data and the situation of the user.  You must also decide between dynamic sorting and sorting based on what the user wants. With dynamic sorting, as soon as the user chooses a filter, the results change right away. User-command sorting requires the user to confirm his choice before the results are shown. Both of these ways are used almost as often as the other. Which one you choose may depend mostly on two things: 

• (1) How many products do you have in your online store and how the back end is set up? For dynamic sorting to work, the results need to be sorted almost immediately, which isn't always possible because of technical issues. 
• (2) The most common use case Do your customers choose more than one filter at once? Or do they usually only choose one filter and then choose a second one if they need to? Imagine you're looking for the perfect T-shirt, but you're only interested in certain colors. You would probably be annoyed if the product list kept refreshing every time you chose a different color. But if you were looking at the website for a hotel rental and chose the highest price per night, you might want the results to load faster. 

 

Rule #4 — Use the list of products to show important information

  [caption id="attachment_9496" align="aligncenter" width="640"] In the fashion store concept, the product list, and home screen offer.[/caption]   When there are a lot of products in a store, people can easily experience the paradox of choice, which says that the more choices they have, the more confused they feel. The user can choose which products to look at based on a list of products. You can help them do this by showing them information that will help them find what they want faster. Most of the time, this information is price, but not always. It could be the size (or the sizes that are available), the color, the type of model, etc. Don't show more than one or two pieces of information besides the price. If you do, the list will be harder to read and the page will feel too busy.  You also have to decide whether to give customers the option to add a product to their basket from the product list. It depends only on the type of product. If it's something people might want to buy without knowing much about it (like food), you can give them the option to quickly add it to their basket so they don't have to do an extra step every time. But if the user needs to choose something about the product (like the size or color of a skirt) or if the product is expensive (like a camera), it makes no sense to expect them to add it to the basket without going to the product page.  

Rule #5 — Create product pages that are easy to read

  [caption id="attachment_9497" align="aligncenter" width="640"] The idea of a fashion store's product display.[/caption]   Most of the time, a user will decide whether or not to buy a product on the product page. So, it's very important to show him information that will help him make a decision but won't overwhelm him with too much information.  Only the most important information should be easy to see at first glance. The rest should be easy to find, but not in the way. Some users are happy to buy based on just the overview information, while others want to know everything there is to know about the product before they buy. You need to have room on your website for both of them. Components of good product pages: 

• A group of high-quality photos of the product from different angles (sometimes even with a 360° view) 
• Brief summary of the product
• Visible product price
• Call-to-action button that stands out 

 

Rule #6 — Have a Checkout with No Distractions

  [caption id="attachment_9498" align="aligncenter" width="640"] Check out a fashion store that doesn't distract you.[/caption]   Your conversion rate can be made or broken by how people check out. It's very important to get users through the last steps of the sales process, so they should be as easy as possible.  Most often, people do: 

• Putting the whole process of checking out on one long page
• Putting too much information on it (like recommended products or ads)
• Giving users a simple way to leave the checkout process (such as displaying full navigation) 

All of these mistakes can cause a lot of people to give up on their carts.  Breaking the checkout process into smaller steps makes it easier to keep track of where you are in the process and makes it seem like it will be done faster. For checkouts with a high average basket value, it's a good idea to show an order summary at each step (or at least before payment), because customers who have to pay a lot may be worried about making mistakes.  Send an email with a summary of the order after the order is done, and put it on the website. In the order summary, it's good to list the product ordered, the amount paid, an estimate of when the package will arrive, and the address where it will be sent.  Synopsis of the best ways to handle the checkout process: 

• Don't use dark patterns to trick the user or raise the value of the basket. 
• Only show information that is needed to finish the purchase. 
• Show the steps of the checkout process and make it easy to move from one step to the next without losing data. 
• When you can, show an order summary so that the user feels in charge and has a clear idea of what's going on. (This is especially important for products that cost a lot.) 
• Let the user easily change what's in the basket (e.g., change the quantity, remove from the basket, link to the product). 
• Show minimal website navigation, with the only option being to go back to the store page if possible. 
• Keep the items in the user's basket for a while, or better yet, forever, even if the user leaves the site. So, if he comes back to your site, it will be easy for him to pick up where he left off.

 

Summary

  If you want to know if the changes you're making are working, you need to pay close attention to the data and check your results often. If you aren't sure about some ideas you want to try, you can use A/B testing to prove or disprove your ideas before making a permanent change.  And don't forget that the customer's time in your store doesn't end when they pay. It's also important that: 

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

If you take care of the customer at every step, he will come back to your store often and tell his friends about it.