Pause is a poor comparison. The main issue people have with the hamburger is that you don't know until after you click it whether it's going to give you what you want, what your options will be.
Eh, the same could be said for "pause", if you'd never seen the icon before. You don't know what it does, you press it, see that it stops playback, and press it again to resume, you remember.
Plus the "hamburger" has the bonus of being one of the few icons that looks like what it's open to open (a row of choices). Most icons depict a metaphor from the physical world— the hamburger is one of the few digital-first icons (haha that's a silly phrase, but you get what I mean, yeah?)
You misunderstand – even if you are familiar with the hamburger icon itself, you never know what options the menu will display until after you've interacted with it (hence it being "mystery meat" navigation).
The same issue is not present with the pause icon, which once learnt is entirely predictable.
The distaste, at least for me, is not due to the graphic used for the icon, but the lazy usage to just stick lots of options behind any kind of menu icon. When responding-to-mobile first came about, websites were (even more) prone to having 10s of useless sections that noone clicked. At some point it became common practice to just put those items behind a menu icon for small viewports, instead of taking the time to think about what few, simple navigation patterns will be useful to the user and make sure they're always discoverable without a click to the 'menu' icon.
Ok, I'm convinced, we can teach users that clicking a hamburger icon will give them access to an unknown list full of surprisings links.
However the questions is not: 'how might we cram our traditional massive menu on a small screen?'. The question is 'how might we help a user successfully find the content they are after?.
Reframed like that the hamburger menu icon might be one of the solutions, but not necessarily the best or the only one. Instead of hoping to find the one perfect answer, we can be more successful in exploring a whole range of solutions to help people on their way in a mobile environment. Just because designers like to have easy solutions doesn't mean we can have them.
Well, while I do find your POV interesting I have to disagree. The main issue with the hamburger menu is not the icon itself, but the fact that it hides some important elements that should be easily located by the user, and because of this more steps are required to perform an action (like going to a certain part of the site or app, for example). This is why tabbed navigation is getting more and more attention, you can have one-step access to a few elements or links, and also have a dedicated tab for all of those extra ones.
Counterpoint: it doesn't hide important elements that should be easily located, it hides distractions that don't need to be on the page at all times.
I'm not trying to pick on you specifically, just every time I see the tabbed navigation argument, it leaves out the fact that a huge assumption is being made: that you want all users hopping around 4 or 5 views all the time.
Lots of apps and products want focus on one view, or one CTA, or one point of contact. Even when your app or product has 20 pages, there's a good chance that most of the action takes place on a single screen.
Hiding the "nitty gritty" can lead to increased conversions, user engagement, and overall user focus. Tabs might increase your "pages per visit" or something, but that's not a stat that really means anything. Did the user do what you wanted or not?
The key is deciding what to surface and what to leave in the depths, and a hamburger menu doesn't really change those choices...
I believe the hamburger menu [...] 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.
'Embrace the icon (and its associated functions) because it's learnable' seems like a hugely superficial proposition to make.
But, for argument's sake, let's say it's easier for the world to learn a new symbol rather than just use the word "menu" (or its localised equivalents).
How does that redeem any of the other core UX issues with these menus? e.g.
- Inability for users to anticipate its contents
- Higher interaction cost, leading to a poorer engagement rate
- Difficultly representing multi-level information architectures
Not to mention that in many instances a tidy-away-drawer (with or without a hamburger icon) tends to promote lazy information architecture.
It's always saddened me a little to hear so much hate for the hamburger menu icon. While it certainly isn't perfect, it was the closest we had to a standard convention. Part of the problem is that there are now several other imperfect conventions (Google's three dots, Apple's two line menu, tabs with a 'more' tab). The three line icon, especially combined with the word 'menu' is a great solution to specific real-world needs. Over time, if pushed as a standard by the design community, it could gain wide acceptance and recognition.
Hi Andy, lovely article.
But I can't agree about the pause symbol. The Pause symbol was around before the tapes and VCRs:
https://en.wikipedia.org/wiki/Caesura - pause symbol (caesura) // is a complete pause in a line of poetry and/or in a musical composition.
It was chosen as a pause symbol because it's learnable, memorable and efficient and used in similar conditions.
The hamburger menu is a result of the responsive world and the need to have exactly the same website on different devices. It's a compromise you make... No need to defend it!
The hamburger wasn't actually born in the responsive world either as it was present in the xerox operating system back in 1981 already and already then represented a "drawer"
Fine, drawer, menu list, call it whatever you want. But I'm not sure you can compare it to the pause icon... doesn't make any sense to me!
Correct me if I'm wrong, but I don't think the hamburger menu was commonly used elsewhere before the emergence of the smartphone hamburger menu.
On the pause symbol, its purpose is more evident than the hamburger menu. First, since they came with physical hardware, they tend to come with manuals which teach the user how to use it and what the buttons mean.
Second, although the pause button may have been a bit ambiguous, it was usually paired with the "play" button. The "play" button is an arrow facing right which in the Western world denotes "forward" due to the way most of those cultures read (left to right). This is even more suggested with the "forward" and "back" button which utilize paired arrows which suggest "go forward twice" and "go backwards twice" which of course skip songs in either direction.
Third, early devices probably advertised the fact that they could easily skip songs unlike record players. I'm not old enough to know about this however.
agree with you both, although it’s interesting that the hamburger has figured in UI-design with the same inherited meaning long before the responsive hamburger icon appeared. I don’t think the "responsive hamburger" was informed by the earlier version either. I’m just not sure this is a coincidence as the hamburger might have older roots than that. (so it’s history could actually make it on par with the record player symbols if it’s given enough time to re-establish itself, we haven’t had the need for a symbol for interactive drawers until very recently)