When it comes to controversial UI, the hamburger menu has had its fair share of criticism, dismissed as everything from ‘mystery meat’ to ‘the devil’. We take a closer look at the hamburger menu and alternative navigation patterns.
The hamburger menu icon has been declared past its sell-by-date more than once. For such a seemingly innocuous UI element – 3 short lines situated somewhere in the periphery of your web or mobile app interface – the hamburger icon has generated a lot of controversy in the last few years. With headlines such as “Why it’s Totally OK to Use a Hamburger Icon”, designers and UX-perts certainly have strong views about this navigation pattern. But is the hamburger menu always a bad mobile UI alternative? And if it is past its sell by date, what are the best alternatives out there?
It’s easy to see why the hamburger icon gained popularity at breakneck speed. First spotted in the Xerox Star way back in 1981, the didn’t gain traction until the explosion in mobile device use over the last decade, when app and responsive web designers were suddenly faced with a problem of real estate. Mobile screens are small, space is at a premium and users still expect the same functionality they enjoy on web apps. So designers came up with a solution – an unassuming 3 line icon in which more advanced menu navigation features are hidden. And the hamburger was born. On paper, the element fulfills its function of hidden-drawer navigation just swell. Don’t have enough room for all your menu buttons on your screen? No problem, tuck them into a hamburger menu and problem solved.
Simple and elegant, right? Which is why designers love the hamburger menu. Problem is, according to many UXers and usability experts, it just doesn’t work..
Hamburger menu positives: clean user interface, simple concept, directional navigation
Before we delve into all the reasons why hamburgers are bad for your UI health, let’s look at the upsides. Most obviously, it often just makes your interface look better. Scalable and tidy, the hamburger provides an elegant solution to over-cluttering, and is one of the fastest ways to achieve the minimalism so beloved of UI designers right now.
Relatedly, the hamburger helps you avoid overwhelming the user and causing ‘decision fatigue‘, a phenomenon that occurs when we are faced with too many options. In this situation, explains psycho-economist Sheena Iyengar, users are actually 10 times less likely to act when faced with too many options or choices. So by concealing your navigation options behind a simple hamburger icon you’re eliminating decision fatigue.
The hamburger menu also devolves control onto the user by allowing them direct access to items that interest them. As the Nielsen Norman Group adumbrates in their post on direct versus sequential access, allowing users to go straight to a specific menu item instead of having to follow a pre-ordained navigation flow to reach their desired destination. This direct navigational access makes for a faster user experience for users who know exactly where they’re trying to get to, cutting clicks and raising perceptions of functionality.
In short, as a navigation pattern the hamburger can help you keep things simple, eliminate information overload, and facilitate direct access.
Watch Sheena Iyengar’s TED talk on decision fatigue
So what you’re saying is hamburger icons are awesome navigation elements, right?
Sounds great, doesn’t it? But hold up. Fact is, hamburger menus have been shown to create some major headaches when it comes to user engagement. CTO of zeebox (now Beamly) Anthony Rose, writing in The Next Web, reveals that when his mobile app took the plunge and swapped over from tabbed navigation to ‘hidden-drawers’ like the hamburger, user engagement fell by 50%.
Why such a drastic decline? “The hamburger contributes to the reduction of discoverability of functions, because its contents are hidden by default; this means the user misses out on interesting functionality,” explains Justinmind‘s own UX-UI Designer Sergi Arevalo. “When users are starting out with a new app, they tend to try things out more if the app has a navigation menu rather than just a hamburger.”
The statistics back that up. Spotify dropped the hamburger in May 2016 and reported a 30% increase in navigation item clicks. Facebook found that as engagement metrics went up after dropping the burger, other metrics such as satisfaction, speed perception and revenue upticked as well. Pretty compelling case studies for any UI designer searching for the best (or worst) mobile UI patterns.
All this is assuming, of course, that your users know what the hamburger icon even means from the start. For web and mobile app designers and digital professionals it’s a given that the hamburger conceals menu navigation options; but according to data from Moovweb, some users are none the wiser when faced with the UI element. This is particularly true for users over 45: only 52% of this group know what the hamburger icon means. Moovweb advises that engagement can be lifted by 61% if you label the hamburger with the word ‘menu’. Which makes the hamburger look like a petty shabby icon as far as user experience goes.
And even if users do know what those 3 little lines signify, the hamburger icon gives no clues as to the menu’s actual contents until it’s clicked on. Users don’t know what they’re looking for, says James Archer, Chief Design Officer at digital agency Crowd Favorite, so they need obvious signage to give them ideas on where to go or what to look for. Hamburger gives no clues whatsoever of what might be hiding behind it. It is, says Archer, the epitome of ‘mystery meat navigation’, navigation that doesn’t make any sense to the user.
To cap it all off, including a hamburger can mess with traditional UI patterns, such as the top-bar navigation in iOS systems. Apps can end up with an overcrowded top-bar which leads to mis-clicks and user frustrations.
Is the hamburger menu ever a good UI option?
Despite its downsides, in certain types of app the hamburger can be a viable and effective option. James Archer points out that in apps that are used repeatedly by trained users, such as a medical application used by nurses throughout the course of the day, hidden-navigation elements such as hamburgers can be time- and space-saving. In fact any app that is aimed mainly at experienced users doesn’t need to be entirely intuitively designed and can rely on codified icon meanings; some users value density of information rather than intuitive navigation. In this kind of design project you can user test an interactive prototype of your app to validate your navigation flows.
Certain types of sites have better engagement than others when it comes to the hamburger. Moovweb found that content sites had some of the lowest hamburger clickage: not surprising considering users are there to read particular articles or scan headlines, not search specific content sections. The role of browsing in an app can be determinate for whether you should consider a hamburger menu pattern: sites on which users do little browsing have low hamburger use, whereas browse-heavy sites like clothing stores had some of the highest hamburger engagement rates (around 26%).
If you do choose to use the hamburger, it’s probably best to label it so less savvy users know what it’s for, make it eye-catching and obviously clickable, and consider pairing it with a tab menu which makes the most popular navigation options clear.
Alternative UI patterns to the hamburger menu
If you decide that the hamburger isn’t right for the particular design project you’re working on, you have plenty of UI alternatives to experiment with. Test out any of these options in an interactive prototype and measure your user engagement and experience. Plus check out our blog series on mobile UI patterns for more navigation inspiration.
Priority+ and the scrollable tab bar: The tabbed menus found in the likes of Instagram and Facebook’s apps, in which the most common features or functions are clearly displayed in a tabbed menu in the lower part of the screen, are a common alternative to the hamburger. The scrollable tab menu makes an attempt to combine the navigability of the tab with the tidiness of the hamburger: the common features are still visible, and less-sought features are accessed by scrolling along the tab. The scrollable tab falls under the umbrella of Priority+ navigation, a term thought up by front-end devloper Michael Scharnagl in an attempt to define navigation patterns that leave important navigation elements exposed and hide the rest behind a tidy ‘more’ link. It’s not a bad compromise but Priority+ struggles with the same discoverability problems as the hamburger.
3D Touch: The potential for 3D Touch to more or less replace the hamburger is kind of exciting. Trailed by Apple in 2015, 3D Touch incorporates a new gesture into mobile interactions – pressure of touch. By pressing harder or longer on your devices screen, you’ll reveal the hidden navigation elements that would once have gone behind the hamburger. Apple watch users have never had to worry about hamburgers thanks to this technology, so it probably won’t be long before Apple and others incorporate it into a wider range of UIs.
Fly-out menus: Of course, menu navigation patterns don’t have to be bleeding edge to be functional. Take the fly-out menu, an oldie but that goodie that has been around since the early days of web design. For fly-outs, you combine a text-based topbar menu with sub-menus that fly out when users hover over them. Of course, with mobile apps hover isn’t an option, so gestures like swipe or toggle could be swapped in.
Menu carousel: The menu carousel functions just as a homepage carousel does on a desktop site: features and functions slide into and out of view automatically while the user just sits back and takes it all in. When the user sees something that interests them, they click it. This is a great option for minimizing clicks, but beware user boredom: exposing your users to tons of navigation options that are of little interest to them might very well cause them to abandon your app eventually.
Floating hamburger icon: if you’re still willing to give the hamburger a shot, consider taking it out of the overcrowded tab bar and making it into a floating action button. These buttons can be great for grabbing user attention, saving screen space, and overcoming reach difficulties in larger screen smartphones; downside is, like a lot of these navigation options, the menu contents are still hidden.
If all else fails, change your UI architecture
Steven Hoober as usual has an informed and interesting take on alternatives to the hamburger – completely rethinking your app architecture. Using the example of YouTube’s mobile app, Hoober explains makes the case for putting your app’s primary task in the middle of the page, and then making three secondary tasks obvious and clickable in the periphery, then placing all lower hierarchy functions behind a menu navigation icon.
Hamburger icon takeaway
So although the hamburger menu still has relevance in specific user cases or types of site, the alternatives are equally if not more compelling. “Like everyone I’ve used the hamburger icon,” confesses Justinmind’s Sergi. “In its day it was a leap forward for mobile apps , facilitating navigation and allowing us to create cleaner, ‘iconless’ interfaces. But its moment has passed and it’s time to evolve.”