Creating a good user experience (UX) by following proven, time-tested UX best practices is a critical part of building an e-commerce website or app that converts well.
UX plays a role throughout the entire customer journey, from the moment the user clicks on the homepage to the final order confirmation. Ignoring best practices can interfere with a seamless user experience and cause you to lose out on sales.
In this article, we’ve put together the top UX design best practices you can use to optimize your e-commerce site website or app, selected by Baymard’s team of user experience experts.
If you use these principles consistently, you’ll improve the conversion rate on your e-commerce site and create a user experience that keeps your visitors and customers coming back for more.
UX design focuses on making the user experience the best it can possibly be. It ensures visitors have seamless, efficient, delightful experiences from your website or app. UX designers aim to give the users what they want and ensure they find value from the website.
Typically, the UX design process is iterative, involving continual audience research, user testing, and implementation stages. The process considers all aspects of the UX experience, including aesthetics, usability, and accessibility. When a site or app evokes an emotion like delight or joy, that’s also part of the user experience.
Although UX is an ever-changing field that expands and changes to meet the needs of visitors and customers, there are some foundational UX design principles that every UX designer should have in their professional toolkit.
The Interaction Design Foundation defines UX principles as “fundamental points of advice for making easy-to-use, pleasurable designs as we select, create and organize elements and features in our work.”
Picture these principles as best practices for creating extraordinary user experiences.
Human beings love consistency. Consistency saves us time, makes us feel safe, and builds trust. And when it comes to user experience, consistent design is intuitive and easy to navigate.
Using consistent design — making similar elements appear uniform — makes it easier for your users to learn their way around and shop. It makes their lives easier and paves the way toward the purchase.
For example, visitors don’t need to waste time looking for your navigation when it is always in the same place throughout your site. They can go anywhere, communicate seamlessly, look for what they need, and buy it. Similarly, having a clear visual hierarchy throughout the site — for example, the more important a line of text is, the larger and bolder it is on the page — also helps save time and energy.
Design consistency can decrease or eliminate confusion and frustration, so the user can focus on executing the task they’re trying to complete. In addition, because designers often build consistency with predefined components or templates, they can make decisions more quickly, feel more confident about their UX design, and get to implementation faster.
The more consistent your design, the faster and easier it will be for users to use, improving your conversions. Your design team will also spend less time reinventing the wheel and more time iterating on the UX to make it better.
For every e-commerce company, users should be the main focus. The primary responsibility of UX designers is to provide a seamless, pleasant user experience.
Here are the ten user experience best practices you should follow for your website or app:
A clear, consistent e-commerce UX design process can save your company time, energy, and money.
The UX design process begins with examining the complete user journey with in-depth quantitative and qualitative research. Then, UX designers use that research to design the website or app and optimize it so users can have a frictionless experience.
Your UX design process is also an iterative workflow, and you’ll revisit each of the steps as you continually optimize your site. Learn more about the five key phases of the UX design process.
In many cases, your homepage will be the first place users land, so the UX on this page is particularly critical.
The homepage needs to clarify to new and returning visitors how to navigate categories, use the search function, or use curated paths like wizards or new arrivals.
All the while, your home page needs to stand out from the competition, build trust, and establish credibility. Discover the 8 common homepage pitfalls we found in our 2020 benchmark of 60 e-commerce websites, and learn how to fix them.
When users land on your website, they evaluate UX in seconds. If the site is difficult to read, use, or navigate, they will promptly leave and go somewhere else.
Simple, consistent UX design enables users to quickly find what they’re looking for and accomplish what they want to do. So whenever possible, your UX design should use the simplest design, copy, and actions to guide users where they want to go.
Organizing your site with a clear, consistent hierarchy makes it easier and faster for your users to navigate. Your search function also needs to function consistently and logically, so it’s not a barrier to shoppers. If users can't find what they are looking for in your search bar, they will visit a competitor.
Baymard’s UX benchmark revealed fundamental problems with essential e-commerce search query types on many e-commerce websites. For example, among the websites we examined, 61% had a search function that misaligned with users’ actual query behavior and expectations.
You can dramatically improve the search success on your site by simplifying the search experience and supporting the most critical query types.
Let’s be honest: Users hate filling out forms. Long forms with tons of fields that users have to scroll through can drag down your conversion rate.
Plan your forms carefully, and keep your fields to a minimum. Don’t ask for unnecessary information.
In Baymard’s latest checkout usability study, we discovered that the average checkout form on an e-commerce site contained 11.8 form fields. But our usability testing shows that most sites can reduce the number of fields on their forms by 20-60%.
Get tips on checkout optimization and simplifying your forms to just 8 fields.
Users with disabilities have vastly different experiences on e-commerce sites, and in many cases, they need to use assistive technologies to understand and navigate the web.
When you focus on accessibility, you ensure that all your users, including people with disabilities, have a good experience on your site and can access information, shop, and buy.
For example, users with mild-to-moderate visual impairments may rely on built-in zoom functions in their browsers to read content and look at images. More severe visual impairments might require the use of screen readers.
Suppose your website or app fails to accommodate users with disabilities. In that case, it may mean they can’t use your site at all, or they will struggle with completing an order and spend more time than necessary doing so because your site has accessibility issues.
In Baymard’s research, we looked at 33 top-grossing sites and discovered that 94% of them had compliance issues when assessed for 4 basic accessibility requirements (links, images, form fields, and keyboard navigation).
Besides being the right thing to do, your company might be in hot water if you don’t comply with accessibility standards. In many countries, following accessibility laws is legally required.
Testing while designing and implementing user experience best practices makes it easier to identify issues and minimize costs for your development team. This improves overall UX so you can launch a more polished website or app that provides a better experience.
Baymard’s UX Research Methodology includes:
Find out more about the methodology for each of the four types of Baymard’s usability testing.
Your website or app navigation tells your users:
Clear, well-thought-out navigation lowers frustration for your users and makes a great impression. In addition, it gives your users confidence that they can trust you to help them find what they’re looking for.
Make it easy for customers to understand and use your navigation bars and menus. Get our best practices for creating user-friendly navigation on your e-commerce website or app.
With over half of all website traffic now coming through mobile, responsive design is critical for providing a positive user experience for everyone, regardless of what device they’re using.
Responsive designs look good on all types of screens and load more quickly. They also rank higher in the search engines, leading to higher traffic and potentially more conversions.
Baymard conducted a thorough study of the mobile e-commerce experience and found that 63% of mobile users abandoned a product or site at least once during testing solely due to preventable mobile usability issues.
Having a poor mobile experience can radically lower your bottom line, so it’s worth your while to learn the 18 most common pitfalls of mobile UX and how to optimize your site by preventing them.
If your users can’t filter your product lists in your website or app, so they only see the products they’re interested in, they’re less likely to buy from you.
In multiple rounds of testing here at Baymard, the majority of users chose product options from 5 specific filter types — but only 43% of our benchmark sites offer all of these key filter types.
Find out more about the 5 filter types you should have on your site to accommodate your users’ purchase preferences and help them find what they’re looking for.
Our research shows that 18% of users have abandoned orders due to overly complicated e-commerce checkout processes. Checkout flow is an often neglected part of the UX, but problems with checkout design are often the sole reason users end up abandoning their cart.
Make your checkout process seamless and easy, and conduct user testing to ensure your customers don’t hit any unexpected roadblocks.
Learn more about the current state of the checkout process on e-commerce, and find out how to avoid the 18 most common checkout process pitfalls.
Creating a positive user experience promotes loyalty to your brand and helps you generate more leads and sales. And every touchpoint users have with your e-commerce website or app contributes to UX.
We’ve given you an overview of some of the best practices you can use to create frictionless, delightful UX experiences, as well as provided additional research and resources so you can learn more.
If you want more ways to improve your conversion rate and generate more sales by improving your user experience, check out Baymard Premium. When you sign up, you’ll get access to 550+ design guidelines and 119,000+ performance scores — insights already used by many of the world’s leading sites.
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com