
The Hamburger Menu Doesn't Work - networked
http://deep.design/the-hamburger-menu/
======
weinzierl
I researched this topic a few days ago and beside the (excellent) article from
James Archer, I found the following links worth reading:

    
    
       Why and How to Avoid Hamburger Menus[1]
       Hamburgers & Basements[2]
       An Update on the Hamburger Menu[3]
       The Hamburger is Bad for You[4]
    
    

A bit off-topic, but the Hamburger icon was actually invented at Xerox
PARC[5].

[1] [https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-
men...](https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/)

[2] [http://jxnblk.tumblr.com/post/36218805036/hamburgers-
basemen...](http://jxnblk.tumblr.com/post/36218805036/hamburgers-basements-
why-not-to-use-left-nav)

[3] [http://jxnblk.tumblr.com/post/82486816704/an-update-on-
the-h...](http://jxnblk.tumblr.com/post/82486816704/an-update-on-the-
hamburger-menu)

[4] [http://mor10.com/hamburger-bad/](http://mor10.com/hamburger-bad/)

[5] [http://gizmodo.com/who-designed-the-iconic-hamburger-
icon-15...](http://gizmodo.com/who-designed-the-iconic-hamburger-
icon-1555438787)

------
abalone
It's very interesting that Apple just adopted a hamburger menu for their
apple.com redesign (mobile version). They even told everyone not to use
hamburger menus at last year's WWDC! [1]

[1] WWDC 2014 Session 211 Designing Intuitive User Experiences @ 32:00,
available here:
[https://developer.apple.com/videos/wwdc/2014/](https://developer.apple.com/videos/wwdc/2014/)

Addendum: It's a responsive design so you can see this even on a desktop
browser just by shrinking the width of the window. The top menubar collapses
into a hamburger.

Addendum 2: Illustrated transcript here:
[http://blog.manbolo.com/2014/06/30/apple-on-hamburger-
menus](http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus)

~~~
bane
Apple is very _very_ good at telling everybody else what not to do, then going
and doing it themselves.

~~~
digi_owl
Apple, under Jobs in particular, reminded me of the schoolyard "cool kids"
that would verbally piss all over something until they themselves could afford
it.

Jobs loudly proclaimed that people didn't read, yet within a year Apple was
selling ebooks.

------
dperfect
Before hamburger menus became popular, weren't people complaining about the
exact opposite problem? That is, if you break out the menu items into more
prominent interface elements (e.g., tab bar items), then you're at risk of
cluttering your visual design with less-common functions. As in all things
design, I suppose a balance needs to be found, but I personally don't find
anything wrong with a hamburger menu per se.

Almost everything has or needs something like a hamburger menu _somewhere_.
Can it be abused? Yes. Does that make it inherently bad? I don't think so.

~~~
thaumaturgy
> _I personally don 't find anything wrong with a hamburger menu per se._

The trouble, which the article describes with some case studies on engagement
before and after hamburger menu implementations, is that people who are not
you are confused by it and don't understand it to be a menu.

fwiw, I've encountered this quite a bit when helping users switch from
Internet Explorer to Firefox or Chrome -- both of which use the stupid
hamburger menu -- an users hate it and "being able to find things" is probably
the number one reported reason that they go back to Internet Explorer.

ed: for a more specific example, look at Firefox or Chrome, try really hard to
imagine that you are a first time user of that web browser, but you've used IE
before, and then figure out how to do one of the most common things that
people want to do with a web browser: bookmark a page.

~~~
TheTravCav
>people who are not you are confused by it and don't understand it

This is the history of computers and users. So many technologies that seem
completely intuitive now started out just like this. being confused by it and
don't understand it is only a problem if stays that way like shortcut key
combos. Hamburger menus are like "right click". it's not that bad and when
people have seen it a few times it won't be some confusing.

~~~
ocdtrekkie
People still don't understand right click. Hate to break this to you. UI that
isn't clear and visible on the screen is unhelpful UI.

~~~
ams6110
They don't understand double click either. I know people who double click
everything - buttons, hyperlinks, everything.

~~~
function_seven
Yeah, me too. And its amusingly frustrating to watch. And we know why double-
clicking is a thing, and why it's not consistent across widgets, but I wonder
if we'd be better off if the mouse originated not with "left" and "right"
buttons, but instead "do" and "select" buttons. The Do button would open the
files and visit the hyperlinks, the Select button would add the object you're
looking at to a stack of selections, or provide more information about the
thing you're pointing at, or some other lower-cost action.

(I just changed the setting on my desktop to use single-click-to-open, and was
immediately punished by it. Couldn't merely select files anymore without fear
:) )

~~~
Dylan16807
Shouldn't you also have a third button to list available actions, or would you
throw that away? Overloading the select button would be just as confusing; I
hope you don't want to do that.

~~~
function_seven
Ok, ok. How about these buttons?

    
    
        [Select]  [DO!]  [Context]
    

You're right of course. At some point a trade off has to be made among
usability, discover-ability, and simplicity. (Pick any two).

Adding another button reduces simplicity, but enhances the other two. Apple's
one-button mouse—at the other extreme—makes things simple and discoverable,
but often not as useable as I'd like. I still don't know how OSX's equivalent
to Windows' [Alt] key access to menu items (does it exist?)

~~~
e12e
I do think using three buttons are good -- I'm not so happy with the classic
"Xerox Parc/Smalltalk" layout -- I'd prefer to have a button on the thumb
(like many logitech mice have) _and_ a scroll-wheel in the middle that's _not_
a button.

Which leaves us with a bit of a problem for touch screens. While it might be
ok to demand users to learn one and two-finger touch -- three finger touch
might be going a bit too far...

[ed: And for those that want to remap buttons, but avoid the bloated logitech
software, in windows I recommend:
[http://www.highrez.co.uk/downloads/XMouseButtonControl.htm](http://www.highrez.co.uk/downloads/XMouseButtonControl.htm)

In X it's of course much easier (or more difficult, depending on your point of
view):
[https://wiki.debian.org/Keyboard/MultimediaKeys](https://wiki.debian.org/Keyboard/MultimediaKeys)
]

~~~
function_seven
I used to use an MX Revolution mouse[1] that had what you describe. Multiple
thumb buttons, that amazing flywheel scroll wheel, that _other_ thumb wheel. I
loved that mouse.

Unfortunately I love trackballs more than mice now, and am severely limited in
my choices. The Trackman is nice, and has a couple of extra buttons, but it
would be so nice to have something close to what I had with that Revolution
mouse.

In response to your comment above, no I wasn't being ironic :). I'm sure I've
seen similar schemes before that informed my "idea", though.

[1] [http://www.amazon.com/Logitech-Revolution-Cordless-Laser-
Mou...](http://www.amazon.com/Logitech-Revolution-Cordless-Laser-
Mouse/dp/B000HCT12O)

------
WorldMaker
One of the things that I felt Windows Phone 7 and 8/8.1 in their design
language did well was encouraging designs that were better than the hamburger
(pivots and sprawling "hubs" that encourage you to explore in two dimensions;
app-bars with ellipses).

It's interesting to see Hamburger menus bleeding back into the design language
with Windows 10. It seems a strange, sad concession to meeting Android/iOS
designs and even Desktop designs (with their million year old menu bars)
"half-way". That said, one of the interesting twists that Windows 10 designs
thus far tend to put on the Hamburger menu is that secretly in many cases the
Hamburger icon is just a replacement for the Windows Phone 8's App Bar
ellipsis:

The items on the bar show just icons at tablet size or lower and the Hamburger
simply reveals app labels and maybe (rarely) lesser used text-only options.
(At larger than table sizes sometimes the bar defaults expanded rather than
condensed.)

This roughly corresponds with the Facebook suggestions in the article here.

The interesting differences to a WP8 app bar are that the W10 hamburger "app
bars" have mostly gone vertical and the hamburger is a toggle rather than the
WP8 app bar ellipsis was a "slide".

It will be interesting to see how this design language continues to
accrete/evolve as Windows 10 Mobile gets closer to launch.

~~~
snuxoll
As someone who has been using Windows Phone devices since WP7 was launched the
hamburger button making an appearance makes me just shake my head in disgust.
To an extent Microsoft has been making reasonable use of it, in Outlook it's
particularly nice since I no longer need to expand the app bar to get to my
folder list - but I fear the signaling it may be giving 3rd party designers,
that they can get away with mystery meat navigation and ruin one of the better
parts of the Windows Phone UX.

~~~
WorldMaker
I'm right there with you. My hopes are that enough developers and designers
are paying attention to why and what the hamburger menus are doing in Outlook
and Xbox and some of the other Microsoft-built Windows 10 applications rather
than just duplicating whatever they've been doing on iOS/Android. I've got a
feeling that maybe Microsoft themselves hope that their smarter use of
hamburgers might be contagious in the other direction (just as so much of
Material UI copied some of the flatter styles of WP7/8) and iOS/Android
developers might start using the Windows app bar-style of hamburgers. I'm
worried, of course, that designers/developers won't be paying attention and
will assume the consistency in iconography applies a consistency in
functionality. That said, I also see Microsoft's point that the global
consistency in iconography may be more important than consistent functionality
in a world where users are using applications on multiple platforms (ie, so
many people are using some admixture of Windows, Mac OS X, iOS, and Android
these days).

------
freshyill
It is almost always preferable to have all of your options available to the
user at all times. However, it's very important to make the distinction
between apps and websites when talking about a hamburger menu.

A tab bar is great in an iOS app with a limited scope of functionality. That
just doesn't work a sprawling news site covering dozens of topics. A small,
product-focused website may even be able to get away with showing all of their
navigation options at once. For many sites, however, it's unfortunate, but
sometimes you just need a well-organized junk drawer inside a hamburger menu.

~~~
shampine
I keep reading these articles about how awful hamburgers are but so far not a
single one addresses menus that have more than 3-5 items. I manage sites that
we have kicked around ideas for how to deal with the menu better, but the size
of what is in that menu makes all the proposed ideas I've seen not feasible.
So I'm right there with you that it is unfortunate, I wish these articles had
more in way of solutions than just regurgitating what we've heard for a while,
hamburgers suck.

~~~
jalfresi
I'm gonna sound like an old fart now (mostly because I am) but back in the
late 90s we used to have a discipline called Information Architecture that
existed to handle exactly this case.

You see, Information Architecture has more to do with capital D Design, not
fad, bandwagons and styles. Its about solving this exact problem. I really
hope the concept of User Experience dies in a fire so we can go back to real
Design.

(User Experience is in my opinion the most nebulous, snake-oil concept I've
heard since SEO. Users don't want "an experience". They want to get in get
what they want and to get out. The experience should be invisible)

~~~
kagamine
Perhaps the term IxD (Interaction Design) would sit better with you than UX.
IxD includes UX but also Info Architecture and has a lot more to do with
structuring information before any 'design' takes place. In IxD you wouldn't
normally touch on users or appearance (affordances for example is far off down
the road at this point) before you sort out the "what is it?" and "what
data?". It's very easy to start thinking about the users, too easy in fact,
that many self-proclaimed 'UX-experts' focus on that and forget that 'content
is still king' and it's presentation may actually _attract_ users, so don't
try to tailor shit to maggots when you can create a garden and attract bees.

------
corysama
My summary. Tell me if I missed something.

Hey, designer. I know screen real estate on mobile is extremely limited. I
know it would be really nice to fill the whole screen with content and just
have a little, square, "more" icon tucked in the corner. I know you've tried
to establish the hamburger icon as the universal "more" icon.

Too bad. Users aren't catching on as quickly as you'd like. They don't notice,
understand or utilize the icon. Even if they do notice and understand, an
ambiguous "more" is dramatically less engaging than explicitly showing what
they can get. A "more" icon is asking them to expend effort up front exploring
your interface with no clear reward in sight. So, they don't bother. Like, a
measurable 50+% drop in engagement don't bother.

So, stick to tab bars as much as you can. It seems like a waste of screen
space. But, the results still seem worth the cost.

~~~
potatolicious
Mmm, close, I would nitpick a few points:

\- Most users do understand the hamburger icon, so they notice and understand
it, but they definitely don't utilize it.

\- It's not really about engagement. Users generally don't go about thinking
to themselves "boy that icon looks so engaging and just begs for a click!"

\- It's all about workflows and hints built into these workflows.

At any moment on your website/app your users are trying to accomplish
something. UI nudges and pulls them in the correct direction towards their
destination. At every step the user is evaluating the screen to determine the
thing most relevant to moving closer to their goal.

A hamburger button never - and I mean _never_ \- tells the user "click me and
you'll be closer to your goal!". A hamburger button is utterly neutral in
every single way, even to the trained user who knows what a hamburger button
does.

\- When evaluating the screen to determine what they should do next, almost
everything feels more relevant than the hamburger button.

It's not that people don't _want_ to click on the hamburger button, it's that
in any particular circumstance some other UI element will feel more relevant
(even if it isn't actually true).

------
mark242
James Archer, author of the piece, is Chief Creative Officer of both Crowd
Favorite, and Forty, both of which use -- surprise -- the hamburger menu in
their mobile sites. Is this another case of "do what I say, not what I do"?

~~~
jamesarcher
It's in the queue. :) The Crowd Favorite site is in the process of being
redesigned, and there'll be changes to the Forty site coming shortly after
that.

(These changes aren't just because of the hamburger menu, obviously. Digital
stuff moves pretty fast in general, and companies keep evolving.)

~~~
JustSomeNobody
Ah, so this was a preemptive, "We don't use the hamburger 'cause it is not
cool anymore", blog post. ;)

~~~
jamesarcher
Actually, more like a "We don't use the hamburger because there's now ample
statistical evidence that it doesn't work" blog post. :)

------
masswerk
> "and it’s consistent with the logic of the progressive disclosure design
> pattern."

And this is the crucial misinterpretation. Progressive disclosure as defined
and used by Xerox is about objects and related actions. And it's all about
visible objects! [1]

(Mind the classic example of a square in a drawing application: Clicking the
shape discloses editing functions and displays handles to size the object.)

And here is the real problem: The hamburger icon as used today has no other
object but the global context. By exposing context to the global context, it's
a mere apropos without an object the user might relate to.

When Norm Cox designed the original icon for the Xerox Star user interface, it
was a visual anchor for a menu revealing contextual functions to the visible
content of the document. (Like selecting rows, etc. [2]) This is notably
something else than the global, quite abstract context of a site navigation,
disclosing navigational functions to address off-screen content.

Today's hamburger icon is just a paradigmatic misunderstanding.

[1] "A subtle thing happens when everything is visible: the display becomes
reality. The user model becomes identical with what is on the screen. Objects
can be understood purely in terms of their visible characteristics. Actions
can be understood in terms of their effects on the screen. (...) In Star, we
have tried to make the objects and actions in the system visible." (Designing
the Star User Interface; David Canfield Smith, Byte, Issue 4/1982)

[2] Compare:
[http://g.recordit.co/8Q5oAYCaVx.gif](http://g.recordit.co/8Q5oAYCaVx.gif)
(Outtake from a ACM CHI 1990 conference video,
[https://vimeo.com/61556918](https://vimeo.com/61556918). Mind that the
window-less bar at the top represents the global system as opposed to the
document window below and its menu button(s).)

~~~
masswerk
[continued] To put this more clearly:

The hamburger icon/menu introduces a metaphor of its own that is not
consistent with progressive disclosure as used elsewhere in common interfaces
(see above). It's more a "and here is the rest that you may be missing"-icon
that isn't motivated by any consistent notion of the interface, but by concern
for screen real estate. As a user, we may not assume the content of the menu,
but by empirical knowledge and by considering functions that we are missing
and that may be hidden somewhere.

The hamburger menu _is_ the application. It's content may be related to only
by expectation and assumptions regarding the extent of the application's basic
functionality. Arguably, in the light of this considerations, the icon is
communicating rather sparsely what it is and what it does. (Actually, it
exposes a global, unrelated view on the basic extent of the app.)

While its use may be arguable for an application (esp. mobile apps), it's
highly problematic, when used in web sites and web applications. (The
difference: While in the former case it's located rather in the window chrome,
thus relating to the viewport as an object, it's part of the view in the
latter – like a wormhole to the global context.)

------
pxlpshr
It should be obvious to most designers that critical features of your product
should not be buried or hidden.

I disagree with this article that hamburger menus should be burned to the
ground. I think it's useful for tucking away secondary or tertiary
functionality.

* Facebook still uses it for accessing your friends list. With smartphones growing in physical size, there is more vertical real-estate to bring the tabnav back.

* Despite it not working for NBC, it seems to be working well for New York Times – and not yellow. And I actually really like NYT's new page layout.

* Google Maps uses it – also not yellow.

~~~
Retra
Just because people use it doesn't mean it's a good idea.

------
danneu
The hamburger menu's entire value is that it's a simple default that you can
generalize even programmatically across all websites. It's why the frameworks
mentioned in the article can implement it for you. It's a place to start.

But it requires some deliberate thought, effort, and app-specific solutions to
replace it with something better, and that planning makes you answer all sorts
of hard questions you might've not ever had to answer about your
website/product, like "how are my users actually using this?"

I'd wager that everyone agrees that their own site's hamburger menu is a sore
spot, suboptimal.

But the next rung up is a taller order than these types of articles admit.

I think a good follow-up blog post would be "Design patterns for escaping the
hamburger menu" that showcases a variety of real-world approaches.

------
oneeyedpigeon
Chrome has a hamburger menu, even on a huge desktop screen with plenty of room
for a proper menu. OSX has an excellent universal menu which, due to
consistent placement, behaviour, and content, provides a high level of
usability. Chrome's hamburger menu duplicates some - but not all - of its
functionality, and includes some bonus functions not available in the main
menu at all. It also has a submenu named - and you might want to check this
yourself, because it's pretty hard to believe - "More tools".

The main menu would be absolutely fine on its own; I think the hamburger menu
is present because it's present on Windows, which - of course - doesn't have a
universal menu. Still, I'm not letting Google off the hook here. These
flagrant abuses of usability are things that the average undergrad should be
able to identify, yet one of the biggest companies in the world can't?
Disappointing.

~~~
72deluxe
Weirdly, the shortcut for this menu on Windows is......

drumroll please....

alt-F, like it is the File menu.....

------
leepowers
Or in short: Having a single, minimalistic hamburger icon doesn't convey
enough information to be useful. It may be possible to improve engagement
metrics by using informational icons and titles. None of these statements are
particularly controversial.

So, should we web developers start ripping out hamburger icons on our sites.
_NO_. Avoid groupthink. Implement and test layouts that produce measurable
results. Removing hamburger icons is no panacea. What are the users doing?
What does the data say? If cargo cult thinking produced an over-reliance on a
single navigation icon, we aren't going to solve anything by snapping back in
the other direction.

Also, there's a difference between a _hamburger icon_ and a _drawer menu_. On
mobile devices a drawer menu is still a fantastic way to reveal additional
navigation options without a page reload over a (potentially) slow network
connection. Stuffing a navigation list into drawer menu is an easy solution.
But it may produce poor results.

------
makecheck
Long before these mobile menus appeared, an icon with a series of lines always
meant "drag here" (e.g. in a desktop app, inside a resizable divider or a size
box).

My first impression of these was therefore to try to grab them and pull, as if
to _slide_ the bars that they appear on. Unfortunately, even now, most
implementations of "hamburger menus" do the worst possible thing when you try
to slide them: _nothing at all_.

And then there's the weirdness of seeing them on the desktop where there is
plenty of space. It's the same frustration I feel whenever I see a desktop app
_force_ content into a tiny, non-resizable box with scroll bars on a 1920x1200
screen! If I have the space, I really, really want to use it. Any design that
refuses to expand to available space is simply wrong.

~~~
Retra
Here's where I always see them:

[http://kdcissell.com/2012/09/28/75/](http://kdcissell.com/2012/09/28/75/)

------
DanSmooth
I might be missing something but the first Facebook example used in the
article seems wrongly applied to this problem. They just transferred the menu
bar to the bottom. All the icons, which were at the top, are now just located
at the bottom. They are now easier to see - the text doesn't hurt also, and
probably easier to use (no conflict with the phones top-bar), which could be
the explanation for the observed results. The only difference I can see is the
switch of the hamburger at the top with a search icon.

Nobody ever asked me - for obvious reasons, because I might be blind - but I'm
partial to an icon where you have a + sign ("additional" items) on top a V
("directional clue"; could be pointed in other directions for a pull-up menu
for example) to form some sort of arrow.

------
johnatwork
Another good observation on this by Luke Wroblewski.
[http://www.lukew.com/ff/entry.asp?1945](http://www.lukew.com/ff/entry.asp?1945)

------
declan
My co-founder and I debated whether to use the hamburger menu for our iOS and
Android apps (currently in beta -- [https://recent.io/](https://recent.io/)).

We decided to keep the hamburger menu on both platforms for launch. Our
reasoning was that it's a common UI convention and our primary navigation
options -- Home, Recommended, Hot News, Local News, and topics -- are visible
in the extended app bar. An option to follow additional topics appears inline
in the Home tab.

So the three functions that are _only_ accessible through the hamburger menu
are bookmarks, history, and settings, which seems like a reasonable
compromise. You could use our app fully for a year, albeit with the default
settings and no bookmarks/history, without ever seeing the hamburger menu.

Analytics shows that the hamburger menu is used frequently by our beta users,
so I'm fairly confident that we made the right choice. On the other hand, the
new YouTube Android app -- which had more in its hamburger menu than we do --
has moved in the opposite direction and eliminated it.

~~~
JoshTriplett
Could you integrate bookmarks and history into "home"? For instance, if home
is supposed to be what's recent, history is a natural "less recent".

~~~
declan
Thanks for the suggestion! I don't think either of us had thought of that.

Inside the app, Home is a starting point that lets you see your news
highlights at a glance. It does seem like the concept could be broad enough,
as you say, to support history and bookmarks...

~~~
JoshTriplett
The inspiration came from Firefox Mobile, which has a unified home screen that
incorporates navigation, recent history, bookmarks, and tabs from other
devices, all in the same home screen.

If Home is highlights of the day, then it seems natural to scroll down and see
a heading for "Yesterday" with yesterday's highlights, rather than less
relevant news from today (which could appear in the other views).

------
kenrikm
In my apps I generally use the Hamburger menu to hide stuff that's required
but not used very often. (Settings, legal agreements etc..) Since engagement
is lower for these things anyway it allows you to have them there if needed
without cluttering the main content that should be the focus.

------
ggchappell
Dare I suggest that the "gear" menu, so ubiquitous on Google pages these days,
suffers much the same problems as the "hamburger"?

~~~
prewett
Except that at least a gear looks like an icon, which suggests it might be
clickable (since the flat-design people thought that making buttons look like
buttons was a bad idea). My problem with the hamburger menu is that I
literally don't see it, because three horizontal lines does not look like an
icon to me, it looks like a decoration. In pretty much every place I've needed
to use it I end up going "hmm, where is [essential feature I can't find]?"
Nowhere? Not possible! Oh, yeah, those three lines, that's actually a menu.
Yep, there it is.

~~~
ggchappell
Good point.

------
asgard1024
I hate the Nondescript Icon Movement. The Hamburger should die together with
Three Dots, Angle Brackets and other geometric shapes that have a chutzpah to
call themselves icons. Not to mention they killed the Tooltips!

These things don't appear in the vacuum - the Hamburger Menu originated from
the Celtic Knot Menu, which was originally at the end of the Ribbon. The
Ribbon itself confused the use cases of the Menu and the Toolbar, and was
rightly criticized for that.

I am just learning Emacs and it's a little paradox that this aspie guy Richard
Stallman is the one who got so many things around the UI right. We are
unfortunately confusing "easy to learn" with "dumbed down so much there is
nothing to learn".

~~~
pandler
The one thing that frustrated me the most about Android was being confused
about what the icons meant, especially when trying to copy text[1].

Select text > Think for a few seconds about which one of these similar looking
icons means "copy" > press buttons until I figure it out.

[1] [http://www.droid-life.com/wp-content/uploads/2015/02/cut-
cop...](http://www.droid-life.com/wp-content/uploads/2015/02/cut-copy-paste-
lollipop2.jpg)

~~~
72deluxe
Android buttons can have hints associated with them, so if you long-press on a
button, a tooltip/hint will be presented (if the developer bothered adding
tooltip text)

------
InclinedPlane
Here's the core question, is this a permanent or temporary problem?

I remember back in the early years of the web (mid to late '90s) and one of
the most important factors in designing websites was realizing that users
don't scroll. They just didn't, and if your site design relied on that fact
then you'd be screwed. But users learned to scroll, and now scrolling is
perhaps the most important and most universal method of interacting with the
web. In another 10 years will the hamburger menu become so well known and
universally relied upon that not doing it will hurt your usability? Or are
there fundamental reasons why it will never be good?

~~~
TuringTest
The article tackles that:

"Some people argue that “we just have to wait for users to learn the new
navigation convention,” but hopefully you can see how the principle of
information scent invalidates that argument. [...] The problem wasn’t that
users were confused by the hamburger menu, but rather that there was never a
compelling reason to click it in the first place."

The principle of information scent is explained in the previous section:

"Most people navigation based on what’s called “information scent.” When faced
with a set of options, they’ll choose the option that gives the strongest
indication that it’ll bring them closer to what they want, like an animal
sniffing around for food. [...] You know what never looks anything even close
to what the user actually wants? A small three-bar icon tucked in the corner
of a website. It has no information scent. Even after the user has exhausted
every other option, it still might not occur to them that the answers they
seek are hiding behind those three bars. Users generally aren’t inclined to
click it."

------
kevindeasis
Origin
[https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87...](https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83/?utm_source=designernews)

In Depth [https://medium.com/@saffadkhan/the-hamburger-paradigm-
ebb695...](https://medium.com/@saffadkhan/the-hamburger-paradigm-ebb695b5da86)

------
kazinator
The desktop Firefox has one of these. It's been quite unintuitive. It contains
some commands depicted by icons, which constitute an overlapping set of the
functionality under the regular F)ile menu, like "New Window", "New Private
Window", "Print" and whatnot. But there are commands that appear in other
menus: the monkey wrench Developer icon appears to have similar content to
"Tools/Web Developer".

I think what we are supposed to understand is that this Firefox Hamburger Menu
(FHM) is really a TOA: Toolbar Overflow Area. It's a repository of icons for
doing arbitrary things.

Its Customize button at the bottom invokes exactly the same UI as
View/Toolbars/Customize: a big view where you can move icons between an
editable version of the FHM, the browser toolbar, and a repository of
available tools (shown in the main pane as a large area).

So any item that can be on your toolbar can go into FHM, including bookmarks.
Hence: TOA: toobar overflow area for items you don't use much.

It would be better if they initialized it empty, and if it somehow clearly
communicated "Hey, I am a toolbar overflow area: put stuff here that would go
on the toolbar that you don't need so much, when you don't have space on the
toolbar."

~~~
zanny
This is what I use it for. When I do mobile bootstrap I'll always have
something else in navs besides the hamburger, and treat it as overflow.

A hamburger on its own is, like the article says, dead weight with no meaning.
If its on a bar with a bunch of other nav options and you feel like the one
you want is missing you often use it.

If I ever get around to it I'll hack up the bootstrap code and make it tab
based (icon + text underneath) but that seems like a PITA with how bootstrap
does its layouts in nav bars from my paltry experience.

------
k_sze
I cannot agree with the car analogy.

There are two reasons why the signs on the highway are so prominent:

1\. When you are driving a car, you are basically meat bags inside 1.5+ ton
collapsible metal cages moving around at 30+ or even 100+ km/h. One wrong move
and meat bags risk being injured or killed. That's why the signs _need_ to be
simple and prominent.

2\. A highway network has one and only one purpose: to transport people and
things around, so the number of things that you can do on a highway network is
inherently rather limited, which is why you can make decisions fast: go
faster, go slower, stop, yield, merge, change lanes, exit a ramp, enter a
ramp, turn left, turn right. That's why the signs _can_ be simple and
prominent.

Neither condition applies to websites in general:

1\. If you lose your way on a website, you generally won't injure or kill
anybody.

2\. Websites generally don't have one and only one purpose, the number of
things that you can do on a website cannot be expected to be limited. You
could argue that the website _menu_ should have one and only one purpose - to
bring visitors to various pages - but that's not always true either.

------
cwyers
> Here are a few reasons why the design industry is having trouble giving up
> the hamburger menu:

 _list of reasons people are doing dumb thing, mostly blaming the people_

Can we be honest here for a second? The reason people are still using
hamburger menus is because people have to make things work for phones. Phones
with screens that are vastly smaller than the screens on even the smallest
laptop, even for people who are hauling around the biggest phablets they can
find. And people with phones want to visit the same websites they visit on
their computers and there just... isn't... room. The hamburger menu gives you
close to double the space to work with, from a UI point of view.

The alternatives presented are partial solutions. It may well be true that
more people are reaching for the hamburger menu than truly need it. But the
tab bar example from the article only scales up so far before it stops being a
valid solution. And I don't know if there is a really good answer that doesn't
involve rewriting the web from the ground up.

------
vacri
Why do designers gravitate to extremes in these fads? Skeuomorphic! Flat
design! Everything in the hamburger menu! Nothing in the hamburger menu!

What's wrong with moderation? Day-to-day navigation elements shouldn't be in a
hamburger menu (also, an extra 'click' for common tasks is bad), but there are
plenty of non-everyday things that can go in there.

~~~
aikah
> Why do designers gravitate to extremes in these fads? Skeuomorphic! Flat
> design! Everything in the hamburger menu! Nothing in the hamburger menu!

You're blaming designers , I'm blaming developers(and managers) who can't tell
a good designer from a bad one and choose to work only with people that
"gravitate to extremes in these fads"(ie a majority of startups) Even Google
and Apple are not that dumb, they know flat design is stupid,they actually
have the data to prove it, thus they kept some depth within their UIs and
don't hesitate to use border shadows ,even on mobile, while trying to
"refresh" their UI, because a few influential SF bloggers were bashing their
"lack of minimalism".

Flat design makes absolutely no FN sense, from a UX stand point in an app on a
computer. If I can't tell what I can interact with and what I can't, I'm not
going to play a guess game, I'm going to move on and use something else. I'm a
big proponent of skeuomorphism and I don't care how ugly it looks. It's all
about usability. If it can help convey the purpose of a feature then it's a
good thing.

What makes sense on a poster, a printed magazine or a book doesn't make sense
for an app or a website.

------
unabst
Regarding NBC, their failure wasn't in the hamburger menu itself. They didn't
use it properly.

Their design had what looks like a menubar which is the precise anti-pattern
to a menu-button. Those items, and what is showing already as top page
content, is guaranteed to catch everyone's attention first. Those menu-button
items are not only hidden and require an extra click, by design they have been
made less important. And since so many sites have de-cluttered themselves by
simplification, users' first impression is that they got rid of everything for
the better... except it wasn't what they did, so basically everything under
that menu was unreachable.

Two things would have been better. First, they could have kept the menu icon
but had it expanded on the top page so that people would see those items as
top page content, and also make the intuitive connection that there was a
button that's associated with them. When the reader goes deeper, the menu
items could then safely be hidden, with the user intuitively fetching them via
the button as needed. Second, they could have given the button a name, instead
of use the icon. For example, Amazon's "shop by department" button is the
equivalent of NBC's hamburger menu. But since they have a menubar, instead of
having a menu-button on a menubar, they put a menu-item instead by giving it a
name and an equal member of the top selection. This upholds the primary design
pattern in use.

NBC's designers went for the hamburger without knowing how to use it or
understanding what made it popular. You cannot mix competing philosophies and
color is no substitute for broken intuitions. Even now that they settled for
the menu-bar, they don't have an at-state, under "more" we see the same items
in the menu in different order, and they use the pinned menu that doesn't go
away even when you scroll -- a design already falsified by the frame paradigm
of 1999.

------
michaelpinto
I think the real question should be: Are users using the hamburger menu and do
they know what it means?

Also this may not apply to apps, but on the web the hamburger is an indirect
result of responsive design techniques where a navigation menu has to compress
due to limiteds screen real estate in mobile.

But the funny thing is that as a designer I hate the hamburger because it does
feel like a hack. Yet I can see the popularity is due to trying to have
something work on both mobile and desktop.

In fact if you look at mobile only apps they tend to avoid the hamburger trap
(example: Instagram) but if you look at any app with a desktop legacy
(example: Facebook) you almost have to need it (unless you are willing to cut
features or make a suite of apps).

------
emodendroket
The neat thing about UI is that even bad designs eventually become the best
ones as people get used to them and recognize them. The hamburger menu appears
on a bazillion sites and it's going to be familiar to most users soon if it
isn't already.

~~~
turowicz
Exactly. As a user I don't mind them at all, as I recognise what they mean and
know how to use them.

------
davnicwil
> As a last-ditch attempt to solve the problem, they made it yellow

Amazing! I could almost write a script for the meeting in which that solution
was decided upon.

Rough sketch:

Idea is proposed by one individual at level N in the hierarchy. Some cursory
justification is provided, based on theory from a design article they read,
they think, or maybe it was a youtube video - doesn't matter: Yellow attracts
attention! Green makes people want to proceed! Red makes people want to stop!
It's so obvious.

Numerous objections are raised by individuals at level < N in the hierarchy,
who have a fairly deep understanding of design and have thought a lot about
the problem. The objections are considered briefly, and then summarily
ignored.

Meeting concluded.

~~~
aero142
Or in a less jaded view, they decided to try a very low cost fix before
pulling the trigger on a very expensive site navigation redesign. Or, even
better, this showed a partial improvement while they worked on the navigation
redesign since "turn it yellow" takes 2 seconds and redesign the navigation
takes much longer.

~~~
davnicwil
I like how this reads as jaded, was actually just an attempt at a bit of
humour! Of course I agree with everything you said, that's probably what it
actually was.

I've still not learned, probably never will, that tone rarely comes across in
text :-)

~~~
aero142
Well, I had no doubt that I was interpreting it correctly, so I'll mark it
down on my personal scorecard as well:)

------
rch
I think of it as the 'menu of last resort', that should never be a primary
navigation element. In that sense it works just fine.

I might also refer to it as the 'vent', since it seems to heat up after a few
months of not restarting my browser.

------
kriro
The main takeaway (which should be obvious) is that you should test your
navigation and probably test it a lot. It is very important and it does
matter. I've caught myself thinking of it as a pesky thing and I'm not a
designer and usually don't optimize for pretty because well I'm not good at
it. But the fact of the matter (imo) is that focusing on content and
navigation until you get them perfect is the best approach. "Silly" exercises
like card sorting early with potential users (or regularly for an existing
site) are actually pretty solid methods to improve sites and apps greatly.

------
AlwaysBCoding
Just use a tab bar where the right most tab is "more" and that brings up more
navigation options. Can still have more than 5 nav links and avoids the
hamburger menu, you can thank me later.

------
Robin_Message
I'm surprised no-one has mentioned Android version 2 (vintage), which had a
hamburger menu as a physical/soft button. It was then ditched and replaced
with a app switcher button.

That hard button was even better from a real estate point of view, and since
it was consistent across all apps it seems like users ought to have grasped
it.

The surprising and important thing here is that, even if the user knows the
menu is there and that, if asked, it could help them, it doesn't appear
salient and doesn't get clicked.

------
smcl
This example from the article still has a hamburger menu, just in a different
location:

[http://deep.design/wp-
content/uploads/2015/07/B82uUMQCcAE4Eo...](http://deep.design/wp-
content/uploads/2015/07/B82uUMQCcAE4Eoh.png)

------
tomphoolery
The fact that designers think this icon looks like a hamburger is the real
problem with design these days. ;-)

------
detrino
Reading this article I instantly saw parallels to Gnome 3 and it reminded me
what a usability nightmare it is.

------
capex
In a substantial app like Facebook or Spotify, the hamburger menu is still
there, in addition to the thumb-able tabs. Large applications have a
significant navigation structure, and you can't reduce them to 3 or 4 tabs.
While the OP's arguments are good, is there a valid alternative?

------
coldcode
It shouldn't be the only thought you have. The pluses are that people are used
to it; sometimes common usage is better than inventing something unusual. But
design should involve thinking about what people are trying to do with your
app rather than starting with some design idea.

------
oompt
Shit parallax doesn't work either.

------
mark_l_watson
I like the hamburger icon because (I think) almost everyone who would read my
web sites (technical stuff) knows what it is.

I agree that if the hidden menu has very few options then it is a good idea to
have everything visible but that is not feasible for more than a few
navigation options.

------
EGreg
[http://blog.manbolo.com/2014/06/30/apple-on-hamburger-
menus](http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus)

------
prawn
I generally use "Menu" alongside the burger icon to remove ambiguity, and
still show 2-3 primary nav options alongside to minimise loss for those who
don't use it.

------
ilaksh
I thought it was about food. I'm going to In-N-Out anyway.

------
doczoidberg
hamburger menu should only contain notbso often needed actions. There can be
additional buttons in the GUI. Simple as that.

also most android apps support swiping from the border which gives the user a
quick access to actions not using any space. The author doesn't mention it?

------
GolfJimB
Awesome! Redesigning away the hamburger menu on my site immediately.

------
malkia
In all honesty, I thought the article was going to be really about restaurant
(fast food or not) menus... And I know what hamburger menu is... But hamburger
icon would've been more direct and up to the point (for me at least)!

------
Marazan
Oh thank fuck. I thought I was the only person who thinks the hamburger menu
is awful. I have been totally bemused by it's pervasiveness.

------
Animats
Worse is the "invisible x" menu. The one for the options that help the user
but decrease revenue, such as "mark this item as spam". Facebook uses this a
lot. (Mouse over a Facebook ad. A greyed-out "x" appears at the right of the
ad. Mouse over the "x", and the grey turns darker. Click on the "x", and a
menu comes up demanding to know why you didn't like that ad.) So does Youtube.
(Those silly pop-ups on Youtube, if moused over, display a tiny, tiny "x" in
the upper right hand corner which will make them go away.)

Yet another tool for "screw the user" UI design.

~~~
shostack
Except these don't actually "remove ads." They are meant to further train the
algorithm on relevancy while providing the minority of users who use it a
button that lets them feel like they are doing something about the annoying
ads.

------
natch
I was inclined to dismiss this author's view on mobile design since they were
saying "click" this and "click" that everywhere. On mobile, there is no
clicking. Clicking is for when you have a mouse. On mobile there's tapping.

But. That being said, the article makes sense. Hamburger menus are where
features go to die.

So if you want a feature used, I agree it should be brought forward in a
different way.

~~~
jamesarcher
I definitely struggle with that wording issue, since there are a variety of
devices and interaction methods that make it difficult to write about without
the language getting cumbersome. :) "Click" seems to be the most commonly-
accepted term for initiating a request for the browser to load a URI based on
a hyperlink, so I went with that as a general term.

