Improve the shopping experience on your eCommerce store with the best UX practices.

Get useful pointers on e-commerce user experience, tablet interfaces, mobile UX, responsive design, holiday banners, email design and more.

Recent Posts

  • If you offer something with a promo code, then allow the user to enter it in the cart page and check the order total with the applied code. Downplay the promo code section and make sure you link it with the promo listings.

    You can use this section to grow your email list by specifying that promo codes are available to subscribers and when you do so remember to provide an option to opt-in for newsletter.

    Promo code option in the shopping cart page

  • Would a shopper trust you if they don’t know you well? Remind your customers that their information will be safe with you by including security certificates and privacy policy as security concerns would stop them from completing their purchase. Don’t forget to include links to shipping details, return policy and FAQ. Also, make them easy enough to find.

    Trust and confidence factors

  • When on the cart page allow your customers to continue shopping. But don’t take them to a default page or homepage, let the shoppers choose where to go next. Provide a list of recently viewed pages to choose from. Instead of cluttering the cart page with a bunch of links, you can show them in a drop down when the user clicks continue shopping button. Including product recommendations in the cart page also provides way for the shoppers to continue shopping.

    Provide an option to add more products to cart

  • This is the most important button on the cart page. Highlight it so it attracts attention. Keep meaningful text on the checkout button such as Pay securely now or Proceed to checkout etc instead of using contextual words such as continue. Place the primary CTA above the fold as well as below the order details.

    Checkout button

  • Before proceeding to checkout let the user know the total order cost. In the total include tax, packaging or shipping costs if any. Don’t hide any cost in the shopping cart. Also, shout out if you offer free shipping and specify the amount that the user has saved by buying from you.

    Subtotal and final cost

  • If a product goes out of stock after the user added it to cart, then specify that right on the cart page itself so that the user doesn’t have to end up paying for a product that is not available.

    Availability of the products in the cart

  • Provide the name of the product and a clear product image. Clicking on this should take the user to the appropriate product page.

    Also, provide a brief description of the product along with info on the size and color selected which the shoppers can use to check if they’ve added the right product. Make sure the product image reflects the product options (such as color) chosen by the user.

    Include the price of the products as well as the quantity chosen. If you offer a discount on the products in the cart, strike out the original price but still keep it visible. This will remind the shoppers of the great deal they are getting.

    Summary of the products in the cart

  • When the shopping cart is empty, remind your users to add products to cart instead of just saying that it is empty. Provide shopping instructions and a call to action that entices users to do so. You can also include product recommendations or your store’s unique selling points.

    Empty shopping cart design

  • Having a mini shopping cart is definitely not an alternative to the full page cart as decision making will be tedious with just a mini cart. It will help shoppers keep track of how much they spend and what they buy. Provide a link in the mini cart to view the full page cart instead of taking the user directly to checkout.

    Mini shopping cart

    Use mini cart to confirm that a product has been added to cart. You can also include product recommendations which would make it easier for your shoppers to find more products.

    Mini shopping cart

  • Users make their final purchase decisions when they are in the cart page. Shoppers add products to cart so that they can review or compare the items they have chosen, check whether the order total meets their budget or whether they qualify for free shipping etc. So, design your cart page in such a way that it assists your shoppers in their buying decision.

    Full page cart

  • Allow your users to easily locate the shopping cart. Place the shopping cart icon on the top right of every page in your store. Indicate whether the cart contains products or not by specifying the total number of items. Also specify the total value of the items present in the cart.

    Where should the shopping cart icon be?

  • After you make your sitesearch easy to find, make it usable.

    Text in the search box: Keep some meaningful text in the search box and make it disappear on clicking so that the users can enter their search term without any confusion. If shoppers don’t find the desired product in the search results, they might search again with a slightly different search term. So, keep their previous search term in the search box so that they don’t have to type the entire search term again.

    eCommerce search box

    Submit button: The submit button should look different from the input field and should either read "search" or have a search icon. Show results even when users press enter, but this doesn’t mean that you can do away with the “submit” button entirely.

    Scoped search: Though search scope is not necessary for every eCommerce store, it is critical for large stores with wide range of products. Allow users to search within a particular category. Default your search scope to entire store rather than a specific category in order to avoid users searching within a wrong category.

    eCommerce Sitesearch - Scoped search

    Auto suggest: Offer search suggestions as the user types in a query. A dropdown with common searches that will help reduce typos and avoid a no results found state. It’s even better if you suggest a few best-fit products along with thumbnail images and price of the products suggested. Land the shopper on the individual product page if he clicks on any product suggestion.

    eCommerce Sitesearch - Auto suggest

  • Let your shoppers hunt for products, not for your search box. Make your search box stand out so that people can easily find it.

    Sitesearch elements: Avoid using only a submit button without the text field. That will make the search box hard to find. Also avoid having only the text field without the submit button, not every user knows that they can hit enter to submit.

    Placement of the search box: Position your search box away from all other boxes such as email signup. Place it consistently on all pages except the checkout page. Top right, top center or in the main menu are popular positions for the search box.

    Size of the text field: Along with making the search box more prominent, a longer search field will also allow the users see what they type which would reduce errors. Make sure it can hold at least 30 characters. Another thing you could do is to look at your Site search data, find out what your shoppers are searching for and use that to decide what the optimal character limit should be.

    Contrast: Make sure, the color of the input field doesn't make it hard to understand where the search term should be typed in. Increase the contrast between the site header, text field and search button to increase the prominence of the search box relative to other elements.

    eCommerce search box design

  • Whether you are a large eCommerce store with a wide range of goods or a small one with simple navigation, you definitely need to have sitesearch on your store as it would help you learn what your shoppers expect from you and shoppers who use sitesearch are more likely to convert than those who don’t. Even with a simple sitesearch feature you can better engage your visitors and drive sales.

  • You can use pop-ups that are triggered by shopper’s interaction with the site to improve the shopping experience. Say when shoppers use the search field, to make the search more relevant you can provide them the choice to enter the age and gender of their kid if your store offers kids and baby products or provide the choice to select their size if you run a fashion store.

    eCommerce homepage pop-up to improve shopping experience