8 ms·

> "Over the last few decades hamburger buttons have become the de facto standard to expand larger menus on smaller devices. They are so ubiquitous that every us

> "Over the last few decades hamburger buttons have become the de facto standard to expand larger menus on smaller devices. They are so ubiquitous that every user immediately knows what they are when seen in the top left or right corner, which makes them a good user interface element choice." "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

dwringer 4y ago
This immediately made me think of Wikipedia's latest change that moves their main menu behind just such a hamburger button on desktop, and replaces it with a table of contents down the left side. 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.
- marginalia_nu 4y ago
  Yeah on desktop it's particularly bizarre design choice. Hamburger buttons are designed to conserve pixels on cramped horizontal screens. They make zero sense on a 4k ultrawide monitor.
  - mgkimsal 4y ago
    likely a case of wanting "one design to fit all devices".
    - marginalia_nu 4y ago
      That's a pipe dream if I ever saw one. Desktop and mobile inputs have entirely different properties and constraints.
    - Spivak 4y ago
      And "one design to fit not maximized windows on not high-dpi screens." The new design vs the old design. https://imgur.com/a/rV1UXc4 https://imgur.com/a/rV1UXc4
      - dwringer 4y ago
        Thanks for that great perspective, I can absolutely see the benefit of the new design in a cramped display or at lower resolutions. OTOH, the comparison at 4k is strikingly different.
        marginalia_nu 4y ago
        The old wikipedia design predates consumer access to 4K monitors though. 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.
    - wolpoli 4y ago
      Unfortunately for power users, "one design to fit all devices" is done by designing for mobile first. Desktop is treated as a giant tablet. Hence the large buttons and huge distance between elements.
      - joshspankit 4y ago
        It’s greatly complicated by how widely variable modern monitors are. Web designers can no longer target px or vw for width and space between elements unless the set a maximum width for the content.
    - eyelidlessness 4y ago
      I don’t share OP’s gripes with the changes to Wikipedia’s UI, but there are approaches to responsive design (which one might phrase “one design to fit all devices”) that don’t arbitrarily hide useful stuff in a menu where there’s space to accommodate it. And those approaches have only gotten more capable in recent years. 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).
  - deathanatos 4y ago
    And yet it feels like all designers are doing this. Some Rust docs, rendered by mdBook, was annoying me just yesterday with this. (It's perhaps worse in that way, since it's the tooling generating the HTML, of course, so this is just going to propagate…)
- xchkr1337 4y ago
  My experience with this is literally the opposite, I almost never clicked the buttons on the left side (except for the language switcher but that isn't in the hamburger menu now) but I always found long tables of contents very annoying on bigger articles, I find the new design generally more comfortable to read with. The only complaint I have is that it doesn't remember the state of the fullscreen button.
- notRobot 4y ago
  Wikipedia has support for different skins, including the old one: https://news.ycombinator.com/item?id=34431533 https://news.ycombinator.com/item?id=34431533
- johannes1234321 4y ago
  > I can't even remember the last time I went back to the ToC when reading a Wikipedia article 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 ...
- layer8 4y ago
  Another thing I dislike about the new design is the visual distraction of the current section being highlighted in the TOC. When you scroll through an article, you have like a blinking light moving through the TOC.
- awefji 4y ago
  I'm fine with it on articles, where as you say there's a table of contents. But the front page just has empty space there?!!??
dvh 4y ago
The only intuitive user interface is a nipple. Everything else has to be learned.
- reaperducer 4y ago
  I presume you're being down-voted for the use of the word "nipple," by people who don't know that this is an axiom that has been used in the design industry for a very long time.
  - Domenic_S 4y ago
    It's a fun little meme, but it's not all that accurate. Something like half of mothers report latching or other nipple-baby interface problems in some studies [0]. What's more, suckling is a hardwired reflex, not something that's intuited, so the quote also misunderstands the nature of intuition. 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/225349120/to-succeed-at-breast-feeding-most-new-moms-could-use-help https://www.npr.org/sections/health-shots/2013/09/23/2253491... 1: https://ux.stackexchange.com/questions/5150/is-it-true-that-the-only-intuitive-interface-is-the-nipple https://ux.stackexchange.com/questions/5150/is-it-true-that-...
    - reaperducer 4y ago
      Because not every baby figures it out the first time does not mean it is not intuitive for the other babies that do figure it out immediately. 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.
      - mixmastamyk 4y ago
        Also many times they “know” what to do but can’t quite succeed for whatever reason. Or perhaps the milk is not ready.
enyo 4y ago
The icon was designed and introduced in 1981. The popularity dramatically increased in the last decade due to smartphones that’s for sure. 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.
- detritus 4y ago
  I know it was originally invented way back when (in Xerox Parc?), but it did not become 'de facto' on small screens decades ago, that's just a mangling of perspective. I don't recollect ever having seen it on any of the 'small screens' (ie LCDs, etc) I used prior to smartphones.
  - enyo 4y ago
    I never said that it did.
    - detritus 4y ago
      Except in the bit I quoted above, no. 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.
      - enyo 4y ago
        > "but it did not become 'de facto' on small screens decades ago” 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 :)
unsupp0rted 4y ago
Every time I think something is obvious and ubiquitously understood someone on my client's team looks directly at it and insists it doesn't exist, or if it exists then it doesn't do anything, or if it does something then what it does isn't the thing they thought it would do.
- irrational 4y ago
  I remember a business manager having zero idea that clicking the logo at the top of a webpage would often take you to the home page. I had assumed this was ubiquitously understood, but clearly not.
  - unsupp0rted 4y ago
    It seems people don't explore at all. There's no "I wonder what would happen if" impulse, or there's an "I'd better not just in case" worry.
    - djbusby 4y ago
      And the lack of tooltips on hover. WTF, it's missing on loads of big properties.
      - autoexec 4y ago
        Mobile platforms are the worst when it comes to having any understanding at all over where a link (or linked element) will take you and I don't think that's unintentional.
  - at-fates-hands 4y ago
    >> I had assumed this was ubiquitously understood, but clearly not. 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.
reaperducer 4y ago
"Every User Immediately"? This is not at all my experience. Perhaps with younger users 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.
- runarberg 4y ago
  Iconography is both art and science, just like typography, and works hand in hand with usability. The right icon in the right context will convey its meaning to the users, if it doesn’t then it is not the right icon or the context is missing (or both). What makes the right icon has to do with both universality and internal consistency, but neither is required. 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.
- autoexec 4y ago
  I don't care much for hamburger menus but the vertical ellipsis drives me nuts. The standard icon represents a list of lines of text. What the hell is a list of dots supposed to signify?
atestu 4y ago
I agree. Hamburger buttons were popularized with smartphones so they are still relatively new. Here's a good breakdown on why they suck https://www.nngroup.com/articles/hamburger-menus/ https://www.nngroup.com/articles/hamburger-menus/ 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."
- at-fates-hands 4y ago
  I'm an accessibility engineer and hamburger menus on mobile are almost always completely inaccessible. A majority of the time they need to be fixed in order to accommodate visually impaired users or users who depend on VoiceOver or other screen reading technologies. Its practically a default issue at this point.
  - mixmastamyk 4y ago
    What is the preferred design?
    - at-fates-hands 4y ago
      I don't think the org that I work for has really found it. 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.
    - deltarholamda 4y ago
      I prefer an actual menu. Not one of the deeply nesting, expands on rollover sorts of menus (about half of them disappear if you mis-mouse out), but just a handful of clickable text buttons or whatever that hit the major navigation points. 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.
divbzero 4y ago
Could we popularize an alternative to hamburger buttons that is more discoverable for users? Google uses a horizontally-scrolling menu bar for Images, News, etc., just above the search results when viewed on mobile: https://www.google.com/search?q=test https://www.google.com/search?q=test The horizontally-scrolling menu bar seems to be: – Discoverable for typical visual browsers – Discoverable for screen readers, especially when used with attributes like role="menu" and role="menuitem" – Fully functional without JavaScript
moffkalast 4y ago
They even wrote the following: > 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.
- micahdeath 4y ago
  As someone with less dexterity, I agree. 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)
hinkley 4y ago
I'm pretty sure Hamburgers started becoming common around 2008-9, so that's three decades we've been using them even though it's only 14 years. But in trying to figure out when they became prominent, I discovered that some dude at Xerox invented them in 1981.
jen729w 4y ago
Speaking of which (loosely), if anyone from LinkedIn is reading this your Campaign Manager has one of the dumbest pieces of UI I’ve seen in a long time. 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.

dwringer 4y ago

This immediately made me think of Wikipedia's latest change that moves their main menu behind just such a hamburger button on desktop, and replaces it with a table of contents down the left side. 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.

marginalia_nu 4y ago
Yeah on desktop it's particularly bizarre design choice. Hamburger buttons are designed to conserve pixels on cramped horizontal screens. They make zero sense on a 4k ultrawide monitor.
- mgkimsal 4y ago
  likely a case of wanting "one design to fit all devices".
  - marginalia_nu 4y ago
    That's a pipe dream if I ever saw one. Desktop and mobile inputs have entirely different properties and constraints.
  - Spivak 4y ago
    And "one design to fit not maximized windows on not high-dpi screens." The new design vs the old design. https://imgur.com/a/rV1UXc4 https://imgur.com/a/rV1UXc4
    - dwringer 4y ago
      Thanks for that great perspective, I can absolutely see the benefit of the new design in a cramped display or at lower resolutions. OTOH, the comparison at 4k is strikingly different.
      - marginalia_nu 4y ago
        The old wikipedia design predates consumer access to 4K monitors though. 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.
  - wolpoli 4y ago
    Unfortunately for power users, "one design to fit all devices" is done by designing for mobile first. Desktop is treated as a giant tablet. Hence the large buttons and huge distance between elements.
    - joshspankit 4y ago
      It’s greatly complicated by how widely variable modern monitors are. Web designers can no longer target px or vw for width and space between elements unless the set a maximum width for the content.
  - eyelidlessness 4y ago
    I don’t share OP’s gripes with the changes to Wikipedia’s UI, but there are approaches to responsive design (which one might phrase “one design to fit all devices”) that don’t arbitrarily hide useful stuff in a menu where there’s space to accommodate it. And those approaches have only gotten more capable in recent years. 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).
- deathanatos 4y ago
  And yet it feels like all designers are doing this. Some Rust docs, rendered by mdBook, was annoying me just yesterday with this. (It's perhaps worse in that way, since it's the tooling generating the HTML, of course, so this is just going to propagate…)
xchkr1337 4y ago
My experience with this is literally the opposite, I almost never clicked the buttons on the left side (except for the language switcher but that isn't in the hamburger menu now) but I always found long tables of contents very annoying on bigger articles, I find the new design generally more comfortable to read with. The only complaint I have is that it doesn't remember the state of the fullscreen button.
notRobot 4y ago
Wikipedia has support for different skins, including the old one: https://news.ycombinator.com/item?id=34431533 https://news.ycombinator.com/item?id=34431533
johannes1234321 4y ago
> I can't even remember the last time I went back to the ToC when reading a Wikipedia article 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 ...
layer8 4y ago
Another thing I dislike about the new design is the visual distraction of the current section being highlighted in the TOC. When you scroll through an article, you have like a blinking light moving through the TOC.
awefji 4y ago
I'm fine with it on articles, where as you say there's a table of contents. But the front page just has empty space there?!!??

dvh 4y ago

The only intuitive user interface is a nipple. Everything else has to be learned.

reaperducer 4y ago
I presume you're being down-voted for the use of the word "nipple," by people who don't know that this is an axiom that has been used in the design industry for a very long time.
- Domenic_S 4y ago
  It's a fun little meme, but it's not all that accurate. Something like half of mothers report latching or other nipple-baby interface problems in some studies [0]. What's more, suckling is a hardwired reflex, not something that's intuited, so the quote also misunderstands the nature of intuition. 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/225349120/to-succeed-at-breast-feeding-most-new-moms-could-use-help https://www.npr.org/sections/health-shots/2013/09/23/2253491... 1: https://ux.stackexchange.com/questions/5150/is-it-true-that-the-only-intuitive-interface-is-the-nipple https://ux.stackexchange.com/questions/5150/is-it-true-that-...
  - reaperducer 4y ago
    Because not every baby figures it out the first time does not mean it is not intuitive for the other babies that do figure it out immediately. 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.
    - mixmastamyk 4y ago
      Also many times they “know” what to do but can’t quite succeed for whatever reason. Or perhaps the milk is not ready.

enyo 4y ago

The icon was designed and introduced in 1981. The popularity dramatically increased in the last decade due to smartphones that’s for sure. 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.

detritus 4y ago
I know it was originally invented way back when (in Xerox Parc?), but it did not become 'de facto' on small screens decades ago, that's just a mangling of perspective. I don't recollect ever having seen it on any of the 'small screens' (ie LCDs, etc) I used prior to smartphones.
- enyo 4y ago
  I never said that it did.
  - detritus 4y ago
    Except in the bit I quoted above, no. 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.
    - enyo 4y ago
      > "but it did not become 'de facto' on small screens decades ago” 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 :)

unsupp0rted 4y ago

Every time I think something is obvious and ubiquitously understood someone on my client's team looks directly at it and insists it doesn't exist, or if it exists then it doesn't do anything, or if it does something then what it does isn't the thing they thought it would do.

irrational 4y ago
I remember a business manager having zero idea that clicking the logo at the top of a webpage would often take you to the home page. I had assumed this was ubiquitously understood, but clearly not.
- unsupp0rted 4y ago
  It seems people don't explore at all. There's no "I wonder what would happen if" impulse, or there's an "I'd better not just in case" worry.
  - djbusby 4y ago
    And the lack of tooltips on hover. WTF, it's missing on loads of big properties.
    - autoexec 4y ago
      Mobile platforms are the worst when it comes to having any understanding at all over where a link (or linked element) will take you and I don't think that's unintentional.
- at-fates-hands 4y ago
  >> I had assumed this was ubiquitously understood, but clearly not. 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.

reaperducer 4y ago

"Every User Immediately"? This is not at all my experience. Perhaps with younger users 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.

runarberg 4y ago
Iconography is both art and science, just like typography, and works hand in hand with usability. The right icon in the right context will convey its meaning to the users, if it doesn’t then it is not the right icon or the context is missing (or both). What makes the right icon has to do with both universality and internal consistency, but neither is required. 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.
autoexec 4y ago
I don't care much for hamburger menus but the vertical ellipsis drives me nuts. The standard icon represents a list of lines of text. What the hell is a list of dots supposed to signify?

atestu 4y ago

I agree. Hamburger buttons were popularized with smartphones so they are still relatively new. Here's a good breakdown on why they suck https://www.nngroup.com/articles/hamburger-menus/ https://www.nngroup.com/articles/hamburger-menus/ 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."

at-fates-hands 4y ago
I'm an accessibility engineer and hamburger menus on mobile are almost always completely inaccessible. A majority of the time they need to be fixed in order to accommodate visually impaired users or users who depend on VoiceOver or other screen reading technologies. Its practically a default issue at this point.
- mixmastamyk 4y ago
  What is the preferred design?
  - at-fates-hands 4y ago
    I don't think the org that I work for has really found it. 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.
  - deltarholamda 4y ago
    I prefer an actual menu. Not one of the deeply nesting, expands on rollover sorts of menus (about half of them disappear if you mis-mouse out), but just a handful of clickable text buttons or whatever that hit the major navigation points. 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.

divbzero 4y ago

Could we popularize an alternative to hamburger buttons that is more discoverable for users? Google uses a horizontally-scrolling menu bar for Images, News, etc., just above the search results when viewed on mobile: https://www.google.com/search?q=test https://www.google.com/search?q=test The horizontally-scrolling menu bar seems to be: – Discoverable for typical visual browsers – Discoverable for screen readers, especially when used with attributes like role="menu" and role="menuitem" – Fully functional without JavaScript

moffkalast 4y ago

They even wrote the following: > 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.

micahdeath 4y ago
As someone with less dexterity, I agree. 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)

hinkley 4y ago

I'm pretty sure Hamburgers started becoming common around 2008-9, so that's three decades we've been using them even though it's only 14 years. But in trying to figure out when they became prominent, I discovered that some dude at Xerox invented them in 1981.

jen729w 4y ago

Speaking of which (loosely), if anyone from LinkedIn is reading this your Campaign Manager has one of the dumbest pieces of UI I’ve seen in a long time. 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.