A couple of weeks ago I came across this tweet from Luke Wroblewski:
Do people understand the "hamburger" icon used for mobile navigation menus?http://t.co/obXN4Ut26A
— Luke Wroblewski (@lukew) February 6, 2014
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:
Seriously, I need a tutorial for this? pic.twitter.com/yyMLxcyEfn
— Luke Wroblewski (@lukew) February 6, 2014
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:
- Try using the word “Menu” instead
- Consider using a down arrow or another active icon
- Reconsider the menu position and function
- 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
30 replies on “The Hamburger is Bad for You”
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.
I have no idea. That’s why I’m attributing the impetus of this atrocity to the fictional Pear company and their oPhone.
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.
Yep. It is quite ubiquitous. But that’s due to convention and lack of imagination on the part of designers and developers. The hamburger is not the de-facto icon for menus, far from it. We can do better.
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.
Actually an article about this just came up. The origin of the icon is from Xerox: http://www.cultofmac.com/272311/apple-borrowed-ioss-hamburger-icon-xerox-parc/
Thanks Steve. Added a note in the article.
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.
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.
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.
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.
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.
Yes, an icon is slightly simpler from a localization standpoint, but only if it makes sense. We need a better icon that is universally understood.
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 🙂
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.
I think the lack of an fa-menu speaks to my point that we have yet to come up with an appropriate and workable icon. It is to Font Awesome’s credit that they have not named the triple-bar “fa-menu”.
True, and I hope they don’t add one as an alias…
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.
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.
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.
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.
“It is only through an incredible feat of skeuomorphism it comes anywhere close to looking like a menu.”
Really? I find this claim to be odd and kind of ridiculous. I believe you’ve overthought yourself into a place where the obvious is no longer clear to you.
A actually great submit by you my friend. We have bookmarked this page and will appear back following several days to examine for any new posts that you simply make.
Thanks for talking about trends. It’s nice getting a thorough commentary on such a cool event. I’m loving all the use of solids I have been seeing. I like seeing them used with one or two prints that are then showcased, instead of a mish mash of so many different prints in one quilt.
If the suggested current UI element is “MENU” over the hamburger icon, does that not limit its understanding to English speaking countries?
@Ryan, You can fix that English-speaking countries limitation easily by making your Theme (and the word “Menu”) translatable:
But still, I’m a fan of icons representing functionality. Is there no good icon replacement for the ‘hamburger’?
As much as you might dislike it, it is becoming more and more common, and people are starting to notice it as the universal icon. Chrome and Firefox both have it as their menu item now, which will further implore people to use it.
Why not use both? We are using the triple line, with ‘menu’ alongside. (in production).
My partner is a college professor who has observed over the last 25 years misaligned words creeping into modern usage in submitted papers. Words like “relatable” and “orientated” come to mind, and it’s been a little painful for us to watch English gradually being clumsily reshaped by the legion ignorant.
Morten, I completely see your point about the menu icon! I was confused when I first encountered the triple bars and I still feel a tiny background anxiety every time I click on this incoherent icon, which has spread like wildfire across the mobile Web and is now a household mobile icon in the year 2016. I found it rather comforting to read your post (found while watching your Lynda.com tutorial on Simone) describing your own misgivings about the hamburger icon — even though it appears nothing will stem the tide of its adoption by millions of Web users.
I must note something else… It takes a special kind of courage and endurance to post articles to the Web where comments are allowed… I am aghast at the insinuating, irritable or downright mean-spirited tone in two or three of the above comments. It’s not like Morten is suggesting we take away healthcare from children. He is simply voicing a very valid criticism of an icon.
In our modern world, where we can hide behind devices and usernames in too quick and easy communications, I fear we are tragically losing (or “loosing” as so many spell this word these days) the courtesy and respect that historically characterized a civilized Socratic dialogue around ideas.
The fact the we are having this conversation here tells me a lot about how poorly you’ve presented what you are suggesting above (back in 2014 anyway). Many users didn’t agree with you then and a big parcel wouldn’t agree with you now either.
Hi Morten, what if I need to keep language icon to the right on the navbar? Your site’s “primary menu” isn’t a better solution for mobile sites because of language selector. My clients wouldn’t approve the navbar similar to yours, because they want the empty navbar only with a logotype and with or without navigation menu icon.