The Hamburger Icon Debate

Posted: 22 Mar 2016 05:30 AM PDT

Type "hamburger icon" into Google and once you scroll past the images of the icons, you'll notice a few articles about the history of the icon and a lot of articles debating if it's the solution for all our small screen navigation problems or if the hamburger icon will destroy humanity. You know the usual overreaction to every topic that involves designing websites.

Last week I began a series about icons and signs and I mentioned I would talk about the hamburger icon today. I'll talk about what the controversy with the icon is all about and I'll point you to some A/B tests before offering some thoughts about whether or not it's ok to use hamburger icons on wider screens.

Does everyone know what the hamburger icon is and does when they see one? No. Do more people know today than say two years ago? Yes. Will more people know what it means two years from now? Most likely, yes.

Two Different Arguments About Hamburger Icons

There are really two different debates around the hamburger icon ( ☰ ) or navicon as it's sometimes called. One of them has nothing to do with the icon itself.

Should global navigation be hidden by default?
Assuming some navigation will be hidden behind an icon or label, is the hamburger icon a good choice for the icon?

I suppose you can also include a third debate about whether or not to hide navigation by default on desktop sized screens assuming you're ok hiding them on mobile screens.

It's easy to find articles telling you to never use the hamburger icon or dire things will happen. Most of these articles discuss hiding navigation as well as the hamburger icon as the icon to use, however the latter debate is only there to prove their side in the first debate.

The controversy tends to be whether or not to hide global navigation and not how you choose to hide it. I get the impression the people arguing against hiding navigation don't care how it's hidden. I suspect they'd be equally against hiding navigation behind the words "click me for navigation."

A lack of recognition for the hamburger icon is cited as a reason not to use it to hide navigation, but again I think the people who argue this would argue against using any icon for the purpose of hiding navigation.

The two debates are tied together in the controversy, but I hope you can see they are in fact two separate issues and one of the issues isn't about the icon itself, but rather what it's used for.

Do People Recognize the Icon on Mobile Devices?

While researching hamburger icons for this article, I came across a series of tests James Foster ran on mobile devices in 2014. He compared the hamburger icon, the icon with the word menu as a label, and a border around the icon and measured how often each was clicked. I think James did a good job with the tests.

What many people take from these and similar tests is that the navicon combined with a menu label typically outperforms the navicon by itself. The same people often suggest this means you shouldn't use the hamburger icon.

What I take away, particularly from James' tests is that adding a border around something clickable makes it appear more clickable and so it gets clicked more.

The first test James ran suggested that adding the menu label to the icon increased clicks by 7.2%, which is pretty good until you notice that placing a border around the navicon (without the label) resulted in a 22.4% increase in clicks.

James later ran other versions of the test and I'd encourage you to check them all out. You can scan the articles for the results if you don't have time to read through them all.

My take away overall was that people did understand the word menu to lead to a menu more than they understood the icon alone, but of more importance was making the button look clickable. Another takeaway for me is that as time passes, more people recognize the icon and that will continue to increase as it gets used and seen more.

By the way James' conclusion to his own tests was that it's ok to use the icon.

I'm sure if everyone runs A/B tests on their sites now, we'll find the that more people understand what to do when they see the word menu than when they see the hamburger icon alone, but if we continue to test the icon, every year more people will know what the icon by itself means.. I'm also sure if we make buttons look clickable they'll get clicked more.

Is it Ok to Use the Hamburger Icon on the Desktop?

The last few years people have started using the hamburger icon on wider screens as a way to hide user interface, specifically global navigation. This is probably done in an effort to make a site appear simpler with a minimal aesthetic.

I wrote an article about this two and half years ago when I asked how important is it to have always visible navigation? At the time I was thinking about a site I wanted to design for myself and whether or not I needed to have the global navigation visible at all times or if it would be ok to hide it behind some kind of icon or icon and label combination.

I thought then as well as now that it's ok to do this provided you understand the potential downside.

It's an extra click to get anywhere on the site.
A mouse click is more effort than a tap.
People might not be familiar with the icon.

I said then I wasn't too concerned about the first two items as I felt the cleaner looking page was worth the extra click. The familiarity or rather the lack of familiarity with the icon is the major potential problem.

Granted this is just my opinion, but I expect people will understand the hamburger icon more over time. As long as designers are consistent in using it and consistent in what it represents and does, I'm pretty sure people will figure it out.

Whether or not you should hide navigation behind any icon is another matter. I suspect it's less of a big deal than many make it out to be, though I think it's fair to say that at the current time most people don't realize there's a menu behind the navicon. However, I don't see the pattern going away on small screens given the lack of space and I expect people will become more familiar with hidden navigation over time.

If you disagree, consider that the common sense advice for web designers used to be that people didn't know to scroll. I think most people figured out how to scroll and I think most people will figure out that if you don't see navigation, it's probably behind a visible button.

Closing Thoughts

At the start of this post I mentioned the results I found when searching Google for "hamburger icon." One thing I found interesting is how the results change when varying the date range for the search.

When I searched anytime, the results suggest the icon is bad. When I limited the search to the past year there are still results suggesting the hamburger icon is bad, but also some saying it's ok and asking if it's time to start using the icon on the desktop. When I limited the search to the last month, I mostly see results for how to create hamburger icons.

Seems like an indication that as time has passed, the hamburger icon is becoming more accepted. I think we should give it more time before deciding it should never be used. I also suggest it's too soon to decide that placing global navigation behind some kind of menu indicator is inherently a bad idea.

Next week I want to pick up the topic of semiotics to help us decide what icons are communicating so we can better decide how they should be designed.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.