Hamburger Menus and Hidden Navigation Damage UX

Visible Navigation

A joint NN/g and WhatUsersDo research project concludes that discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.

Usability testing of hidden menus (such as hamburger icons) and visible menus (such as links across the top of pages) using the WhatUsersDo platform 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 Usage

On Desktop and Mobile devices, navigation usage was lower when hidden, Source: NN/g

Hidden navigation provides a worse user experience than visible or partially visible navigation

This is true for both mobile phones and desktop user interfaces, as well as across multiple UX metrics including users’ assessment of task difficulty, time spent on task, and task success.

Hidden nav task time

Hidden navigation increased the average time taken to perform a task on Desktop and Mobile devices. Source: NN/g

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.

Based on these findings, designers should follow these three recommendations from NN/g:

1. Remove hidden navigation from desktop interfaces

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

  • Not to 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

Hamburger Menu

2. Use visible links on mobile where possible

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

 

Mobile navigation visibility

3. Use in-page links for important information

  • Provide in-page links to important information on your site, or use other methods of supporting the hamburger (or some other hidden) menu.

You can read the full Hamburger Menus and Hidden Navigation Hurt UX Metrics research article over on the NN/g site.

Video summary of hamburger menu research findings by Kara Pernice, Senior VP at NNg

Get a newsletter that isn't all about us...

Subscribe for weekly, hand-picked articles about UX, design, and more every Friday—from the Be Good to Your Users blog and the rest of the whole darn web.

...get a little taste right here. 👅 🍭

Lee Duddell
Lee Duddell is the founder of WhatUsersDo.

During 20+ years of working in digital, Lee became increasingly frustrated with the amateurish way that companies were making important design decisions. Personal opinions, hunches and incomplete data were driving experience design. And not user insight.

Lee started WhatUsersDo to fix this by making user research and UX Testing business as usual.

4 Responses to “Hamburger Menus and Hidden Navigation Damage UX

  • Your scrolljacking is also bad for UX.

    • Timi Olotu
      9 months ago

      You’re right, it’s bloody annoying. It’s rigged into the CMS but we’re trying to fix it. In the meantime, we hope the content is good enough to distract you from the scrolljacking.

  • I watch this on a phone screen and I found… a burger menu, only 3 main links…

    • Timi Olotu
      9 months ago

      I was curious to see whether anyone would spot that, Vincent! We’ve had the hamburger menu on our mobile site for ages now (way before this research was launched).

      We’ll be questioning their use and running our own UX tests when we redesign the site. As everyone else should do, rather than blindly follow the conclusions of this particular piece of (admittedly comprehensive) research. Hope you enjoyed the article anyway.

Leave a Reply