Blue monster eating a hamburger

The Hamburger is Bad for You

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

 


About Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

21 comments:

  1. I don’t understand why it’s assumed that the “hamburger” graphic was somehow Apple’s doing since it has never appeared in any of Apple’s iOS apps.

    Just because other developers have used it in their apps that happen to run on iOS does not mean that it’s Apple’s idea.

  2. You know, I’ve always asked myself why this meant ‘menu’ – but it is becoming ubiquitous.
    I’m looking at the top right of Chrome and it’s what I see – but there it has a feel of a utility, something you’d find if you’re looking for it rather than key navigation.
    I think I’m going give up hamburgers at least for now.

      1. Lack of imagination? By that logic, we shouldn’t use a search glass either.

        I’ve always understood it as a list. Not everyone does, granted, but it shouldn’t take a lot of brain power to figure it out.

        Not everything in UX is immediately understood. That doesn’t make bad UX necessarily. It’s adaptation to an evolving digital environment. Obviously it won’t be right for every scenario. But an unequivocal condemnation of the use of this icon is no different, in my opinion, than saying all links need to be blue (conventional wisdom of the time). Very short-sighted.

        My 2¢ aside, thanks for sharing the article. Definitely appreciate your perspective.

  3. I think the “Hamburger” works quite well as a menu icon, especially when the menu resembles a vertical list, otherwise maybe not so much.

    It wouldn’t be easy to come up with another design, with that kind of minimal structure, that works reasonably well.

    1. Yes, I agree with Ernot.

      An arrow, I think, implies going somewhere, not a menu.

      The benefit to icons vs. say “Menu” is that icons are a “different read” than words, which can be distracting, especially if your app’s content is mostly words.

      But, I suppose blogs need to be written.

  4. What would you say about the icon for the Recent Posts in your own website?

    I think the Hamburger does well because if you look at how menus have evolved then you might be able to connect that they have been a dropdown list and most of the times list used to enclosed in rectangle div. So the Hamburger, minimal & clean representation of a list item.

    And moreover instead mentioning the lack of creativity in designers and developers, you could have suggested a prototype or an idea that you think is a possible replacement, this post then would have made a justice.

    1. The icon next to the recent posts is meant to illustrate lines of text. It actually looks like lines of text and that’s what this particular icon was designed to illustrate. The triple bar was not created to illustrate, nor does it look like, a menu.

  5. Using the word “Menu” adds complication when localizing your app (translating the UI into other languages). An icon can be more easily understood by a wider audience (non-English speakers) and is therefore more simple. I’m not saying the hamburger is the right icon, but ‘an’ icon is probably more simple and falling back to “Menu” sounds like the lazy way out.

  6. There’s been lots of debate on this.

    I’ve seen a couple of patterns that seem to work:

    Google’s Logo + peeping hamburger pattern (people love to click a logo)
    Naked Wines on Android = clean action bar with menu icon in the top right (which kind of mimics an overflow)

    I’ve also seen examples of woohoo crazy by big compnies:

    Twitter on Android – seriously…what? Crazy pattern unlike anything else
    Amazon on Android – Hamburger and then a “shop all categories” (yep, pretty sure that’s “nav”) button right below it. That’s two nav buttons, one above the other.

    I know both Twitter and Amazon extensively test, but are they actually designing their MVT and A/B tests sensibly in the first place to come up with solutions like they have done?

    Maybe top navigation + sidebar on mobile is just a really bad idea. Swipe right always means “open nav”. Is that really what we want?
    Is navigation, a way to escape a current journey, really such a dominant need?
    Do most normal users even know the “intuitive” swipe-right-from-edge-for-nav?

    Lets find out :)

  7. What I find interesting, actually amazing, is that even the good folks behind Font Awesome don’t seem to have an icon for ‘Menu’. There are plenty of ‘hamburger-like’ icons with 3 horizontal lines, but nothing specifically for a menu. Their ‘fa-list’ icon looks more like a menu than the ‘fa-bars’ (a.k.a the hamburger), but nothing actually called ‘fa-menu’. Go figure.

  8. People like us are aware of it but some people still don’t understand a hamburger icon as a navigation menu. Recently I was working on a project of web design and when I asked my client to review the website, his first question was….. “where are the navigation menu tabs?” as I created a Hamburger icon as a menu. So this could be a big issue.

  9. Kind of lame to write an article about something that you don’t even take the time to research the genesis of. “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:”

    So for an entire week you thought about it but didn’t bother to try to search about it on the internet before you “theorized” it. Weak.

    1. That’s what’s known as “sarcasm” my friend. The origins of the hamburger as menu use pattern is clouded in mystery and there are several people who have provided widely different sources as the original. Moreover the origin of the icon is irrelevant save for the fact that it does not originate with Apple.

  10. It’s true, the hamburger is bad for you. But you totally went off track. It’s not due to the icon itself, but the fact that it’s an indicator of the drawer navigation pattern.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>