Navigation

How to solve the hamburger icon problem

By Paddi MacDonnell | UX Design | Jun 24, 2014

The hamburger icon—three little bars used to indicate a link to a menu—is one if the most controversial techniques on the Web right now. Designers, we are told, all hate it; customers, we tell everyone, hate it too. Why then, is it everywhere?

The hamburger icon is easily scaleable and it fits cleanly into a pixel grid. It was originally a list icon that has been press-ganged into its current role, but since a menu is simply a list of options, it’s semantically correct to use the list item in this way.

There’s been a huge amount of debate, A/B testing, blog rants, and user studies conducted on the subject, but these studies nearly always focus on app design. When the hamburger icon is used in web design it indicates a far more significant problem.

 

The problem with the hamburger icon

There are plenty of designers who question the value of the hamburger icon itself. It’s frequently seen as an iOS style icon even though it was used in this manner before Apple adopted it.

swiss
hugeinc

There is in fact a great deal of conflicting evidence as to whether the hamburger icon is useable as an indication of a menu. Some designers argue that the icon is easily recognized by a younger demographic, others suggest that an older demographic recognizes it if web-literate. The only conclusion that we can really draw from this evidence is that usability tests have proved inconclusive, with parallel tests often returning conflicting results.

What is universally accepted is that users do not recognize the hamburger icon as a single link—probably because it is designed to look like a group of links, rather than a single thing. Something that is supported is that surrounding the hamburger icon with a border, or giving it a background, so that it looks more button-like—dare I say, more skeuomorphic—will result in more clicks.

futureinsights

 

More problems with the hamburger icon

Apart from the design of the icon itself, the approach to using a hamburger icon is also rife with problems.

Firstly, and perhaps most significantly, the hamburger icon adds an extra action to your navigation; when it should take one click to reach a particular page, it will now take two. The rule of thumb for web designers has always been a maximum of three clicks (wherever possible), so far from solving a navigation problem, the hamburger icon technique simply exchanges one problem for another. Of course, that isn’t just an issue for the hamburger icon, it’s a problem for any navigation laid out in this fashion. You can use the word ‘Menu’ in place of the hamburger icon and you’ll have the same obstruction, the difference is that the hamburger icon can’t be used in any other way.

hobbit
jam3

The hamburger technique also conceals its contents. From a UX point of view, users shouldn’t have to take an action in order to find out what actions they can take. It’s all too easy to forget to ‘share on Twitter’, or ‘go to Checkout’, when those options aren’t immediately in front of you. Users will simply not go looking for a link that they don’t know exists.

Finally, the hamburger icon technique hides the current state of the your site and the user’s position in it. Down states in a menu provide contextual information to a user that the hamburger icon technique obscures.

london-se

 

What does the hamburger icon do well?

Given that the hamburger icon is universally hated and results in a string of problems, why is it used everywhere?

In my experience, certainly amongst certain demographics, the hamburger icon has recently reached the point of being easily recognized. Studies that refute that tend to be a year or more old and a year is a long time on the interweb.

In fact the link icon is far more recognizable than the link icon or share icon, definitive forms of which have yet to emerge. The hamburger icon is consistent across any number of different designs.

olympicstory

Most importantly the hamburger icon does what it sets out to do: it saves us a ton of screen real-estate. If a client presents you with a list of a gagillion items that have to be added to a menu, then shifting them off screen and linking to them is a crude, but effective way of making room for the content that the client also wants.

I’d like to say that the hamburger icon solves the problem better than other solutions, but it’s not true. Instead I’ll say that the hamburger icon solves the problem less badly than other solutions.

 

The root of the problem

The hamburger icon tends to be employed because designers—or more often, clients—aren’t fully committed to a mobile-first approach. They want a ‘regular’ site, but squeezed onto their grandaughter’s phone.

Opponents of the hamburger icon tend to replace it with the word ‘Menu’—in doing so, they are entirely missing the point. The hamburger icon has, like it or not, acquired its meaning now, but users understanding what the button is for doesn’t solve the biggest issue, which is that hiding our navigation, hiding our users’ options, is a terrible act of self-sabotage.

In short, the hamburger icon is a symptom of our collective failure to wholeheartedly embrace all aspects of the mobile-first approach.

pono
mccollcenter

 

A better solution

In order to solve the hamburger issue, we have to accept that the Web as we know it doesn’t work. The rise of the mobile web means far more than reducing the number of columns we use and dropping some of the heavier image files.

The mobile web is used in a different way to the web of old. The mobile web exists in the context of dedicated apps, and users expect the Web to be experienced in a similar fashion.

Facebook’s app famously swapped their hamburger icon for a tab bar, and as a result saw improved conversions. But Facebook have done something far more significant than swap menu designs. Recently they’ve released their Messenger app, and the big deal about that is that they already had a perfectly functional and popular app that they could have integrated the messaging with. Facebook have compartmentalized their functions, by focusing each app’s role they’ve arrived at two simple apps, instead of one complex one. The reduced functionality results in a reduced set of menu options, and less need for a hamburger menu.

Good apps are highly focussed, and they’ve evolved that way through far more rigorous user testing than the Web is subjected to. To create an app-style experience we need to simplify our sites, simplify again, and then simplify a bit more. If necessary, break your architecture down into manageable bite-sized pieces, microsites almost. When we present our users with a simple set of options, the problem of a complex menu never arises.

Making use of the hamburger icon is like slapping a band-aid on an injury: it patches it up, but underneath something is still broken.

Only if we fully embrace a mobile-first approach, and apply it not just to our design, but to our content and our information architecture, will we consign the hamburger menu to history.

 

Featured image/thumbnail, uses Hamburger image via Mononc’ Paul

Share this post
Comments (no login required)
  • christophe Goasduff

    As we all know, Tiwtter Boostrap is widely used, the framework embraces the mobile first approach but will usually serve you a hamburger icon when the viewport reaches tablet size. Of course using Bootstrap does’t mean that you can’t customise it the way you want but it seems that this is the standard fall back for mobile menus as far as this framework is concerned. I wonder if the popularity of Boostrap somehow helped spread the “popularity” of the hamburger icon.

    • Paddi

      The team at Bootstrap had to make something that worked for everyone—they wouldn’t get much traction with a framework that only served designers with 3 links in their menu—so I think they can be excused.

      I wouldn’t be surprised if that contributed.

      • http://www.matthewjritter.com M. Ritter

        I agree with Paddi. Bootstrap had a massive task in front of them when developing a solution for mobile menus, but I wouldn’t be surprised if they’re already working through other solution. It would certainly be misguided to say Bootstrap & Foundation haven’t increased the popularity of the hamburger icon.

  • Elecious

    “Given that the hamburger icon is universally hated”, is it?

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      I don’t *hate* it, but I don’t I don’t know anyone who doesn’t feel at least mild distain for it.

      • Jason

        I like it too, but am still skeptical based on @lukew recent research that not enough people understand it yet.

      • http://ginastricklind.com/ gstricklind

        I think it’s usage depends greatly on the audience. If a website is geared towards an older demographic, use the word “menu” or “navigation” or something a little more descriptive than an almost unknown icon to that age group.

      • http://ginastricklind.com/ gstricklind

        I think it’s usage depends greatly on the audience. If a website is geared towards an older demographic, use the word “menu” or “navigation” or something a little more descriptive than an almost unknown icon to that age group.

    • les

      I like it.

    • colinwiseman

      I think it was the greatest addition to my development arsenal, _especially_ for mobile. When you have a tiny screen and a giant swathe of menu options, but you still need a landing page… then use a “hamburger”.

      “Firstly, and perhaps most significantly, the hamburger icon adds an extra action to your navigation; when it should take one click to reach a particular page, it will now take two. The rule of thumb for web designers has always been a maximum of three clicks.”

      I personally have found the users don’t want to click at all lately. They want all your content fed to them while they sit at their keyboards, and hopefully all on Facebook. For many blogs the main navigation should go the way of the Dodo (in my humble opinion) and use more of the “like that, read this” to engage the user further. But to make comment on the 3 click rule; that went the way of the Pushmi-pullyu (it never existed).

      • Paddi

        The point of the article is that if you’re falling back on a hamburger icon in this way then there’s something fundamentally wrong with your site.

      • Nicolai

        By reading “giant swathe of menu options”, it sounds more like your greatest addition to “hide your problems”

      • colinwiseman

        Well yes. If you site has a massive menu system, time to step back, agreed. But not all clients are willing to do this and many love mega menus (and these menus never get used because people come to the site directly where they want to via Google commerce thingy). So you gotta hide it some how :D

        But even when you have a small menu system, of 11 items (my current client), it can still be very necessary to hide these on mobile otherwise the whole screen is lost to navigation. When moving around a site and the top half doesn’t change due to the navigation taking up most of the page, then people (I feel) would get lost more.

    • Paddi

      Ha! It seems I stand corrected. Clearly I’ve been spending too much time with those pesky hipsters.

  • http://www.abbasarezoo.co.uk/ Abbas Arezoo

    I don’t think the icon is “universally hated”. I personally like it, and use it a lot.

    I think the discussions that are cropping up are mainly around people wondering why it’s that particular icon and not something else. I’ve no problem with the icon being universally adopted as the go-to icon for navigation on smaller screens, it’s not that big a deal.

  • Oliver Foggin

    I don’t hate the icon. I hate the existence of a “hidden menu”.

    Why would you want to hide content and context from the user? Using a tab bar shows a user both where they are and where they can go (what they can do) without having to do anything other than look at it.

    Lots of people say that the hamburger menu should be used for things like settings and less common features of an app. Rubbish, if anything, these “less used” features of the app shouldn’t be in the app at all.

    Also, you say “it was used in this manner before Apple adopted it”. Apple has never adopted this. People have implemented this in iPhone and iPad apps but it’s all third party work. Apple actively discourages the use of a menu like this. There are numerous WWDC videos with designers and developers ridiculing it and showing how it only acts to obscure the function of an app rather than adding anything to it.

    :)

    • Paddi

      I think the icon is the visual representation of that tactic. The icon itself is mostly inoffensive, but the tactic of hiding menus is, at best, lazy.

  • Andrew Brynjulson

    Thanks for addressing this subject.

    1. I’m not entirely sure the hamburger is universally hated.

    2. I think there needs to be a distinction drawn between a website and a dedicated app. The user flow for a native Facebook app not the same as the flow on marketing site for a local bakery.

    3. I feel like too much focus is being put on options and navigation and moving around the site when the real focus should be for the user to consume the content, in which case the menu/nav is a tool to allow them to access more content when ready.

    In a theatre the exit signs are placed off to the side when, available when needed but not center stage obscuring the performance.

    4. I agree that hiding the menu is conterintuitive. Which is why you see Facebook and Twitter and other content outlets moving to more evolving contextual menus.

    • bradwestness

      I think it’s a mistake to try to draw a distinction between a “website” and an “app”. There’s no reason that a mobile-friendly site can’t be made to look identical to a dedicated on-device app, so the line is so fuzzy as to be essentially meaningless.

      The only real reason to have a native app for something like Facebook is for speed and bandwidth conservation, but that doesn’t really have any impact on how the menus are designed.

      The main distinction between something like Facebook and a local bakery is that Facebook has a lot more actions you can perform, so there’s a lot more menu that has to go someplace, whether or not it’s a mobile site or a dedicated app.

      I do agree that contextual menus is probably the real answer here, where actions the user actually wants to perform on a given page (or that you want users to perform, like “share”) should not be hidden in a menu, while something like the global navigation to other areas of the site is fine to have behind an extra click (or just 86 it completely).

      There’s a fallacy that I’ve seen with a lot of customers where they think the user must have a menu item to get to any possible part of an application at any time no matter what they’re currently doing. Frankly, as long as you can get back to the homepage and then navigate from there, it’s probably not necessary to have a giant menu with links to every other part of the site on every page.

      It’s basically the same idea as what Microsoft has done with the “ribbon” UIs in recent versions of Office and Windows. The actions you’re most likely to perform based on the current context have dedicated UI elements where you can interact with them in a single gesture. Other things are still hidden in some menu that you have to use an extra step to call up.

      • Darius

        Instagram is technically a web-app built with the React javascript library. The “app” v.s. “website” distinction is dead. Keep coding and carry on!

  • bgbs

    It depends you who you’re targeting on your site. If you’re catering to hungry people, than using hamburger and french fries icons will do. Seriously, what I mean is, if you’re catering toward internet savvy people than your audience will not be confused about hamburger icon. For the rest of the people, just display menu links or add “menu” next to the hamburger icon, because it has been proven that adding “menu” clears confusion.

  • Victor Rojo

    Much ado over a nonexistent problem.

    • Tim

      It’s a problem for senior citizens.

      • Jason Rose

        So are stairs.

      • Ira

        They have smartphones too. The hamburger shouldn’t be an issue for anyone with a smartphone. That’s not all people, but A LOT of people.

      • Ira

        They have smartphones too. The hamburger shouldn’t be an issue for anyone with a smartphone. That’s not all people, but A LOT of people.

  • RadicalBender

    Completely missing from this article is an example of good mobile navigation that’s visible without an additional click.

    This is because with the exception of task-oriented (apps) or news-oriented sites that don’t always need structured navigation, you can’t put the menu on the screen without subsuming pretty much all of the visual space on mobile.

    This is one of those things that is rapidly becoming a standard because it’s the best solution available given the large, multi-purpose sites that we have to deal with. If there were a better way for IA and UX, it would’ve fought its way to the top by now. Feel free to talk about ideals for your one-page iOS app site or boutique craft beer site or whatever, but if you maintain a website for GE or Ford or UCLA or basically any site with more than five pages, this is the best compromise available.

    Of course, no one posts a spec mobile information architecture redesign for Disney.com on Dribbble, but out here in the real world, we have to make design decisions for complex structures with often conflicting needs, and a hamburger menu works because it has become an understandable standard that maximizes the available real estate. Either come up with something better or stop whining.

    • TwoHearted

      Thank you! I was seriously wondering when someone would make this point. I build enterprise level solutions with incredible complexity and certainly would have implemented something less “costic” if I thought it achieved my end goal. Function wins as it’s what the users both wanted and required.

    • http://linkedin.com/in/StevenWakabayashi Steven Wakabayashi

      Kudos for your Disney.com example!

      • http://www.webmypageup.com/ Sebastian

        There is a hamburger too :)

  • KAD

    Honestly, I much prefer the hamburger icon to most responsive menus.

    • Tim

      Yet, it is a responsive menu.

  • Nestor Cheese

    I hate that so many people call it a ‘hamburger’ icon. It looks nothing like a hamburger. A hotdog, maybe. We’re not 10 years-old here, it’s a menu icon.

    • http://ramonlapenta.com/ Ramon Lapenta

      I so wanted to say that!

  • bradwestness

    Every version of Facebook I’ve ever seen contains at least one hamburger icon. The current version for all major mobile platforms has two on screen when you load it up (though one has a “person” silhouette on top of it), and when you click the main hamburger icon, several of the items in the menu that appears have their own hamburger icons (or slightly modified versions of same).

    Here’s a screenshot from the current version in the Google Play store:
    https://lh4.ggpht.com/Nixc5V327-A_MaqdV82RQfpz6c9NK9QHkpfLXf6aMw2XybtxG9vm9gOi9RG9HTr90wFd=h900-rw

    The version I have on my Windows Phone device looks identical, and Facebook’s mobile website has them as well.

  • guest

    This article is a fail for not providing any examples of “mobile-first” solutions that have complex menus that are easily usable on mobile

    the hamburger is the result of a design problem presented by trying to condense a desktop site on a mobile device..there are new constraints that come with the new medium…smaller size screen, necessity of finger-friendly interface, loads of content with varying hierarchies , new compatibility parameters etc etc..anything complex on mobile needs to be designed in a way that more complicated parts can be revealed after performing intuitive actions …you cant have your cake AND eat it too

    no whether or not the hamburger is the best symbol is another debate

  • Darius

    Mobile first is not a universal solution. The part about simplifying is exactly where we should start. “…we need to simplify our sites, simplify again, and then simplify a bit more”

  • Byron Houwens

    Jakob Nielsen said relatively recently that the current menu icon is a lot like the magnifying glass search icon was a while ago. A magnifying glass is a bit of a conceptual stretch for most people when it comes to searching for something, but because of its proliferation over years it became the standard. If you see a magnifying glass icon on a website today, you know it means search.

    The same thing will happen to the hamburger icon. Again, it’s a bit of conceptual stretch (it doesn’t REALLY look like a menu) but it’s become so universal that eventually people will know what it is on sight.

    I also don’t think that it’s “universally hated”. I don’t mind it at all. It fits its purpose and I’d challenge you to come up with a better solution for a situation in which a mobile site has fifteen items in its menu and they can’t distract the user from their site-based task.

  • Daniel Wiklund

    You make some great points in this article, but also some that i really disagree with.

    1: “…the hamburger icon is a symptom of our collective failure to wholeheartedly embrace all aspects of the mobile-first approach” I couldn’t disagree more, using the burger-icon on desktop “version” of the site where there is more then enough room for at “normal” navigation is, to me, a sign that some designer completely misunderstood the mobile-first approach, but using it on the mobile “version” makes a lot of sense to me – on small screens, it makes a lot of sense to give the user the ability to switch between “views” and the hiding the navigation behind a click of a burger-icon allows that.

    2: In my opinion the navigation on the facebook app is a total mess, and the worst UX on any app – one of the buttons open another app (messenger) and there is a globe for notifications???? and there are 2 icons with a user/person icon (one i the top an one in the button) and it is very hard to find out witch one is witch, and they still have the burger-icon.
    But it’s not a major issue because I very seldom use the navigation in the facebook app.

  • Robert Hode

    So, the argument the article makes is basically: if you are wearing ugly shoes, just cut off your legs and the problem is solved.

    In other words, the article fails to provide a solution for when the navigation *requires* to be complex.

    The assumption that any problem can be simplified and then simplified again is simply false.

    Not every site has three menu items, like the present one. And btw the three items are hidden under a single item navigation”, when on mobile.

    I suppose this is meant to be clearer to users than the infamous burger icon, just in case they lived in a cave for the last three years, therefore having seen no menu icons of sorts in their life.

    But back to the main problem with the article: it assumes that every site can be stripped to the couple of things that can be fitted into a “mobile” navigation.

    This is in fact NOT the case. Users are as likely to need complex functions on mobile as they are on desktop. And not all websites are for bakeries or sport shoes ads.

    So… All those menu options, perhaps a dozen or more, are at times unavoidable.

    And try to put 15 options in permanently visible tabs on a mobile!

    Enter the menu icon (whether a burger or not, I don’t care, web semiotics teaches that anything can mean anything as long as that meaning becomes habitual.

    The way I see it, this is a “straw man” based article. which starts by claiming something questionable and makes no attempt to show its truth: “Designer’s, we are told, all hate it; customers, we tell everyone, hate it too”.

    The above claim doesn’t correspond to my experience or those designers I have discussed it with, nor it seems to correspond to the sentiment of the comments here either.

    I do not hate the burger menu! It’s just a tool, useful some times, not useful others.

    I don’t hate it the same way I don’t hate a particular screwdriver or wrench in my toolbox.

    That statement is just made upfront, like that, and no data or reference is provided for it.

    That, I admit it, should really have discouraged me from reading on.

    Robert Hode

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    Nobody has censored your replies Robert.

    We moderate comments to keep away spam, that is all. In your case I’ve also deleted the duplicate posts as you clearly didn’t realise that your comments were pending review.

    We’re perfectly happy for you to disagree with anything we post, even if you are misinformed.

  • Andrew Agnello

    As others have stated, it would be nice to see some examples of mobile sites that are creating menus the “right way” as mentioned by the author.

    Maybe I missed it, but I don’t see why you would discuss website navigation and then compare it to Facebook’s app. Tabs are nice, but not very practical for most sites that have more than a handful of sections/pages. Not sure about your FB app, but mine has the hamburger menu along with the “more” subtitle in the bottom right corner for the menu.

  • Donavon

    My porridge is just right.

  • Tim

    I tell everyone the hamburger icon doesn’t work. It is fine for a young audience that understand it and have seen it everywhere. However, seniors do not know what it means. The company I work for has done studies testing how seniors react to websites on desktops, tablets and phones. Most don’t understand why the site looks different on all three devices. Others don’t even see the hamburger icon (or any navigation elements other than pictures).
    I recommend using the word,’MENU’ in all caps.

    • Janet Kolwe

      Doesn’t this mean that your studies have proved that seniors don’t understand text based links? “Others don’t even see the hamburger icon (or any navigation elements other than pictures)”. That would seem to imply that they would understand the icon better than the word MENU, which doesn’t make much sense…

      ijs

  • http://scdny.com/ Edac2

    This is the first time I’ve heard that the “hamburger” icon is hated (I love it), and the second time I’ve heard it called a “hamburger” icon. It’s a navicon. The first time I heard it called a hamburger icon was earlier in the week while watching a demo for Dreamweaver CC 2014 and I thought, wow, Dreamweaver still keeps coming up with its own stupid names for things that already have accepted terms.

    • Tim

      To people who don’t know better (which is the majority of the population that use smart phones) the icon is neither a hamburger icon or a navicon. It is simply 3 lines that don’t mean anything.

  • Daniel Smith

    I would suggest using the HTML entity of “equiv” instead of creating so much mark-up. This saves time, resources and can be adjusted by using font-size. Ensure your webpage is utf-8. It will look like this… ≡

  • http://www.webdesignchoice.co.uk/ Bhavia

    Thanks for the post. Good one. I do not have a problem with this icon as well.

  • rktic

    Sorry to say but this generalist approach to everything aka “make your stuff simple so you don’t need a complex menu” is not a solution but an insult.

  • Autumn Elizabeth

    ” Designer’s, we are told,” should be changed to “Designers, we are told.” NO APOSTROPHE, referring to designers as a plural non-possessive entity.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Oops :( thanks, we’ve fixed it.

  • designcouch

    Well, you said some good things and some not so good things and riled the web design masses a little, but at the end of the article, I can’t either agree or disagree with you on many of your points. I think this debate is far too fluid at the moment to come down hard on either side. Give it a year or two. And calm the hell down, folks; it’s an icon, for crying out loud :)

  • Ward van den Berg

    I really don’t get what the fuzz is about… Web is all about usability
    and an instantly recognizable menu icon should fit right in… Much of
    us designers tend to take them(our)selves way to seriously… Or should I
    start designing brand new social icons for my share buttons too?

  • http://www.shinyideas.com.au Nate Frick

    I honestly don’t see what the problem is. It is a trend, and like all trends it has pros and cons. I have more issues with full screen video backgrounds then I do the ‘hamburger’ icon – at least the new menu icon has a use. Some sites require menu bars, some can utilise this icon, and others need something else entirely.

    It’s hard to find something that is universally recognised, so if the hamburger fills that void and over time improves navigation then so be it. I think a lot of designers get caught up in their delusions of self-grandeur – design for your client guys.

  • http://www.shinyideas.com.au Nate Frick

    I honestly don’t see what the problem is. It is a trend, and like all trends it has pros and cons. I have more issues with full screen video backgrounds then I do the ‘hamburger’ icon – at least the new menu icon has a use. Some sites require menu bars, some can utilise this icon, and others need something else entirely.

    It’s hard to find something that is universally recognised, so if the hamburger fills that void and over time improves navigation then so be it. I think a lot of designers get caught up in their delusions of self-grandeur – design for your client guys.

  • Patrick Ess

    Great article! Thanks a lot for “solving” my problem ;-)

  • Benny Forsberg

    No matter what we think of the hamburgers to be or not. Visually appealing or not. Smoothly to use in mobile UI design or not. There is always something to lean on … A/B tests and analysis of data that comes from these. Read the following article talking testing hamburgers vs text. The question should always be – will it convert or not? http://exisweb.net/menu-eats-hamburger?utm_content=buffer90380&utm_medium=social&utm_source=linkedin.com&utm_campaign=buffer

  • http://www.casitadelcuco.es/ Geert De Decker

    To be honoust, I have never bothered about this icon. I love it, even if you have to make a click more, it gives you a nice clean landingpage. Guess everything has a pro and contra.

  • simplewnewz

    Now I’ll get hungry every time I see this icon! I never thought of it as a hamburger. Dang it!

    Sara @ http://www.simplenewz.com