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:
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?.
…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 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.
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:
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.
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.
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 850+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce navigation experience.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
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?
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.
How does the alternative example (Bass Pro Shop and Amazon) handle direct navigation to a sub-category or, in the Bass Pro Shop example, a non-product page? How do they expose the breadth of the catalog or is only exposing part of it necessary?
If the entire, smallish catalog is exposed in a mega menu under the products category would this solve the problem or do users who are not familiar with the sites offering and cannot infer quickly not even bother exposing the menu and exit the site?
Wondering how this data might relate to mobile users? Behaviours and expectations shift between platforms and it would be interesting to have a comparison in findings between those expectations using a desktop navigation and a mobile navigation.
Hi Tyler, we’re actually finishing out a new round of mobile e-commerce usability testing, where this is part of the findings. If you have Baymard Premium research access then go see https://baymard.com/premium/themes/2 in 2-3 weeks and it will be live.. The underlying principle is confirmed to be the same on mobile, but the execution/UI is different as the mobile main nav. is (obviously) generally different.
Hello Christian! You cite examples terms used in a solitary main navigation item like “Products,” “Catalog,” or “Departments” but what we see a lot of is the use of “SHOP.” I can see using a solitary main navigation like SHOP making sense for a site where “shop” is a small part of say a publication that also happens to have some merch to sell. Like our site: https://www.hauserwirth.com/ but if the central part of business and reason o the website is ecommernce then shouldn’t “SHOP” be included with “Products,” “Catalog,” or “Departments” as a bad "catch-all’ category?
Hi Richard, yes you are right, “shop” is as bad as the other terms.
This article/observed issue is about the usability issues of (e-com sites) using a main nav. that is hiding the top-level product categories from users. Whether it’s called “shop” or “products” doesn’t matter – it’s about not seeing the top-level product categories by default, not that users don’t know what “products” mean.
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org