11 ms·
The hamburger-menu icon today: Is it recognizable?
- josefrichter 1y agoI always said Hamburger is an excuse for a lazy designer :-) Take it with a pinch of salt.
- ryanmcbride 1y agoI always use em because I'm the laziest type of designer: a dev
- bandoti 1y agoThe hamburger menu is a pet peeve of mine! It takes much less cognitive load to simply read the word “menu”. Also, it used to be important when screens were nowhere near as wide but now there’s no longer any reason to use it the way it is. Perhaps it is permissible on a busy UI with many buttons, but that job was taken by the ellipses, which also takes less cognitive burden!
- v5v3 1y ago"Also, it used to be important when screens were nowhere near as wide but now there’s no longer any reason to use it the way it is." Mobile users?
- aidenn0 1y agoThere is more than enough room for 4 menus across the top of a typical mobile device. If you expect the user to need to access it regularly, you could even put it across the bottom. This is why the homescreen on most phones has 4 items across the bottom; not a single hamburger menu with "Phone, Messages, Web, ..."
- JohnFen 1y agoI couldn't agree more. The hamburger menu is in my list of the worst UI elements around. It has nothing good to recommend it. It's barely tolerable in situations where screen space is at a premium, but it's still pretty awful. > Its growing ubiquity helped standardize its meaning: Through repeated exposure, users learned to recognize and interpret the icon with increasing confidence. Sure: it's the symbol of the "junk drawer" of the UI. Who knows what random assortment lurks in there? It's a place you go only as a last resort.
- bilekas 1y agoI'm curious, not a UI designer at all here, but what's so taxing about the hamburger? I grew up with it mostly always around and never even thought twice about it..
- bandoti 1y agoAny symbolic visual takes time for our brains to decode. When compared to language which we’ve spent our entire lives decoding and which comes much naturally, the cognitive burden is much higher. In addition the three bars are as mundane of a composition as you can get, so it doesn’t capture the eye well to begin with. Typically the eye gets pulled to more visually complexity. But ultimately it boils down to the decoding idea—language is the ultimate “codec” of human communication.
- baseballdork 1y agoIsn't text a "symbolic visual"? I would think that at some point a symbol that's used as frequently as the hamburger icon would/could eventually become equivalent to the word.
- zdragnar 1y ago> Typically the eye gets pulled to more visually complexity. Written words have a "voice" - that part of your mind that recognizes something spoken. Hamburger menu icons don't have that, nor do they have the higher contrast or complexity that emoji have.
- IAmBroom 1y agoThe implication of "load" is not that it's a huge hurdle, but just that it takes longer (even a tiny bit) for most users to visually assess what it means. Add up all those little delays, and you have a frustrated new user. I regularly use a piece of software from IBM that has (this won't surprise you) an awful UI. There are not one but TWO hamburger menus, hidden amongst a bunch of text menu headings, and figuring out where the one you want is can be noticeably taxing. Explaining to another user where to click is even worse - "No, not that one, the one under the... to the right..."
- msgodel 1y agoEven the palm pilot with its ridiculously tiny screen and bad touch ditigizer managed CUA-style menus. Mobile UI design isn't about making things more understandable, it's about getting the user into a helpless and suggestible state so your ad impressions are worth more.
- cosmic_cheese 1y agoMore than anything hamburger menu type design feels to me like an “avoid effort and skill as much as possible” sort of thing more than it does an “optimize ad revenue” sort of thing, as does flat design. It’s about lowering the bar for what’s acceptable to ship as far as you can possibly get away with. Plaster some scrolling flat rounded rectangles and a hamburger menu on the screen and boom you’ve got an app.
- Y_Y 1y agoDon't make me think? Don't let me think!
- xnx 1y agoI had to look up "CUA". Common User Access (CUA) is a standard for user interfaces developed by IBM to provide consistency across operating systems and computer programs.
- kalleboo 1y agoThe Palm menubar wasn't permanently visible, the Palm had as close as you can get to a hamburger menu to reveal it https://kalleboo.com/linked/palm-burger.jpg https://kalleboo.com/linked/palm-burger.jpg
- inanutshellus 1y agoI think it's time to let this pet peeve go. :( It wouldn't be fair to use "MENU", as not everyone speaks English, and regardless, many UIs aesthetically need an icon, so why not have standardized on one? It's healthy to have decided on an icon, but I agree an ellipsis would've been (and still would be) intuitive too. Maybe designers trying to make their mark will start using ellipses in new designs... who knows.
- JohnFen 1y agoReplacing the hamburger icon with the word "Menu" wouldn't make anything better. The problem isn't the icon, it's the disorganization.
- inanutshellus 1y agoIf the designer wants to encourage super-users and quicker access then splaying out all options is better. If they want "clean and tidy", the icon is better. Heck, even when I have splayed out all the most-important options across the screen... where do I put the /rest/ of the menu options? in an "other" menu, likely drawn with 3 horizontal lines.
- deleted 1y ago[deleted]
- andrekandre 1y ago> it's the disorganization its true in many cases, those hold-everything menus end up has junk drawers that users have hard time navigating through, especially on mobile screens where not everything is shown at once AND the scroll indicator is by default hidden so its not obvious there are more items below the screen edge
- sceptic123 1y agoYou're assuming that it's an agreed and understood standard, which it really isn't. Tech savvy audiences often don't find it easy to understand that there are lots of people who don't understand things like this. In terms of using MENU, if your audience is not English speaking then you can, and should, consider adding internationalisation and localisation as an alternative. If you have considered it for your content, it makes sense to consider it for your UI as well.
- throwaway843 1y agoI'm curious what's cognitively loading about three horizontal bars arranged in a square located in the corner of an app or website. Screens, somewhat counterintuitively, used to be wider. Because they were not on handheld mobile devices. Then we had the menubar and nested dropdowns, suckerfish, etc. It was an exciting time to see a menu, you were never quite sure what you were going to get - I believe there are positives to learning curves for power users. But I digress. 三 means 3 in Chinese. It doesn't take cognitive load. Why does a hamburger? I really am curious.
- bandoti 1y agoWell, to put it in perspective, consider these three words: Menu Settings Notepad If these are actionable buttons, the message is encoded and decoded by viewers. Three bars means what, exactly? There’s the cognitive load.
- xnx 1y ago> Three bars means what, exactly? There’s the cognitive load. This was true early on when it was not a common convention, or only used in mobile apps. Now, it is nearly universal, though still not nearly standard enough in placement or presentation. If we were to redo history, it would've been great to see an expanding menu closely positioned by a top-left logo. Sort of like a Windows Start Menu for each website.
- bandoti 1y agoI understand and agree to an extent with common use. However, it stands that language is more specific and unambiguous—thus better suited to communicate an action. There’s also the problem of the plethora of OTHER icons which use horizontal bars to cause even more cognitive load. And then, there are many people who have not learned hamburger menu since childhood, and thus the burden is even greater!
- throwaway843 1y agoThree bars means... the exact same thing the thousands and thousands of times it's been seen before. People have no inate understanding of 'menu'. We don't even read short words like that letter by letter, it's read as a block and is far more complex than three bars.
- v5v3 1y agoThe article says 'positon the Hamburger in the top left corner', but many sites have it in top right too.
- deepvibrations 1y agoYeah, I assumed the standard was actually top-right... I'd be interested in people's thoughts about which side is best, or if it just doesn't matter.
- JohnFen 1y agoI don't think it matters which side. What matters more is that everyone does it the same. Most times, I see it on the right.
- ryandrake 1y agoYou're never going to get app developers to independently agree on one consistent way to do anything. In fact, many of them will deliberately do the opposite of what everyone else does, for nebulous "brand differentiation" reasons.
- inanutshellus 1y agoMost of us Westerners read left-to-right, while being right-handed. Thus: "Where should I go?" is answered quickly in the top-left. Whilst experts repeatedly accessing on Mobile requires top-right. Just depends on your priorities.
- aidenn0 1y ago> Whilst experts repeatedly accessing on Mobile requires top-right. Surely bottom-right?
- OkayPhysicist 1y agoPutting anything but your page content for me to drag to scroll in the bottom half, right third of a mobile site is a capital offense, IMO.
- samwhiteUK 1y agoThat Newsweek one would have had me stumped for a little, I think. I like to think I'm pretty tech-savvy, but not knowing Newsweek, that looks a little bit like a logo to me. I think I would assume that was going to take me to the homepage and avoid it.
- strict9 1y agoAround 10 years ago I thought they were a terrible practice. A win for graphic designers that wanted simple and nice looking at the expense of usability. But over time people learn and its standard. And as the NN group article points out: it has become familiar and known today. My favorite iteration of this was in the This American Life mobile app that used a graphic of an actual hamburger instead of 3 stacked gray lines. This was also about 10 years ago I believe. Unfortunately I can't find any reference or graphic depicting it.
- josefrichter 1y agoPeople get used to everything. Including war. Just because they learn how to pull through, does not mean it's any good.
- savanaly 1y agoBut the designs literally go from bad to good once people know how to use them. Unlike war, which is bad whether people are used to it or not. If you're insisting the hamburger design is bad for some other reason rather than people not knowing how to use it, it's the same mistake the designers made in the first place when they insisted it was good despite people not knowing how to use it.
- torstenvl 1y agoFalse
- andrekandre 1y ago> go from bad to good once people know how to use them perhaps, but there is still the issue or cognitive load in certain designs or combination of designs even if people are used to them, which can objectively make them 'better' or 'worse' vs others
- nancyminusone 1y agoIt's been 10 years and my parents are still clueless "What is that? Why don't they put 'menu' there?" I don't know dad, I'm not the one who made it
- pharrington 1y agoHamburger is pretty bad, but we adjust if the pattern is repeated enough. Which means we can also adjust to a waaaay better alternative to the hamburger menu (but i dont know what that is rn).
- IAmBroom 1y agoThe article points out the solution: the word "MENU".
- pharrington 1y agoAbsolutely just use the word "MENU" instead, if the button's already in a textual interface. And if not, labeling the hamburger is almost always better than leaving it naked. But I think there are better overall solutions to be found outside of the local maximum, if you will.
- Milner08 1y agoGreat if you are an English speaker. Do we then translate that to every language we need to support? Do we scale the UI to work for the different length words? I dont think that is any better at all. If anything I think its solidly worse.
- josefx 1y agoMenu seems to be the kind of word that pops up in a lot of languages.
- qualeed 1y agoSome with extra letters, or accents, or fonts entirely. Other languages share the concept but the word is completely different. μενού, valikko, roghchlár, メニュー , مِنو, меню́, trình đơn To pick a few.
- SoftTalker 1y ago
- SirFatty 1y agoI assumed that hamburger description was after-the-fact, not the original designation. It always felt that way to me.
- JohnFen 1y agoI think the graphic itself was intended to represent a menu: a list of items.
- Izkata 1y agoIt was, it's a simplified version of the original that included the border around the lines, similar to one of the examples in the article (imagine a physical restaurant menu). Along the same lines, the three lines have since been further simplified into three dots in a lot of places - no longer looking hamburger-like.
- ambrose2 1y ago> three dots The kebab
- loloquwowndueo 1y agoIt’s just difficult to describe, so instead of “click on the three horizontal lines thing” it’s easier to say “hit the hamburger” and the name stuck. I guess if they were going to just have an abstract meaningless icon they should have picked something easier to describe over the phone, for example.
- xnx 1y agoGreat work by NN/group documenting examples in the wild and providing clear suggestions. It's amazing just how bad UI/UX professionals are (often due to backgrounds in graphic design instead of human computer interaction). Making changes as small as putting an outline around the hamburger menu (makes it looks like a document) or putting dots in front of the lines (makes it look like a button to add bullets) makes the icon unrecognizable/confusing.
- deleted 1y ago[deleted]
- sceptic123 1y agoWhy not just recreate the [original experiment](https://www.nngroup.com/articles/hamburger-menus/ https://www.nngroup.com/articles/hamburger-menus/) rather than citing a book that uses different methodology? Given the original study shows quite comprehensively how bad a design pattern it is, it would be far more interesting to see that research repeated rather than a test on hamburger variations.
- SAI_Peregrinus 1y agoText requires effort to translate, and might not fit well for some languages and some UIs. So managers don't want to pay for translations & thus want only icons, and designers don't want to make UIs that work for wildly different label widths. This is not unique to hamburger menus, but it does mean that "just replace it with the word 'Menu'" will be rejected. Hamburger menus are annoying because they add a click. They can save some screen space on small devices by allowing most of the top area which would be covered by a menu bar to be clear, with only a single button in the corner. This is pretty useless on larger displays (laptops, desktops, etc.) but makes sense on phones, and sometimes on smaller tablets. Hiding options happens even with traditional menus. Do you change application settings under Edit->Preferences, or is it File->Settings, or Tools->Options, or something else? Or worse, do you change some things in Edit->Preferences, others in Tools->Options, and yet more in File->Settings? Hamburger menus aren't always bad design, but they often allow hiding bad design by making the UX worse. Attempting to unify UI across wildly different interface types (desktops, laptops, tablets, & phones) inevitably leads to bad design & bad UX. Keeping a common color scheme or overall style is fine, but the interaction patterns of the different input schemes (keyboard & mouse, keyboard & touchpad, touchscreen) are different enough that UIs need to vary between device types for a good UX.
- xg15 1y ago> Text requires effort to translate Localization used to be a massive, expensive undertaking, but with all the cheap translation services we have today, I doubt it still is. I wonder of there will be a shift at some point, where more text-heavy GUIs will make a comeback if translation is cheap.
- officeplant 1y ago>cheap translation services we have today Which seemingly put out cheap translations. At least in my experience with modern Anime/Movies/Videogames. You can always tell when actual human effort was put into localization and not just machine translation.
- reaperducer 1y ago
- layer8 1y agoThe hamburger menu would be fine, even great, if it was a standard menu that every mobile app had in the same place with the same look [0]. But its purpose, positioning, and look is different in every app, so it’s just one more thing to click on to see what it does. It also doesn’t make sense as soon as you have more than one menu [1], or on the desktop — mostly because a single menu rarely makes sense on the desktop, and because an icon tends to be a much smaller pointer target compared to a regular labeled menu, for such a main entry point. [0] like in Windows 1.0, I guess: https://upload.wikimedia.org/wikipedia/en/4/4e/Windows1.0.png https://upload.wikimedia.org/wikipedia/en/4/4e/Windows1.0.pn... [1] unless it’s a secondary but universal menu like the Windows system menu in [0]
- xg15 1y agoOn that matter, I don't get Android's design trajectory: They used to have exactly that: A standard button in the OS for the app context menu, on some devices even a physical button. For some reason, they got rid of it in newer versions, so every interested app has to implement it itself, which of course causes to UI to become wildly inconsistent between apps. I don't understand why.
- izacus 1y agoThat was 15 years ago.
- fidotron 1y agoThey had enough fun getting app developers to support the back button properly, let alone the context menu! In truth Android has suffered from the fact everyone starts on iOS first and then ports to Android, screen by screen in many cases, meaning accommodation of Android specific UI flows simply doesn't happen. The removal of physical buttons was largely motivated by OEMs wanting to eliminate moving parts which make things far more expensive to build/test than simply one slightly bigger capacitive touchscreen.
- skrtskrt 1y agophysical buttons are also a pain for waterproofing
- gwbas1c 1y agoWhen will Windows replace the start menu with a hamburger? When will Apple replace the Apple menu with a hamburger?
- Clamchop 1y agoUsing the product or vendor logo as a menu icon on desktop is its own trope. The Apple menu and the Start menu aren't even the same kind of menu, nor do they function the same as "hamburger" app or website navigation on mobile.
- zahlman 1y ago> The Apple menu and the Start menu aren't even the same kind of menu My experience has been that no two hamburger menus are the same kind of menu, either.
- loloquwowndueo 1y agolol “why are menus represented by hamburgers, kebabs, meatballs” … “beats me. They’re food and you usually have food on a menu?”
- blacksmith_tb 1y agoMy assumption is some designer chose the three horizontal lines to suggest a list of choices. Later, for some tiny space where lines didn't fit well, they were crushed into three dots stacked vertically (which also sort of suggests an ellipsis tipped on its side?) Why we decided to use food metaphors... well, who isn't thinking about what's for lunch?
- MisterTea 1y ago> which also sort of suggests an ellipsis tipped on its side They're bullet points indicating a list of items.
- loloquwowndueo 1y agoMeat. Balls.
- cpburns2009 1y agoThat's exactly it. Android popularized it with its early versions when those phones had physical buttons. One of those buttons was the menu list button which opened the context menu. Eventually that button was removed and was replaced with in-app menu buttons. The remaining buttons became virtual, and then bikeshedded to triangle, circle, and square because usability be damned.
- vladstudio 1y agoOn my personal website I decided to have a button that has both hamburger icon and the word "menu" (on mobile version). Had no complaints! https://vlad.studio/ https://vlad.studio/
- kogus 1y agoNot related to the original post, but I have been visiting your site for 15+ years now, and it's one of my favorite online art sites. Really grateful for your many years of beautiful work.
- yreg 1y agoWow, I forgot about this place, but 15 years ago it was my favorite source of wallpapers. The art is as beautiful as ever. So are some of the accompanying texts: > This picture is dedicated to Kiev (Kyiv), a capital of Ukraine. It is loosely based on a 13-th century map - this is what center of Kyiv looked like ~900 years ago! The original map also included the city wall - however, I decided not to wrap the buildings into the wall, since in my dream world, a city would not need walls. https://vlad.studio/wallpaper/kyiv/ https://vlad.studio/wallpaper/kyiv/
- willsmith72 1y agoYou are violating one of the key principles from the article though by being bottom-right (On a side-note, receiving no complaints doesn't mean things are usable) Cool website though
- Teckla 1y agoI wish I was sufficiently dexterous to use your razor thin scrollbars. :(
- lionelholt 1y agoUse your mouse wheel or Page/arrow keys?
- esafak 1y agoThere is a balance to be struck between accessibility (speed sense) and discoverability, which disfavor hamburgers, and cognitive load minimization, which favors hamburgers, if you reserve it for lesser-used items. Perhaps a themed menu icon that indicates what it holds would be better.
- myself248 1y agoWaitasec, you mean we could give icons different shapes to indicate what they do?
- ulrischa 1y agoAs here: https://news.ycombinator.com/item?id=44182509 https://news.ycombinator.com/item?id=44182509
- timewizard 1y agoWas it ever? I honestly think you could have used almost any icon, given the limited screen real estate, and the tendency to put menu buttons at the corners of the interface. I think we spend too much time pondering "semiotics" when we should just consider the _basic_ "ergonomics."
- ElevenLathe 1y agoWhen I explained what this icon was called to my ~70yo mother, she said it should be called the pancake menu instead. I agree and have been saying that ever since.
- reaperducer 1y agoPlaying with some of my older iDevices recently, I realized that, to me, the page curl icon is the best indicator of "more stuff in here." To refresh your memory: https://c8.alamy.com/comp/BJBDGA/apple-iphone-3gs-3g-smartphone-displaying-google-maps-on-the-screen-BJBDGA.jpg https://c8.alamy.com/comp/BJBDGA/apple-iphone-3gs-3g-smartph...
- andrekandre 1y ago> pancake menu for me it was when someone told me it was the 'air duct icon'... its almost as if there is some errant skeuomorphism hiding in there somewhere....
- zahlman 1y agoWhen I first saw it, I called it "what the fuck is this?". Then I learned that it's called a hamburger menu. Ever since, I call it "another fucking hamburger menu".
- officeplant 1y agoIt still hasn't entered the lexicon of normal folk and has me going NO THE THREE LINES / THREE DOTS in X CORNER quite often. Too bad it's not four.
- 1970-01-01 1y agoThe patent for the "start here" menu expired a decade ago. We can just call it the "start here" button. https://patents.google.com/patent/DE69523543D1/ https://patents.google.com/patent/DE69523543D1/
- jimjimjim 1y agoFor people mentioning the need for translations, clicking the button, regardless of label or not will usually show... text. that needs translations. only one more word for a label.
- EGreg 1y agoThis one was better: https://www.nngroup.com/articles/hamburger-menus/ https://www.nngroup.com/articles/hamburger-menus/ Our findings show that, across all 3 different metrics, hidden navigation significantly decreases user experience both on mobile and on desktop. Both on mobile and desktop, the content discoverability was significantly lower when the navigation was hidden. This measure showed a more than 20% drop in discoverability on sites with hidden navigation, compared with sites with visible or combo navigation. In other words, visible or combo navigation made people more likely to complete the task successfully and without relying on search.
- juped 1y agoThere's a special place in Hell for those who put hamburger menus in desktop apps, Jetbrains.
- calmworm 1y agoI recently had someone refer to the app menu in google as a “waffle” and I laughed but also… why not!
- neltnerb 1y agoHuh, interesting research. I wonder how much more intuitive the firefox hamburger menu on the top right would be if they moved it to the left. I sadly just realized it's the one icon I cannot customize the location of, but now I'm super curious.
- tredre3 1y agoTheir first attempt at a unique menu button was on the left (circa Firefox 4-5). https://static.digit.in/fckeditor/uploads/ff4-newui.png https://static.digit.in/fckeditor/uploads/ff4-newui.png But they probably figured that the more like Chrome they are, the better...
- mos_basik 1y agoGod, every time I see a screenshot of Firefox 4 I get hit with a nostalgia blast. I was in highschool and I remember getting hyped up about the UI overhaul from teasers Mozilla was putting out. Felt like Christmas when I hooked up to the dorm wifi at the table in the lounge and got the update notification.
- deleted 1y ago[deleted]
- VladVladikoff 1y agoFor a site about usability this mobile design is awful. Why would I want to permanently cover part of a mobile screen while reading an article!!
- zahlman 1y agoYes, I recognize that I can click on it to see a menu. No, I never have any idea whatsoever what items that menu will contain. Because there realistically is no way to know. Which is more than enough reason to hate the concept. Another reason is that I'm being exposed to them, despite not having a smartphone. I'm being exposed to them in a desktop environment, where the screen space savings are simply irrelevant. Including in applications that target the desktop. Thank you, GNOME. > With hamburger icons, position has a major impact on interpretation. Users generally understand the icon to mean "categories hidden here" as long as it appears in the expected spot: the top-left corner of the screen. I think this more likely represents users learning "you can click in the top-left corner of the screen to get a menu", without necessarily even thinking about the graphic rendered there.
- winrid 1y agoLast year I had two experienced :) people come up to me in person with their phones asking how to open the menu in an app I made that they use at live events, and I had to show them the hamburger icon. I've since added "show menu" next to the icon in that app. Depends on your audience.
- librasteve 1y agothought i’d make a hamburger menu for https://harcstack.org https://harcstack.org … here’s the story https://rakujourney.wordpress.com/2025/06/08/harc-stack-hamburgers/ https://rakujourney.wordpress.com/2025/06/08/harc-stack-hamb... since this is raku driven i’ve been leaning into unicode for the hamburger icon and leaning out from font awesome quite hard to find a suitable unicode glyph though
- dahrkael 1y agoI remember when Windows Phone started using the hamburguer flow instead of their original UI design, what a loss in usability and creativity.
- mediumsmart 1y agoI did not read the article and only half of the comments. I would put a flag for the language’s where the pancake menu was that opens full screen menu to choose the language you want. Which means I would then have the whole site in one happy scrolling page on mobile. Did the article or the second half of the comments address solutions? - or, how would you do it without nav except for the footer links … Mobile German navigation sucks because of the long words when implementing, yes.
- fathermarz 1y agoI don’t think I’ve ever seen a hamburger button on the top left. Usually top right… or am I hallucinating?