Hamburger menus and why they damage your site’s 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

Our UX blog is on the move...

We're now publishing all of our brand new content on the UserZoom UX blog. All of our previously published articles will also be migrating to UserZoom over the coming months.

Don't worry, we'll still be just as accessible, interesting, helpful and entertaning as ever. We just have a different name and an owl instead of a question mark for a logo.

Come say hello!

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.

5 Responses to “Hamburger menus and why they damage your site’s UX

  • Your scrolljacking is also bad for UX.

    • Timi Olotu
      3 years 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
      3 years 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.

  • What IS a “hamburger menu”?
    (Does that mark me down as dumb user …..?)

    I landed at this blog after searching for “Why do websites hide navigation” …. after a particularly frustrating click through some merchant’s sites, each with only 1 to 3 links in a (minimalist) Menu Bar.

    While here….
    Why is the text grey? It’s hard to read (eye-straining) … esp. with the acres of empty white space.

Leave a Reply to Jules Cancel reply