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.
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.
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.
It’s plenty doable, but like I said it takes some sitting down and planning and perhaps more importantly, design centered around the user and their needs and less around looking pretty in a slideshow or trying herd the user around.
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.
Nothing about the food suggests its function. And the function varies, it might be a whole rabbit-warren of menus and options. It might be a bunch of actions. It might just be one last item that wouldn't fit on the screen. It's an awful graphic for an awful concept. "We ran out of UI ideas so we just shoveled what was left into this junk drawer" is no way to go through life.
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.
> it's the disorganization
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.
A restaurant menu contains hamburgers, hotdogs, meatballs. A UI menu is represented by abstract icons of the items contained within a restaurant menu.
Now I am starting to like the hamburger menu after all… perhaps more as satire though. :)
For what it’s worth, ellipsis is the best of the bunch, because it means the same thing as in the written language, and is concise enough to use as a button that suggests what the action does.
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.
And if we want to focus on just three bars let's not leave out the skeuomorphism trend where three bars meant the "grip" area, something to use to rearrange items or windows.
This is true. It means "exactly the same" where it was used millions of times before it landed on a computer: https://en.wikipedia.org/wiki/Triple_bar
"Menu" has a consistent meaning (a list of items to choose from) which most people can be assumed to know. Icons aren't as easily parsed and take more of a mental load to reason about them. Or just trial and error to figure them out.
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.
The what now? When did they stop using gears for settings?
Pretty much this...
https://www.dreamstime.com/daisy-flower-outline-icon-white-f...
I'm still considering stealing the idea. If you put a daisy in the top corner others will get to experience the same.
Ah yes, this...
https://www.dreamstime.com/white-daisy-chamomile-smiling-fac...
I'm onto something here...
https://www.vecteezy.com/png/11017932-cute-burger-cartoon-il...
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.
> go from bad to good once people know how to use them
"What is that? Why don't they put 'menu' there?"
I don't know dad, I'm not the one who made it
[◂] [xxx] [▸]
Left button was UP and right button was DOWN (numbers e.g. temperature).
Is there any reason that ◂ would be UP in Chinese?
Standardized icons can be laid out easily regardless of language
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.
μενού, valikko, roghchlár, メニュー , مِنو, меню́, trình đơn
To pick a few.
Yes.
If the page isn't in the target language of the person using it, what difference does it make whether or not it says "menu" in English? If the user wouldn't be able to understand the contents of the menu, is it markedly better that they access those options via a hamburger icon vs an inscrutable bit of text?
The kebab
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.
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.
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.
My company employs a number of full-time translators, some of whom do translations for my web site.
When I talk with them, they all say that computer translations, while improving, are still terrible. They spend a lot of time fixing Google translations that make it into mockups, and sometimes try to show me why the computers are wrong. I don't speak their languages, so it's usually lost on me, though I've learned that there's about 50 different ways to say certain words in Spanish between Arizona and Tierra del Fuego.
Could they be protecting their jobs? If that's all they did for the company, then maybe. But translation is only about 25% of their work, so they'd still be employed. A few long for good internet-based translation so they can do other things.
You may enjoy: "Oh, how hard it is to speak Spanish!" (https://www.youtube.com/watch?v=4LjDe4sLER0)
There's also a separate upload with Spanish subtitles.
> Hamburger menus are annoying because they add a click.
[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]
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.
The usual pattern on Android nowadays is that hamburgers go on the left, actions go on the right. And an on-screen button is much more obvious than a hardware key, or something on the never changing bottom bar.
The elimination of the standard menu bar in one application after another is a huge one. Look at Edge: I wanted to save a PDF I was viewing. Fat chance.
There's no menu. In the toolbar past the URL box there's a jagged Pac-Man that I guess is supposed to be yet another "gear" icon. Then there's a star with lines in it for "favorites" and then your own avatar and then three dots with a tiny upward pink arrow overlapping part of one of them.
In the upper-left corner of the window there are more boxy icons... let's see what those are... "Workspaces" and "Tab actions menu."
So is "save file" under Gear-Man, the three dots, or somewhere else?
And BTW, WHAT APPLICATION IS THIS? You have no idea which window belongs to which one, because the title bars are missing.
What a truly incredible, pathetic mess. The Mac's single menu bar is a UI blunder, but NO menu bar is monumentally stupid.
Who is to blame? Is it the UI people wanting a "clean" look or is it misguided UX people?
1. Experience
2. Aptitude
3. Supervision
And then there are the apologists who attack anyone who calls for better, and almost the entire rest of the population... who
1. Don't take time to convey feedback
2. Can't find a way to convey feedback
3. Can't distill exactly why the product sucks and formulate feedback.
I just wasted a good portion of my afternoon trying to activate change-tracking in Word. The Word UI is an even bigger POS than the rest of Windows. I mean... it's a wonderland of baffling rabbit-holes, to the point where I'm laughing while typing this out because it seems like a prank. MS even eschewed their own File dialog in this thing, to replace it with a page that looks like hand-coded HTML without a stylesheet. Truly incredible.
So I took screen shots. I wrote up a detailed explanation as to why this is defective. And then I used MS's "Feedback Hub" (which vanishingly few people are going to find or bother with) to try to file a report. After typing it all out and attaching files...
"Something went wrong. Please try again later."
And of course it deleted all my work. And it has happened on four attempts throughout the day.
So when companies claim, gee, no one has complained before... it's just another mockery of the recipient.
Open Word/WordPerfect in Win95. Toolbar filled with lots of unique tiny icons that do useful things. Doesn’t take up much space.
Now we have an enormous ribbon with a few gigantic icons, with most of the functionality buried in tiny submenus triggered only by clicking an tiny arrow in a corner that seem to have been inspired from The Net.
Call me crazy - I didn’t dream of high resolution monitors so I can have a toolbar that occupies a bigger percentage of the screen NOW than it did in the days of 640x480 computing. I’d much rather see my document instead.
I hate UI trends for the past 20 years.
Relevant: I had to quit using Firefox though, because of the brain-dead bookmarks being buried several levels deep in menus, and worse in the mobile version.
The three dots at the right, for some reason, is the menu. It's labelled "Settings and more", and contains the gear icon you were thinking of, but also all of the normal menu items like new window and print. It also contains "Save page", but befuddlingly that one is hidden under another flyout menu called "More tools".
When opening a PDF file in Edge, it loads up some kind of Acrobat embedding for me, and that one has its very own "save file" button, though with identical iconography to Edge's. Thankfully, the button is visible without any further menu diving, but is also placed at the top right, with an extremely faint border delineating it from the Edge chrome.
If that's supposed to be a puzzle piece, it's a disgrace. Just another symbol of Microsoft's abject design bankruptcy. They had far better icons than that at 16 x 16 pixels 30 years ago.
Another fine UI choice by today's Microsoft.
I truly don't understand why we do this to ourselves.
My experience has been that no two hamburger menus are the same kind of menu, either.
They're bullet points indicating a list of items.
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.
(On a side-note, receiving no complaints doesn't mean things are usable)
Cool website though
I think we spend too much time pondering "semiotics" when we should just consider the _basic_ "ergonomics."
To refresh your memory: https://c8.alamy.com/comp/BJBDGA/apple-iphone-3gs-3g-smartph...
> pancake menu
Then I learned that it's called a hamburger menu.
Ever since, I call it "another fucking hamburger menu".
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.
https://static.digit.in/fckeditor/uploads/ff4-newui.png
But they probably figured that the more like Chrome they are, the better...
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.
I've since added "show menu" next to the icon in that app.
Depends on your audience.
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
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.
josefrichter•5mo ago
ryanmcbride•5mo ago