The Hamburger Icon: Use It or Lose It?

by Jason Forrest

Insights / Website Design / The Hamburger Icon: Use It or Lose It?

As well versed denizens of the world wide web, there are several icons that we are all familiar with: the shopping cart, the “at” symbol, the envelope, the printer, and that piece of paper with the one folded corner seem like they have been around forever.

There’s plenty of newer icons that have become standard as well, like the heart, the star, and the thumbs up. And now that we’re several years into the era of mobile-first and responsive design, there is one icon that seems like it is everywhere: the hamburger icon.

Hold On: The What?

The hamburger icon is made up of three horizontal lines (like the composition of an ultra-simplified hamburger) and is usually found on mobile sites in place of the standard navigation menu.

There are, however, a handful of desktop sites that use a very minimal design and have opted to use it as their primary site navigation. It works as a button that when clicked on expands a vertical menu with all (or some) of the site’s navigation links.

Fun fact: the hamburger icon has been used in user interfaces since the 1980s!

Should I Use a Hamburger Icon on My Site?

From a design perspective, the mobile layout of your site obviously doesn’t have as much space to work with. And if your site has a lot of navigation links that would take up a decent amount of horizontal space, you might benefit from tucking them all way under the hamburger icon for the user to click on and expand.

From a usability perspective, however, if you hide all of your navigation items in a hamburger icon, you are gambling that the user will know to click on the icon to display all of the navigation items and actually click through to the page you want them to go to.

You might be saying, “Hey, I think I could just put the word ‘menu’ next to the icon to solve that problem,” but then you have to admit that if there is enough horizontal space to add labels then you could probably fit important navigation links in that space instead

Test it Out

If you implement a hamburger icon in your design, the only way to know for sure if it is negatively impacting your site’s usability is to run tests.

We highly recommend using tools like Google Analytics to see how using the hamburger icon is impacting click throughs from your global navigation to your primary landing pages.

Alternative Solutions

The hamburger icon has been around just long enough for some sites to have implemented it and decided that it wasn’t working well for them. Many mobile apps, including Facebook, Twitter and Instagram, use a persistent “tab” bar that contains their app’s most important functions, only requiring a single click without the additional click to expand the drop down menu.

Many of these apps still contain a hamburger icon, but they’re usually for secondary functions, which makes it a good design compromise.

Earlier this year, Josh Constine wrote an article in TechCrunch called “Kill the Hamburger Button” where he cited this compelling case study on the negative effects of switching to the hamburger icon:

What you sacrifice is a bit of screen real estate, but it’s probably worth it. An A/B test by mobile app zeebox presented by The Next Web show just how damaging these drawbacks can be to an app’s engagement rate. Six months ago zeebox tried switching from a tab bar to a hamburger, and saw its metrics drop. Recently, it ran a simultaneous A/B test on the two navigation schemes and found the tab bar drove a 55 percent average weekly frequency of use, and an 8.7 percent higher average daily frequency.

So We Should Avoid the Hamburger Icon?

The conclusion I come to as a designer is that it really depends on the site and the audience.

For example, if the site’s performance relies on new users navigating deep into the site, burying those pages under a hamburger icon is probably a bad idea. If most of your content is on the homepage or one level deep, a hamburger icon might not negatively effect your performance.

If you have a savvy audience, they might not be alienated by the presence of the hamburger icon. Most importantly, you should test the performance of your site with the icon implemented versus other solutions.

Further Reading

• Why and How to avoid Hamburger Menus by Luis Abreu, May 14, 2014
• Killing Off the Global Navigation: One Trend to Avoid by Jennifer Cardello and Kathryn Whitenton, Nielsen Norman Group, on February 9, 2014