pattern-img-border

Pattern 3: Simplify Deep Navigation

When designing complex sites and apps with deeply nested pages and information, it’s tempting to use a complex navigation design that ends up becoming difficult to use and understand.


Screenshot of Reverb's nested dropdown menu

Via Reverb

Screenshot of Amazon's nested dropdown menu

Via Amazon

Screenshot of Stripes's accordion menu

Via Stripe

Accordion navs, nested dropdown menus, and similar kinds of navigation are lazy design; they force the user to do a lot of reading, clicking, and hunting to find what they need. They require the user to read and understand the entire information hierarchy rather than simply offering a starting point. Worse, interacting with these kinds of controls is frustrating: nested dropdown menus often closed unexpectedly, forcing users to re-navigate the maze of menus, and accordion navs often have links that move because of expanding and collapsing, which can cause users to lose track of what they clicked.

Instead of using these complex navigation interfaces, here are a few simple patterns for handling deep content structures.

Categorized Jumbo Dropdown

Screenshot of the Bombas categorized dropdown menu

Via Bombas

Screenshot of the Ally categorized dropdown menu

Via Ally

Rather than nesting links deeply within multiple dropdown menus, a more usable design pattern is a standard top-level horizontal or vertical navbar, combined with a single large dropdown menu separated into columns by category.

This design requires fewer clicks to reach a bottom-level links, and makes the navigation quickly scannable.

Topic Preview Pages

In some situations, users might not know which bottom-level link they should click. Sometimes, users are looking for ideas and recommendations, not something specific.

To meet this need, great navigation encourages exploration by offering previews of content users might be interested in.

A simple solution is to create parent category pages that show previews of child pages.

Screenshot of a Nordstrom topic preview page

Via Nordstrom

Nordstrom’s navigation doesn’t force users to choose a bottom-level category. Instead, a user can view previews of various subcategories on the home page.

2nd screenshot of a Nordstrom topic preview page

Users can also click a top-level link, and see previews of the content found inside its sub-categories. Shown above, after a user clicks the “Men” link, they see an item from each of the Coats & Jackets, Shoes, and Accessories sub-categories. The previews help users decide what they’re interested in, rather than forcing them to make a blind decision immediately.

This seems like an obvious navigation pattern, but you might be surprised to see how many sites force users to choose a bottom-level category immediately. Discoverability is a key part of helping users find the right content—even when they don’t know what they’re looking for.

However, make sure your topic pages actually provide previews of subsections and not just a list of links like on Consumer Reports:

Screenshot of an incorrect Consumer Reports topic preview page

Via Consumer Reports

Breadcrumbs

“Breadcrumbs” refers to a series of inline links indicating the user’s current location in the navigation hierarchy. This design pattern gives users context so they don’t feel lost even when deep inside large, nested content. The breadcrumb links also allow users to backtrack through a deep navigation as far as they need to without having to start over.

Screenshot of Basecamp's breadcrumb navigation

Via Basecamp

Basecamp has surprisingly deep navigation, but the use of breadcrumbs helps users track which feature and project they’re currently viewing.

Screenshot of Basecamp's breadcrumb navigation plus dropdown menu

Via Basecamp

The first breadcrumb link doubles as a dropdown so users can quickly jump into a new section without returning to the homepage.

Deep content hierarchy doesn’t necessarily require a complex UI

Your job as a designer is to guide users to the right information just as much as to structure and present it. It’s easy to get lost in structuring and organizing and to let that structure determine our design decisions for us. But, when you design for deep navigation, try to make the work required of the user as minimal as possible. Encourage exploration and offer scan-ability. Or, emphasize search patterns when the user is looking for something very specific.


Looking for something specific? Email us here to suggest a design pattern.
Written by Jarrod Drysdale.


Share this article:


Objective Creative Design Bootcamp

Learn to succeed as a designer without compromising your creative vision

Objective Creative is a free mini bootcamp to teach you how to get hired as a designer without selling your soul to the devils of commerce.

You'll learn about the hidden factors limiting your success as a designer, how to overcome them, and how to show others the value of your work—without making compromises.

* email required

No spam, ever. Unsubscribe anytime. Privacy Policy.

Or, learn more about the bootcamp