Around 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.
When 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.
Text 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.
Yes, 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.
On my personal website I decided to have a button that has both hamburger icon and the word "menu" (on mobile version). Had no complaints!
Why not just recreate the [original experiment](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.
This one was better: 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.
I assumed that hamburger description was after-the-fact, not the original designation. It always felt that way to me.
The article says 'positon the Hamburger in the top left corner', but many sites have it in top right too.
Last 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.
The 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!
Hamburger 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).
It 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.
There's a special place in Hell for those who put hamburger menus in desktop apps, Jetbrains.
That 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.
For 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.
There 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.
The patent for the "start here" menu expired a decade ago. We can just call it the "start here" button.
Huh, 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.
I always said Hamburger is an excuse for a lazy designer :-) Take it with a pinch of salt.
thought i’d make a hamburger menu for https://harcstack.org … here’s the story 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
I don’t think I’ve ever seen a hamburger button on the top left. Usually top right… or am I hallucinating?
I remember when Windows Phone started using the hamburguer flow instead of their original UI design, what a loss in usability and creativity.
For 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!!
When will Windows replace the start menu with a hamburger? When will Apple replace the Apple menu with a hamburger?
Was 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."
I recently had someone refer to the app menu in google as a “waffle” and I laughed but also… why not!
lol “why are menus represented by hamburgers, kebabs, meatballs” … “beats me. They’re food and you usually have food on a menu?”
I 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.
Great 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.
The 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.pn...
[1] unless it’s a secondary but universal menu like the Windows system menu in [0]