By Linda Bustos
Whether you call it the “hamburger,” “sandwich,” “hot dog,” “list icon” (or as I like to call it, the “Adidas”), that little 3-bar thing denoting mobile menus are growing in adoption. But we’re still not clear if it’s well understood by mobile users.
About a year and a half ago, Get Elastic ran a post called Don’t make these mobile menu mistakes, with design guidelines for menu icon usability. Has anything changed since then?
Cue the A/B tests
Not long after we ran that post, Get Elastic reader and owner of Detailed Image Adam McFarland ran an A/B test on DI’s responsive mobile menu, pitting a text-labeled “Menu” button treatment against the Adidas control. The text button improvement range was 20-35% for unique events, and 25-24% for total events, and less engagement of the search box. Conversion and AOV rose 17.44% and 9.44%, respectively. (Read the juicy details of the test on Adam’s blog and Get Elastic).
Exis Web tested the Adidas against “Menu,” with and without a border. “Menu” with a border was clicked 20% more often than the control.
Not to mention the anecdotal Tweets that support the idea that users still don’t understand what the 3-bar, like a double rainbow, all means…
@lukew Our usability suggested to put a “button” treatment around the three-bar icon as 9 out of 10 user had no idea what those were.
— Damir Danny Mustafic (@dmustafic) February 7, 2014
@lukew finding of our latest mobile lab test: more than expected did not get the meaning, others said “my mother wouldn’t recognize it”.
— aviendha (@aviendha85) February 7, 2014
If that’s not enough, take it from Neilsen/Norman Research:
Clear labels help users make decisions faster: they give good information scent about what will come next. Labels should still be used for newer icons, such as the three-line menu icon (or “hamburger” icon)…Users are still unfamiliar with newer icons, including the three-line menu icon (left) and the map-marker icon (right).
Users are still learning what these icons mean and how they behave, so it’s best to use a clear label. Besides, there’s enough room on desktop screens, so why not make it easier and faster for users to find what they’re looking for.
The old Web usability adage “don’t make me think” certainly applies to mobile. “Make it look clickable” applied to the links of old, and should apply to tappable targets on mobile. Hence, the Menu (clarity) with a border (clarity) trumps cleanness and cleverness.
Mobile menu design ideas
1. Use “Menu”
Based on the rationale above. This is, of course, a candidate for testing, but there’s strong support for using Menu by default. (Make it look clickable)!
Placement also matters, however. The Web has taught us that nav menus live on the left. Placing the button on the left, and below the logo bar may be more intuitive.
2. Make sure it doesn’t blend
With your logo, that is.
Discount Dance Supply’s menu is flush with its logo, it may be confused as a part of it.
Again, moving it down into the “content area” is a safer bet.
3. Group it with other navigation controls
eBags places the menu icon with Account and Cart, where it’s more likely to be recognized as navigation.
Burger menus may also be better understood grouped with the search box.
Contrast this with Starbucks. Links are separate from the burger menu, which floats around on its own. It’s less clear that it’s a clickable, useful element.
4. Consider placing it in the top right hand corner
As in the eBags example above. The reason right side placement may perform better is it’s easier to access with your thumb when you’re one-handing your phone (unless of course, you’re left-handed).
Image credit: Luke W
Truly responsive mobile design — design that switches navigation layout depending on which hand one’s holding a phone with — would be a useful application of sensors!
5. When in doubt, spell it out
Buckle makes sure you know where to start. Definitely test this, as not all users want to start with the menu.
Tips for testing mobile menus
1. Leverage qualitative testing tools
Affordable eye-tracking and user feedback tools like FengGUI or UserTesting.com can give you initial feedback of whether your menu is recognized as such by real users. Your own lab testing can provide the same qualitative feedback.
Conducting user tests before running A/B tests can help you form a more solid hypothesis (based on real, rather than assumed user friction) and focus your test designs.
2. Test the Menu against the Burger
Don’t just do it because of a few anecdotal examples. Find out for yourself whether Menu outperforms the Burger. Consider testing a button border vs. none, and even a combo meal of burger icon with Menu label.
3. Test placement
Test left side, right side, and grouped with other navigation elements (account/cart/locator and/or search box).
4. Measure the right stuff
Track engagement with the menu (and increase or decrease of use of search box), bounce rate, time on site and number of page views. Clear navigation supports all of these metrics.
Conversion rate, revenue and average order value are also affected by how easy it is to navigate the site.
Consider excluding tablet traffic from your test, as the experience is closer to desktop. You want to measure the impact of the hidden navigation on a small screen, in typical portrait orientation, with the common gestures of the smartphone user.
Via:: Get Elastic eCommerce
