Navigation

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

Key Takeaways

  • Our UX benchmark of 60 large e-commerce websites shows that “Category Navigation” performs acceptable overall
  • However, there’s significant room for improvements — particularly within the topic of “Category Taxonomy”
  • This article will cover 13 commonly observed e-commerce navigation UX issues, and show the “navigation best practices” we’ve verified to perform the best with end-users.

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 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 60 top-grossing e-commerce sites in the US and Europe (performance verified).

In this article, we’ll analyze a portion of the 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 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 60 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 acceptable, made up of 14% decent, 38% acceptable, 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 acceptable 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:

Note that this is an analysis of the average performance across 60 top-grossing US and European e-commerce 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.

For “Sleeping Bags”, differently shaped sleeping bags generally will share all other product attribute types (e.g., “Temperature Rating”, “Fits Up To”, and “Insulation Type”). Therefore, “Sleeping Bag Shape” should be implemented as a filter and not a category, as is done here at REI.

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

At Argos, “Technology” subcategory headers are not clickable, and, while some subcategories like “Televisions” have a “View All” option, others like “Tablets & iPads” do not, forcing users into overly narrow product scopes.

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.

At REI, “Camp & Hike” subcategory headers like “Backpacks” and “Tents” are clickable, accommodating users who want to stay in a fairly broad product 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

At Target, options such as “Deals” and “What’s New” are implemented as true categories, needlessly siloing users who will have difficulty seeing the full product selection if the discounted or new items aren’t of interest.

“I always shop the sales first.” A user at Adidas explored the “Sale” option first. However, after drilling down to “Women > Sale > Shoes” in the main navigation, she was presented with a product list that didn’t have “Sale” applied as a filter.

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

At Amazon users who haven’t fully decided what kind of product they want, or who are looking for inspiration, are unable to view a broad product list.

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.

Meanwhile, at Target, an explicit “Explore All” option is displayed directly below the “Headphones” subcategory label.

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.

The average e-commerce site performs decently 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

At Best Buy the entire product catalog navigation is hidden within a “Products” item in the main navigation. During testing, this needless layer in the top hierarchy negatively impacted some users’ navigation experience, causing both a double-hover navigation and making it difficult for users to infer what type of site it was and what type of products it carried.

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

At IKEA, some users may be lured into too-narrow categories presented in the “Textiles” drop-down menu, feeling they have to select among options they don’t fully understand.

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.

In contrast, the drop-down menu at Etsy contains only generic product categories, preventing users from selecting an overly narrow scope.

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

At John Lewis, moving the mouse cursor in a direct line from the main navigation item “Women”, to the “New In Clothing, Shoes & Accessories” subcategory, crosses the trigger area for the main navigation item “Electricals” and replaces the entire drop-down menu content.

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.

In contrast, moving the mouse cursor at Wayfair in a direct line from the main navigation item “Baby & Kids” to the “Cribs” subcategory briefly crosses the trigger area for the main navigation item “Kitchen”, yet the drop-down menu content for “Baby & Kids” remains visible.

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-acceptable 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

At TigerDirect, some of the subcategory thumbnails on the “TV & Audio” intermediary category page are unrecognizable or ambiguous for some users. Thus, they’re ineffective at conveying the breadth of the category.

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

At Walgreens, other content such as special offers and promotions visually supercede the subcategory navigation on the “Beauty Products” intermediary category page.

Similarly, the “Electronics” intermediary category page at Newegg prioritizes a sale and featured products over subcategory navigation, defeating the primary purpose of having an intermediary category page.

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.

At J.C.Penney, promotions and auxiliary content are featured beneath the subcategory links, ensuring this secondary content does not distract users.

At Hayneedle, competing promotions and most other auxiliary content are avoided on intermediary category pages, allowing users to focus on subcategory navigation paths.

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

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

Argos’s UX performance in particular suffers from usability issues caused by poor or broken “Category Taxonomy” and “Main Navigation”, although it performs decently for “Intermediary Category Pages”.

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 UX 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-60 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.

Share: LinkedIn

Authored by Sally Collins

Published on August 25, 2021

Comment on LinkedIn

User experience research, delivered twice a month

Join 25,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

Related Articles

More E-Commerce Research

Free Research Content:

Products & Services: