It’s used by Microsoft, Apple, Youtube... the list goes on. I think it’s not too much of a stretch to say that it is ubiquitous and familiar to users.
That being said, it's not the point of the article. There are definitely reasons not to use a hamburger button. But this article helps you build one if you want it.
I don't recollect ever having seen it on any of the 'small screens' (ie LCDs, etc) I used prior to smartphones.
Wait, what?
This might seem like I'm simply being contrarian or wanting stamp my rightitude on the matter, but your framing of the icon's absolute comprehension by everyone else seems to me to be ... ill-advised. Someone not doing their homework might just take your schpiel at face value and propagate problems obliviously.
I've 'beta'd' hamburger icons a few times over the years and have always come away not relying on them precisely because they don't seem to have the blanket comprehension amongst users you seem to think they do.
To me saying that something becomes something over a few decades doesn’t imply that it has been that way from the beginning. It has become a de facto standard over two decades doesn’t mean that it was a de facto standard two decades ago.
I feel like this is really not important, and I’ll change it to the last decade because it doesn’t matter. It’s definitely true that the adoption was most relevant in the last decade. I remember building hamburger menus over 20 years ago though.
What is more important is your second point that I sort of endorse hamburger buttons as a good UI element choice with this introduction. To me, this introduction was not meant to be controversial in any way. I believe that hamburger buttons are one of the most recognisable UI elements, and I don’t think that companies like Apple would use them without doing their homework.
That being said, it was not my intent to promote them as such. I didn’t do any profound research on the topic, and this article is not meant for user interface designers, but for developers that want or need to implement such a button because it either fits their use case or because the designers made the decision.
I’ll amend the intro to be more careful in the wording.
You came in a bit hot with your initial comment, but thanks for your feedback :)
However I misread the thread in my previous post.
PDA's where a CEO/mid-boss/rich guy tools and nothing more, ditto with cell phones until late 90's.
The 99% of the people using software was doing that thru PC's and with a mouse and menu based WIMP interfaces, and not a smartphone based UI.
"Designed and introduced" on the Xerox Star, which almost nobody used. It was quickly forgotten for 30 years, and only came back into use in 2009, according to Wikipedia.
And it's odd because you can emulate W98, W2k, WXP and old GNU/Linux distros with damn ease in order to understand that no wm or desktop environment offerred a hamburger menu. And, trust me, lots of people tried zillions on WM's, tons of FVWM2 setups with bizarre configs highly divergent between themselves and no hamburguer button could be found in any of them.
And I can say the FVWM2 and fluxbox/blackbox guys were pioneers on lots of modern GUI trends and current minimalism or paradigm breaking shifts. If you were an UI designer for sure you tweaked FVWM2 and GTK2/QT3 themes to create weird and crazy things such as a dock composed of minified thumbnails created from windows, later done on Windows' Aero taskbar.
Like this:
https://fvwm.sourceforge.net/screenshots/desktops/
2003:
https://fvwm.sourceforge.net/screenshots/desktops/Nuno_Alexa...
2001:
https://fvwm.sourceforge.net/screenshots/desktops/Tavis_Orma...
Back in the day it wasn't used, period. Any software, either Win32, Motif, Delphi, Athena or such used a menu to access the most common items, the settings and a toolbar for functions. There was no icon replacing all of it.
The same with Macs. Mac OS 8, 9, and then, X. No hamburguer menu. The uberknown Mac menu and a set of Cocoa icons. That it.
Now instead of lazily clicking from one random article to the next (or to a different language, or to "current events", or the "main page" of headline articles), one has to move the mouse twice and make two clicks to get to it through the hamburger menu, or use the URL bar. I can't even remember the last time I went back to the ToC when reading a Wikipedia article and this change is utterly incomprehensible to me.
The new design vs the old design.
The reason the text wasn't wider is because long lines of text are hard to read. It's why newspapers typically arrange their text into columns, rather than having one article being 2-3 lines long stretching across the entire page.
The problem, if there is one, is information hierarchy and deciding whether/how/where to disclose a given information at a given level in that hierarchy and how it’s disclosed. It’s very situationally dependent and probably impossible to please everyone. Optimizing it for the best outcomes for most users is what most good designs do, and they very seldom do the things a lot of vocal HN complaints want (shove everything on screen close together with small text, ie optimize for desktop power users; or make everything infinitely configurable, ie optimize for… idk even what the optimization serves, the same users complain about the web being overly complicated).
(It's perhaps worse in that way, since it's the tooling generating the HTML, of course, so this is just going to propagate…)
I can't remember going purposely back to the ToC myself, however I often enough scroll over pages to find a section again and there it helps to have the structure visible.
However the nice thing: In your preferences you can pick the style you like. So if you want the old one pick it.
You can also leave feedback with them that "random page" is important (I like that one too!) so they find a better place ...
But the front page just has empty space there?!!??
FWIW I also used to use that quote, until I had a child and saw firsthand [well, second-hand as it was my wife doing the work] how much effort breastfeeding a newborn could take; I don't really blame anyone for quoting it (it's pithy after all).
Surprisingly good further discussion on the UX SE [1].
0: https://www.npr.org/sections/health-shots/2013/09/23/2253491...
1: https://ux.stackexchange.com/questions/5150/is-it-true-that-...
It's become more of a meme to be needlessly contrarian, and ignore the fact that billions of babies actually do know this interface intuitively.
But beyond that (and this is covered in the stack overflow thread) is that it confuses intuition and reflex. Reflex is hard-wired and the stimulus often doesn’t even hit the brain - think a doctor tapping a kneecap. Suckling is like this, which is why a baby will root if you stroke its cheek - obviously there’s no nipple on the finger, yet the baby’s reflex kicks in nonetheless.
Intuition/intuitive on the other hand, in the context of UI design, means the user can without thinking or with very little conscious thought understand how to use the interface.
The fact that suckling is a hardwired reflex is what makes using the nipple intuitive. You use it by doing the same thing you think you should do.
In this case it gets used automatically without choice or thought. Anything shoved into a baby's mouth triggers it. It's not intuition, just reflex. Intuition implies understanding.
It's the difference between "I know that what this is for and how to use it" vs "I have no idea what this is and I have no control over doing it, this is just something that is happening to me"
No, if anything it's the opposite. If you understand something, you'll find it easy to use. Intuition is what you rely on in the absence of understanding.
It's like quoting Einstein's bit about infinite stupidity, or the Dunning Kruger effect. It's dismissive without being insightful.
Some anecdotal evidence to support this.
I work for a very large health care company. We recently redesigned one of our portals. During the UX research phase, one of the tasks was to go back to the home page via the logo - one of the researchers had an idea we were assuming all of our users should/would know this since but we still have a large portion of our users are older, retirees or aging Gen Xers. It was a hunch at the time - nothing more.
The research showed a large enough percentage of people couldn't complete the task in a timely manner whereas on the new design, the logo is now just an SVG, with no link. We have a dedicated "Home" link now on the main navigation which in testing, 100% of the people were now able to complete the task in a timely manner.
I think it really stunned quite a few people since this has seemingly been a standard design pattern for so long. I was pretty stunned hearing the research team talking about it.
Why not both? Genuine question.
User never used/discovered it before == not familiar.
I agree.
I put a hamburger menu in an in-house tool I built last year. Everyone in that department is between 22 and 30, with one guy over 50. I always stand with the users when my new products are deployed, so I was in the room when nobody recognized what the hamburger menu was.
I ended up changing it to the word "Menu" and everyone was happy.
I think it's becoming even more confusing now that Google is pushing the ⋮ vertical ellipsis as a hamburger replacement. The last thing the web needs is inconsistent icons.
Universally consistent icons only exist in rare cases, most of the time it is because a certain industry sits down and agrees on a standard (the power buttons are a good example; or the radioactivity and bio-hazard symbols), so inconsistent icons across the web is simply a reality that we have to live with as web designers. This makes our work both harder, but also more interesting.
I think you made the right choice removing the icon with text. Sometimes there is no icon which fits the context to provide meaning to it. In those cases, text is the correct choice.
tl;dr "Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases."
Enlarging the menu so its easier to find with screen reader tools like TalkBack and VoiceOver has been somewhat effective. However, if you have split menu's, login, search and other features, you start running into complex design issues with where to put all of those and whether you want to stuff them all in the mobile menu, outside the menu or a combination of the two. When you start putting features like search and login into the mobile menu, that also creates more accessibility issues as well.
Designing for accessibility can get really complex, really fast and I'm not sure there's really a solid design pattern yet that addresses all of the issues we're seeing now.
I know that's not a great answer, but it just highlights the complexity of designing for accessibility.
BigCorps Inc. don't like these, because each menu choice has 3 departments and 14 sub-departments that mate-guard their particular menu area, so designers just give up on mobile and hide it all behind the hamburger icon.
It's absolutely daft. Your Web site should be an extra employee, never-tiring, always at work, facilitating the customer or visitor's needs. It's really weird, but depressingly predictable.
The other issue is the placement of the menu in the upper right or left hand corner is nearly impossible to find with TalkBack or VoiceOver controls. Sometimes even with aria attributes, you really have to search with your finger to find the menu and interact with it.
When you use VoiceOver for example, an easy test is dragging your finger down the middle of the screen, you should be able to access the majority of the content - when the menu is tucked too far up in the corner, or too small, it gets obscured by the logo, CTA or anything else that's in the area and gets bypassed by VoiceOver.
Making it large enough to find by simply dragging your finger down the middle of the screen is a good enough test to determine if its big enough, too small or located somewhere it would be skipped by those screen reader tools.
Hope that helps.
I have an (admittedly ancient) Android smartphone in my pocket which has dedicated physical menu and back buttons. I don't recall seeing hamburger menus until phone manufacturers started being too cheap to include that menu button.
Now they're everywhere, even (especially) when they're not remotely appropriate. What could be more ridiculous than a touchscreen-oriented menu button in a text editor (looking at you, Gedit) or a VCD waveform viewer (looking at you, GtkWave)?
Maybe the regular horizontal menu bar except allow it to scroll horizontally when it overflows? Google currently uses that pattern for their secondary menu bar under the search field when viewed on mobile: https://www.google.com/search?q=test
Google’s horizontally-scrolling menu bar appears to work well without JavaScript, and I suspect it would be screen reader-friendly too with role="menu" and role="menuitem" attributes.
> Put yourself in the shoes of a visually impaired person and think how frustrating it must be to get on a page that doesn’t allow you to open the main menu!
I just have to laugh at that kind of level of delusion. As if a screen reader will be able to figure out what the menu button is when the ids, classes and tags are all filled up with generated garbage by <insert unnecessary framework of choice>. It's not like the icon is labelled in any way that matters.
Any actually accessible or even good UX would have the menu buttons expanded by default, with text and not just icons. Mobile UIs have brought on this epidemic of hiding all features behind multiple superfluous clicks of icons hidden somewhere to the side and it just makes me feel like throwing up seeing it on desktop UIs. Even Wikipedia did it recently, despite the community backlash.
I also use 1440x900 on 24 inch monitors (I'm on the screen for 14 hours a day and don't like eye fatigue.) (1280x720 on 15 inch laptops -- most sites think I'm on mobile so even more clicks)
But in trying to figure out when they became prominent, I discovered that some dude at Xerox invented them in 1981.
It’s the old ‘three dots signify some sort of button’ pattern. Except these dots hide crucial functionality — think activate your campaign — and just kinda float in the middle of the row, surrounded by other actual buttons, and they don’t even have a border!
My parter figured it out eventually and when she said, hey, I found where that option is … that was a real head-slapping can it be this bad sort of moment.
From LI’s perspective this was days of income they didn’t get from us because we couldn’t figure out how to turn the damned thing on!
Hard to believe how this got through user testing.
"Last Few Decades"? Eh? A decade.. perhaps?
"Every User Immediately"? This is not at all my experience. Perhaps with younger users, but I've seen plenty of people younger than I even stumble over sites where the nav was hidden behind a hamburger menu icon.
This sounds like it was written by someone very much in their own bubble