
In defence of the hamburger menu - josephscott
http://www.andybudd.com/archives/2016/01/in_defence_of_the_hamburger_menu/
======
13of40
I have no idea why, but the ellipsis menu (three dots arranged horizontally)
calls to me a lot more than the hamburger menu (three bars arranged
vertically). The one means "there's extra stuff here" and the other means "oh
yeah, that's why there are no more goddamned controls here, they're hidden
behind that thing". It's a mystery...

~~~
evincarofautumn
I agree. “…” has an established meaning of “et cetera” that makes me inclined
to tap it for “more”. For a while I wasn’t really aware that “≡” was something
I could interact with.

I’m only 24, but didn’t get a smartphone until pretty recently. The thing that
bothers me the most about mobile UIs is how _implicit_ everything is—there are
very few affordances to indicate what’s even interactible.

For example, I would _never_ have tried to swipe down from the top of the
screen on Android to view my notifications unless I had seen it done before,
or I had done it by accident. To me, that’s abysmal design.

~~~
wavefunction
You might consider that a hamburger menu indicates an abstracted graphical
menu form, whereas an ellipsis is culturally specific and limited in its
meaning.

I tend to see people in the West (of which I am a native) who completely
discount their cultural preconceptions when approaching accessible digital
design.

~~~
thaumasiotes
> ellipsis is culturally specific and limited in its meaning

It might be less culturally specific than you think. You wouldn't believe how
often Chinese people send me 。。。 in chat.

~~~
wavefunction
All I would say is I am more interested in reaching the many Chinese (and
other people) who have no understanding of an ellipses than those that do.
Those that do are already digitally literate and can suss a hamburger menu
out, those that don't are facing an artificial barrier imposed by our cultural
expectations.

Universal glyphs versus culturally specific symbols, and glyphs should win
every time imo.

~~~
thaumasiotes
Why do you think that Chinese who can recognize an ellipsis are _digitally_
literate?

There are no universal glyphs; they're all culturally specific.

------
mrxd
I have a hard time with Andy implying that criticism of the hamburger menu
comes from "young designers" sniping on Twitter. In fact it comes from many,
many prominent UX writers like NNG, Luke Wroblewski, etc. looking at real
data.

But you know what? Andy Budd knows that. So let's just call it what it is: a
lie. My respect for the man has been lowered.

~~~
jay_kyburz
I think he meant that young designers overstate the problem by saying it was
"worse the clippy". I'm sure these folks you mention aren't so overstated.

------
colept
I get the point trying to be made here, but the whole premise of "learning"
has quite an oversight on the tangible differences between a hamburger menu
and a pause button.

A VCR pause button is always in the same place - next to the play button. We
don't know a pause button because of it's shape or color, but rather it's
context. You know where to find it because the controls for our music and
video devices are familiar. If you take a pause button and put it in any other
context, it loses it's meaning.

The hamburger menu doesn't have context. It's different from one site to
another - from shape to placement. The icon has no grouping - no play button.
It doesn't work there's no icon that can visually capture and condense the
imagery of a menu without context.

What ever happened to just "Menu" with a caret?

~~~
HillRat
_The hamburger menu doesn 't have context..._

This, yes. The 'pause' button has a single, unambiguous meaning: 'pause the
current action.' The hamburger menu means 'display in some fashion an unknown
number of things of an indeterminate nature.' The hamburger menu is evidence
of a lack of design rigor, the kitchen junk drawer of user experience design.
It's sometimes necessary, but never ideal.

~~~
jay_kyburz
The hamburger menus mean "show me more actions I can perform." Pretty simple
if you ask me.

~~~
colept
It's also the same icon as "drag to reorder" from web 2.0

------
elliotec
I strongly disagree with this, and use the word MENU every chance I get.
Because always bet on text:
[http://graydon2.dreamwidth.org/193447.html](http://graydon2.dreamwidth.org/193447.html)

And also, I've seen A/B tests show that users prefer MENU text.

~~~
Aleman360
Ever worked on globalized software before?

Try entering "undo" on Google Translate and see what it looks like in Dutch.

~~~
elliotec
I have, and still prefer text. More users figure it out. Sometimes the text
will be long and you have to design around it, but I'm pretty sure MENU in
Dutch is still MENU.

------
potatolicious
The problem with the hamburger menu isn't that people don't know what it means
- it's been around long enough that most users know what it means.

The problem with the hamburger menu is that _nobody taps on it_. Novices and
expert users alike, tap rates for the hamburger menus is universally dismal no
matter which app you're looking at.

Which is to say, no matter how well-trained and knowledgeable your userbase
is, if you want something to be clicked, do not put it behind a hamburger
menu.

We can talk nice about the menu all day and call it "plucky" all we want, but
the facts on the grounds is that the hamburger menu almost never gets tapped,
and anything that is accessed via the hamburger menu is destined for the
graveyard of little to no usage.

We can call the hamburger menu an emergent experiment, but it's been, what,
3-4 years since its first appearance? At this point I think it's safe to call
the experiment a failure.

~~~
dragonwriter
> The problem with the hamburger menu is that nobody taps on it. Novices and
> expert users alike, tap rates for the hamburger menus is universally dismal
> no matter which app you're looking at.

Why is that a problem? Hamburger menus seem to be a place for stashing things
you _don 't_ expect people to need in most uses of an application, but which
need to be around for the occasional need. And that's a fairly well-
established UI pattern, so it _should_ have a low tap rate.

Not everything that needs to be accessible in the UI needs to be accessed
frequently.

~~~
potatolicious
Because the overwhelming observed pattern for users is that they want
something, and they will tap on the thing on the screen that appears most
likely to lead towards the goal.

Roughly speaking, users will look at all possible touches on the screen and
score them based on relevance, and tap the highest scoring element. The
typical use of a mobile app is effective a pathfinding problem.

The problem is that because of the inherent meaninglessness of the hamburger
button, the hamburger button always scores near zero. Which also means that
users will actually tap on _things that lead them away from what they want_
before they touch the hamburger button.

A common pattern you will see when a user is looking for a less-used function
of the app is that they will make several mis-touches first, tapping on things
that do not lead to their goal, before backing up and trying the hamburger
button. Effectively hamburger buttons will send your users on wild goose
chases through your app because it is a UI of last resort.

Even when users are looking for obscure/miscellaneous functions of your
software, they will look practically everywhere else first before looking
under the hamburger button.

There are better ways to point users towards less-used functions of the app
that

------
noddingham
No. Everyone knows the meaning of the pause button (and the others), because
the word "pause" was written above or below the fucking symbol on VCRs, tape
players, etc, for DECADES. So no, manufacturers didn't just beat consumers
over the head with it to the point it became learned.

------
twhb
I like the given definition of usability, but I wouldn't score the hamburger
menu as the author did.

memorable: yes.

efficient and produces low errors: not relative to its predecessor on non-
mobile devices. We've gone from seeking and clicking one target to two.

learnable: it could be, but people aren't trying to teach us the same thing.
On some websites it means "navigation", on others it means "everything from
the header". It may or may not contain account settings, it may or may not let
you sign out. On ally.com it actually contains all available actions, with
site navigation inexplicably hidden in a different, cog-icon menu. The net
result is that I never have confidence that clicking a hamburger icon will
give me what I'm looking for.

------
djsumdog
I like how the Foundation tutorials have the hamburger button with the word
"Menu" next to it. That's how I've implemented it on all my recent websites.
It's not that much text and removed ambiguity.

------
Chris_Newton
I find hamburger menus a bit like pie charts: they’re popular in some
quarters, but they have some significant drawbacks and the vast majority of
the time there is a better way to do the job.

For UIs on larger screens, I see no advantage at all in hiding menu items
behind a hamburger. It just results in hunting around for a tiny thing to
click and making it harder for the user to reach useful choices. However, even
on smaller screens, I still try to present a set of related options so they
are immediately accessible if possible.

One obvious way to do that is having few enough choices that they can all
appear together in a compact menu, possibly bumping minor choices down to the
page footer or some other secondary position. Achieving this might require
careful consideration of the overall design and information architecture, and
possibly deviating from the way the same material is presented on other
devices in style and/or prioritisation.

Another possibility that can work well in some situations is to distribute
commands or navigation options throughout the page/app instead of collecting
them all together in a menu. Web pages can hyperlink directly from body text
or images instead of having to collect all their navigation links together at
the top or bottom of the page. Sometimes UIs can similarly attach commands to
specific places where they make sense.

If there really are too many essential choices to display them tidily embedded
within the overall UI on a small screen, my next preference is usually some
form of dedicated full-screen navigation. This might make sense for something
like an e-commerce web site with lots of different categories, for example, or
a business app that provides access to many different reports. With this
strategy, I would probably try to have that navigation be the starting point
for the UI or at least be summoned via some very obvious and descriptively
labelled button.

Between those three general strategies and the occasional more specialised
alternative, I don’t think I’ve ever had a hamburger menu make it into
production on any project — including those where our first thought was that
we absolutely had to have loads of options available so a hamburger was
“obviously” the way to go. So far, I’ve yet to see or run any substantial
usability test where a hamburger was more effective.

------
azinman2
Complete disagree.

1\. You have no idea what will be under it.

2\. Most people don't explore.

3\. Most won't memorize what they saw at any point.

4\. It never has text underneath it, so you don't even know what it is.

5\. The icon represents many solutions for many tasks, but you only have one
task at a time. A pause button is the opposite: it's pureness of direct
manipulation means you can find what you're looking for when you need it.

6\. Pause buttons are even better when they have 'Pause' written underneath
the symbol.

------
jay_kyburz
I can get on board with the idea that the hamburger is bad for developers
because we want our users to use our app a specific way. If the button is in
their face, they are more likely to click on it - makes sense.

I'm not convinced it's bad for users. I can't think if a single place where I
would not prefer the extra screen real estate.

------
herbig
I'm not sure beating users with a confusing UI element until it's
anachronistic is a good strategy.

------
whistlerbrk
The iconography of the menu is one objection but I think the author is missing
out on a subtler thing here. The other objection is that paths within your
application should flow seamlessly enough to remove the need to have a place
to dump all the "extras".

~~~
adevine
I hear this a lot, and I think it's wrong. Sometimes you just have too much
information to fit on a phone screen, but which should still be available. For
example, I see people argue for tabs, but if your app fundamentally has a lot
of choices you're left with an overflow tab which if no better.

Worse, I see apps that try to scale down to what they think is the "essence"
of their feature set, only to be left with something that makes me say "screw
this, I'll just use their website/desktop app if I can't do everything I need
on the phone app"

------
overcast
I really don't believe in the use of the hamburger menu. You can just as
easily have the word "menu" in the same amount of space. For something as
critical as a main menu, why introduce any possible confusion.

~~~
colordrops
That's why MS used the word "start" in their main menu for Windows.

~~~
jay_kyburz
I'm not sure if you are trying to be funny or sarcastic or whatever, but
windows uses a window icon in the bottom right for their big os hamburger.

~~~
colordrops
I guess I'm betraying my age here. In a previous incarnation of Windows, they
actually put the word "start" on the OS menu for people who were less computer
literate. They even got the rights to "Start Me Up" by the Rolling Stones for
commercials. No joke.

[https://youtu.be/5VPFKnBYOSI](https://youtu.be/5VPFKnBYOSI)

------
xpda
I'd settle for a universal shortcut key that activates the hamburger menu,
just like the F1 key is used for Help. Ohh no... someone killed F1 AND Help
when I wasn't paying attention!!!

~~~
adevine
There was. Older Android phones had a physical "MENU" button that would show
additional actions for a screen.

~~~
wavefunction
Well, how does anyone F1 on a mobile device anyways.

