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]
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.
The difference is that Apple still has links at the bottom of the page for when the reader gets there. In fact the first link is "Shop & Learn" which expands out to be the same product listing as the Hamburger menu up the top.
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.
> I personally don't find anything wrong with a hamburger menu per se.
The trouble, which the article describes with some case studies on engagement before and after hamburger menu implementations, is that people who are not you are confused by it and don't understand it to be a menu.
fwiw, I've encountered this quite a bit when helping users switch from Internet Explorer to Firefox or Chrome -- both of which use the stupid hamburger menu -- an users hate it and "being able to find things" is probably the number one reported reason that they go back to Internet Explorer.
ed: for a more specific example, look at Firefox or Chrome, try really hard to imagine that you are a first time user of that web browser, but you've used IE before, and then figure out how to do one of the most common things that people want to do with a web browser: bookmark a page.
Before the hamburger menu, people were complaining about the MS Office style ribbon. Design fads are an endless cycle of "ops, just froze my thumb!" -> "wait, I'll just put your hand on fire to solve that" -> "ops, my hand is on fire!" -> "wait let me freeze your arm", and so on.
Just like the ribbon, there are plenty of things wrong with the hamburger. One of them is that people can not even find it on a large screen. Both can be used well (look at AutoCad 2010 for a good example of ribbon; there are plenty of good examples of the hamburger on phone apps), and both are widely abused. But I'll just disagree that almost everything needs it. Almost nothing on a desktop of tablet needs it, it's a phone thing.
The title of the article is "The Hamburger Menu Doesn't Work" not "The Hamburger Menu Is Bad". Not only that, they present actual evidence about it not working for a number of apps and websites.
> 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.
It's not about balance, cluttering or abuses, it's all about engagement. Ultimately design decisions must be data-driven. If using other nav patterns you increase user engagement (and consequently revenue for the company) the hamburger should be replaced. So, A/B test it, and you will learn which is the correct choice: hamburger, tabs, segmented control, etc
It's a common pattern that is used everywhere. If we were to zero base think, then yeah, it's absolutely horrible. But since it is already established people look for it. Better to go with an established pattern than reinvent your own. That being said, the article advocates tab bars and I think that is fine if you have the screen real estate. Often times you don't though.
As a software engineer who spends way too much time on front of a computer, I think it took me over a year to notice that a hamburger menu was a consistent user interface feature on phone apps and elsewhere.
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.
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.
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.
I keep reading these articles about how awful hamburgers are but so far not a single one addresses menus that have more than 3-5 items. I manage sites that we have kicked around ideas for how to deal with the menu better, but the size of what is in that menu makes all the proposed ideas I've seen not feasible. So I'm right there with you that it is unfortunate, I wish these articles had more in way of solutions than just regurgitating what we've heard for a while, hamburgers suck.
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.
- 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).
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.
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"?
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.)
> "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
(Outtake from a ACM CHI 1990 conference video, 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).)
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.
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.
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.
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.
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.
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.
My co-founder and I debated whether to use the hamburger menu for our iOS and Android apps (currently in beta -- 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.
This is a really important point. While the article makes several strong conceptual points, the metrics won't necessarily stand the test of time. There's nothing particularly "natural" about design, so anything that becomes habitual and conventional is part of "good" design. If the hamburger lives on we won't think twice about it, like we no longer think about that stupid "gears" icon for "settings" and the very idea of a windowed UI.
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.
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.
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".
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.
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?
"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."
> 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 .
[+] [-] weinzierl|10 years ago|reply
[1] https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-men...
[2] http://jxnblk.tumblr.com/post/36218805036/hamburgers-basemen...
[3] http://jxnblk.tumblr.com/post/82486816704/an-update-on-the-h...
[4] http://mor10.com/hamburger-bad/
[5] http://gizmodo.com/who-designed-the-iconic-hamburger-icon-15...
[+] [-] abalone|10 years ago|reply
[1] WWDC 2014 Session 211 Designing Intuitive User Experiences @ 32:00, available here: 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
[+] [-] unicornporn|10 years ago|reply
https://i.imgur.com/aIxIpmU.png
[+] [-] bane|10 years ago|reply
[+] [-] stirlo|10 years ago|reply
[+] [-] pbreit|10 years ago|reply
[+] [-] unknown|10 years ago|reply
[deleted]
[+] [-] dperfect|10 years ago|reply
Almost everything has or needs something like a hamburger menu somewhere. Can it be abused? Yes. Does that make it inherently bad? I don't think so.
[+] [-] thaumaturgy|10 years ago|reply
The trouble, which the article describes with some case studies on engagement before and after hamburger menu implementations, is that people who are not you are confused by it and don't understand it to be a menu.
fwiw, I've encountered this quite a bit when helping users switch from Internet Explorer to Firefox or Chrome -- both of which use the stupid hamburger menu -- an users hate it and "being able to find things" is probably the number one reported reason that they go back to Internet Explorer.
ed: for a more specific example, look at Firefox or Chrome, try really hard to imagine that you are a first time user of that web browser, but you've used IE before, and then figure out how to do one of the most common things that people want to do with a web browser: bookmark a page.
[+] [-] marcosdumay|10 years ago|reply
Just like the ribbon, there are plenty of things wrong with the hamburger. One of them is that people can not even find it on a large screen. Both can be used well (look at AutoCad 2010 for a good example of ribbon; there are plenty of good examples of the hamburger on phone apps), and both are widely abused. But I'll just disagree that almost everything needs it. Almost nothing on a desktop of tablet needs it, it's a phone thing.
[+] [-] latortuga|10 years ago|reply
[+] [-] sandofsky|10 years ago|reply
[+] [-] joeyspn|10 years ago|reply
It's not about balance, cluttering or abuses, it's all about engagement. Ultimately design decisions must be data-driven. If using other nav patterns you increase user engagement (and consequently revenue for the company) the hamburger should be replaced. So, A/B test it, and you will learn which is the correct choice: hamburger, tabs, segmented control, etc
[+] [-] bcheung|10 years ago|reply
[+] [-] collyw|10 years ago|reply
[+] [-] unknown|10 years ago|reply
[deleted]
[+] [-] WorldMaker|10 years ago|reply
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|10 years ago|reply
[+] [-] freshyill|10 years ago|reply
A tab bar is great in an iOS app with a limited scope of functionality. That just doesn't work a sprawling news site covering dozens of topics. A small, product-focused website may even be able to get away with showing all of their navigation options at once. For many sites, however, it's unfortunate, but sometimes you just need a well-organized junk drawer inside a hamburger menu.
[+] [-] shampine|10 years ago|reply
[+] [-] corysama|10 years ago|reply
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|10 years ago|reply
- 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|10 years ago|reply
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.
[+] [-] mark242|10 years ago|reply
[+] [-] jamesarcher|10 years ago|reply
(These changes aren't just because of the hamburger menu, obviously. Digital stuff moves pretty fast in general, and companies keep evolving.)
[+] [-] grey-area|10 years ago|reply
[+] [-] georgefrick|10 years ago|reply
[+] [-] masswerk|10 years ago|reply
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 (Outtake from a ACM CHI 1990 conference video, 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).)
[+] [-] pxlpshr|10 years ago|reply
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.
[+] [-] danneu|10 years ago|reply
But it requires some deliberate thought, effort, and app-specific solutions to replace it with something better, and that planning makes you answer all sorts of hard questions you might've not ever had to answer about your website/product, like "how are my users actually using this?"
I'd wager that everyone agrees that their own site's hamburger menu is a sore spot, suboptimal.
But the next rung up is a taller order than these types of articles admit.
I think a good follow-up blog post would be "Design patterns for escaping the hamburger menu" that showcases a variety of real-world approaches.
[+] [-] oneeyedpigeon|10 years ago|reply
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|10 years ago|reply
drumroll please....
alt-F, like it is the File menu.....
[+] [-] leepowers|10 years ago|reply
So, should we web developers start ripping out hamburger icons on our sites. NO. Avoid groupthink. Implement and test layouts that produce measurable results. Removing hamburger icons is no panacea. What are the users doing? What does the data say? If cargo cult thinking produced an over-reliance on a single navigation icon, we aren't going to solve anything by snapping back in the other direction.
Also, there's a difference between a hamburger icon and a drawer menu. On mobile devices a drawer menu is still a fantastic way to reveal additional navigation options without a page reload over a (potentially) slow network connection. Stuffing a navigation list into drawer menu is an easy solution. But it may produce poor results.
[+] [-] makecheck|10 years ago|reply
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.
[+] [-] unknown|10 years ago|reply
[deleted]
[+] [-] Retra|10 years ago|reply
http://kdcissell.com/2012/09/28/75/
[+] [-] DanSmooth|10 years ago|reply
Nobody ever asked me - for obvious reasons, because I might be blind - but I'm partial to an icon where you have a + sign ("additional" items) on top a V ("directional clue"; could be pointed in other directions for a pull-up menu for example) to form some sort of arrow.
[+] [-] johnatwork|10 years ago|reply
[+] [-] declan|10 years ago|reply
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.
[+] [-] quinndupont|10 years ago|reply
[+] [-] JoshTriplett|10 years ago|reply
[+] [-] kenrikm|10 years ago|reply
[+] [-] ggchappell|10 years ago|reply
[+] [-] prewett|10 years ago|reply
[+] [-] asgard1024|10 years ago|reply
These things don't appear in the vacuum - the Hamburger Menu originated from the Celtic Knot Menu, which was originally at the end of the Ribbon. The Ribbon itself confused the use cases of the Menu and the Toolbar, and was rightly criticized for that.
I am just learning Emacs and it's a little paradox that this aspie guy Richard Stallman is the one who got so many things around the UI right. We are unfortunately confusing "easy to learn" with "dumbed down so much there is nothing to learn".
[+] [-] pandler|10 years ago|reply
Select text > Think for a few seconds about which one of these similar looking icons means "copy" > press buttons until I figure it out.
[1] http://www.droid-life.com/wp-content/uploads/2015/02/cut-cop...
[+] [-] mercer|10 years ago|reply
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.
[+] [-] InclinedPlane|10 years ago|reply
I remember back in the early years of the web (mid to late '90s) and one of the most important factors in designing websites was realizing that users don't scroll. They just didn't, and if your site design relied on that fact then you'd be screwed. But users learned to scroll, and now scrolling is perhaps the most important and most universal method of interacting with the web. In another 10 years will the hamburger menu become so well known and universally relied upon that not doing it will hurt your usability? Or are there fundamental reasons why it will never be good?
[+] [-] TuringTest|10 years ago|reply
"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."
[+] [-] aikah|10 years ago|reply
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 .