How do we make navigation as simple and predictable as possible? As explained in part 1311 of this series, the first two steps are to structure content in a way that naturally narrows the navigation options, and to explain those options in a way that minimizes the cognitive load on users.
However, two more steps are required — namely, to choose the right type of navigation menu, and then to design it. The second part of this series addresses the third step and discusses which type of navigation menu is best suited to which content.
A navigation menu is any area of an interface that presents navigation options to enable users to find content on the website. This excludes, for example, articles and product pages, which might contain hyperlinks but whose main purpose is consumption, not navigation.
A common distinction in navigation models is between a primary, traditional navigation system and secondary, alternate navigation models. Exactly defining this distinction is difficult. One could say that traditional navigation requires users mainly to click or hover in order to select or browse meta-data categories, while alternate navigation lacks at least one of these aspects.
Traditional Navigation Menus Link
There are five types of traditional navigation menus or widgets, which can be ordered from simplest to most complex:
- Menu bar
- Regular drop-down menu
- Separate page
- Dynamic filters
While sophisticated hybrid solutions are possible and do exist, all hybrid navigation can be broken down into the five menu types above. The question now, of course, is when to use which type of menu.
As explained in part 1, designers use three methods to explain navigational choices: text, text and pictures, and text, pictures and descriptions. To minimize the cognitive load on users, designers should use just enough information as the target audience needs to understand their options.
With that in mind, the following rule of thumb will help you decide when to use which type of navigation menu: The fewer the options are and the less information that is necessary to explain them, the simpler the navigation should be.
To better understand why certain widgets are easier to use and when exactly to choose one over the other, let’s take a closer look at the five menu types.
Menu Bar Link
Almost every website has a persistent horizontal or vertical bar to accommodate its top-level categories.
The most important or most frequently accessed items or categories should go in the navigation bar.
A navigation bar is the simplest type of navigation. The items or categories in a navigation bar are globally and directly visible and accessible. By contrast, users have to hover over a drop-down menu or wait for a separate page to load in order to access the options they contain.
As soon as the navigation bar (whether horizontal or vertical) takes on more than just a handful of items, and depending on the screen’s width and orientation, it will take up space that could be used more efficiently to present the main content.
In the screenshot below, notice that the horizontal navigation works well, as long as it takes up only a single row. To accommodate it on a smaller screen, the designers chose to stack the navigation items into rows. This, however, pushes the main content down, requiring users to scroll more.
On a wide screen, a vertical navigation bar allows for more menu items, but it has another downside. It takes up horizontal space that could be used to more efficiently present the main content on a wide screen, whether an article, a video or product information. In the pictures below, I’ve mocked up a layout to compare the effect.
This is why drop-down and fly-out menus are better suited to many items. They present the additional items only when requested but stay out of the way otherwise, thus giving the content center stage.
Regular Drop-Down Menus Link
A drop-down or fly-out menu, when triggered, appears on top of the content. Its entries are stacked vertically in a single column and consist either of text alone or text and icons.
If the items are best explained by text and the menu is not very long, then a regular drop-down menu is the simplest, most efficient solution.
Compared to a mega-menu, a regular drop-down menu has the following advantages:
- It loads more quickly.
- The additional space and visual potential of a mega-menu would not be taken advantage of with just a few text entries. Also, a mega-menu might confuse users or, at best, slow them down because users would have to figure out the layout scheme first. By contrast, a short vertical list is readily scannable and understood by everyone.
If the menu is long, then things can get tricky. A long vertical drop-down list might get cut off by the browser window and require users to scroll frequently. There are two ways to deal with this problem.
One is to break down the list into subcategories. While a good solution, navigating from submenu to submenu can be frustrating if the interaction is not designed properly. This issue will be addressed in part 3 of this series.
A second way to deal with a long drop-down menu is to use a mega-menu that best fits the screen’s orientation, such as a horizontal mega-menu for landscape-oriented screens.
A special type of drop-down menu is the so-called mega-menu18. A mega-menu is a drop-down or fly-out menu that does not merely stack its entries in a single column, but instead uses images, typographical hierarchy and different layouts to visualize the options.
If the options require both text and pictures, then a mega-menu is the best choice.
A regular drop-down menu does not offer the same room or visualization options. And whether regular and mega, it has the following advantages over navigation on a separate page:
- It loads more quickly.
- The cognitive load on users is less. With a separate page, users have to think more. “Which are the ads?” “Which is genuine content?” “Where is the navigation?” A drop-down menu shows only the navigation, and it appears close to the user’s cursor or finger.
Even a mega-menu is limited in space. If the number of items is too high, then a separate page becomes inevitable.
Separate Pages Link
A fourth way to display items or categories is on a separate page.
If the menu requires text, pictures and descriptions, then a separate page is best.
Accommodating this kind of navigation as a mega-menu might be possible, but only if the descriptions are just a couple of lines long.
Sending users to a separate page merely to view navigation options, rather than actual content, is not the most elegant solution. Also, users are taken out of the context of the current page. But if a mega-menu would be too unwieldy to accommodate the sheer number and size of options, then a separate page might be the most comfortable solution.
Dynamic Filters Link
Finally, dynamic filters are a complex yet powerful way to navigate content, whereby users assemble a set of their desired content on the fly.
While many websites have only one of the first three menu types, dynamic filters almost never appear on their own. Instead, they are typically appended to the primary navigation as an option.
Kmart (pictured below) starts the navigation process with drop-down menus, both regular and mega. At the next level, a separate page displays the product categories. Finally, once users have navigated to a department, they will find dynamic filters to refine their selection.
In line with the discussion of meta data categories in part 1311, we can say that, while the first three navigation types are best suited to essential and mutually exclusive optional categories, dynamic filters are best employed for optional categories that will likely be combined.
The advantage of dynamic filters is that they allow users to select and change values on the fly. Instead of going back and forth between navigation levels, users can stay on the same level and dynamically combine values until the results match their criteria.
The fact that dynamic filters are usually vertical is not a disadvantage because the filtered results are not “content” per se. They are still a part of the navigation. Moreover, the dynamic relationship between the selected values on the left and the results on the right gives the user immediate feedback on how many and which items match their criteria.
Dynamic filters are the most powerful but also the most complex solution. They take up more space and take longer to load than any other type. Users are required to analyze and work with multiple elements, including filters, results, sorting widgets and viewing modes, which make dynamic filters a challenge to implement on the desktop, let alone on phones. So, as useful as they are, avoid them if a simpler navigation type would do the job just as well.
- 1 https://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
- 2 https://www.smashingmagazine.com/wp-content/uploads/2014/04/01-navigation-bar.jpg
- 3 https://www.smashingmagazine.com/wp-content/uploads/2014/04/01-navigation-bar.jpg
- 4 http://sharify.it
- 5 http://www.arbor-restaurant.co.uk/
- 6 https://www.smashingmagazine.com/wp-content/uploads/2014/04/02-navigation-stack.jpg
- 7 https://www.smashingmagazine.com/wp-content/uploads/2014/04/02-navigation-stack.jpg
- 8 http://baystreetbiergarten.com/
- 9 https://www.smashingmagazine.com/wp-content/uploads/2014/04/03-navigation_bar.jpg
- 10 https://www.smashingmagazine.com/wp-content/uploads/2014/04/03-navigation_bar.jpg
- 11 http://baystreetbiergarten.com/
- 12 https://www.smashingmagazine.com/wp-content/uploads/2014/04/04-dropdown-menu.jpg
- 13 https://www.smashingmagazine.com/wp-content/uploads/2014/04/04-dropdown-menu.jpg
- 14 http://blurb.com
- 15 https://www.smashingmagazine.com/wp-content/uploads/2014/04/05-dropdown-menu.jpg
- 16 https://www.smashingmagazine.com/wp-content/uploads/2014/04/05-dropdown-menu.jpg
- 17 http://sunglasshut.com
- 18 http://www.nngroup.com/articles/mega-menus-work-well/
- 19 https://www.smashingmagazine.com/wp-content/uploads/2014/04/06-mega-menu.jpg
- 20 https://www.smashingmagazine.com/wp-content/uploads/2014/04/06-mega-menu.jpg
- 21 http://www.designchemical.com/blog/index.php/tutorials/wordpress-tutorial-create-your-own-custom-mega-menu-styles/
- 22 https://www.smashingmagazine.com/wp-content/uploads/2014/04/07-separate-pages.jpg
- 23 https://www.smashingmagazine.com/wp-content/uploads/2014/04/07-separate-pages.jpg
- 24 http://danskebank.co.uk/en-gb/Personal/savings/Pages/savings.aspx
- 25 https://www.smashingmagazine.com/wp-content/uploads/2014/04/08-filter.jpg
- 26 https://www.smashingmagazine.com/wp-content/uploads/2014/04/08-filter.jpg
- 27 http://www.walmart.com/browse/computers/tablet-pcs/3944_3951_1078084?browsein=true&povid=cat1078524-env377582-moduleA062911-lLinkLHN6TabletPCs&fromPageCatId=1078524&catNavId=1078524
- 28 https://www.smashingmagazine.com/wp-content/uploads/2014/04/09-dynamic-filter.jpg
- 29 https://www.smashingmagazine.com/wp-content/uploads/2014/04/09-dynamic-filter.jpg
- 30 http://www.kmart.com/
- 31 https://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.