[the hamburger’s] use”, and Zeebox notes: “The side menu has become fashionable on Android but not yet taken off on iPhone”.
The importance of doing your own tests
However compelling other people’s findings about their own sites/apps appear, they should not dictate how you design/redesign you website.
As demonstrated below in the Moovweb research, engagement levels of the hamburger/menu vary massively by industry.
The key lesson to learn is not that the hamburger is good or bad, or that hidden menus are good or bad, but that it is important to run your own tests.
- Conduct user tests: onsite and remote.
- Use A/B testing – show two different groups of web visitors different versions of your menu e.g. hamburger v MENU. (The beauty of web over apps, is that you don’t need anyone’s permission to test and modify).
- Use heatmaps – to study how people interact with menus and navigation.
Learn more about mobile user testing.
The truth about Facebook and the hamburger icon.
Critics of the hamburger also like to cite Facebook’s 2013 decision to drop the hamburger icon in favor of a bottom tab bar as vindication.
- This change only happened on the iOS app.
- The hamburger is still present on the iOS app on the bottom tab bar, albeit embellished with a MORE label.
- Three years later the m.facebook.com and the Facebook Android app still proudly sport the unlabeled hamburger icon.
- What does that tell you? a) Native iOS is different to mobile web and native Android; or b) The results of the changes on iOS didn’t encourage Facebook to follow up with either mobile web or Android.
Despite the immense importance of navigation on the mobile/responsive web, lack of conformity and the bitter debate that the hamburger encourages among design/UX professionals, it is amazing that there haven’t been more studies of menu use across multiple sites.
While not massive, there are two studies that are essential reading:
- Moovweb (April 2015) – studied interaction with the hamburger-based menu.
- Nielsen Norman Group/WhatUsersDo (June 2016) – studied user the different interaction rates between part-visible and hidden menus on web and mobile web.
Good burger/bad burger
Moovweb studied 50 sites that used its mobile/responsive commerce platform and made two interesting findings:
20% of mobile site users interact with the hamburger menu, making it the fourth most tapped button on site, behind select product (30%); homepage navigational menu (30%); and search (27%).
Hamburger menu engagement varied massively by vertical: apparel and accessories (26%); jewelry (21%); home & garden (21%); auto & construction (7%); content (2%).
Then working with one unnamed mobile travel site, Moovweb ran a test to compare engagement rate with an unlabeled hamburger icon and one that was labeled.
The results were striking. The engagement rate for the unlabeled menu icon was 10.8%; while labeled one received 17.3%; which is a 61% improvement.
Hamburger + MENU or MENU – hamburger?
While adding a MENU is the most common label to enhance the hamburger, there are variations, as seen above the BBC uses a SECTIONS label, while Facebook (only on the iOS app) uses MORE.
The question is: if you are going to add MENU to your hamburger icon, then why bother with the hamburger at all?
Jason Grigsby, co-founder, of Portland, Oregon-based mobile web development agency, Cloud Four, tells ClickZ.
“When people criticize the hamburger, e.g.Luke Wroblewski, they’re referring to the fact that the icon itself doesn’t convey enough meaning. People get confused by it.
So the argument is to avoid using the hamburger icon and instead use the word ‘menu’ or similar so people know what the hell you’re going on about.”
The new design of the Cloud Four site uses a MENU button, with a menu that slides down from the top.
The navigation menu, as Grigsby points out, is a whole different matter… and one we will be dealing with in detail in the next column.
Hidden menus: nice clean design or “out of sight, out of mind”?
To hamburger or not to hamburger… is only part of the question.
The other side of this debate concerns the whole nature of the menu, the fact that all the options are invisible unless the user taps the hamburger icon/menu button.
The clever thing that Luke Wroblewski pointed out is “out of sight, out of mind. This has become a rallying cry again the hidden menu and the poor old hamburger icon that has come to symbolize the hidden menu.
To date evidence to prove this theory is largely anecdotal, and based on apps such as Zeebox, Redbooth and Polar, (Wroblewski being one of these developers).
That’s what makes the recent Nielsen Norman Group/WhatUsersDo research so welcome: it’s web based, spread over six sites, with real users (179 of them), and its real research conducted by expert UX testers.
The research asked people to complete a task on the various responsive sites on desktop and mobile and studied whether people engaged better with/found it easy with:
- Hidden navigation – where they had to tap a hamburger or equivalent)
- Combo navigation – combination of hidden menu a visible navigational buttons, when required to.
- Visible navigation – only desktop sites; no mobile sites with visible navigation (only) were tested, which is a shame.
The key findings for mobile users were:
- People used menus considerably more on mobile than desktops
- People were 1.5 times more likely to use combo navigation (86%) than hidden (57%).
- More found it easier to discover content that interested them with combo (85%) than hidden (64%)
- Task took longer with hidden (70 seconds), than combo (61 seconds).
Nielsen Norman makes the following recommendations for mobile sites:
- If your site has four or fewer top-level navigation links, display them as visible links.
- If your site has more than four top-level navigation links, the only reasonable solution is to hide some of these [behind a menu button].
- Support the hamburger with methods such as in-page links to important information on your site.
Returning to the image above of the top six top ranking sites for “hamburger icon”. Three out of five that use a hamburger, use the unlabeled icon alone for navigation and one (TechCrunch) even uses an additional unlabeled rocket.
The BBC is the only one that adopts a combo approach to navigation. It has visible tabs for NEWS, SPORT and MORE (which is a menu) in addition to the Hamburger/Sections button.
Interestingly on older/smaller smartphone these three options are reduced to one MENU button.
A great example of the combo is Summit Metro Parks, which uses a labelled hamburger menu and four labelled buttons for key activities.
Mike D’Agruma, lead front-end developer, Evolve Creative Group, a web design agency in Akron, OH, USA, explains why he likes the Summit Metro Parks site.
“The hamburger/menu icon is at the top of the home screen. It has clear visual separation via color, size and treatment from surrounding content. Not only does it use of iconography, but includes a text descriptions. There is no assumption about that the user will recognize and know how to use the icon.
There are additional types of navigation competing for attention on the page. As well as the hamburger/MENU, there is a rotator/carousel with a clear call-to-action on each slide to help funnel users where the site wants them to go. Then there is a second-tier page navigation of highly visible and labelled buttons.”
The science of navigation
A really useful way to think about menus and navigation is to stop worrying about them and start thinking about what users actually want to do and make it really easy for people to do it.
If people are on a certain page there is a strong probability that they will want to do a finite number of things next. If these are not on the page, put them on visible call-to-action buttons, image links, text links etc.
Things that people might want to do, but are lower down the hierarchy of probable tasks can be placed in the menu.
The expert on this is Steven Hoober, president of 4ourth Mobile, who is recognized for his work on mobile touch-screen interfaces. He explains:
“The important thing is to stop thinking about navigation and site structure and think about what the user wants to do. They have priorities, which I call primary, secondary and tertiary actions:
- The primary actions should be addressed by the content in the center section of the page.
- The secondary actions are the thing that the user is most likely to want to do next. These should be addressed by visible and easily reached call-to-action buttons on the periphery of the page on the top navigation or adjacent to the primary content.
- The tertiary actions are the other things that users might want, but are less likely to be priorities. This is where your hamburger menu comes in.”
Hoober’s article on Why it’s totally okay to use a hamburger icon is essential reading.
The hamburger and the hamburger debate is here to stay.
Some people will continue to hate it. This from Nick Babich, editor of UX planet: https://uxplanet.org/
“To my mind, Hamburger is a bad option both for mobile and for desktop.”
And some will defend it. Phil Reay, head of insights, SessionCam, a tool for monitoring web customer behavior:
“Until a better solution to the hamburger menu is designed, our experience suggests that this catch all approach provides the best user experience for customers.”
The next column will look more closely at the design and user experience (UX) aspects of menus and navigation.
Read the report here: DNA of a Great M-Commerce Site Part 1: Planning
Read more here:: Should you use a hamburger icon on your mobile menu?