Navigation Structures, Hierarchies, and Wayfinding

When architecting a sitemap, teams must balance Breadth (the number of choices per level) against Depth (the number of levels to reach content):

• Deep Hierarchies (Overly Nested): Requiring 6 or 7 clicks through sub-sub-menus causes users to lose their mental path and abandon navigation.
• Broad Hierarchies (Overwhelming): Presenting 25 items in a single menu causes cognitive paralysis and banner blindness.
• The Usability Sweet Spot: Moderate breadth (5 to 9 primary categories) paired with shallow depth (2 to 4 levels).

Whenever a user lands on a screen (whether through direct navigation or a shared external link), the interface must immediately answer three wayfinding questions:

1. Where am I? (Signposted by bold page titles, active navigation tab states, and breadcrumbs).
2. Where can I go next? (Clear child links, contextual recommendations, and related items).
3. How do I get back? (Visible breadcrumb trails and persistent global navigation).

Breadcrumb Best Practices:

• Use hierarchical breadcrumbs for deep catalogs: Home > Shoes > Running > Trail Running.
• Always render the current leaf node as plain text (not a link) to confirm the current location.

Large e-commerce and catalog sites rely on Faceted Navigation to let users filter along multiple orthogonal dimensions (e.g., Size, Color, Price, Brand, Rating).

The Zero-Results Rule: Never allow users to select filter combinations that result in '0 items found'.

• Dynamically disable or hide incompatible facets.
• Display item counts alongside facet checkboxes: [ ] Waterproof (14).
• Provide clear, one-click removal pills for every active filter.