Last week, a new website client (Rob Levin, president of the Bookhouse Group, a company that makes commemorative books) was on a conference call with his team, sharing our progress. Rob and his team were using different browsers, and I got a concerned email from Rob. Why couldn’t his team see the page navigation buttons?
What Rob saw:
What they saw:
Rob’s computer was opened to full screen view, and his team must have been accessing the site from a tablet (or smaller screen). What none of them realized,
and most of us don’t, is that mobile-friendly, responsive design often collects the menu buttons behind the hamburger icon.
You might recognize this more as one patty between two buns than what mobile apps want you to see: an iconthat is supposed to signal a list. Without dropdowns, mobile apps don’t have enough screen to display the menu items.
So in theory the hamburger is a good idea. You may have pulled up a site or app on your small screen only to be greeted by a jumble of menu items. When the site is not responsive to the size of the device, let’s just say it doesn’t make for a great user experience. Click. Gone.
The hamburger, though, is not yet universally known—especially when viewing websites at reduced sizes. People still expect to see a traditional menu. This is a problem! I agree with research from the Nielsen Norman Group: “For an icon to do its job, it needs to give a user a clear ‘scent’ for what to do next.” (For comparison, users are closer to accepting a magnifying glass as a symbol for searching than they are to recognizing the hamburger as the menu icon.)
Here’s what I have found helpful for hamburger decisions
- If you have a simple four-button navigation menu, use itinstead of the hamburger. If your site is targeted to people coming to get very specific information (such as a restaurant), add the logo and great image and offer a clear and easy jump to the food menu, reservations, phone number and directions.
- Clear labels help users make decisions faster, and that includes labeling the hamburger. Bear with me as I take you through some highly relevant research by James Foster of Exis Web(http://exisweb.net/mobile-menu-abtest). Foster tested more than 50,000 mobile users to determine which hamburger version was most effective:
After No. 3 (hamburger in a box) received the most clicks, he tested it against refined options.
This time, the hamburger in a box beat only Option No. 2 (MENU in a box, 22 percent less effective). But Option 1 (MENU with a border) did 5.7 percent better and Option 4 (MENU with a border and hamburger?) did 12.9 percent better—a clear winner.
Four words: MENU in a box
What this showed is that our flat hamburger icon is not the best choice for communicating the menu of a responsive website on a smaller screen. James suggests using MENU with a box and making it look more like a button. This helps MENU look like it should be clicked. Since users are more familiar with buttons, they used this option more often.
When haters questioned his results, Foster did another round of studies to squelch them. He ran the tests using 240,000 mobile visitors. Foster compared the hamburger in a box against MENU in a box. His results were affirmed. MENU in a box outperformed hamburger in a box by 20 percent.
(A strange little artifact of his study: Android users are almost three times less likely to click a navigation button than iPhone users. Interesting, huh?)
Back to Bookhouse Group
Putting research into practice, I tossed the hamburger from Rob’s site and subbed MENU in a box.
This design should relieve the folks at Bookhouse Group. Their failure to find the menu was not an anomaly. Hopefully other web developers will adopt MENU in a box and stop the head scratching over so many hamburgers out in the wild.