E-Commerce Navigation UX - 13 Common Pitfalls & Best Practices

Designing a user-friendly e-commerce category navigation requires solid information architecture, systematic labeling and hierarchy, and curated intermediary category pages — and that’s just the beginning.

Our Homepage & Category e-commerce benchmark contains 10,900+ Homepage and Category UX elements that have been manually reviewed and scored by Baymard’s team of UX researchers, with an additional 3,100 best practice and worst practice examples from the 73+ top-grossing e-commerce sites in the US and Europe (performance verified).

In this article, we’ll show you a portion of our large-scale Baymard Premium UX research dataset to provide you with:

• the current state of “E-Commerce Category Navigation UX”,
• outline 13 common navigation UX pitfalls applicable to most e-commerce sites, and
• show you the 13 navigation best practices we’ve verified to perform the best with end-users in our large-scale usability testing.

The Current State of E-Commerce Navigation UX

For this analysis we’ve summarized the 6,100+ “Homepage & Category” usability scores across 3 of the 4 “Homepage & Category” topics and plotted the 73 benchmarked sites across these in the scatterplot above. (See our separate article on “Homepage UX”.) Each dot, therefore, represents the summarized UX score of one site across 5–17 guidelines within that respective topic of the homepage and category navigational experience. The top row is the total Desktop Web “Category Navigation” UX performance.

The “Category Navigation” UX performance for the average top-grossing US and European e-commerce site is decent, made up of 14% good, 38% decent, and 34% mediocre performances. There are no sites that perform either exceptionally well and few that perform exceptionally poorly here, making for a much more narrow spread compared to other themes. This also means that there are the fewest examples on either end of either massive performance issues or “State of the Art” implementations.

Despite the generally decent performance of sites, this benchmark dataset shows that there’s significant need for improvements when looking within the topics of “Category Taxonomy”, “Main Navigation”, and “Intermediary Category Pages”. The issues identified in these 3 topics cause problems for many sites, and include some “missed opportunities” for the e-commerce industry as a whole.

Below we’ll discuss the UX performance and show 13 general navigation pitfalls, each with best practice examples from our large-scale testing. The article is divided into these 3 themes:

• Category Taxonomy
• Main Navigation
• Intermediary Category Pages

Note that this is an analysis of the average E-Commerce UX performance across 73 top-grossing US and European sites. When analyzing a specific site there are nearly always a handful of critical UX issues that are site specific. This is the case even when we conduct UX audits for Fortune 500 companies.

Category Taxonomy

When it comes to the “Category Taxonomy” the average e-commerce site runs into significant issues, with 50% of sites performing mediocre or poorly — reversing positive trends observed in 2018 when only 6% of benchmarked sites had an overall poorly performing category taxonomy.

Indeed, “Category Taxonomy” is by far the weakest of all of the “Homepage & Category” subareas.

Overcategorization remains the single most important category-based navigational issue for the average e-commerce site.

The repercussions of a poor category taxonomy can be even more devastating than immediate site abandonments — it may lead to permanent brand damage.

In particular, there are 5 UX issues e-commerce sites get wrong when it comes to “Category Taxonomy”.

1) 74% of Sites Incorrectly Implement Product Types with Shared Attributes as Separate Categories

During both desktop and mobile testing, multiple sites had implemented product types as categories or subcategories instead of filters.

This proved critically harmful, as it needlessly limits the user’s ability to mix and match different criteria to get the exact list of products they want, in addition to making it very difficult for users to get an overview of all products of a certain type.

Unsurprisingly, during testing this led many users to abandon sites due to the confusion and limitations introduced by such mismatches.

To address this issue, product types should be implemented as filters (used to narrow down product lists within categories) when most product attributes (e.g., “brand” and “style”) are the same across the product type, and implemented as categories (part of the product catalog hierarchy) mainly when most of the product attributes aren’t shared and therefore the product types are mutually exclusive.

Despite how detrimental it is to users’ product-finding abilities, 74% of sites don’t correctly implement product subtypes with shared attributes as filters (up from 54% in 2018).

2) 60% of Sites Don’t Divide Categories and Subcategories into Manageable Chunks

During testing, many of the sites’ hierarchies were perceived by users to be “overwhelming”, “cluttered”, or “confusing” because one of the benefits of drop-down menus — that they can hold an almost unlimited number of options — is also their Achilles’ heel.

Indeed, most users began to feel overwhelmed when they were presented with more than ~10 subcategory options to choose from.

While navigating or scanning long lists of categories on desktop is difficult, on mobile the task is even harder, as users will have to scroll through the options — a time-consuming and laborious task — and will find it difficult to establish an overview of the navigation.

Furthermore, there’s minimal information scent provided on mobile, as users can’t hover menu items to potentially learn more about the category, and there’s less space to include inline text descriptions of the items.

To address this issue, divide categories and subcategories into manageable chunks: subdivide when reaching around 10 categories, and aim for at least 10 products in the categories at the deepest level.

Despite the damage to users’ site perception, 60% of sites have poorly curated category hierarchies (up significantly from 5% in 2018).

3) 21% of Sites Have Shallow Parent Categories

During testing, at surprisingly many of the tested sites the grouping of the drop-down categories were only text labels, not clickable parent categories.

This conflicted with the expectations of the majority of the users, who anticipated the headers would be clickable and often tried clicking them despite the cursor indicating the item wasn’t clickable.

The users wanted to stay in a fairly broad product scope in the hope of landing at a curated intermediary category page which could assist them in their selection of a more defined scope.

Having parent categories be part of the actual product catalog hierarchy (and not just shallow text labels) is critical in supporting explorative product browsing.

Users who haven’t fully decided what they want, or who are looking for inspiration on what to purchase, can dip their toes in broader categories before diving into highly defined ones.

Despite conflicting with the majority of users’ expectations, 21% of sites don’t provide clickable parent categories (up from 15% in 2018).

4) 37% of Sites Incorrectly Implement Filter-Based Categories for New and Discounted Items

During testing, many users who had past experience with a site or brand looked for a “What’s New” option, often by looking in the main navigation or on the homepage.

Similarly, finding products that were listed as “on sale” was the initial desire of several users who, after arriving at a site, immediately hunted for the “on sale category”.

However, if options such as “What’s New” and “Sales” or “Deals” are implemented as true categories instead of filter-based categories (i.e., preapplied as a filter), it needlessly silos users.

Therefore, “What’s New” and “Sales” or “Deals” categories should be technically implemented as preapplied filters to avoid siloing users. Yet 45% of sites implement them incorrectly.

5) 38% of Sites Don’t Have a “View All” Option in Each Subcategory

Users who haven’t fully decided what they want, who are looking for inspiration, or who haven’t been able to infer the right product taxonomy sometimes prefer to get a massive list of products to explore, even when the scope is so broad that the list can contain thousands of products of an almost random type.

During testing, these overly broad product lists were often used as a way to learn what to look, browse, and filter for later in the browsing session.

However, on some sites it was unclear how to navigate to the very broadest scopes because, either these scopes didn’t exist, or it was unclear how to select the parent scope.

While parent categories should always exist and be selectable, an explicit “View All” option is useful — even if it does the exact same thing as selecting the parent category — because it it allows users to see “everything” available on the site within a broad scope, and it acts as a reminder to those in a subcategory or with a product type filter applied that the list they are currently seeing is scoped.

Despite the increased effort to users desiring a broader product list, 38% of sites don’t provide a “View All” option in each subcategory and for each set of product type filters (up from 17% in 2018).

For inspiration on Category Taxonomy implementations, see Overstock and Etsy on desktop, and Build.com and H&M on mobile.

Main Navigation

The average e-commerce site performs good when it comes to the “Main Navigation” user experience, making it one of the higher-performing topics within “Homepage & Category”.

That said, 31% of sites still perform mediocre to poorly.

Having a user-friendly main navigation UI is as important as having a solid category taxonomy, as what the user sees and interacts with largely determines if they will be able to navigate the site intuitively or are halted every time they try to browse the site’s categories.

In particular, there are 4 UX issues e-commerce sites get wrong when it comes to “Main Navigation”.

6) 36% of Sites Nest the Entire Product Catalog Inside a Single Main Navigation Item

During testing, users on desktop sites generally knew how to access the product catalog, but often had trouble inferring the type of site from the main navigation when product categories were collapsed into a single link.

Meanwhile, users on mobile sites often struggled to simply get started browsing the product catalog when product categories weren’t immediately visible in the main navigation.

(A notable exception to this general pattern is users on direct-to-consumer, small product catalog sites, where collapsing categories and products within a “Shop” menu was much less disruptive.)

To address this issue, product categories should be visible in the top level of the main navigation without hovering on desktop, and visible immediately after opening the main navigation on mobile.

Despite the negative impact at the outset of the product-browsing experience, 36% of sites have a single main navigation item for accessing all the product categories (down from 42% in 2018).

7) 29% of Sites Promote the Selection of Too-Specific Categories in Drop-Down Menus

During testing, the inclusion of sub-subcategories in the main navigation drop-down led some users to prematurely select an overly narrow scope.

Consequently, these users got off to such a bad start — arriving at a dead-end category straight from their first interaction on the homepage — that they decided to abandon the site altogether.

A better approach is to avoid having subproduct categories displayed in the drop-down menu, even if the consequence is that there will be no subcategories for some of the parent options within the drop-down menu.

Furthermore, in all cases sub-subcategory options should be avoided within the drop-down menu.

Instead, make the more generic options from the drop-down menu lead to an intermediary category page with both specific products and featured subproduct categories, or to a full category product list with subproduct type filters.

Despite the risk of site abandonment, 29% of sites promote the selection of too-specific categories in drop-down menus (up from 17% in 2018).

8) 52% of Sites Have Hover-Based Drop-Down Menus That Are Difficult to Use

During testing, hover-based drop-down menus outperformed other main navigation menus because they enabled users to easily explore categories and accurately select a well-defined scope.

However, users ran into severe usability issues with “flickering” behavior with menus that lacked an appropriate hover delay (a minimum amount of time the user has to hover the trigger area before the drop-down content appears), as well as accidental triggering of sibling category menus due to insufficient support for direct-line mouse movement.

To avoid the “flickering” of the hover-based drop-down navigation itself, there needs to be a hover delay — a minimum amount of time the user has to hover the trigger area before the drop-down content appears. Typically a delay of 300–500 milliseconds will suffice in eliminating the worst “flickering” without introducing needless friction for intentional hover interactions.

Additionally, an intelligent mouse path algorithm should be used to determine the user’s intent and prevent the accidental trigger of sibling category menus.

Despite the disruption to users’ navigation, 52% of sites have hover-based drop-down menus that are difficult to interact with and control (up from 30% in 2018).

9) 90% of Sites Don’t Highlight the User’s Current Scope in the Main Navigation

During testing, when the current top-level scope wasn’t highlighted in the main navigation, it made it unnecessarily difficult for users to easily determine where they were in the site hierarchy, and also made it more difficult for users to begin to learn and internalize the site’s structure.

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.

On mobile, even though the main navigation isn’t permanently displayed, users also rely on it to give them a sense of where they are on a site, especially if they arrive directly to a product details page from off-site.

Indeed, during mobile testing, when the current scope wasn’t highlighted in the main navigation, users had more difficulty 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 highlight their current scope in the main navigation by styling it differently than the other top-level main navigation options in the permanently visible main navigation on desktop, or within the main navigation viewport on mobile.

Despite the importance of orientation cues to the e-commerce shopping experience, a staggering 90% of sites don’t highlight the user’s current scope in the main navigation (up significantly from 38% in 2018).

For inspiration on Main Navigation implementations for desktop, see Gilt, L.L. Bean, and B&H Photo, and Macy’s and GAP on mobile

Intermediary Category Pages

The average e-commerce site performs mediocre-to-decent when it comes to “Intermediary Category Pages”, with 46% of sites performing mediocre or poorly and 3 sites that can be considered outright broken.

Additionally, while 84% of desktop sites feature intermediary category pages (up from 78% in 2018), only 54% of mobile sites do the same.

This means that — out of the many sites that have correctly implemented these pages on desktop — 37% of them have removed this helpful feature on mobile, essentially penalizing mobile users by creating a substantially more difficult product-browsing experience.

In particular, there are 4 UX issues e-commerce sites get wrong when it comes to “Intermediary Category Pages”.

10) 14% of Sites Don’t Have Intermediary Category Pages.

During testing, desktop sites without intermediary category pages suffered greatly as many users made wrong selections or were unable to define an appropriate scope, leaving them with very broad categories and often hundreds or thousands of products to consider.

In the absence of intermediary category pages, users have to work harder to use other paths or features available on the listing page, such as filters, to bring the listings down to a reasonable scope and length.

Faced with this daunting task, some users may abandon browsing in hopes that search will require less effort, or they may even abandon the site altogether.

Meanwhile, on mobile it’s especially easy for users to get overwhelmed when faced with overly broad scopes, and thus intermediary category pages were often observed during testing to be even more useful, compared to desktop.

Implementing the first 1–2 levels of the navigation hierarchy as intermediary category pages promotes subcategory navigation and other paths, encouraging users to make a more deliberate path selection before displaying hundreds, or even thousands, of products.

Despite how harmful it is to all users, 14% of sites still don’t implement the first 1–2 levels of the site taxonomy as intermediary category pages (although down from 22% in 2018).

11) 33% of Sites Are Missing or Have Hard-to-Interpret Subcategory Thumbnails

During testing, when intermediary category and subcategory pages lacked thumbnails, or had thumbnails that were difficult to interpret, users had more difficulty determining how to best navigate from intermediary category pages.

Indeed, users tended to hesitate more when evaluating and deciding among text-only subcategory links with no accompanying thumbnail.

On the contrary, users more easily navigated subcategory links on intermediary category and subcategory pages that were accompanied by clear, representative thumbnails.

Therefore, subcategory thumbnails should always be provided on intermediary category pages on both desktop and mobile sites.

Additionally, ensure the subcategory thumbnails are easy to interpret at a glance, and make it clear what product type they represent.

Despite hindering users’ navigation decisions, 33% of sites use text-only subcategory links, or representative thumbnails that are difficult to interpret, on intermediary category pages (up from 18% in 2018).

12) 48% of Sites Don’t Feature Subcategories as the Primary Content on Intermediary Category Pages

During testing, some of the intermediary category pages implemented at appropriate levels of the category hierarchy performed poorly because they prioritized promotional or auxiliary content above subcategory navigation, distracting users from their original task and making it more difficult for them to find and choose among subsequent navigation paths.

Furthermore, without clear access to subcategories, some users had difficulty identifying that they were intermediary category pages at all.

Intermediary category pages performed best when they prioritized subcategory navigation, locating subcategories front and center at the top of the page.

Despite the potential to ease navigation, 48% of sites don’t feature subcategories as the primary content on intermediary category pages (up from 25% in 2018).

13) 42% of Sites Don’t Provide Direct Access to Products Featured in Inspirational Imagery

During testing, users often found it baffling that a site didn’t provide direct access to products featured in inspirational images, and quickly lost patience or were unwilling to put in the effort required to locate the desired items manually.

On mobile sites, the consequences of not linking to products included in inspirational imagery can be even more problematic because the effort required to hunt down the desired features product is increased.

Therefore, provide direct access to all the products depicted in inspirational images by including the products directly on the intermediary category page (but not too prominently), have links to curated pages, or have the depicted products among the top items in the linked-to product list.

Despite significant frustration for users, 22% of sites don’t provide access to products featured in inspirational imagery on intermediary category pages (up from just 5% in 2018).

For inspiration on Intermediary Category Page implementations see Macy’s, HP, and Home Depot for desktop, and Argos, B&H Photo, and Sears for mobile.

Improving E-Commerce Navigation UX

This high-level analysis of the current state of “E-Commerce Navigation UX” focuses on only 13 of the 40 navigation UX parameters included in our full Baymard Premium research catalog. The other 27 issues should be reviewed as well to gain a complete understanding of e-commerce navigation and to identify site-specific issues not covered here.

Although our benchmark has revealed that no sites have a completely broken “Category Navigation” UX, it’s clear that there’s plenty of room for improvement, as 50% of sites perform mediocre or poorly when it comes to “Category Taxonomy”, and over 25% of sites perform mediocre or poorly when it comes to “Main Navigation” and “Intermediary Category Pages”.

Implementing the 13 navigation best practices described in this article will go a long way toward improving users’ navigational experience:

1. Implement Product Types with Shared Attributes as Filters Instead of Categories (74% Don’t)
2. Divide Categories and Sub-Categories into Manageable Chunks (60% Don’t)
3. Provide Clickable Parent Categories (21% Don’t)
4. Consider Having a “What’s New” and “Sales” or “Deals” Filter-Based Category (37% Don’t)
5. Have a “View All” Sub-Category and Product Type Filter (38% Don’t)
6. Make Product Categories the First Level of the Main Navigation (36% Don’t)
7. Avoid Promoting the Selection of Too-Specific Categories in Drop-Down Menus (29% Don’t)
8. Have a Drop-Down Menu with an Intelligent Hover-System (52% Don’t)
9. Highlight Current Scope in the Main Navigation (90% Don’t)
10. Have the First 1–2 Levels of the Site Taxonomy Implemented as Intermediary Category Pages (14% Don’t)
11. Provide Clear and Representative Subcategory Thumbnails (33% Don’t)
12. Present Subcategories as the Primary Content on Intermediary Category Pages (48% Don’t)
13. Always Provide Direct Access to Products Depicted in Inspirational Images (42% Don’t)

For additional inspiration, consider exploring the more than 1,000 “Homepage & Category” desktop and mobile Page Design Examples we’ve collected, as these showcase “Category Navigation” implementations at the top-73 US and European e-commerce sites and can be a good resource for navigational redesigns.

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.