Oct 7, 2017

Why probably hamburger in design does not work.

Throughout my professional experience, I’ve always met 2 types of clients, the ones that want a hamburger menu as their navigation choice and the ones that don’t.

If you haven’t heard about this concept, the hamburger menu is defined as such:

The hamburger button or hamburger menu (also known as optionshotdog or pancake) is a button placed typically in a top corner of a graphical user interface. It takes the form of an icon that consists of three parallel horizontal lines (displayed as ), suggestive of a list,and is named for its resemblance to the layers in hamburgers, pancakes, or a hotdog in a bun.

Most clients will prefer this option as it simplifies their internal processes for allocating access throughout the site, normally when you don’t know where to put it, or expecting that users will eventually open the hamburger tab and use that as a promotion to a specific page.

But let me highlight in short why it does not work well.

Visibility and therefore understanding.

It lacks visibility, users do not know what is behind it until you press it.

A study on Design patterns and navigation conducted by the Nielsen Norman Group an Evidence-Based User Experience Research agency conducted an analysis on Hamburger Menus and Hidden Navigation and in their summary, they added:

Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.

They also added:

Our quantitative usability testing of hidden menus (such as hamburger icons) and visible menus (such as links across the top of pages) reveals that:

  • Hidden navigation is less discoverable than visible or partially visible navigation.
    • When navigation is hidden, users are less likely to use navigation.
    • If people use hidden navigation, they do so later in the task than if it were visible.
  • Hidden navigation provides a worse user experience than visible or partially visible navigation does, in both mobile phones and desktop user interfaces. This finding holds true across multiple UX metrics including users’ assessment of task difficulty, time spent on task, and task success.
  • On desktops, hiding navigation degrades the experience and the navigation discoverability more than it does on the phones.
  • Hiding the navigation mostly affects content that is not directly accessible through an in-page link.

They noted that the hamburger menu was used less and last in the process, the user tries to find the content on its main view before proceeding to the hidden menu.

The task also took longer to perform, about 5 to 7 seconds longer against when the content immediately available.

On the desktop, it took participants 5–7 seconds more to use the navigation when it was hidden. On mobile, that difference was smaller (about 2 seconds). (We did not test sites with only visible navigation on phones.)

On the desktop, it took participants 5–7 seconds more to use the navigation when it was hidden. On mobile, that difference was smaller (about 2 seconds). (We did not test sites with only visible navigation on phones.)

The content discoverability for hidden navigation was lower than for other types of navigation for both mobile and desktop. (We did not test sites with only visible navigation on phones.) Although content discoverability on mobile tended to be slightly higher than on desktop, this difference was not statistically significant.

The content discoverability for hidden navigation was lower than for other types of navigation for both mobile and desktop. (We did not test sites with only visible navigation on phones.) Although content discoverability on mobile tended to be slightly higher than on desktop, this difference was not statistically significant.

Among these there are other points:

  1. Low salience: A small icon is harder to notice on a large screen size (and even on a smaller mobile one).
  2. Low information scent: The menu icon or label doesn’t usually tell people what’s inside it, so they have no idea if they’ll find what they need by clicking on it.
  3. Extra work: To figure out what’s inside the menu, people must expand it. That increases the interaction cost for users and makes them less likely to do it, or, if they do it, they may take longer.
  4. Lack of standards: Hidden navigation is implemented in different ways by different sites. Some sites use it, some don’t. On mobile, patterns are starting to form, but on desktop there is a lot of variability and inconsistency in the placement and the labeling of hidden navigation.
  5. Low familiarity: Especially on desktops, hiding navigation is not a common pattern and people may not expect to find global navigation under an expandable menu. Some people may also still be unfamiliar with the hamburger icon that is frequently used for such menus. This low familiarity is exacerbated by the lack of standards which reduce long-term learnability (as further discussed in our course on The Human Mind and Usability, learning is facilitated by repeated exposure to the same pattern.)

Navigation Recommendations by the Nielsen Norman Group

What are the takeaways of this research for your next design project?

Desktop: There is plenty of screen real estate for displaying navigation options, and we recommend:

  • Do not use hidden navigation (such as hamburger icons) in desktop user interfaces.
  • Instead display the top-level navigation options, usually across the top of the page or down the left side.

Mobile: For phones, there is no hard-and-fast rule. But our general recommendations are:

  • If your site has 4 or fewer top-level navigation links, display them as visible links.
  • If your site has more than 4 top-level navigation links, the only reasonable solution is to hide some of these. We did find that the usability penalty imposed by hidden navigation is very present on mobile, but it is smaller than on the desktop. Thus, we recommend making this design tradeoff because the usability of an expandable navigation menu is far better than that of alternative designs.
  • Provide in-page links to important information on your site, or use other methods of supporting the hamburger (or some other hidden) menu.

But I always like to add; look at your content architecture, reduce your main navigation as much as possible, make it clear to the user what each section does, imagine them as their own services, is there something that would fit contextually better with other content? as for example, if you have your contact information on your footer, would you need your own contact label on your navigation? Do your users visit your product only to find your contact information? there are more studies implying that user actually uses Google instead of having direct contact with a service, for reasons as:

  • Predictability (they know where the contact will appear from previous experiences)
  • Simplicity (searching for it in Google is often simpler than navigating a site to find it)
  • Efficacy (quick access to the information they require)

Conclusion

In short, avoid using hidden navigation and use it only in last resort, when things as informational architecture fail, and there is not enough screen estate even then, try to use a combination, do not hide everything under the menu.

Before deciding hamburger menu is the way to go, do some research, you will find possibly better alternatives with your content.

sources:

  1.  Bawcombe, Libby (August 27, 2014). “The hamburger menu-icon debate”The AtlanticAtlantic Media. Retrieved April 10, 2015.
  2. Campbell-Dollaghan, Kelsey (March 31, 2014). “Who Designed the Hamburger Icon?”Gizmodo. Retrieved February 2, 2016.
  3. Lessin, Jessica (March 18, 2013). “What’s a ‘hamburger’ button? A guide to app features”The Wall Street JournalDow Jones & Company. Retrieved April 10, 2015.
  4. KARA PERNICE and RALUCA BUDIU  (June 26, 2016). “Hamburger Menus and Hidden Navigation Hurt UX Metrics” Nielsen Norman Group Retrieved October 7, 2017

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top