The Truth About the Hamburger

Posted by in Posts

I attended the UX Mobile Immersion conference April 7–9, and the two topics that the speakers loved to hate on most were the “hamburger” icon and carousels. I’ll share a bit of what I learned about the hamburger icon here, and about the carousel in a later post.

This collection of mobile website headers shows the "hamburger" icon in the top left.

This collection of mobile website headers shows the “hamburger” icon in the top left.

What is the hamburger icon?

The hamburger icon is that group of three little lines you see at the top of some mobile sites. Pioneered by Xerox, adopted by Apple, and then quickly used on many other websites and applications, the hamburger menu provides access to hidden options that wouldn’t fit on a small screen. Also called “Mr. Liney“, the hamburger menu is now infamous for being an elegant-looking solution to an interface problem that we in the Web design world love, but that too many other users just don’t understand.

In his session, Luke Wroblewski explained how we’ve felt justified in using it: “Every site’s using it so people are familiar with it now. Facebook trained a billion people on how to use it.” But actual usability testing has proven over and over again that not everyone is familiar with the hamburger. The Nielsen Norman Group’s research from earlier this year verifies that users are still unfamiliar with the “three-line menu icon.”

Further studies show that even when users do know what the hamburger represents, hiding your site’s primary navigation behind it can cost you user engagement.

Image of a tweet from Luke Wroblewski: "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."

Recently, our own UCD group tested the hamburger icon on one of our Web applications (using our new GoPro camera!) and got similar results. People didn’t see the icon at the top, and had to be prompted to click it. Several of them even mentioned that they didn’t know what the icon meant.

Despite the seeming ubiquity of the hamburger, even big sites like TIME magazine are discovering the usability of it is less than ideal. First, they added the word MENU to their hamburger icon, and now they also have a helper tooltip that comes up and explains what it is!

What to do about the hamburger?

The study being referenced the most right now is an A/B test performed by the team for the site CaffeineInformer. The demographics for the site are skewed toward a younger (25-34) audience, which is also the demographic that most readily identifies the hamburger icon, yet the testing showed that the MENU button was clicked by 20% more unique visitors than the hamburger button. (Previous testing had revealed that having a border around either MENU or the hamburger icon to make each look more like a button also increased success.)

Image showing 20% better usage for a menu using the word MENU

An A/B test showed that the word MENU with a border around it was clicked by 20% more unique viewers than the hamburger.

So instead of using the hamburger for now, it might be wiser to use a MENU button. That’s what our UCD team ended up doing for the application I mentioned above. It’s also wise to keep high-level, site-wide navigation either visible at all times or grouped in ways that make sense through some of the other creative interface methods out there. At the conference, we were shown some of those methods, like segmented controls, toggle menus, and contextual menus to name a few.

Finally, I propose we do a little more thinking on how navigation can condense and be presented at smaller screen sizes on a given site, whether it is using a menu button or some alternative method. And most importantly, test, test, test!

Image of a tweet: "hamburger menu shouldn't be a crutch to automatically transfer a huge list from web to mobile."

I’ll talk about carousels in another post. In the meantime, consider this: http://shouldiuseacarousel.com/.