Mobile traffic is a significant part of most websites, and smooth navigation for mobile users is critical. Most websites use the hamburger navigation icon to display the menu as it’s become a default option for this.
Is that a good idea? There’s a good chance that it’s not.
Exis Web tested the hamburger against the word “MENU”, created 3 different iterations. These were the results:
While the test only ran for 5 days, their (preliminary) results showed that the word MENU + border/hamburger worked better than just plain hamburger.
Guys over at Booking.com tested the button as well – no difference in their case.
Testing the hamburger myself
One of our clients is an ecommerce site selling scented candles. Mobile traffic is much more important than desktop in their case. This is their last 30 days:
We decided to test the hamburger icon, and came up with these challengers based on what other people had tested (we tried to innovate as well, but couldn’t come up with a totally new, better icon).
In addition to these we added one variation where we made the “hamburger + menu” icon pink (one of the colors on the website, not chosen randomly – the idea was to draw more attention to the icon via color).
We ran the test for 6 weeks (total sample size ~240,000 users, each variation had about ~2800 purchases), and this was the result:
(Click to enlarge)
Key outcome: All 4 treatments brought in more revenue than the control. Not clicks, engagement or other soft metrics. Dollars.
This outcome is worth an extra couple of hundred thousand dollars / year. Not too shabby for just switching out the icon.
This was the winner:
We ran a 3-week long follow-up test as well, testing other alternatives, but failed to move the needle (winner of the 1st test remained best):
(Click to enlarge)
Why is the hamburger icon confusing (to some?)
Well, do you think it’s clear and obvious? Probably not. The icon was designed in 1990 for a whole different world. Just carrying it over to today does not make a lot of sense.
While it is ubiquitous these days, not everyone is savvy enough to understand it. So imagine that you’ve never seen the icon. Or maybe you’ve seen similar icons, like these:
These icons are:
- Motorola Hardware Menu Button
- MS Word Bullet Butcon
- Android Holo Composition Icon
- Android Context Action Bar Overflow (top right on Android devices)
No wonder it’s confusing. When you read Norman Nielsen’s guidelines for designing icons, they recommend you use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning. Test the icons for recognizability: ask people what they expect the icons to stand for.
Their own research into icon usability concluded that “Users are still unfamiliar with newer icons, including the three-line menu icon and the map-marker icon”.
Okay, so what’s better?
Our own test showed that the word MENU helps + using a color to make it stand out from the noise can help.
Luis Abreu recommends displaying the full menu as a list all the time: “As long as it’s evident as website navigation, people will still scroll past it and will definitely be immediately exposed to the available options.“
UX guru Luke Wroblewski has been voicing out against hamburgers on multiple occasions, like here:
My biggest gripe w/ the "hamburger" menu isn't the icon, it's that it has become a way to get all our old desktop menus on mobile.
— Luke Wroblewski (@lukew) March 12, 2014
Adrian Zumbrunnen proposes that we establish the context first:
“We know from the theory of gestalt principles, more specifically the proximity principle, that objects which are positioned near each other, are perceived as a group. So why not provide initial context by using this principle, and then fade out the “Menu” label as the user starts scrolling?”
By showing / hiding the labels during scroll, we can make sure that the user gets a chance to learn the icons associated action. We could even fade in the label once the user scrolls up again.
Don’t rely on the default option when it comes to the navigation on mobile sites. There are tests where hamburgers butt was kicked, and tests where a replacement made no difference. Test your menu icon – run both user tests as well as a/b split tests. Learn how your particular audience responds to it, and figure out what works best.