“Summary: Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.”
“Hamburger Menus and Hidden Navigation Hurt UX Metrics”
Nielsen Norman Group, June 26, 2016
Design Patterns, Mobile & Tablet, Navigation
By Kara Pernice and Raluca Budiu
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.
Why Study Hidden and Visible Navigation
Responsive design has many merits; however, one of its less fortunate effects has been an excessive popularity of mobile-first designs that translate poorly onto larger desktop screens. To be clear, “mobile-first” itself is not the issue. Rather, the issue is taking sufficiently good mobile designs and porting them to desktops where they do not work as well. Mobile-first should not equal mobile-only.
(Obviously, there’s a general principle here: if a design technique is intended to span platforms X and Y, then an uncompromising X-first approach will make Y an afterthought and harm users on Y. As explained in our course on Scaling User Interfaces, to design for X and Y, you need to consider the strengths and needs of both and adapt the two versions of the website accordingly.)
Hidden navigation, such as the hamburger menu, is one of the many patterns inspired by mobile designs. Screen space is a precious commodity on mobile. To meet the challenge of prioritizing content while still making navigation (and other chrome) accessible, designers commonly rely on hiding the navigation under a menu — often indicated by the infamous hamburger icon. Like a cheap fast food chain, it got designers addicted to its convenience, and now serves millions each day, both on mobile devices and on desktops.
While our qualitative user testing has repeatedly shown that navigation hidden under a drop-down menu is less discoverable on the desktop, we wanted to measure the size of this effect in a quantitative study and assess the relative impact of hidden navigation on the desktop versus mobile. To do so, we partnered with WhatUsersDo (a company specializing in remote usability testing) to run a study with 179 participants who completed tasks on 6 different sites, both on smartphones and desktops. The results of this large study are reported in this article. An additional article includes our detailed research methodology and images of the menus tested.
See Also: Responsive Web Design (RWD) and User Experience
Want the latest in your Inbox from the Nielsen Norman Group? Sign up for their weekly newsletter. Always short insightful and useful. (No they didn’t pay me to say that nor include this link. It’s simply that I find it very useful and informative and want to share it at-large.)
Alertbox E-Mail Newsletter – “The latest articles about interface usability, website design, and UX research from the Nielsen Norman Group. You will receive one brief email every week containing summaries of our latest articles and information about upcoming events and research.“
