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!
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.
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.
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.
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.
The hamburger is basically all of that rolled into one button. It's pretty abstract, you never know what's behind it and when they get fancy with animations and swipe gestures, it's almost always a failure.
I know it's a convenient way to clean up a screen, but the content in that menu needs to be absolutely optional for it to work.
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.
Common User Access (CUA) is a standard for user interfaces developed by IBM to provide consistency across operating systems and computer programs.
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.
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.
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.
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.
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.
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!
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.
In contrast, some people can't not-read something and it being a button is automatically parsed out. Symbols and icons have to be learned which is a more gradual process. The other day I didn't recognize the flower icon for settings.
Mobile users?
I'd be interested in people's thoughts about which side is best, or if it just doesn't matter.
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.
Surely bottom-right?
"Not quite top, mostly right" is where IBM puts their SECOND hamburger icon on DNG software. May they rot in eternity...
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.
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.
Which means we can also adjust to a waaaay better alternative to the hamburger menu (but i dont know what that is rn).
I dont think that is any better at all. If anything I think its solidly worse.
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.
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.
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.
[0] like in Windows 1.0, I guess: https://upload.wikimedia.org/wikipedia/en/4/4e/Windows1.0.pn...
josefrichter•4h ago
ryanmcbride•4h ago