18 ms·

The Hamburger Menu Doesn't Work

484 points by networked 11y ago

deleted 11y ago
[deleted]
- jbob2000 11y ago
  I think the point was not to use the hamburger as a "catch-all". It's easy to just chuck features in there without thinking about how the users will truly interact with them. The point I took away was that menus should have logical, semantic purposes, and common functions shouldn't be buried inside them.
coldcode 11y ago
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.
campuscodi 11y ago
Yes it does. Now stop it with these stupid articles.
- scott_karana 11y ago
  Did you actually read the article? The author had some sensible justifications for his argument. Please rebut those, instead of name-calling.
- mynameismonkey 11y ago
  They really don't. Here's a bunch of A/B test results: http://exisweb.net/menu-eats-hamburger http://exisweb.net/menu-eats-hamburger and followup http://exisweb.net/mobile-menu-abtest http://exisweb.net/mobile-menu-abtest http://conversionxl.com/testing-hamburger-icon-revenue/ http://conversionxl.com/testing-hamburger-icon-revenue/ http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/ http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer... http://www.adammcfarland.com/2013/10/24/responsive-mobile-ui-split-test-icons-or-text/ http://www.adammcfarland.com/2013/10/24/responsive-mobile-ui... Anecdotally, I don't use a ton of mobile social apps, and the first time I encountered this icon I thought it was some weird play on an equals sign. Never occurred to me it was a menu. Now my own dev team is using it and for some bizarre reason I cannot convince them to stop.
freshyill 11y ago
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.
- eridius 11y ago
  But there's almost always a better way to present it to the user. If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. If you absolutely must hide your sections behind a menu, there are practically infinite different menus that make more sense. The hamburger menu only makes sense when it's the literal junk drawer of the app/site, when there's no possible way to categorize its contents with anything more than the completely generic 3 horizontal bars. But primary navigation elements are not junk and don't belong there.
  - CognitiveLens 11y ago
    > "infinite different menus that make more sense" This a a little hyperbolic. If you want surface a link to the Lifestyle section, then you also have to accept that links to about a dozen other sections need to be visible as well - on mobile, this would lead to about a third of the visible page (or more) being consumed by navigation links. Alternatively, you put the nav at the bottom of the page, but I would argue that doing so makes it less accessible/visible than it would be in a hamburger menu. The real challenge is not when you're trying to put 3-4 links or nav-groups in a hamburger menu, but when your site structure is so flat/shallow that you have a dozen or more equally-viable nav/action options for users. Except for the NBC example in the article, the nav in the examples can be distilled into a narrower, deeper structure. The article author doesn't appear to realize that on NBC news, the hamburger-equivalent "more" menu still appears at mobile widths. Sometimes it really is a decent solution.
malkia 11y ago
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)!
johnatwork 11y ago
Another good observation on this by Luke Wroblewski. http://www.lukew.com/ff/entry.asp?1945 http://www.lukew.com/ff/entry.asp?1945
deleted 11y ago
[deleted]
- pg_is_a_butt 11y ago
  how can anyone write a comment like this when the claims were backed up with statistics and charts and graphs? oh... i get it... you're dumb.
pxlpshr 11y ago
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 11y ago
  Just because people use it doesn't mean it's a good idea.
davnicwil 11y ago
> 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 11y ago
  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 11y ago
    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 11y ago
      Well, I had no doubt that I was interpreting it correctly, so I'll mark it down on my personal scorecard as well:)
deleted 11y ago
[deleted]
Animats 11y ago
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 11y ago
  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.
declan 11y ago
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 11y ago
  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 11y ago
    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 11y ago
      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).
natch 11y ago
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 11y ago
  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.
doczoidberg 11y ago
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?
mark_l_watson 11y ago
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.
oompt 11y ago
Shit parallax doesn't work either.
AlwaysBCoding 11y ago
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.
deleted 11y ago
[deleted]
mark242 11y ago
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"?
- georgefrick 11y ago
  I think it's the new world case of 'I sold you solution X, now it's time for solution Y'.
  - davidw 11y ago
    I'm waiting for 'flat' design to be passé, myself.
    - Goronmon 11y ago
      I find a lot of web design to be choosing the least bad among a bunch of bad options. I find 'flat' designs to be the least bad in most situations.
      - davidw 11y ago
        Except for the fact that your average person can't tell the difference between a label and a button...
- grey-area 11y ago
  There is a mea culpa in the article about this.
  - deleted 11y ago
    [deleted]
- jamesarcher 11y ago
  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.)
Marazan 11y ago
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.
dperfect 11y ago
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.
- sandofsky 11y ago
  You put the most important menu items in a tab bar. If you really, really need the other junk, hide the long tail of menu items in a "more" tab.
  - dperfect 11y ago
    I agree that sometimes that works really well. Still, for some apps/websites there is really only one obvious and important function. In those cases, a tab bar would just be putting "the other junk" in a more important place than it should be. There will always be a conflict in design between minimalism and functionality. The hamburger menu just happens to be prime territory upon which that battle is fought.
    - sandofsky 11y ago
      There's always an exception, but your app probably isn't one of them.
      - dperfect 11y ago
        Out of curiosity I just opened up Facebook on my iPhone (mentioned in the article as a good example). The tab bar has 5 items: News Feed, Requests, Messages, Notifications, and More. I'm in the News Feed 99% of the time. Requests and Notifications are pretty much redundant (since requests become notifications) and could easily be put somewhere else - maybe nav/title bar. Messages is completely useless - just shows me a button to install a different app that I don't care about (of course that's "better for metrics", but not better for users). And "More"... well that's a standard hamburger menu, and frankly the only thing that needs to be there in my opinion. Maybe I'm an atypical user, but that experience seems to be the case in a lot of tabbed apps.
detrino 11y ago
Reading this article I instantly saw parallels to Gnome 3 and it reminded me what a usability nightmare it is.
WorldMaker 11y ago
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 11y ago
  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 11y ago
    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).
emodendroket 11y ago
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 11y ago
  Exactly. As a user I don't mind them at all, as I recognise what they mean and know how to use them.
kenrikm 11y ago
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.
EGreg 11y ago
http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus
corysama 11y ago
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 11y ago
  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).
- jandrese 11y ago
  The way I read it was: The hamburger menu hides crucial functionality behind an utterly nondescript icon, so people end up not using the functionality and making inefficient use of the application/website. Or they just bail out early when it seems like there is nothing left to do. The discoverability is horrible so most users will never use it. It probably isn't helped by the superflat UIs that are the current fad that make it impossible to tell what elements are active or what they do. It's the kind of thing that makes sense on phones because the screen space is so precious (although with modern phones this is becoming less and less true), but only because you're willing to trade off some usability for getting more content on the screen. For a desktop site or application where you are not space constrained it is just bad design.
weinzierl 11y ago
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-menus/ https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-men... [2] http://jxnblk.tumblr.com/post/36218805036/hamburgers-basements-why-not-to-use-left-nav http://jxnblk.tumblr.com/post/36218805036/hamburgers-basemen... [3] http://jxnblk.tumblr.com/post/82486816704/an-update-on-the-hamburger-menu http://jxnblk.tumblr.com/post/82486816704/an-update-on-the-h... [4] http://mor10.com/hamburger-bad/ http://mor10.com/hamburger-bad/ [5] http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 http://gizmodo.com/who-designed-the-iconic-hamburger-icon-15...
DanSmooth 11y ago
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.
leepowers 11y ago
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.
ggchappell 11y ago
Dare I suggest that the "gear" menu, so ubiquitous on Google pages these days, suffers much the same problems as the "hamburger"?
- prewett 11y ago
  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 11y ago
    Good point.
abalone 11y ago
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
- deleted 11y ago
  [deleted]
  - abalone 11y ago
    I didn't say there was a problem with the design, just that it's inconsistent with their own advice. In that session the Apple UX evangelist absolutely rips hamburger menus to shreds calling them "tedious" and "terrible" at "telling you where you are [and] where else you can go". Quite a surprise to see it show up on apple.com, then.
    - deleted 11y ago
      [deleted]
      - vacri 11y ago
        Most mobile apps aren't more complex than that.
        deleted 11y ago
        [deleted]
      - benihana 11y ago
        Stop downvoting this. This isn't even a mildly offensive or challenging view, and it provides a good counterpoint.
oneeyedpigeon 11y ago
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 11y ago
  Weirdly, the shortcut for this menu on Windows is...... drumroll please.... alt-F, like it is the File menu.....
rch 11y ago
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.
michaelpinto 11y ago
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).
makecheck 11y ago
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.
- deleted 11y ago
  [deleted]
- Retra 11y ago
  Here's where I always see them: http://kdcissell.com/2012/09/28/75/ http://kdcissell.com/2012/09/28/75/
vacri 11y ago
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 11y ago
  > 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.
InclinedPlane 11y ago
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?
- aikah 11y ago
  > one of the most important factors in designing websites was realizing that users don't scroll It's not really that users don't scroll, more that relevant informations should be on the top of webpages rather than in the middle or the bottom. It don't think anybody ever said that users don't scroll in 90's .
- TuringTest 11y ago
  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."
masswerk 11y ago
> "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 11y ago
  [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.)
smcl 11y ago
This example from the article still has a hamburger menu, just in a different location: http://deep.design/wp-content/uploads/2015/07/B82uUMQCcAE4Eoh.png http://deep.design/wp-content/uploads/2015/07/B82uUMQCcAE4Eo...
ilaksh 11y ago
I thought it was about food. I'm going to In-N-Out anyway.
kazinator 11y ago
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 11y ago
  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 11y ago
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.
tomphoolery 11y ago
The fact that designers think this icon looks like a hamburger is the real problem with design these days. ;-)
tomphoolery 11y ago
The fact that designers think this icon looks like a hamburger is the real problem with design these days. ;-)
capex 11y ago
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?
danneu 11y ago
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.
prawn 11y ago
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.
kevindeasis 11y ago
Origin https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83/?utm_source=designernews https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87... In Depth https://medium.com/@saffadkhan/the-hamburger-paradigm-ebb695b5da86 https://medium.com/@saffadkhan/the-hamburger-paradigm-ebb695...
cwyers 11y ago
> 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.
kriro 11y ago
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.
asgard1024 11y ago
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".
- mercer 11y ago
  The three dots at least make a bit more sense in that it's been a common way to represent 'there will be a next step before this action is performed'. I'm sure tons of people don't know about this - I remember it took me quite a while to realize that that's what the '...' represented in Windows/OSX menus - but at least with the dots people have had more than a decade of time to figure this out.
- pandler 11y ago
  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-copy-paste-lollipop2.jpg http://www.droid-life.com/wp-content/uploads/2015/02/cut-cop...
  - 72deluxe 11y ago
    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)
GolfJimB 11y ago
Awesome! Redesigning away the hamburger menu on my site immediately.
digital-rubber 11y ago
omfg how much crack did you smoke before you wrote that piece of .. text "Let’s end the hamburger era" -- this kind of recommendation/ motivational stuff is what is wrong with the world. You don't like something, YOU don't do it. Don't force your ideas upon others, no matter how good you think they are. Waste of internet space blog.
unabst 11y ago
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.
Robin_Message 11y ago
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.

484 points by networked 11y ago

deleted 11y ago

[deleted]

jbob2000 11y ago
I think the point was not to use the hamburger as a "catch-all". It's easy to just chuck features in there without thinking about how the users will truly interact with them. The point I took away was that menus should have logical, semantic purposes, and common functions shouldn't be buried inside them.

coldcode 11y ago

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.

campuscodi 11y ago

Yes it does. Now stop it with these stupid articles.

scott_karana 11y ago
Did you actually read the article? The author had some sensible justifications for his argument. Please rebut those, instead of name-calling.
mynameismonkey 11y ago
They really don't. Here's a bunch of A/B test results: http://exisweb.net/menu-eats-hamburger http://exisweb.net/menu-eats-hamburger and followup http://exisweb.net/mobile-menu-abtest http://exisweb.net/mobile-menu-abtest http://conversionxl.com/testing-hamburger-icon-revenue/ http://conversionxl.com/testing-hamburger-icon-revenue/ http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement/ http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer... http://www.adammcfarland.com/2013/10/24/responsive-mobile-ui-split-test-icons-or-text/ http://www.adammcfarland.com/2013/10/24/responsive-mobile-ui... Anecdotally, I don't use a ton of mobile social apps, and the first time I encountered this icon I thought it was some weird play on an equals sign. Never occurred to me it was a menu. Now my own dev team is using it and for some bizarre reason I cannot convince them to stop.

freshyill 11y ago

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.

eridius 11y ago
But there's almost always a better way to present it to the user. If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. If you absolutely must hide your sections behind a menu, there are practically infinite different menus that make more sense. The hamburger menu only makes sense when it's the literal junk drawer of the app/site, when there's no possible way to categorize its contents with anything more than the completely generic 3 horizontal bars. But primary navigation elements are not junk and don't belong there.
- CognitiveLens 11y ago
  > "infinite different menus that make more sense" This a a little hyperbolic. If you want surface a link to the Lifestyle section, then you also have to accept that links to about a dozen other sections need to be visible as well - on mobile, this would lead to about a third of the visible page (or more) being consumed by navigation links. Alternatively, you put the nav at the bottom of the page, but I would argue that doing so makes it less accessible/visible than it would be in a hamburger menu. The real challenge is not when you're trying to put 3-4 links or nav-groups in a hamburger menu, but when your site structure is so flat/shallow that you have a dozen or more equally-viable nav/action options for users. Except for the NBC example in the article, the nav in the examples can be distilled into a narrower, deeper structure. The article author doesn't appear to realize that on NBC news, the hamburger-equivalent "more" menu still appears at mobile widths. Sometimes it really is a decent solution.

malkia 11y ago

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)!

johnatwork 11y ago

Another good observation on this by Luke Wroblewski. http://www.lukew.com/ff/entry.asp?1945 http://www.lukew.com/ff/entry.asp?1945

deleted 11y ago

[deleted]

pg_is_a_butt 11y ago
how can anyone write a comment like this when the claims were backed up with statistics and charts and graphs? oh... i get it... you're dumb.

pxlpshr 11y ago

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 11y ago
Just because people use it doesn't mean it's a good idea.

davnicwil 11y ago

> 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 11y ago
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 11y ago
  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 11y ago
    Well, I had no doubt that I was interpreting it correctly, so I'll mark it down on my personal scorecard as well:)

deleted 11y ago

[deleted]

Animats 11y ago

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 11y ago
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.

declan 11y ago

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 11y ago
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 11y ago
  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 11y ago
    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).

natch 11y ago

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 11y ago
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.

doczoidberg 11y ago

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?

mark_l_watson 11y ago

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.

oompt 11y ago

Shit parallax doesn't work either.

AlwaysBCoding 11y ago

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.

deleted 11y ago

[deleted]

mark242 11y ago

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"?

georgefrick 11y ago
I think it's the new world case of 'I sold you solution X, now it's time for solution Y'.
- davidw 11y ago
  I'm waiting for 'flat' design to be passé, myself.
  - Goronmon 11y ago
    I find a lot of web design to be choosing the least bad among a bunch of bad options. I find 'flat' designs to be the least bad in most situations.
    - davidw 11y ago
      Except for the fact that your average person can't tell the difference between a label and a button...
grey-area 11y ago
There is a mea culpa in the article about this.
- deleted 11y ago
  [deleted]
jamesarcher 11y ago
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.)

Marazan 11y ago

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.

dperfect 11y ago

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.

sandofsky 11y ago
You put the most important menu items in a tab bar. If you really, really need the other junk, hide the long tail of menu items in a "more" tab.
- dperfect 11y ago
  I agree that sometimes that works really well. Still, for some apps/websites there is really only one obvious and important function. In those cases, a tab bar would just be putting "the other junk" in a more important place than it should be. There will always be a conflict in design between minimalism and functionality. The hamburger menu just happens to be prime territory upon which that battle is fought.
  - sandofsky 11y ago
    There's always an exception, but your app probably isn't one of them.
    - dperfect 11y ago
      Out of curiosity I just opened up Facebook on my iPhone (mentioned in the article as a good example). The tab bar has 5 items: News Feed, Requests, Messages, Notifications, and More. I'm in the News Feed 99% of the time. Requests and Notifications are pretty much redundant (since requests become notifications) and could easily be put somewhere else - maybe nav/title bar. Messages is completely useless - just shows me a button to install a different app that I don't care about (of course that's "better for metrics", but not better for users). And "More"... well that's a standard hamburger menu, and frankly the only thing that needs to be there in my opinion. Maybe I'm an atypical user, but that experience seems to be the case in a lot of tabbed apps.

detrino 11y ago

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

WorldMaker 11y ago

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 11y ago
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 11y ago
  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).

emodendroket 11y ago

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 11y ago
Exactly. As a user I don't mind them at all, as I recognise what they mean and know how to use them.

kenrikm 11y ago

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.

EGreg 11y ago

http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus http://blog.manbolo.com/2014/06/30/apple-on-hamburger-menus

corysama 11y ago

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 11y ago
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).
jandrese 11y ago
The way I read it was: The hamburger menu hides crucial functionality behind an utterly nondescript icon, so people end up not using the functionality and making inefficient use of the application/website. Or they just bail out early when it seems like there is nothing left to do. The discoverability is horrible so most users will never use it. It probably isn't helped by the superflat UIs that are the current fad that make it impossible to tell what elements are active or what they do. It's the kind of thing that makes sense on phones because the screen space is so precious (although with modern phones this is becoming less and less true), but only because you're willing to trade off some usability for getting more content on the screen. For a desktop site or application where you are not space constrained it is just bad design.

weinzierl 11y ago

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-menus/ https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-men... [2] http://jxnblk.tumblr.com/post/36218805036/hamburgers-basements-why-not-to-use-left-nav http://jxnblk.tumblr.com/post/36218805036/hamburgers-basemen... [3] http://jxnblk.tumblr.com/post/82486816704/an-update-on-the-hamburger-menu http://jxnblk.tumblr.com/post/82486816704/an-update-on-the-h... [4] http://mor10.com/hamburger-bad/ http://mor10.com/hamburger-bad/ [5] http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 http://gizmodo.com/who-designed-the-iconic-hamburger-icon-15...

DanSmooth 11y ago

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.

leepowers 11y ago

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.

ggchappell 11y ago

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

prewett 11y ago
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 11y ago
  Good point.

abalone 11y ago

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

deleted 11y ago
[deleted]
- abalone 11y ago
  I didn't say there was a problem with the design, just that it's inconsistent with their own advice. In that session the Apple UX evangelist absolutely rips hamburger menus to shreds calling them "tedious" and "terrible" at "telling you where you are [and] where else you can go". Quite a surprise to see it show up on apple.com, then.
  - deleted 11y ago
    [deleted]
    - vacri 11y ago
      Most mobile apps aren't more complex than that.
      - deleted 11y ago
        [deleted]
    - benihana 11y ago
      Stop downvoting this. This isn't even a mildly offensive or challenging view, and it provides a good counterpoint.

oneeyedpigeon 11y ago

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 11y ago
Weirdly, the shortcut for this menu on Windows is...... drumroll please.... alt-F, like it is the File menu.....

rch 11y ago

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.

michaelpinto 11y ago

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).

makecheck 11y ago

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.

deleted 11y ago
[deleted]
Retra 11y ago
Here's where I always see them: http://kdcissell.com/2012/09/28/75/ http://kdcissell.com/2012/09/28/75/

vacri 11y ago

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 11y ago
> 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.

InclinedPlane 11y ago

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?

aikah 11y ago
> one of the most important factors in designing websites was realizing that users don't scroll It's not really that users don't scroll, more that relevant informations should be on the top of webpages rather than in the middle or the bottom. It don't think anybody ever said that users don't scroll in 90's .
TuringTest 11y ago
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."

masswerk 11y ago

> "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 11y ago
[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.)

smcl 11y ago

This example from the article still has a hamburger menu, just in a different location: http://deep.design/wp-content/uploads/2015/07/B82uUMQCcAE4Eoh.png http://deep.design/wp-content/uploads/2015/07/B82uUMQCcAE4Eo...

ilaksh 11y ago

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

kazinator 11y ago

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 11y ago
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 11y ago

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.

tomphoolery 11y ago

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

tomphoolery 11y ago

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

capex 11y ago

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?

danneu 11y ago

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.

prawn 11y ago

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.

kevindeasis 11y ago

Origin https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83/?utm_source=designernews https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87... In Depth https://medium.com/@saffadkhan/the-hamburger-paradigm-ebb695b5da86 https://medium.com/@saffadkhan/the-hamburger-paradigm-ebb695...

cwyers 11y ago

> 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.

kriro 11y ago

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.

asgard1024 11y ago

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".

mercer 11y ago
The three dots at least make a bit more sense in that it's been a common way to represent 'there will be a next step before this action is performed'. I'm sure tons of people don't know about this - I remember it took me quite a while to realize that that's what the '...' represented in Windows/OSX menus - but at least with the dots people have had more than a decade of time to figure this out.
pandler 11y ago
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-copy-paste-lollipop2.jpg http://www.droid-life.com/wp-content/uploads/2015/02/cut-cop...
- 72deluxe 11y ago
  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)

GolfJimB 11y ago

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

digital-rubber 11y ago

omfg how much crack did you smoke before you wrote that piece of .. text "Let’s end the hamburger era" -- this kind of recommendation/ motivational stuff is what is wrong with the world. You don't like something, YOU don't do it. Don't force your ideas upon others, no matter how good you think they are. Waste of internet space blog.

unabst 11y ago

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.

Robin_Message 11y ago

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.