Hamburger Menus and Hidden Navigation Damage UX
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 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.
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
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
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. 👅 🍭