Baymard Cliff Notes: Main Navigation

Learn UX best practices for e-commerce visual navigation and main heirarchy.

Welcome back to my Baymard Cliff Notes series! If you missed my first article in the series, I'm embarking on a self-imposed quest to get UX Certified by Baymard to improve my UX knowledge and become a better Content Strategist and Design Partner in my free time.

Today, I'm discussing website navigation best practices. Homepage Main navigation is defined by Baymard as "The visual design of an e-commerce site's taxonomy, including navigation menus, and visual hierarchy. It serves as the primary interface for browsing the site's product catalog."

Let's get into it!

The main navigation UX performance

• 50% of websites rank poorly and 50% perform decently or good
• Lingering issues are: mega-menu dropdown interaction and nesting product catalog within 'shop'

1st level main navigation should display product categories.

• Nesting the entire product catalog within a single main navigaton item can causes severe issues.
• Ex. 'Shop', 'Departments', 'Products' 37% of all E-comm sites have this pattern.
• Issues in testing: 1. Very difficult for users to infer site breadth because all main categories are hidden. 2. 'Double hover' interaction required. Very narrow horizontal hover path to access the subcategories.
• Ex. Newegg and Best Buy

• Solution: Make the first level of the main navigation consist of product categories.
• The primary objective for users on an e-commerce site is to navigate the products, secondary path is navigating auxiliary categories like 'deals' 'coupons' 'gift ideas' store locators.'
• If there are too many first-level categories? Look into the category taxonomy and how the structure is created to optimize it.

• Alternative: "shop" selected by default when the next layer is visible. Ex. Bass Pro Shop

• Second alternative: Best for XL sites. Inject a secondary menu bar specific to the user's current parent category. Ex. Amazon.
• 5% of e-commerce sites use these alternatives.

Main Nav. 'Parents' should be clickable

• 25% of users click the main navigation items to go to the broad categories.
• 18% of e-commerce sites have static labels. Ex. Etsy.
• All parent items should be clickable leading to an intermediary category page.

Mega-drop-down interaction logic

• 88% of sites use a 'mega drop-down' menu.
• 31% have 'flickering issues' (43% in 2016). Ex. Toys R Us and Crate&Barel- users move the mouse cursor in a direct line towards the target. This causes accidental hover over sibling categories and activates them changing the intended destination.
• Low degree of friction, but causes user frustration because they have to move their mouse cursor in an unnatural way.
• Crude Solution: a hover delay of 30 ms for new trigger areas.
• Mouse path analysis: long hover only delay towards subcategories. (JQ-Menu-aim)

Courtesy Navigation

• Browsing products is the main task on e-com sites, however, there are some critical non-product navigational options.
• Ex. account, orders, store locator, help, customer service.
• Balancing act: This courtesy navigation sometimes clutters the page users don't need it, yet is often absent when they do.

• Some coursey navigation is placed below product navigation and from an IA standpoint, this is likely to be misread by users as primary nav. Ex. Go Outdoors
• Always have "sign-in, create account, store locators, help, customer service" in the courtesy navigation. Consider merging related options, especially behind dropdowns.
• Avoid highly unconventional nesting Ex. Apple 'my account' nested under shopping bag dropdown.

Consider including thematic categories and resources in drop-down menus

• Ex. Home Depot has a "DIY Projects and Ideas" category
• Keep them secondary to the primary product categories.
• Important to users unfamiliar with the domain or who are seeking inspiration or alternative paths to the products they are looking for

Don't interpret hover as selection

• This interprets hover as a commitment by the user although they never selected anything, which goes completely against expectations

Main category options should be selectable and point to a page featuring sub-categories

• When a drop-down menu isn't hovered over, it is not obvious to users that it exists and some users end up clicking the options in the permanently visible nav bar instead.

Consider showing sibling categories for easy scope adjustment

• When exploring and browsing for products via category navigation, users will often need to move from the current category to a sibling category within the same parent scope.
• Users often check one sibling category out and then will want to check out the next if they are unsure of exactly what they're looking for.
• Most sites do not support this browsing behavior.
• Ex. Ikea — They link to the sibling categories throughout the entire catalog hierarchy.

Provide information scent for navigation options in jargon-driven domains

• When users do not fully understand a category name, they end up ignoring or overlooking the correct path.
• Use inline descriptions, tooltips, and icons

Visual anchors should be representative and rarely change

• Some sites use imagery as visual anchors for the primary navigation and some also for drop options
• Visual anchors draw more attention but could be more ambiguous and open to interpretation vs. labels
• Consider thematic icons for navigation options but keep them representative for the entire category content, keep them the same across time, and don't switch their position

Have the drop-down menu accessible on all pages

• Otherwise, this confuses users and renders them unable to switch scopes on pages without the drop-down menu present.

Be cautious of interactive widgets inside drop-downs

• Dropdown menus will normally contain a collection of navigation links, but sometimes they also contain interactive elements beyond a link.
• The content inside drop-down menus is tricky for users to control.
• Include extra padding and long hover-exit delays.

Dropdown menus should have spatial indicators

• If only some of the main navigation items trigger a drop-down menu these will need spatial indicators, such as a small downward-pointing arrow, to inform the user that they contain currently hidden options.
• Without spatial indicators, users have to resort to guesswork and trial-and-error hovering to figure out which of your menu items will reveal a drop-down menu of sub-categories.

Highlight the current scope in the main navigation

• It can be difficult for users to know where they are in the site hierarchy, and how a site is organized, especially when coming from off-site and some users rely on the main navigation to provide this information
• Make the main scope immediately clear to the user by highlighting the current scope in the main navigation.
• Having breadcrumbs is a core component of this awareness. Ex. M&S — The top-level category "home" is highlighted in the main navigation. This can be done simply by changing the font color. Just make sure the current scope styling in the main navigation is distinct from the other main navigation options.

➡️ Well, if you made it this far, I'm curious to know if you learned anything new or if anything surprised you? Let me know below in the comments.

➡️ That's all for now; stay tuned for my Main Navigation cliff notes next week! You can also read my Category & Taxonomy notes until then.

➡️ And if you need any UX Content Strategy help you can find me here.