Navigation is key to any eCommerce business – after all, in order to buy your product, your customers must be able to find your product first.
At the Baymard Institute, we’ve conducted large-scale usability testing of eCommerce sites for the past 7 years. We therefore dedicated a full year to test the homepage and category navigational experience. Despite testing 19 leading eCommerce sites, abandonments were common and subpar user experiences were the order of the day. Throughout testing, the subjects had trouble finding products matching basic criteria, such as a “sleeping bag for cold weather” or a “spring jacket”, and task completion rates often hovered as low as 10-30%.
So how can you change this? In this article, we’ll focus on 3 important, but often overlooked, findings from our Homepage and Category Navigation Usability study.
1. Homepage: Allow users to visually infer the type of site
During our usability testing of eCommerce homepages, we consistently observed that first-time users rely heavily on the homepage content to determine the type of site they’d landed on. A surprising 28% consistently get this wrong.
“Okay, this is not a store where I’ll find a laptop sleeve,” a test subject said as Zappos’ homepage loaded. Note how all the featured content on the homepage relates to shoes, even though Zappos also sells clothing, bags, kitchenware, cosmetics, and more.First-time users rely heavily on the homepage content to determine the type of site they’d landed on. Click To Tweet
Indeed, whenever landing at a new site’s homepage, 25% of the test subjects consistently scrolled far down the homepage and then back up again in order to quickly establish an impression of the site’s product range. Unsurprisingly this behavior is especially strong when the site’s brand is new to the user as well, but the behavior is by no means limited to this segment – even test subjects tasked with browsing well-established brands they were already familiar with, such as Best Buy, Amazon, and Macy’s, would still scroll up and down the homepage to “get an overview” of what options were available to them.
However, this initial ‘scroll & scan’ led to many misconceptions as numerous of the tested sites displayed a very narrow selection of their product catalog on the homepage. These kinds of misinterpretations can be tremendously harmful to a site as users will rarely looks for products they don’t believe the site will carry. Yet, our benchmark of 50 homepages from leading US eCommerce sites show that 28% display an overly narrow set of product types on the homepage, making it difficult for users to correctly interpret the type of site they’ve landed on.
Luckily, the solution is quite simple. Because images demand so much attention, users primarily rely on the homepage visuals to infer the type of site, and the site’s product catalog. We therefore recommend that eCommerce sites visually feature at least 30-40% of their main product categories on the homepage. Simply showing a product type representative from the 30-40% of the first level of product categories will suffice. It doesn’t have to be individual product, but can also be part of a large collection or lifestyle images, etc.Because images demand so much attention, users primarily rely on the homepage visuals to infer the type of site. Click To Tweet
Both the user behavior and site issues are even more profound on mobile. During Baymard’s year-long testing of mobile eCommerce sites, we found that 70% of mobile users performed the same ‘scroll & scan’ when landing on a new mobile homepage, yet at the same time a massive 42% of mobile homepages display an overly narrow set of products.
2. Site Taxonomy: Avoid over-categorization by implementing product types as filters
During our Homepage & Category benchmark study we found that 56% of major US eCommerce sites suffer from over-categorization at one or multiple points in their category hierarchy. This occurs when a site wrongly implements its product types as _mutually-exclusive category scopes_ when instead they should have been implemented as _combinable filters_.
At GO Outdoors, the sleeping bag “shape” and “filling” is implemented as categories instead of filtering types. The only way for users to see all sleeping bags for a specific temperature rating was to open a category, filter it by temperature rating, memorize any useful products, and then repeat that process for the following 5 to 7 categories. This caused a 80% site abandonment rate, as most gave up after repeating this process for 1 or 2 categories.56% of major US eCommerce sites suffer from over-categorization in their category hierarchy. Click To Tweet
Over-categorization is frequently the sole cause for site abandonments, as users either overlook the entire site selection of a broader product type, or cannot combine the product types to match their purchasing preferences.
Let’s see what it looks like when this goes wrong. Notice how the Office store above has implemented the three main types of binders as categories. This make it impossible to get a list of “all binders”, but it also forces the user to select one over the other (requiring them to understand the actual difference), and lastly, it forces them to open all three in case they mainly care about other product attributes, for example, just wanting the cheapest binder, or a specific color. A much better implementation would be to have a generic “Binders” category with a “Binder Type” filter.
A simple test to determine if a product type or sub-type should be implemented as a filter or a category is the ‘Shared Product Attributes Test’: If the product attributes are the same across the different product types in question, then the set of product types should (typically) be implemented as filters.
(More positive and negative examples related to over-categorization are available here)
3. Category Depth: Have the first 1-2 levels of the site taxonomy implemented as category pages
When users start navigating an eCommerce site via the main categories, there’s two main types of navigational pages they will meet;
- The product listing page, that simply displays a list of products
- A category page that display it’s sub-categories, encouraging further navigation.
While some users have a clear idea of exactly what product they want, others need inspiration and guidance and only make up their mind as they explore the site. Usually they are undecided or don’t fully understand the sub-options, and want the most generic option to get a better understanding of their sub-options before making a scope selection. For these users, the category page – with thumbnail previews, longer titles, and maybe even descriptions of the sub-categories – will provide much-needed guidance that can help clear up selection ambiguity and industry jargon.Some #eCommerce users need inspiration and guidance and only make up their mind as they explore the site. Click To Tweet
Category pages should be used whenever further navigation or scope definition is needed before it makes sense to display a list of products to the user. Generally, category pages make the most sense in the 1-2 top layers of the site hierarchy where the category scope is often too broad to produce a meaningful product list. For example, a user clicking “Women’s Clothing” would have little use of being presented to a list of products, as further scope will nearly alway be needed to present the user with a meaningful list – hence it’s better to show a category page optimized for the task of further defining scope.
A handful of implementation notes found to be critical for the performance of category pages:
- Use bespoke thumbnails for the sub-categories listed on the category page. Ideally depicting multiple products if it helps clarify the sub-categories displayed.
- Within the category page, an “All Products” option should still exist to cater to the few pro users who can handle the vastness of seeing all products in one go.
- Category pages are very flexible in displaying promotions, custom collections, buying guidelines, and other auxiliary content. While this is part of the purpose, it’s also important that this is kept somewhat secondary to the depicted sub-categories, which should be the primary focus of the page.
- For larger sites more than 3 category layers deep (site #2 on “Categories vs. Filters”), each of the depicted sub-categories can also have links for the enclosed sub-sub-categories. This was observed to perform particularly well as it helped novice users clear up ambiguity, while also acting as shortcuts for expert users.
Despite the significant benefits of the top 50 US eCommerce sites, 38% still lack category pages in the first 1-2 levels of the site hierarchy, and of those that have category page, more than half lack crucial implementation details. For more inspiration see 54 examples of category pages from our usability benchmark.
It doesn’t matter how much time you spend on beautiful design, product images and landing page optimization; the customer’s overall eCommerce experience will falter if foundational elements such as the category taxonomy aren’t rock solid. We hope you found these 3 tactics insightful, with the aim of helping your customers find what they’re looking for, and increasing conversion.