Efficiently Simplifying Navigation, Part 2: Navigation Systems

Advertisement

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

There are five types of traditional navigation menus or widgets, which can be ordered from simplest to most complex:

  1. Menu bar
  2. Regular drop-down menu
  3. Mega-menu
  4. Separate page
  5. 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

Almost every website has a persistent horizontal or vertical bar to accommodate its top-level categories.

The first and most basic navigation anchor - a horizontal or vertical bar of links2
The first and most basic navigation anchor — a horizontal or vertical bar of links. (Large preview3, Image source: top: Sharify4, bottom: Arbor Restaurant5)

Recommendation

The most important or most frequently accessed items or categories should go in the navigation bar.

Explanation

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.

Problems

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.

Multiple rows of navigation make it more difficult to access the content.6
Multiple rows of navigation make it more difficult to access the content. (Large preview7, Image source: Bay Street Biergarten118)

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.

Vertical navigation can hamper the presentation of content on wide screens.9
Vertical navigation can hamper the presentation of content on wide screens. (Large preview10, Adapted from: Bay Street Biergarten118)

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

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.

A drop-down menu vertically stacks its entries in a single column.12
A drop-down menu vertically stacks its entries in a single column. (Large preview13, Image source: Blurb14)

Recommendation

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.

Explanation

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.

Problems

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.

If screen space is critical, adjusting the menu to the screen’s orientation is a good workaround.15
If screen space is critical, adjusting the menu to the screen’s orientation is a good workaround. (Large preview16, Image source: Sunglass Hut17)

Mega-Menus

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.

A mega-menu is a larger, more sophisticated drop-down menu.19
A mega-menu is a larger, more sophisticated drop-down menu. (Large preview20, Image source: Design Chemical21)

Recommendation

If the options require both text and pictures, then a mega-menu is the best choice.

Explanation

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.

Problems

Even a mega-menu is limited in space. If the number of items is too high, then a separate page becomes inevitable.

Separate Pages

A fourth way to display items or categories is on a separate page.

A separate page spaciously accommodates subcategories.22
A separate page spaciously accommodates subcategories. (Large preview23, Image source: Danske Bank24)

Recommendation

If the menu requires text, pictures and descriptions, then a separate page is best.

Explanation

Accommodating this kind of navigation as a mega-menu might be possible, but only if the descriptions are just a couple of lines long.

Problems

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

Finally, dynamic filters are a complex yet powerful way to navigate content, whereby users assemble a set of their desired content on the fly.

Complex yet powerful, dynamic filters enable users to generate a custom set of content on the fly.25
Complex yet powerful, dynamic filters enable users to generate a custom set of content on the fly. (Large preview26, Image source: Walmart27)

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.

Dynamic filters are often appended to traditional navigation.28
Dynamic filters are often appended to traditional navigation. (Large preview29, Image source: Kmart30)

Recommendation

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.

Explanation

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.

Problems

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.

Footnotes

  1. 1 http://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/04/01-navigation-bar.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/04/01-navigation-bar.jpg
  4. 4 http://sharify.it
  5. 5 http://www.arbor-restaurant.co.uk/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/04/02-navigation-stack.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/04/02-navigation-stack.jpg
  8. 8 http://baystreetbiergarten.com/
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/04/03-navigation_bar.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/04/03-navigation_bar.jpg
  11. 11 http://baystreetbiergarten.com/
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/04/04-dropdown-menu.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/04/04-dropdown-menu.jpg
  14. 14 http://blurb.com
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/04/05-dropdown-menu.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/04/05-dropdown-menu.jpg
  17. 17 http://sunglasshut.com
  18. 18 http://www.nngroup.com/articles/mega-menus-work-well/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/04/06-mega-menu.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/04/06-mega-menu.jpg
  21. 21 http://www.designchemical.com/blog/index.php/tutorials/wordpress-tutorial-create-your-own-custom-mega-menu-styles/
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/04/07-separate-pages.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/04/07-separate-pages.jpg
  24. 24 http://danskebank.co.uk/en-gb/Personal/savings/Pages/savings.aspx
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/04/08-filter.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/04/08-filter.jpg
  27. 27 http://www.walmart.com/browse/computers/tablet-pcs/3944_3951_1078084?browsein=true&povid=cat1078524-env377582-moduleA062911-lLinkLHN6TabletPCs&fromPageCatId=1078524&catNavId=1078524
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/04/09-dynamic-filter.jpg
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/04/09-dynamic-filter.jpg
  30. 30 http://www.kmart.com/
  31. 31 http://www.smashingmagazine.com/2013/12/03/efficiently-simplifying-navigation-information-architecture/

Overview of this article


Page 1/3»
Page 1: Traditional Navigation Menus

↑ Back to topShare on Twitter

I am a freelance user interface designer based in Greece. Having studied Social Sciences and Philosophy, I believe that a proper philosophy of language is crucial to any well-designed social or digital information system. My main areas of expertise are: Interaction Design, Information Architecture, Empathy, Usability, Nomenclature.

Advertising
  1. 1

    A little faster read than the first article but just as informative.

    3
  2. 2

    Great article. If only whoever made the online store for Mediamarkt in Switzerland had read this before. shop.mediamarkt.ch

    I can’t believe a company of their size makes mistakes in navigation like that. The reply from the Head of eCommerce who replied to my complaint: “we are aware of the problem and will fix it in the coming months”.

    Browse a little and see if you can figure it out. Its one of the biggest UX fails I have come across in a while. I noticed it after about a minute, why didn’t they?

    1
  3. 3

    Jonathan Rogers

    May 10, 2014 11:49 pm

    What a great article, very informative. As someone new to this field I find this very helpful when creating the layout.

    -1
  4. 4

    Cool and informative article. I came across this article searching for alternatives for the standard navigation menus. I’m now working on my personal portfolio website and I feel like none of the obvious navigation methods are working for my site. Al these navigations are mundane and I feel they don’t really work 100% well.

    Due to UX I don’t want to stray to far of the beaten track, but what alternative navigation methods would be useful to organise alot of projects?

    -1
    • 5

      On most portfolios you can see live-filters, so you have all your projects printed on one site and can filter categories. I think that´s a nice way to do it.

      So when you say these navigations are mundane, what do you mean by that? Because a client of mine who recently wanted her website redesigned (she´s an artist) said that she doesn´t like the standard look, and I told her that most websites look “the same” not because everyone is lazy and nobody has new ideas, but because these are established patterns that are easy to use. So you´ll have to choose between making something new, but harder to use or something that already exists but is very easy. But perhaps I´m assuming to much out of your comment :D

      0
  5. 6

    Maybe informative for a web-design beginner, but aren’t you just stating the obvious?

    1
    • 7

      Hi Kelly,

      actually, many recommendations in this article are not as common, even among seasoned professionals.

      Many usability studies compare navigation widgets and conclude, for example, that mega-menus are more popular with users than regular dropdown menus. My argument, by contrast, is that choosing a type of widget should depend on the amount of information that is necessary to explain the navigational choices, not the widget itself. Some widgets work better with little information, others with more. This is why I ranked them from simplest to most complex and recommended to choose the simplest, if more than one widget can accommodate the respective choices.

      A second point that is often discussed in the community is how to implement search. Many argue that, especially on mobiles, designers should prioritize search. I disagree with that for the reasons stated in the article.

      And finally, there are still many sites, even big ones, that invest a considerable amount of resources into improving the secondary navigation. This, however, can come at the expense of properly developing the primary navigation. And this could lead to users leaving the site as many do not bother much with secondary navigation if the primary navigation fails them.

      So, ultimately, I would say that the above recommendations are not as common as they should be.

      Hope this helps.

      1
  6. 8

    On wide screens, in fact, we actually do NOT want the content, unless being image-rich, to take up the whole screen. It harms the readability.

    1
    • 9

      This depends on the content and the purpose. I am working on a large patient health system where we do want the content to fit a wide screen. There is a huge (and I mean huge…) amount of patient health information to display, which is not that ‘image rich’. The consultants want to see as much information as possible in one view – and they are able to customise and organise the content in to single or multiple columns, taking up the full screen width if they wish.

      1
  7. 10

    Can’t wait for part 3!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top