What’s in this article:
- A quick look at three e-commerce UX best practices and three pitfalls to avoid when designing your website
- A good e-commerce UX is important to delivering a pleasant online shopping experience and converting shoppers
Your e-commerce user experience (UX) design can be the difference between making a sale or losing it. 88% of online consumers are less likely to return to a site after a bad user experience. On the other hand, a well-conceived, frictionless UX design could raise customer conversion rates by up to 400%.
Here, we take a quick look at three e-commerce UX best practices and three pitfalls to avoid when designing your website.
Become the best CRMer you can:
CRM Hack: Monitoring the User’s Heartbeat
What Does It Mean to Treat a Customer’s Email With Respect?
To Lock or Not to Lock Customers (into CRM Journeys)
What the Efforts to Promote Responsible Gaming Look Like Form the Inside
Make Search Easy
Shoppers who want to find products on e-commerce websites use search bars. Upon landing on a website, 43% of website visitors go immediately to the search bar, and these searchers are about 5-6 times more likely to convert.
Optimize your internal site search by placing your search bar where it can be seen and quickly reached either at the center of the site or the top right of the page. Label the search bar with the word “search” for easy recognition, indicate what items shoppers can search for, and make the search bar large enough to accept long strings searches.
Design your autocomplete interface to spell-correct misspelled search terms and differentiate between typed text and auto-suggested terms using visual differentiation such as italics, color, or indenting text styling.
For example, Walmart’s desktop site limits the number of autocomplete suggestions to 9 and differentiates suggested items from typed queries with bold styling.
To avoid overwhelming shoppers, and help them easily scan available product options, show fewer than ten relevant results.
Include Text Descriptions in Product Images
Include text descriptions in product images to quickly communicate key product features and enable shoppers to conclude about the suitability of a product.
For instance, the product image of the laptop bag above includes descriptive text stating the protective features of the laptop bag. This product image gives shoppers a great deal of information at a glance.
When including descriptive text in images, highlight important product features, and use lines and circles to draw attention to these features. Use a few words to make your point, and your text should be easy to read at the display resolution. Additionally, when creating images with embedded text, use different images for desktop and mobile. So that everything renders correctly.
Enable Users to Easily Filter Products
Design product filters to enable shoppers to see only the products that match their individual needs. Go beyond generic site-wide attributes such as by providing category-specific filters for each product type. For a category like beauty, that could mean the ability to filter by attributes, like ‘paraben free’, or ‘oil free’. American Department store Macys allows shoppers to filter women’s clothes by dress occasion.
Ensure the filter categories you provide are relevant to your shopper’s needs and allow shoppers to make multiple filter selections. This will enable them to narrow down their search quickly.
You can place the filtered navigation either on the left sidebar next to the content or horizontally on top of the content. However, it’s best to carry out a test to discover where’s best to place your filtered navigation.
Don’t Hide Guest Checkout
Avoid hiding your guest checkout if you want to convert more shoppers. 14% of shoppers who were unable to figure out the guest checkout step ended up abandoning the site.
Make it easy for shoppers to locate the guest checkout option by placing guest checkout in a prominent position on the upper left on desktop and the top option on mobile. Also, allow guest checkout by default or place the guest checkout option above other options to sign in or create an account.
Don’t use generic microcopy like “Continue” or “Checkout Now” for your guest checkout option. This slows down the shopping process. For instance, Walmart doesn’t use “guest” in its guest checkout microcopy or headers. So, shoppers have to read carefully to determine the guest checkout option.
Instead, make it clear that visitors can checkout as guests if they like by using the keyword “Guest” in the microcopy of your header and primary button.
Don’t Make Your No Results Page a Dead End
While there are times shoppers won’t get results for some terms, don’t design your “No Result” page to be a dead end. Rather design your “No Results” page to guide shoppers towards meaningful content.
Design your “No Results” page to be helpful by offering personalized recommendations based on a shopper’s browsing history and shopping behavior. Encourage shoppers to get help from customer service or sales representatives by including an email link, chat options, and displaying the direct phone number to customer or sales support on the “No Results” page.
You can also show related categories that shoppers may try out based on their search query. To increase the chances of shoppers finding a suitable product, offer multiple suggestions.
Another thing, never mock shoppers on your “No Results” page. Take the blame and empathize with shoppers. For instance, Wayfair uses friendly copy on its “No Results” page and offers some help.
This approach humanizes the brand and allows shoppers to get some support.
Don’t Make Navigation Difficult
Shoppers who browse e-commerce websites need to get a clear understanding of the options available to them, with minimum effort.
So, don’t use a single main navigation item such as “Products” or “Departments” to contain all of your main product categories. Best Buy collapses its entire product catalog navigation within a solitary “Products” item in the main navigation.
This navigation design makes it difficult for shoppers to immediately understand what type of products the site carries and how to find what they want. Display product categories in the main navigation to allow shoppers to understand the type of site they’ve landed on, the breadth of your product catalog, and navigate your website intuitively.
Don’t make response time for your hover-based drop-down menu (aka mega menu) too fast. Fast response times allow shoppers to accidentally activating sibling categories and makes navigation difficult. Add a minimum amount of time the shopper has to hover a new trigger area (the parent categories) before the current drop-down content is replaced.
Also, keep a medium level of granularity so shoppers don’t get overwhelmed, group category options into related sets, and use styling to differentiate groups sets.
Bottom Line
All in all, a good e-commerce UX is important to delivering a pleasant online shopping experience and converting shoppers. Keep in mind that different platforms require different user experience designs. So, design a separate mobile site and desktop site. When you implement UX changes, make sure you test your design decisions.