Tag: hamburger

Categories
Design

The Hamburger is Bad for You

Blue monster eating a hamburger

A couple of weeks ago I came across this tweet from Luke Wroblewski:

It asks a the simple question about people’s general understanding of the hamburger icon and links to a larger conversation on Twitter on the topic. If you don’t have the time to read through the 20+ tweets here’s the gist: Anecdotal and somewhat scientific evidence indicates people do not intuitively understand the hamburger icon as an indicator of a menu but have to learn its function. Pardon me as I feign shock and surprise.

A hamburger by any other name…

Did you ever wonder where the hamburger came from? I’m not talking about the incredibly inaccurately named ground-beef-patty-between-too-buns meal option here nor the first use of the hamburger as a symbol for a menu. I’m talking about the actual hamburger icon itself. If you think it was invented by Apple or some genius designer you are about a mile and a half off. The hamburger is actually a symbol known as a “triple bar” used in logic and math to mean absolute equivalence or identical. I have stacks of notebooks full of logic trees and calculations littered with these hamburgers from my philosophy days. And that’s where they should have stayed. Instead this symbol, technically described as “a = sign with a third line”, has become a staple of modern mobile, flat, and no-UI design. The triple bar has become identical to an unintuitive and uninformative user experience. Oh, the irony!

Edit April 8, 2014: According to this article the first known use of the triple bar as a UX icon was on Xerox photocopiers. Thanks to Steve M.G. for the tip!

The Fictional Origins of the Hamburger

For the past week I’ve been theorizing as to the origins of the hamburger as a menu icon. I say “theorizing” because I don’t have the patience nor desire to dig up the actual origin of this idea. Here’s what I imagine happened:

A designer at a company named after a fruit … let’s call it “Pear” … is making a new user interface for the company’s new phone called the oPhone. Said designer discovers that there is very little screen real estate on the oPhone and decides to hide the context menu under an icon. “Hey, Stefan” he shouts across the room to the boss: “What is the universal icon for a menu?” “How would I know Johan” Stefan responds. “Just rip some underused icon from the database like we did with the Abilities button on our keyboard!”

And thus the hamburger was born. (The accuracy of this fictional account is irrelevant).

After its introduction as a menu icon the hamburger has become prevalent throughout the web and in web applications (I can see it in the top right hand corner of Chrome as I write this indicating the settings menu). But the hamburger is also used for several other things in those same applications, most notably to indicate that items in a list are draggable and sortable. Which makes little more sense than its use as an indicator of a menu.

The Meaning of the Hamburger

It’s pretty obvious why the hamburger is meant to indicate a menu: If you really want to it kind of maybe just possibly theoretically might maybe look a little bit like a vertical stack menu. In the same way that the letter ‘L’ looks like a shoe.  The problem of course is that it doesn’t look like a menu unless you already know that it’s supposed to look like a menu. What we have here is a classic case of theory dependence and tacit knowledge: The designer and everyone involved in the application being built know from experience that the hamburger means a menu and thus they assume it’s intuitive. What they fail to remember is that the first time they encountered the hamburger they did not know what it was and had to be told like in the screen grab in Luke’s tweet:

So what does the hamburger look like? Ignoring the actual meaning of the triple bar here is an unordered list of things it does look like:

  • A hamburger
  • Three shelves
  • The jQuery UI accordion
  • The black keys on a keyboard seen from the top at a 90 degree angle
  • A crosswalk
  • … three black lines

In truth the triple bar / hamburger only looks like a triple bar, because that’s what it is. It is only through an incredible feat of skeuomorphism it comes anywhere close to looking like a menu. Which is strange considering the reign of the hamburger was brought on by the move away from sekuomorphism. So the hamburger is really an anti-pattern!

No hamburger for you!

You may have noticed that my designs never feature hamburgers. The theme you are currently looking at has replaced the hamburger for the word “Menu” which in my view is far more descriptive. And when I use icons I try to use ones that indicate actions (arrows, plus or minus, etc) because I am cognizant (I mean “mindful” – gotta stay on trend) of my own theory dependence and work to keep my knowledge focal.

I believe in providing criticism only when it is constructive and I truly wish I could serve up a new and perfect menu icon to solve the hamburger bloat once and for all. Sadly I don’t, at least not yet. In place of this I have a couple of suggestions to curb the desire to use a hamburger as a menu icon:

  1. Try using the word “Menu” instead
  2. Consider using a down arrow or another active icon
  3. Reconsider the menu position and function
  4. Use an off-canvas menu and use a tab with an arrow to indicate active interaction

There is a lot of chatter about the unintuitive nature of the hamburger in UX circles right now and I have no doubt that in due time someone will come up with a new and better icon. It might even be you! In the meantime I urge you to abandon the use of the triple bar as anything other than what it actually is for – logical identical – and find better solutions to your menu woes.

Further reading

Mobile Navigation Menus and Great User Experience – Newfangled