E-Commerce Usability: The Main Navigation Should Display Product Categories (18% Don’t)

When it comes to e-commerce navigation and how to structure the main site navigation, 18% of sites use a solitary main navigation item to contain all of the main product categories. On these sites users have to hover the solitary navigational item — typically called “Products,” “Catalog,” “Shop”, or “Departments” — before even being able to see the first level of product categories (e.g. “Electronics,” “Apparel,” “Home Decor”).

However, our large-scale usability testing on Homepage & Category navigation shows that not displaying product categories directly in the main site navigation causes multiple and severe navigational issues for users.

In this article we’ll therefore cover our findings on why the main navigation should display the first level of product categories. In particular:

1. Why users need the first level of product categories visible, directly in the main navigation
2. Why it’s in particular an issue for all external traffic that doesn’t land at the homepage
3. How a solitary navigational item like “Products” causes double-hover interaction issues
4. The simple solution: display the product categories as the first level of the main navigation
5. An alternative solution that mitigates some of the issues while keeping a solitary “Products” item

Issue 1: Inferring Type of Site

The most severe issue of scoping and collapsing the entire product catalog navigation within a solitary navigation item (e.g., “Products”) is related to something as fundamental as users not being able to easily understand what type of site they’ve landed on, as well as not fully understanding what type of products the site carries.

During testing we consistently observe that users rely heavily on the homepage content to infer the type of site they are on, and rely on the first level of product categories to infer the breadth and type of products the site carries.

To give a sense of this user behavior when landing on a new site: we see during testing that 25% of all desktop users, and 70% of mobile users, when landing directly on the homepage, will try to infer the type of site and the breadth of products carried by performing a “Scroll & Scan” of the homepage contents. This behavior is further examined in our articles 42% of Mobile Homepages Risk Setting Wrong Expectations for Their Users and Homepage Usability: Can Users Infer the Breadth of Your Product Catalog?.

Hiding the first level of the product categories by default makes it difficult for users to accurately determine what site they’ve landed at without hovering the main navigation. This makes it needlessly cumbersome for new users to immediately understand both the type of site and the product catalog options. As mentioned in the Best Buy example at the beginning of this article, some of the test subjects without prior experience with the brand at first mistook the site for a price comparison site and not an e-commerce store, leading to severe misunderstandings later on during the product selection and purchase process.

The issue of users trying to infer the type of site they’ve landed on extends well beyond the homepage (where it can be solved through a better homepage design), and in particular applies to all external traffic that does not land at the homepage. This large segment of external traffic will be users that often have a specific product type in mind, and their landing page will reflect this by typically being a product page or an intermediary category page. However, the narrow focus of that landing page is exactly why it’s important that these users can easily understand what type of site they’ve landed on and the breadth of its product catalog — especially if the landing page wasn’t the perfect fit.

Tip: if you don’t know already, try doing a quick lookup in your web statistics of just how much of your external traffic does not have the homepage as the landing page. The homepage is seldomly how the majority of external traffic users enter your site.

Issue 2: ‘Double-Hover’ Interaction

The second issue is less severe and relates to how a solitary navigational item that collapses the entire product catalog will introduce an excessive layer in the site hierarchy, which in practice often will lead to double-hover interaction issues.

During testing we observe that, as users try to navigate the e-commerce site hierarchy, in order to find the best-matching category they will often rely on the sub-categories within. For example, before choosing the first-level product category “Electronics” users will often hover that item to see the sub-categories it contains, to confirm if it is the right path or if they should rather try another main product category. Hence, in order to accurately infer the meaning of each main category on a site and the sections within it, users need the ability to view their respective sub-categories. Therefore, having a singular “Products” item in the main navigation requires nearly all users to perform a double-hover interaction, which is generally undesirable.

In a double-hover navigation menu, users first have to hover the singular main navigation item (e.g., “Products”) to reveal the main category options, then move the mouse downward within the narrow hover area, and then, when having found a main category they like, move their mouse in a straight horizontal line within a hover area of a very short height to arrive at the larger hover area for the sub-categories. Needless to say, this caused interaction issues during testing, where some subjects simply had difficulties staying within the narrow double-hover paths without either:

1. Accidentally hovering an unintended item, or
2. Leaving the hover area altogether, causing the entire main menu to close (having to redo the entire hover sequence).

Note that the accidental activation of unintended sibling items can be mitigated by using a hover delay or ‘Mouse Path Analysis,’ as we’ve explored further in 43% of Sites Have Severe ‘Flickering’ Issues for Their Main Drop-Down Menu.

Two Different Solutions

During testing we see there’s one very simple design solution that actively solves the issues described above: make the first level of the main navigation consist of product categories. Displaying product categories directly in the main navigation allows all users to be able to infer the type of site they’ve landed on and the breadth of the product catalog in the page’s default state and, in addition, avoid the double-hover interaction pattern.

Auxiliary categories such as “Deals,” special sub-stores, service sections, product-finder wizards, etc. may be placed as featured content on any of the intermediary category pages, as secondary content in your drop-down menu, and possibly also as embedded homepage content. Furthermore, the entire collection of non-product navigation can be placed in a secondary courtesy navigation, or even directly alongside the first level of category options in the main navigation bar. The important thing is that the top-level product categories are immediately available to the user.

However, some alternative solutions do exist. The core of the alternative design solutions is that they provide users with the ability to still see the main product categories. This is most commonly achieved by permanently expanding the singular “Products” item to show the product categories within, instead of having it hover activated.

Based on e-commerce best practices, we generally recommend the simple design pattern of having the first level of the main navigation consist of product categories. However, the alternative solutions do solve the most severe usability issues, and can thus be useful in projects where (for whatever reason) a solitary “Products” item is required or warranted in the main navigation structure.

Our Homepage & Category benchmark reveals that currently 70% of e-commerce sites simply use product categories as the main navigation, 12% of sites rely on alternative design solutions, while the last 18% of sites face severe navigation issues by only having a solitary “Products” main navigation item that hides the product categories from their users.

This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce navigation experience.