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

Best Buy has the entire product catalog navigation within a solitary “Products” item in the main navigation. When testing the site this needless layer in the top hierarchy caused issues for users, both due to “double-hover” navigation and by making it difficult for users to infer what type of site this was and what type of products it carried. As a result, some users even misinterpreted the site for being a price comparison site and not an actual e-commerce store.

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,” 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.

When a solitary navigational item called “All Products” hides all the product categories, it makes it difficult for users to immediately grasp that NewEgg doesn’t just sell computers and consumer electronics, but also sells clothing and cutlery.

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?.

…users rely on the first level of product categories to infer what type of site they’ve landed on…

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 inferring the correct type of site and the breadth of the product catalog is even more relevant for all external traffic that does not have the homepage as the landing page. E.g. a user coming from external traffic landing at “Small Kitchen Appliances” will not be able to easily infer that this site is also the right place for product types such as pet food, DSLR cameras, and yoga mats.

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

The simple solution: By having a category navigation that displays product categories users can easily infer the vast diversity of the products carried at Sears, and an excessive layer is removed from the main navigation, allowing for direct hover of each of the product categories to reveal its sub-categories.

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.

Alternative solutions: Bass Pro Shops features non-product catalog navigation such as “News & Tips” alongside the first level of product categories in the main navigation. The “Shop” option is selected as the default scope, and the product categories are therefore part of the permanently visible main navigation.

Alternative solutions: While Amazon has a solitary “Departments” item they acknowledge users’ need to infer at least some of the product catalog by injecting a permanently visible secondary menu bar specific to the product type users are within. Here a user has landed directly on the “Women’s Ankle Boots” product listing page, but are still presented with main product categories in the grey “Amazon Fashion” menu bar.

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.

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 79 UX guidelines in our Homepage & Category study — get full access to learn more about the 78 other findings required to create a “State of the Art” e-commerce navigation experience.

Post a comment or Share:

User experience research, delivered twice a month

Join 16,000+ readers and get Baymard’s research articles by RSS feed or e-mail:

Due to spam, you need JavaScript to do that.

(1-click unsubscribe at any time)

Related articles

More ‘Homepage & Category’ Research

Free Research Content:

Products & Services:

All Research Topics

Bubblers May 22, 2017 Reply to this comment

Really interesting, we were literally just debating this the other day regarding the grouping of product types into a broader single nav menu item. I think this confirms what we were already thinking, it’s best to have the product collections directly in the nav bar. One problem we run into is relatable to the bassproshops example, where news/tips, reviews, etc are grouped with the menu. Do you think this is too convoluted?

Daniel September 16, 2017 Reply to this comment

It would be easier for the buyers to navigate the products that they are looking if they are available within the main navigation. Personally, as an online buyer, I find it hard to navigate the products that I’m looking for if I have to open several pages just see its categories. At least if there are categories that are available on the main page, all don’t have to spend too much time looking and browsing throughout the website. I observed that e-commerce websites with proper navigation system stay ahead of the competition.

Post a comment!

Close overlay