In defence of the hamburger menu | January 13, 2016

It’s interesting seeing how quickly hamburger menus have turned from handy UI element to social pariah. Rarely a day goes by without some young designer pronouncing hamburger menus the biggest UI crime since Clippy. They cite a raft of arguments why hamburger menus are bad, from the theoretical (it’s mystery meat navigation that users don’t recognise) to the anecdotal (three of my five usability subjects didn’t know what it was when I asked), to the statistical (60 percent of the users on my site don’t interact with the hamburger menu).

All these arguments hold water and in normal circumstances I’d agree. After all, it’s not the most immediately obvious icon, and the last thing any designers wants to do is cause undue stress or confusion. However I think there’s an innate Britishness about me that feels the need to stick-up for the underdog and protect something that feels like it’s been getting an unnecessary kicking.

Ignoring its longer history for a second, the Hamburger menu is part of an emergent design language that resulted from the rise of responsive design. It solves a difficult problem (how to represent a potentially large number of menu items on a small screen) in a relatively neat and tidy way.

Agreed that the icon doesn’t clearly explain what it does, but then neither does the pause button on a typical media player. One of the main reasons we’re able to use this symbol unlabeled is the fact that it worked its way into our cultural repertoire thanks to continued repetition on tape decks and VCRs.

Had Twitter existed in the 80s, I’m sure a group of well meaning designers would have tried to shoot down the humble pause button—and it’s cousins “stop” and “record”—with similar arguments. However I think they would have done so from an oversimplified understanding of what usability is.

If you go back to the early definitions of usability, they state that a usable interface is one that is learnable, efficient, memorable, produces low errors, and is satisfying.

I’d argue that the pause button on a VCR is learnable (once you’ve pressed in once you know what it does), memorable (the icon is simple and easy to recall) and produced low error rates (if you accidentally press it you can easily recover with little negative effect). It’s also relatively efficient (it’s one press after all) and the action on an old style mechanical VCR was a tiny bit satisfying. So as a result of these qualities, the pause button became part of the global iconographic lexicon.

I believe the hamburger menu shares many of these characteristics, and has the same opportunity to become a globally recognised icon through consistent exposure. However this will only be possible if we stop showing off to our friends by “hamburger shaming”, and embrace the plucky icon for what it is, warts and all.

Posted at January 13, 2016 1:22 PM


Jon Hobbs said on January 14, 2016 11:20 PM


I’ve been trying to find a way to articulate what you’ve just said. Now I can just send this link to people.

Charles Roper said on January 14, 2016 11:39 PM

Nice post Andy! My understanding was that it’s not so much about people not recognising the hamburger menu, but rather that it hides navigation, making it harder to “discover” and use the UI. Luke’s “Obvious Always Wins” article expresses it well:

So yeah, I agree, I think the hamburger menu does get a tough rap. It’s the effect (i.e., hiding essential actions) of a hamburger menu in a poorly thought out UI that’s the problem.

Luke Razzell said on January 15, 2016 7:57 AM

I’m not sure about that analogy: the pause button does one thing, whereas the hamburger button hides a lot of options (and therefore tends to get used to hide all the more of them). Also, choice of interaction in playback mode on a VCR (or music player, etc) is pretty limited, whereas a typical website will present a plethora of interactive options across the page particularly on landing pages.

I’m all for ready learnability trumping immediate intelligibility as a design principle (in fact, I bang on about it to clients and associates), but whereas people learned what the pause button does once and then had that experience reinforced everywhere, the same is not true for the hamburger menu which latter conceals a different set of options for each app/website.

That said, a hybrid approach of exposing the more important/popular nav links on the default view and overflowing the rest into a hamburger menu (as opposed to the footer etc), eg as per, seems a good compromise between optimal intelligibility on one hand and efficient use of screen space and putting nav options in reach at the top of the view on the other.

I think another relevant context for this topic is the trend towards conversational UIs (cf the rise and rise of chat as an interaction pattern). In my experience we increasingly expect an app/website to broadly but concisely articulate up front how we might like to engage with it, while inviting us to “converse” with it (tap around etc) to start building a relationship of sorts. The hamburger menu, in contrast, plays hard to get (“you want it, come and get it…”), and in that sense it fits poorly with the above colloquial dynamic.

Ross Chapman said on January 15, 2016 11:33 AM

Thanks Andy for sharing this,
I hate seeing absolutes. Hamburger bad, instead you should reconsider the whole navigation. No.

As you say, the hamburger provided a quick solution, and I love quick solutions. A website could be made responsive with less friction and then OVER TIME, each element can be reviewed - including the user journey.

I’ve seen a few examples (I think Exposure do this), where they’ve just used “MENU” in place of an icon. The hamburger has its place. So does few navigation items. It’s really to do with what is most suitable and understandable to the user.

Patrick Sansom said on January 15, 2016 4:54 PM

In UX tests I’ve run, participants regularly overlook it and/or don’t understand what it is. The first issue is somewhat mixed-up with the second. If don’t know what it is and does, you’re not going to be looking for it.

So we need people to implement it in a consistent way, so that like the pause button, users can expect the same interaction pattern wherever they see it.

I’d like it to be only used for narrow viewports (e.g. mobile), where it reveals ALL the main navigation. For wider views (e.g. desktop), then use conventional navigation. The hybrid use, where part of the navigation is under the hamburger is the IA equivalent of the dreaded ‘Miscellaneous’.

And when it is used, it should always have the word ‘Menu’ with it. Just like there should always be a text ‘Home’ link (rather than just the site logo).

I think the hamburger definitely has a place in our UI icon library. As Andy says, in time more people will learn and recognise the icon, as long as it is implemented logically and consistently.

As to discussing the interaction patterns around how the hamburger’s menu is revealed and organised, well that’s a bun-fight for another day…

Rich said on January 15, 2016 6:25 PM

Well said. The one thing I found odd is the argument against that says “60% of my users don’t use the hamburger menu”. That just means that they have a good UI. The hamburger menu is supposed to be something that you rarely use. That’s why it’s placed in the upper left corner rather than the upper right, where it would be easier for the thumb to reach.

Steven Hoober said on January 16, 2016 4:20 AM

If you missed it, I wrote about this exact thing a few months ago:

I expanded on it with some additional logic based on observational research. I never find anyone (and that includes “un-savvy” people) who cannot find things in a menu… if you pick the right things to hide there. Of course it can be misused, but what pattern cannot? Bad cases should never poison an entire design widget.

Mik said on January 16, 2016 5:39 AM

I use the word MENU instead of the hamburger icon every chance I get because A/B tests prove it is better and also:

I very much disagree with your point.

Victor said on January 16, 2016 6:41 AM

You’re missing the point.

The problem is that you always start talking about the menu, but always end up talking about the icon.

It is not about the icon, It is about the pattern of hiding important (and sometimes very unimportant) stuff under a generic icon. It is about all the apps that started using it and then relegated it, bringing out many of their best functionality so that people could discover them. It is about discoverability, one of the founding principles of good interaction design. It is about how complicated it is to find stuff that does not belong to the same categorization in our mental models on a single list.

In sum, it is about how easy it is to put there all and hide it all in order to get a prettier page, in lieu of a better page. It’s about how easy the anti pattern becomes, how easy it becomes to hide it all under the magical, invisible menu.

I could add some links to research and articles here, but then it might look like spam, so I’ll add this one, as it has plenty of examples:

Finally, it is not about opinion. We all have opinions. It is about cases and examples and studies and research and solutions where it works or not. Where designers make it work or not. Those should be the arguments. Those should be the examples.

And the icon itself? Who cares. We still use a dumb floppy for saving documents.

Jack McConnell said on January 18, 2016 1:08 PM

As far as I’m aware, the play, pause, and stop buttons all have mechanical meanings: Play was the direction of moving tape, stop was tape in a static position without movement, and pause was a broken (incomplete) stop function.

I’ve never had trouble understanding that the 3-lines in a hamburger menu could represent a list view of navigational items but then, I’m a web designer and see it all the time and know what it means.

I agree that through repeated use, website visitors might begin to understand what it does but responsive designs that change the navigation depending on screen size, navigation in different positions across different sites, different icons, implementations, animations, and so on will probably hamper this universal understanding for a while.

Martin said on January 20, 2016 2:13 PM

“stop showing off to our friends by “hamburger shaming” aaah, well said.

It’s nothing wrong with the icon alright, people will learn what it represents.

It’s a viable solution and designers should use it with discretion, with data backing it up or shooting it down on a case to case basis.

Neil Allison said on January 20, 2016 2:42 PM

I agree with the sentiments of your argument, but not sure about comparing to the pause button.

Part of what made a pause button effective and learnable was its presentation in context - alongside a bunch of other related controls. You wouldn’t see a pause button on its own. Always alongside play, stop, FF etc.

Problem with the hamburger often isn’t the icon itself, more its location and presentation in the context of other controls in the interface. Which of course has no consistency across its wide range of implementations.

Francis Kim said on January 22, 2016 1:02 PM

I think it’s all about balancing the burger.