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!
throwaway843 · 20m ago
I'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 · 7m ago
Well, 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.
inanutshellus · 20m ago
I 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 · 11m ago
Replacing the hamburger icon with the word "Menu" wouldn't make anything better. The problem isn't the icon, it's the disorganization.
JohnFen · 29m ago
I 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.
v5v3 · 5m 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?
msgodel · 26m ago
Even 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 · 15m ago
More 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 · 7m ago
Don't make me think? Don't let me think!
bilekas · 28m ago
I'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..
JohnFen · 17m ago
My problem with it mostly that it hides functionality. Seeing a hamburger menu gives you no insight as to what options exist under it.
The menu itself also tends to be a "grab bag" of multiple otherwise unconnected things, increasing the effort required to figure out how to do something.
cosmic_cheese · 10m ago
I like to refer to them as junk drawers due to their messy nature.
Apps with hamburger menus also tend to have navigation that’s otherwise not well though out, think burying options in chains of modals where the paths to those options change whenever the app’s dev decides it wants to push a different feature/metric.
IAmBroom · 22m ago
The 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..."
Izkata · 1m ago
> but just that it takes longer (even a tiny bit) for most users to visually assess what it means
Also as an example, three horizontal lines also sometimes get used as grips to indicate an element can be click-dragged around. It is less common than it used to be, though.
bandoti · 23m ago
Any 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 · 20m ago
Isn'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.
strict9 · 24m ago
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.
SirFatty · 9m ago
I assumed that hamburger description was after-the-fact, not the original designation. It always felt that way to me.
JohnFen · 6m ago
I think the graphic itself was intended to represent a menu: a list of items.
v5v3 · 25m ago
The article says 'positon the Hamburger in the top left corner', but many sites have it in top right too.
Because having a full menu bar at the top made it too easy to find options.
deepvibrations · 23m ago
Yeah, 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 · 20m ago
I 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.
IAmBroom · 14m ago
I think of its default as "top left". But "top right" is frequent.
"Not quite top, mostly right" is where IBM puts their SECOND hamburger icon on DNG software. May they rot in eternity...
inanutshellus · 15m ago
Most 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.
martin_a · 14m ago
The article is wrong on that. Top left is "reserved" for the logo, top right for a menu. That's learned behaviour all across the "left to right" world.
samwhiteUK · 25m ago
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.
josefrichter · 32m ago
I always said Hamburger is an excuse for a lazy designer :-) Take it with a pinch of salt.
ryanmcbride · 26m ago
I always use em because I'm the laziest type of designer: a dev
pharrington · 18m ago
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).
IAmBroom · 13m ago
The article points out the solution: the word "MENU".
pharrington · 1m ago
Absolutely 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.
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!
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.
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.
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.
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.
Mobile users?
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.
The menu itself also tends to be a "grab bag" of multiple otherwise unconnected things, increasing the effort required to figure out how to do something.
Apps with hamburger menus also tend to have navigation that’s otherwise not well though out, think burying options in chains of modals where the paths to those options change whenever the app’s dev decides it wants to push a different feature/metric.
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..."
Also as an example, three horizontal lines also sometimes get used as grips to indicate an element can be click-dragged around. It is less common than it used to be, though.
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.
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.
https://woltman.com/media/posts/244/gr-menus-moving-around-3...
Because having a full menu bar at the top made it too easy to find options.
I'd be interested in people's thoughts about which side is best, or if it just doesn't matter.
"Not quite top, mostly right" is where IBM puts their SECOND hamburger icon on DNG software. May they rot in eternity...
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.
Which means we can also adjust to a waaaay better alternative to the hamburger menu (but i dont know what that is rn).