Magazine

Hamburger icon: How these three lines mystify most people

Hamburger icon and hamburger

The hamburger button has become a common symbol on our smartphones, tablets and computers. But, Chris Stokel-Walker asks, what is it, where did it come from, and do people really know what it means?

Open up a smartphone, tablet application, or a website these days, and you're likely to see an odd icon slung somewhere up in the top corner of the screen.

Three horizontal lines stacked on top of one another, looking like an equals sign gone wrong. Tap or click on the lines, and then you realise, it's a menu.

These three lines have gained a personality, and a name - the hamburger button, because stripped back to its constituent parts, it looks slightly like a hamburger inside two halves of a bun.

And like the hamburger, which has become a culinary cornerstone across the world, the hamburger button is rapidly spreading its way across the internet and on to our smartphones via apps.

Image caption Hamburger icons (clockwise from top left): Spotify, BBC News, Amex, BBC Sport, T-Mobile, Now TV

"The first big app that used a hamburger button was Path, I believe," says Alex Tyagulsky, an app designer. "Then it was popularised by Facebook, and the hamburger button started to appear from app to app and many apps started to use them."

The button has its benefits, he says. "The biggest one is you can put a lot of information inside it, and at the same time provide a consistent way to find this extra information. Facebook is a great example of this."

However while the button may provide a consistent way to find extra information, research suggests it is not as functional as some might like to think it is.

"I did multiple tests," says James Foster, a web developer based in New Zealand, who has surveyed users' interactions with the button over the course of many months. "The results all came out the same - the icon is not as clear to some users as developers and designers think it is."

Adding the word "menu" underneath the three lines increases the button's use by 7.2%, according to Foster's tests.

Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%.

Switching the lines for the word "menu" makes 20% more people click, Foster found.

(Full disclosure: The BBC News website and its smartphone apps use the hamburger icon in various formulations - sometimes by itself, and sometimes in a box or alongside a word.)

Image caption The "air vent" icon - an ancestor of the hamburger, seen here on a demonstration of Xerox software

Foster is relatively outspoken about the drawbacks of the hamburger icon. "It's three horizontal lines," he says. "It's pretty easy not to notice it. It means different things to different people; it doesn't necessarily say, 'Here are more things to look at'."

And if the menu button is unremarkable and unrecognisable, it has a knock-on effect on the options it contains. "When you hide something in the hamburger menu, you make it less discoverable by your users," says Tyagulsky.

In other words, the basic principle of out of sight, out of mind. As Luke Wroblewski, a designer who has spoken at conferences about the rise of the hamburger, says: "That can have detrimental effects on engagement."

Technology writer Glenn Fleishman found that issue. "Even in 2013, I would get emails asking people how to do things in the app. When I told them to click the three buttons in the corner of the app, people would ask, 'Oh, why did you hide it there?'"

As computer screens became bloated, more menu items were added. "The hamburger icon, used most egregiously, allows you to put 500 options into a mobile app without doing the hard work of actually figuring out what belongs there," says Wroblewski.

Before the hamburger was tucked away in the corner of everyone's smartphones, another generation of designer referred to a similar symbol as an "air vent", according to Norm Cox, an American graphic designer.

In the late 1970s and early 80s, Cox worked for Xerox, designing the first graphical user interface - the icons and toolbars we take for granted today - for an early office workstation called the Xerox Star.

The Star's user interface featured a series of command buttons. "At the right of this line of buttons was the infamous 'hamburger' icon menu, containing additional options for the contents of the window such as formatting and pagination," says Cox, now 63 and still designing user interfaces.

"At Xerox we used to joke with our initial users that it was an 'air vent to keep the window cool'," says Cox. "This usually got a chuckle, and made the symbol more memorable and friendly."

The designer put the three lines he drew to represent a menu of additional actions to the back of his mind for more than 30 years, until the design world began to scrutinise his creation. "It was simply one very small aspect of the overall graphical user interface," Cox explains.

Why use the hamburger at all? Though smartphone screen clarity has made great leaps forward in recent years, three thin lines are still easier to render and read on all phones than the word "menu". And not everyone speaks English.

On apps, translating simple words and phrases such as "menu" or "send to printer" - known as "localisation" is costly and can cause problems. The German word "Systemsteuerung" is nearly twice as long as its English-language equivalent, "settings".

"People err towards icons because they're smaller and you don't have to do localisation. German or Dutch can take a four-letter word and turn it into a 20-letter word," says Wroblewski.

It's also easier on the eye. Icons break up large amounts of text.

And people are getting used to the hamburger button - albeit slowly. Foster carried out his first test on users in early 2014, and has been testing since. Users do seem to understand it more.

The inventor of the hamburger - or air vent - is sanguine about his legacy. "Though I don't condemn or condone its usage today, my guess is it's probably here to stay," says Norm Cox. "All the 'controversial' discussion about it has burned it even more into our digital vernacular."


More from the Magazine

The pioneers of computing championed a style of design in which digital elements resembled real world objects that anyone could recognise. Behind the glass screen lay a "desktop" on which users could arrange "documents", or drop them into the "trash" - an icon in the shape of a bin. The idea is known as "skeuomorphism". It predates Jobs and persists to this day.

What is skeuomorphism? (June 2013)


Subscribe to the BBC News Magazine's email newsletter to get articles sent to your inbox.