Menu Close
UX best practices for e-commerce websites

UX best practices for e-commerce websites

19 August 2019 | News and Insights

Uncover 7 UX best practices that are essential for e-commerce websites

Online experience is an essential aspect that successful businesses consider throughout the sales and marketing funnel. Organisations can’t afford to disregard the importance of user experience. Organisations who follow UX design principles and best practices will ensure an enhanced experience for their customers. UX best practices enable the build of better products for both businesses and their users. This is done by answering goals through a tailor-made, user centric solution.

What are UX best practices?

UX best practices are the key ingredients to a successful solution. Those ingredients are essential for e-commerce websites, where the opportunity to convert a new user into a customer is often limited to a few attempts. E-commerce might still seem like a novelty, but is actually 40 years old. Michael Aldrich invented e-commerce in 1979 by connecting a domestic television set with a phone line. This enabled online transactions between consumers and businesses, and effectively creating the first online shopping experience. From these early days to today’s e-commerce websites, a range of best practices emerged. These best practices evolved to meet trends, customer habits, technology advances, and of course, the introduction of UX. With over 80% of the online population using the internet to purchase goods and services, e-commerce is one of the best sectors to understand and optimise user experience, globally.

Creating successful solutions with UX best practices

The following 7 UX best practices are crucial aspects for businesses that want a successful e-commerce website.

 

1. Provide guidance

Imagine entering a high street store for the first time. After browsing a few products, you can’t see where to pay and how to find the main entrance. Those basic tasks shouldn’t require any effort from the customer. Unlike with personal websites or portfolios, e-commerce websites don’t allow much room for navigation experimentation. The user expects to find the information they’re looking for and making a purchase.

 

To provide user guidance, the site must contain:

  • A main site navigation exclusively dedicated to the product range, organised by categories as required. Implementing a mega menu navigation to browse all products under a category, is an efficient way to get direct access to all products.
  • A dedicated support navigation for useful non-product pages such as store details, FAQs, delivery information, customer support.
  • A breadcrumb indicating where the user is within the site should be present on all pages. Ensuring there is a direct way to get back to a product category or landing page. This limits confusion especially when browsing from one product to another.

 

 

2. Excite, inform, convert

E-commerce websites rely on this trio of pages to generate business:

  • Homepage
  • Product landing page
  • Product details

Homepage

Often seen as the most important page of the site, when realistically users can start their journey on any page, especially when coming from search. The homepage is still crucial to instantly give visitors a clear idea of what the product/brand is and how good it is.

By focusing on one distinctive call to action, this encourages the user to find out about a featured product or a sales promotion. The best location for this is the hero section at the top of the page. Its often tempting to feature more than a single product in the hero by using carousels, however they are known to perform poorly on e-commerce websites. This is because they temporarily hide part of the featured content, increasing the risk for the user to miss the product entirely. Its best to have a really well-crafted – and always visible – spotlight on a single product. Rather than trying to feature everything at the same time and dilute the impact.

A secondary route commonly used, is to invite the user to explore the full range of products. The main site navigation should provide access to all products logically.  Grouped by categories, sections to feature the product range with and more insights such as customer reviews or videos.

Product landing page

A product landing page is the dedicated aisle for a particular product group. It should be straightforward to use, listing all the available products with key information. Such as:

  • Image
  • Name
  • Key features
  • Price
  • A call to action linking to the related product details page.

If the number of products listed is large enough, a pagination system is required. Many pagination patterns have been introduced over the years, like ‘infinite scroll’ and “Load more” buttons. This is an alternative to the traditional pagination footer. However, the traditional pagination is a safe bet for most e-commerce websites and also Sitecore SEO friendly, even if it’s not the most exciting to use.

Infinite scroll is poor on usability, with products loading automatically as the user scroll down the page. There’s the risk of potentially never being able to reach the bottom of the page. This is frustrating for users on mobile devices, so best to avoid.

The “Load more” button offers the best compromise between usability and functionality. By giving back to the user the decision to load more products within the page.

3. Product details: Inform to convert

Users who search for a specific product are likely to land on a product details page. This makes it a very important page to master, as it is the closest to the checkout process. A user journey map is a great way to map out the potential journey of a user. Specifically, the flow path from page to page. While maintaining a sense of what the site is about, the product page should provide all the information the user needs in order to become to a customer:

  • Product visuals
  • Clear listing of the product features
  • Customer reviews
  • Price
  • Availability
  • Delivery options
  • Comparison with similar products
  • Related products
  • Purchase call to action

 

This last point is the most important rule of a product details page. Remove any ambiguity about how to buy the product. A clear call to action message (e.g. “Buy now”, “Add to basket”) along with a clear visual distinction from any other call to actions on the page are a must.

 

4. Match expectations

Consistency is key. All areas of the site should reflect the brand to the same standard. Not doing so could prevent the user’s ability to establish trust with the brand, even before considering becoming a customer. Consistency is not only translated visually, (with the same layout, page header, buttons, text styling across the site) but also in the tone of voice used at the different steps of the journey. From the homepage to the checkout, through to the payment process and email communications. Users should feel they are dealing with the same brand.

One of the UX best practices to ensure site consistency, is to define production guidelines for visual components using a design system. A design system provides documentation, enables reusability of components and guarantees consistency in the site scalability. It can also embed tone of voice guidelines for content editors.

5. Remove friction

The discovery phase, (browsing, comparing and understanding a product) can be a slow and enjoyable process for the user. It builds excitement about their potential future purchase. The purchase phase which follows is the complete opposite. When it comes to committing to purchase a product online, the best approach is to make this process as transparent and quick as possible. Some of the most popular UX patterns to help achieve this are:

Aim for the basket

Selecting a product to purchase should direct the user to the shopping basket page or give an easy way to do so. This could be achieved by highlighting that the product has been added to the basket. The shopping basket should always be easily accessible on every single page and show the number of products that have been added.

Simple checkout

No user wants to spend time in the checkout process. As nice and good looking as the website is. The recommendation is to limit the steps to the strict minimum:

Order review > delivery details > payment > confirmation and then automatise as much as possible.

This could be using address lookup and payment APIs.

Optional sign-up

Converting a new user into a returning customer is a key conversion rate optimisation strategy used by businesses. That shouldn’t mean forcing the user to sign-up to the website in order to complete the order. Offering this as option is essential, with an easy and quick way to checkout as a guest.

 

6. Adapt to everyone

Unique mobile experience

49% of consumers are using their mobile for shopping. In other words, an e-commerce website not optimised for mobile devices is missing out on half of its potential customers. However, having a responsive website is only one part of the solution. Most of the e-commerce user interface features take a lot of space of screen. For example, a long list of products with sorting filters and navigation items fits comfortably on a large desktop screen, but is impossible to fit on a small mobile screen or a tablet. The idea with mobile e-commerce is to adapt the desktop experience to a mobile experience, instead of trying to replicate it. The differences between desktop and mobile user behaviour needs to be taken into consideration, such as:

  • Mobile users are usually more active during morning and evening
  • Mobile users are younger and more receptive to branding
  • Males are more likely to make a purchase on their mobile than their female counterpart.
  • Users prefer researching on mobile, purchasing on desktop

So how does this translate into a bespoke mobile experience? Knowing that users prefer to research on their mobile, should mean businesses are actively taking steps to optimise their mobile sites. With less features than on desktop – filtering might not be essential. By presenting products well and featuring key information such as visuals, features, price and of course the purchase call to action.

Accessibility

As with the high street store, an e-commerce website should be accessible to all users. The Web Content Accessibility Guidelines (WCAG) are the industry standard to implement when it comes to accessibility. On top of the visual design accessibility recommendations (colour contrast, text size), the critical areas to focus on are a product navigation. This is so that it can be used without mouse, description of each product supporting screen reader’s assistants, and forms.

Forms should be short, using a single column layout, and provide contextual help as required. Validation error should be descriptive to what the error actually is, rather than defaulting to “this field is required”.

Personalisation

One of the most efficient ways to use personas within e-commerce is through personalisation. This is to meet the needs of different identified user types.

Back to the homepage hero, featuring a different product targeted to a specific user persona is likely to dramatically increase conversion. This is with little or no change to the actual site design and architecture.

Personalisation can be injected at every step of the customer journey. By presenting relevant offers and adjusting the copy to match the personas expectations. Sitecore Experience Commerce enables personalisation at the core of the platform, by learning about the user behaviour and refining personas and user profiles in real time.

7. Measure success

Small changes matter in e-commerce. UX best practice can help determine what to focus on. There isn’t a way to 100% know a change will have a positive impact on conversion. By understanding business needs and initiatives, as well as user goals, we can then define optimisation goals and measures of success.

The first questions to answer are:

  • What part of the sites drives the most traffic?
  • What does people use the most on these pages?

 

Ideation quickly designs targeted solutions to answer the user problems. While maintaining focus on goals and define a hypothesis of the expected outcome. There can be more than one variation of the solution for the same hypothesis. You would test the original features against the variation, using multivariate testing and understand which one performs best against the key metrics. Sitecore analytics enables built-in AB testing and multivariate testing as part of Sitecore Experience Optimisation.

Is your website optimised for great user experience?

We’ve been helping businesses with their UX strategy for over 20 years. At Kagool, we design, build and optimise great websites using the Sitecore platform.

If you want to learn how your business can grow using UX best practices, get in touch with our team of experts.

Contact Us

We’ve been helping businesses with their UX strategy for over 20 years. Get in touch with our team of experts.

Contact
UX best practices for e-commerce websites