A significant part of external e-commerce traffic doesn’t land directly on your homepage and then navigate linearly downwards through category pages, product listings, and then product pages. Instead many users land deep into the site’s catalog. As it is impossible to control exactly where a user is going to enter your website, it’s integral that users can understand where they currently are and where they’re able to go.
Having breadcrumbs is one core component of this awareness, however, during Baymard’s large-scale usability testing, when users were trying to determine “where they were at” on a site, some users consistently looked at the site’s main navigation.
During testing we observe that, when users’ current scope isn’t highlighted in the main navigation, it makes it unnecessarily difficult for users to determine where they are in the site hierarchy, makes it more difficult to learn and internalize the site’s structure, and it makes it more difficult to navigate to a new top-level scope.
Despite of this, our benchmark reveals that 66% of sites don’t highlight the user’s current scope within their main navigation.
This article we’ll discuss the test findings from our large-scale UX research relating to the importance of highlighting the user’s current scope within the main navigation as well as:
It’s true that during our testing many users relied on breadcrumbs to orient themselves. Well implemented breadcrumbs allow the user to gain their bearings, review where they are in the grand scheme of the site catalog and hierarchy and even use them as a way of navigation.
However, our testing also revealed that breadcrumbs are often poorly supported and inconsistently implemented across sites – as described in our article E-Commerce Sites Need 2 Types of Breadcrumbs - 68% Get it Wrong.
But even when breadcrumbs are implemented perfectly, some users still rely on the main navigation to help quickly understand where they are or to reassure themselves that they are where they thought they were.
This is especially true for nonlinear navigation, where users haven’t navigated through the full hierarchy to get to their current location. For internal traffic, nonlinear navigation will often be the case for users clicking on featured and crosslinked products, as well as all users using on-site search. Additionally, external traffic sources that link to pages other than your homepage will be nonlinear as well (such as referrals, search, social media, and advertising traffic that leads to curated pages, categories, or product pages).
In other words, for a large part of e-commerce traffic, the top-level product scope has not been actively selected by the user. On desktop sites, if the current top-level scope isn’t highlighted in the permanently visible main navigation, users have to work harder to gain a sense of where they are on a site. Despite this, 66% of desktop sites fail to highlight the current scope in the main navigation.
On mobile, the situation is different, as there’s typically no permanently visible main navigation. However, we observe that the mobile user behavior is similar to the user behavior observed on desktop sites, as several users during mobile testing tried to open the main navigation to get a sense of where they were within the site hierarchy (especially mobile users who arrived directly on a product page from off-site).
When the current scope wasn’t highlighted in the main navigation, users had a more difficult time figuring out where they were within the site hierarchy — putting more strain on breadcrumbs (which were often absent, inconsistently implemented, or truncated) and terminology to perform perfectly to help them learn the site hierarchy.
Fortunately, providing information on where users are in the main navigation has a somewhat “low-cost” solution: simply highlighting their current scope in the main navigation.
On desktop, this means the top-level main navigation option the user is currently located within should have different styling than the other top-level main navigation options in the permanently visible main navigation.
On mobile, this also means styling the current scope differently from the other main navigation options, but within the main navigation viewport (rather than in the header).
A prerequisite for both desktop and mobile implementations, however, is that the main navigation must be the first level of product categories (see The Main Navigation Should Display Product Categories — 18% Don’t); otherwise, the navigation item that will be highlighted for users is simply “Shop” or “Products”, which doesn’t help users determine where they are.
There are, however, a few things to be aware of when highlighting the current scope in the main navigation.
Make the scope highlight unique: At some sites that did highlight the current scope in the main navigation, it was pointless as the styling of the chosen parent page clashed with other types of navigation and page highlights. When multiple other navigation items also have a “highlighted” style, it will not be immediately and abundantly obvious to the user that one of the highlights indicates the current scope (especially for external traffic).
Link activation and redirection: Remember that even though the current scope in the main navigation should have a “selected” styling, it is very important that the link is not deactivated (see guideline #255 for more on when to deactivate links), but instead (most often) leads to an intermediary category page, as described in our article Implement the First 1-2 Levels of the E-Commerce Hierarchy as Intermediary Category Pages.
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
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 email@example.com