The Hamburger Icon: Those Three Lines

If you’ve used an app on a mobile phone you will have seen this icon.

If you’ve used some web site you will have seen this icon.

View this blog on a small screen and you’ve seen it.

Firefox and Chrome both use it.

On a mobile device it’s home is normally in the top left-hand corner of the screen. If you are right-handed it’s at the furthest reach of your thumb, for me, as a left-hander, it’s nicely accessible.

It’s commonly known as the hamburger icon, the hamburger button or the sandwich button.

What you possibly aren’t aware of is that this icon causes a strong emotional response in some people:

That little three-lined button is the devil. Whether you call it a side menu, navigation drawer, or a hamburger, hiding your features off-screen behind a nondescript icon in the corner is usually a poor mobile design choice. Interaction theory, A/B tests, and the evolution of some of the top apps in the world all support the same thesis: The hamburger button is bad for engagement, and you should probably replace it with a tab bar or other navigation scheme.

TechCrunch

The hamburger icon—three little bars used to indicate a link to a menu—is one if the most controversial techniques on the Web right now. Designers, we are told, all hate it; customers, we tell everyone, hate it too. Why then, is it everywhere?

Web Designer Depot

Where did it come from?

This icon isn’t even that new. One form of it was included in the initial Graphical User Interfaced designed at Xerox Parc by Norm Cox somewhere around 1981. At that time is was known as the air vent:

“Interesting inside joke… we used to tell potential users that the image was an “air vent” to keep the window cool. It usually got a chuckle, and made the mark much more memorable.”

BBC

What’s the problem?

The issue isn’t really with the design of three lines, the issue is how it’s used and what it’s used for. Luis Abreu’s defines the issues as four things:

  1. Lower Discoverability – it’s not immediately obvious that it’s a button that does something.
  2. Less Efficient – you use this button the way to something else, by definition you end up clicking twice.
  3. Clash with Platform Navigation Patterns – it appears in places where we expect other things to be.
  4. Not Glanceable – you can’t highlight anything about the items behind the button.

Having recognised that it’s a problem some people have undertaken tests to work out how much of a problem it is. As an example, James Foster did some tests that replaced the icon with the word menu and discovered that people are more likely to click if it says menu.

Why do I care?

Sometimes it’s the small things that make a huge difference:

“Great things are done by a series of small things brought together.”

Vincent Van Gogh

I’m rarely in a place where I design user interfaces, but I am often in the place where I create documents and presentations from which I am trying to get a response. Those documents and presentations use a design language that I hope the recipients understand. If people struggle to understand an icon that has been around for 40 years then I need to be very careful about the design language that I use.

The Hamburger Button is also a reminder of the longevity of choices. A set of choices made 40 years ago are living on. The Hamburger Button isn’t exceptional in this regard, just look at the save icon, the width of train-tracks, the QWERTY keyboard, and the Copyright system. I occasionally get asked about a naming standard document that I first wrote over 20 years ago.

Read more

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s