10 ms·

When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn’t necessarily a

When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn’t necessarily a bad thing Tell it to the many people who have no idea what it means on a mobile device, or increasingly on desktop websites. I've said it many times before, but it's worth repeating: Most people are frustrated by modern information tools. According to a 2015 OECD computer skills study, <6% of Americans are level 3 (highest) while half have only basic skills and 20% can't use computers. (https://www.oecd-ilibrary.org/education/skills-matter_9789264258051-en https://www.oecd-ilibrary.org/education/skills-matter_978926...) I like the sausage link concept because it clearly labels options with text.

dpcan 5y ago
Well, human beings have grown quite accustomed to using symbols to represent actions they need to take. In the United States, I remember learning about Mr. Yuck stickers by the time I was 4, or the shape and color of a stop sign, green means go, walk and don’t walk figures, even an exit sign always looked the same even if I couldn’t read. The hamburger menu takes someone explaining it to you just one time to know what it is every time.
- rmetzler 5y ago
  Icons don’t work with on page search (e.g CTRL+F). And it’s hard to describe icons to someone else on the phone. I‘m not sure if Word is still the mess it used to be, but this kind of interface design can be really hard to understand and learn. Currently for me this is Blender. The software is complex, the interface mirrors this, but if you’re new to it, this is really hard to learn.
  - kaba0 5y ago
    I guess after a point it is simply inherent complexity. Like, I can’t even imagine a GUI that would make someone seeing it for the first time know some semi-advanced feature in Word. First of all, the whole problem domain has to be taught/discovered. And sure, people often learn by trial-and-error and it makes sense to try to maximalize this sort of discoverability in all software, but I would say that it doesn’t scale. Even with the “better” labeled menus, gimp is not intuitive to say the least. So perhaps the (often annoying) teach you by showing is the better direction? My gripe with it is that it is often applied for trivial mobile apps for things like “search by using the search bar”.. but I think an all-menu/all-action text-based search functionality would be a must as well.
    - rmetzler 5y ago
      In MacOS you can search the menu of GUI apps. This helps discovery so much.
- at_a_remove 5y ago
  Mr. Yuck is green, Mr. Yuck is mean, Mr. Yuck also has the shape of a face absolutely filled with disgust at having put something terrible in his mouth. In short, Mr. Yuck communicates something purely by expression rather than association. The hamburger menu looks like decoration, or a portion of the I Ching. Nothing about three horizontal lines says "I contain options for navigation." Now, were six lines used, with every other line being indented, and then a \ or a / here and there, it would look like something folded up, and I would think, "Oh, unfold this thing." But three horizontal lines just ... no, I got nothin'.
  - gowld 5y ago
    It's an iconic representation of a list or menu. You learn it once, and it works everywhere. And it fits on a small screen.
    - Angostura 5y ago
      'You learn it once' is doing quite a lot of work there. I tend to use a hamburger labeled with 'Menu'
    - josho 5y ago
      I encourage you to go watch a novice computer user. After seeing them struggle I suspect you'll change your mind. I personally view the hamburger menu similar to my junk drawer at home. It's where the designer stuffs crap that isn't very important. So, it's the last place I look for when I need to get something done in an app.
    - gbear605 5y ago
      Just this week I was on three different customer calls where I had to explain to a relatively technical user (they use our website on a daily basis for their job) what the hamburger menu in Chrome was. None of them understood that it was a thing that they could click on to get to other options. It's just not intuitive.
  - deleted 5y ago
    [deleted]
brimble 5y ago
Firefox and Chrome have proven Apple right, in forcing a top-of-screen menu bar to appear whether the application wants it to or not. This was demonstrated to me recently when my parents couldn't figure out how to print on Windows in Firefox (because there's no standard menu on it—they know "file -> print" just fine) and called me for help. After a moment of confusion on my part as I remembered that FF doesn't have a normal menu anymore, then a brief and totally failed effort to talk them through finding the beyond-stupid, tiny, "everything" drawer button, I finally just told them to press the keys for the keyboard shortcut, which they won't remember and will have to ask me again next time.
- ilamont 5y ago
  I suspect many people reading this HN thread also serve as their family's tech support team. Every week I get calls or emails from my parents requesting help figuring out something that's not obvious from the UI, is accidentally triggered by users, deliberately activated (by the app) during a software update, or buried deep in some settings or submenu. This week's selection includes: - Turning off yet again the annoying computer voice announcing any navigation or volume change on my parents' new Samsung TV (accessibility option, not sure why it turned on, but it required me visiting their home in person again to turn it off) - Trying to help my father disable the "get Outlook for iOS" line that suddenly started to be appended to the bottom of his work emails. - Helping my spouse troubleshoot a Shopify app feature that prevents >1 item being subtracted from inventory at a time - Figuring out how to enable a social media save shared photos to her phone's photo album Yes, sometimes software is so complicated and feature rich these items have to buried deep in the settings. But often I find that the lack of obvious text labels for basic features and navigation items is the problem. Hamburger menus and the three dots "more actions" icon are a poor substitute for clear text labels and links.
  - brimble 5y ago
    The thing about modern software that infuriates me the most, watching my parents struggle with it, are the damned screen-takeover or focus-stealing on-launch notices, usually about some update they don't care about. They opened the thing to use it, not to read your changelog or marketing shit. Coupled with auto-updating, it confuses the absolute hell out of them, and the way modern design (and Android especially) make it hard to tell what's a button and what's text, and inconsistent cutesy button labels, make it even worse (it often takes them a while to figure out how to make the thing they didn't ask for and never, ever want go away). Google loves to do this pretty much everywhere, and it's especially bad on mobile, but FF desktop's post-update new-tab-to-market-at-you-about-what-changed (nothing important, 95%+ of the time) is almost as bad. Hell, I don't like that stuff either (does anyone?) but it's just a minor annoyance for me. For them it can mean they give up trying to do whatever they wanted to do.
hn_throwaway_99 5y ago
> I like the sausage link concept because it clearly labels options with text. 100%. I'm kinda surprised how the 3 lines hamburger menu got so prevalent in the first place, because it always user tests poorly. My guess is that when flat minimalism (my favorite shitty example of this is when Android expected everyone to know what a flat square, circle and triangle are supposed to mean) was the rage, even though user testing always showed a ton of people didn't know what the three lines meant, that designers felt it would eventually become "the standard" and people would know. Problem is, years later, tons of people still don't know what it means - every time we do user testing, words do better. I think these days design fads change so frequently that there really isn't enough time for any design to be that "standard" long enough for everyone to really grasp it.
- qwertox 5y ago
  > Problem is, years later, tons of people still don't know what it means This is a problem which could get solved if every mainstream media presents this icon for 30 seconds with a short explanation for one week during the main news hour. Or every newspaper would dedicate 1/4 of a page to it for one week. Viewers educated, problem solved. Make an exception for such an important icon. I personally find the sausage link horrible. I have to scroll by picking the scroll bar with the mouse because the scroll wheel is not working in the demo, and it's anything but a compact display of information, unlike what you get with a drop-down popup menu.
- the_pwner224 5y ago
  > my favorite shitty example of this is when Android expected everyone to know what a flat square, circle and triangle are supposed to mean What is this referring to? Edit: I'm so used to these buttons that I didn't even realize they were just simple flat shapes. It definitely would be confusing for someone new to Android or for someone who's not good with tech.
  - throwawayben 5y ago
    The soft buttons on Android: https://i.stack.imgur.com/YKCPp.png https://i.stack.imgur.com/YKCPp.png
reaperducer 5y ago
The problem isn't the mechanics of the hamburger menu, it's that we use an icon to represent it. I've never seen a case where space was so scarce that the icon couldn't be replaced by the word "Menu." Perhaps there is some issue with internationalization, but I've been to restaurants in 30+ countries, and "Menu" seems to be pretty universally-used word.
- earth_walker 5y ago
  "Menu" is so overdone. How about we call it "Start"?
  - reaperducer 5y ago
    Hamburgers are unhealthy anyway. We could just replace the burger icon with a piece of fruit. Perhaps an apple?
fiddlerwoaroof 5y ago
I’m curious if words do better if you test people who don’t know the language.
abortionlover69 5y ago
at-fates-hands 5y ago
I can give you some anecdotal evidence that supports what you're saying. The very large health care company I work for now is currently redesigning their global nav. We've had no less than 10-15 design working sessions. The same thing that continually comes up is the hamburger menu and how to handle it. The reason is the company did some pretty extensive research with seniors (a big chunk of our clientele) and found many don't have any idea the hamburger menu is a standard menu now for both desktop and mobile apps. We were told we either have to use it minimally, or not at all. Its been a struggle to find something that everybody can agree on. We have a very small team of 5 people - 2 designers, 2 devs and myself (accessibility) working on this. I also happen to work in accessibility which many of the apps/sites that use hamburger menus on mobile either create keyboard traps or are totally unusable for screen readers. I'm at least happy our company is trying to move to something different.
- a9h74j 5y ago
  I don't work on accessibility, but is there a way in general for controls to have "alt text" and/or "hover text" or, God forbid, can you put 'menu' in a legible font e.g. right under a hamburger icon or vertical ellipsis? I wonder how such a text label would test in your application -- and it would arguably seem more "discoverable."
chadlavi 5y ago
This is a good point for all of us to remember, but to take it further: folk who don't understand hamburger menus aren't likely to understand that they can horizontally scroll to see more of these sausage links either. If you really really want to make sure everyone knows how it works, just make it a real-deal list of links.
- a9h74j 5y ago
  At the very least, when horizontal scrolling isn't the more common use to drag a map with a "hand" pointer? In that case there is a natural mapping without any need to grab a (thin) scrollbar, if there even is one. On mobile, with such a drag operation, I suppose one could place a finger between menu items so as to not select anything while dragging.
charcircuit 5y ago
>Tell it to the many people who have no idea what it means on a mobile device, or increasingly on desktop websites The hamburger menu is literally used everywhere. Why should we design things for tech illiterate boomers. The most popular apps and websites use it. It's ubiquitous.
bcrl 5y ago
Personally, I dislike sausage links as well. Horizontal scrolling is a pain in the ass on a desktop computer with a mouse. Vertical scrolling is much more natural. Please, try to make use of the ample screen real estate on my system as that's the entire reason I own a 4K monitor. I'd be less frustrated if I could file bugs that would get to the developers of an app / website / etc and get the issues that drive me nuts fixed. Take Google Maps: it has built in menu options to report data errors, but what about bugs with the software itself? Sometime last year a bug was introduced where if I start typing the address in "too fast" before the page finishes loading, the address characters will appear out-of-order. It's a classic FIFO / LIFO ordering bug. I suppose it's my fault for thinking I could type as soon as the text widget becomes visible on the page.

dpcan 5y ago

Well, human beings have grown quite accustomed to using symbols to represent actions they need to take. In the United States, I remember learning about Mr. Yuck stickers by the time I was 4, or the shape and color of a stop sign, green means go, walk and don’t walk figures, even an exit sign always looked the same even if I couldn’t read. The hamburger menu takes someone explaining it to you just one time to know what it is every time.

rmetzler 5y ago
Icons don’t work with on page search (e.g CTRL+F). And it’s hard to describe icons to someone else on the phone. I‘m not sure if Word is still the mess it used to be, but this kind of interface design can be really hard to understand and learn. Currently for me this is Blender. The software is complex, the interface mirrors this, but if you’re new to it, this is really hard to learn.
- kaba0 5y ago
  I guess after a point it is simply inherent complexity. Like, I can’t even imagine a GUI that would make someone seeing it for the first time know some semi-advanced feature in Word. First of all, the whole problem domain has to be taught/discovered. And sure, people often learn by trial-and-error and it makes sense to try to maximalize this sort of discoverability in all software, but I would say that it doesn’t scale. Even with the “better” labeled menus, gimp is not intuitive to say the least. So perhaps the (often annoying) teach you by showing is the better direction? My gripe with it is that it is often applied for trivial mobile apps for things like “search by using the search bar”.. but I think an all-menu/all-action text-based search functionality would be a must as well.
  - rmetzler 5y ago
    In MacOS you can search the menu of GUI apps. This helps discovery so much.
at_a_remove 5y ago
Mr. Yuck is green, Mr. Yuck is mean, Mr. Yuck also has the shape of a face absolutely filled with disgust at having put something terrible in his mouth. In short, Mr. Yuck communicates something purely by expression rather than association. The hamburger menu looks like decoration, or a portion of the I Ching. Nothing about three horizontal lines says "I contain options for navigation." Now, were six lines used, with every other line being indented, and then a \ or a / here and there, it would look like something folded up, and I would think, "Oh, unfold this thing." But three horizontal lines just ... no, I got nothin'.
- gowld 5y ago
  It's an iconic representation of a list or menu. You learn it once, and it works everywhere. And it fits on a small screen.
  - Angostura 5y ago
    'You learn it once' is doing quite a lot of work there. I tend to use a hamburger labeled with 'Menu'
  - josho 5y ago
    I encourage you to go watch a novice computer user. After seeing them struggle I suspect you'll change your mind. I personally view the hamburger menu similar to my junk drawer at home. It's where the designer stuffs crap that isn't very important. So, it's the last place I look for when I need to get something done in an app.
  - gbear605 5y ago
    Just this week I was on three different customer calls where I had to explain to a relatively technical user (they use our website on a daily basis for their job) what the hamburger menu in Chrome was. None of them understood that it was a thing that they could click on to get to other options. It's just not intuitive.
- deleted 5y ago
  [deleted]

brimble 5y ago

Firefox and Chrome have proven Apple right, in forcing a top-of-screen menu bar to appear whether the application wants it to or not. This was demonstrated to me recently when my parents couldn't figure out how to print on Windows in Firefox (because there's no standard menu on it—they know "file -> print" just fine) and called me for help. After a moment of confusion on my part as I remembered that FF doesn't have a normal menu anymore, then a brief and totally failed effort to talk them through finding the beyond-stupid, tiny, "everything" drawer button, I finally just told them to press the keys for the keyboard shortcut, which they won't remember and will have to ask me again next time.

ilamont 5y ago
I suspect many people reading this HN thread also serve as their family's tech support team. Every week I get calls or emails from my parents requesting help figuring out something that's not obvious from the UI, is accidentally triggered by users, deliberately activated (by the app) during a software update, or buried deep in some settings or submenu. This week's selection includes: - Turning off yet again the annoying computer voice announcing any navigation or volume change on my parents' new Samsung TV (accessibility option, not sure why it turned on, but it required me visiting their home in person again to turn it off) - Trying to help my father disable the "get Outlook for iOS" line that suddenly started to be appended to the bottom of his work emails. - Helping my spouse troubleshoot a Shopify app feature that prevents >1 item being subtracted from inventory at a time - Figuring out how to enable a social media save shared photos to her phone's photo album Yes, sometimes software is so complicated and feature rich these items have to buried deep in the settings. But often I find that the lack of obvious text labels for basic features and navigation items is the problem. Hamburger menus and the three dots "more actions" icon are a poor substitute for clear text labels and links.
- brimble 5y ago
  The thing about modern software that infuriates me the most, watching my parents struggle with it, are the damned screen-takeover or focus-stealing on-launch notices, usually about some update they don't care about. They opened the thing to use it, not to read your changelog or marketing shit. Coupled with auto-updating, it confuses the absolute hell out of them, and the way modern design (and Android especially) make it hard to tell what's a button and what's text, and inconsistent cutesy button labels, make it even worse (it often takes them a while to figure out how to make the thing they didn't ask for and never, ever want go away). Google loves to do this pretty much everywhere, and it's especially bad on mobile, but FF desktop's post-update new-tab-to-market-at-you-about-what-changed (nothing important, 95%+ of the time) is almost as bad. Hell, I don't like that stuff either (does anyone?) but it's just a minor annoyance for me. For them it can mean they give up trying to do whatever they wanted to do.

hn_throwaway_99 5y ago

> I like the sausage link concept because it clearly labels options with text. 100%. I'm kinda surprised how the 3 lines hamburger menu got so prevalent in the first place, because it always user tests poorly. My guess is that when flat minimalism (my favorite shitty example of this is when Android expected everyone to know what a flat square, circle and triangle are supposed to mean) was the rage, even though user testing always showed a ton of people didn't know what the three lines meant, that designers felt it would eventually become "the standard" and people would know. Problem is, years later, tons of people still don't know what it means - every time we do user testing, words do better. I think these days design fads change so frequently that there really isn't enough time for any design to be that "standard" long enough for everyone to really grasp it.

qwertox 5y ago
> Problem is, years later, tons of people still don't know what it means This is a problem which could get solved if every mainstream media presents this icon for 30 seconds with a short explanation for one week during the main news hour. Or every newspaper would dedicate 1/4 of a page to it for one week. Viewers educated, problem solved. Make an exception for such an important icon. I personally find the sausage link horrible. I have to scroll by picking the scroll bar with the mouse because the scroll wheel is not working in the demo, and it's anything but a compact display of information, unlike what you get with a drop-down popup menu.
the_pwner224 5y ago
> my favorite shitty example of this is when Android expected everyone to know what a flat square, circle and triangle are supposed to mean What is this referring to? Edit: I'm so used to these buttons that I didn't even realize they were just simple flat shapes. It definitely would be confusing for someone new to Android or for someone who's not good with tech.
- throwawayben 5y ago
  The soft buttons on Android: https://i.stack.imgur.com/YKCPp.png https://i.stack.imgur.com/YKCPp.png

reaperducer 5y ago

The problem isn't the mechanics of the hamburger menu, it's that we use an icon to represent it. I've never seen a case where space was so scarce that the icon couldn't be replaced by the word "Menu." Perhaps there is some issue with internationalization, but I've been to restaurants in 30+ countries, and "Menu" seems to be pretty universally-used word.

earth_walker 5y ago
"Menu" is so overdone. How about we call it "Start"?
- reaperducer 5y ago
  Hamburgers are unhealthy anyway. We could just replace the burger icon with a piece of fruit. Perhaps an apple?

fiddlerwoaroof 5y ago

I’m curious if words do better if you test people who don’t know the language.

abortionlover69 5y ago

at-fates-hands 5y ago

I can give you some anecdotal evidence that supports what you're saying. The very large health care company I work for now is currently redesigning their global nav. We've had no less than 10-15 design working sessions. The same thing that continually comes up is the hamburger menu and how to handle it. The reason is the company did some pretty extensive research with seniors (a big chunk of our clientele) and found many don't have any idea the hamburger menu is a standard menu now for both desktop and mobile apps. We were told we either have to use it minimally, or not at all. Its been a struggle to find something that everybody can agree on. We have a very small team of 5 people - 2 designers, 2 devs and myself (accessibility) working on this. I also happen to work in accessibility which many of the apps/sites that use hamburger menus on mobile either create keyboard traps or are totally unusable for screen readers. I'm at least happy our company is trying to move to something different.

a9h74j 5y ago
I don't work on accessibility, but is there a way in general for controls to have "alt text" and/or "hover text" or, God forbid, can you put 'menu' in a legible font e.g. right under a hamburger icon or vertical ellipsis? I wonder how such a text label would test in your application -- and it would arguably seem more "discoverable."

chadlavi 5y ago

This is a good point for all of us to remember, but to take it further: folk who don't understand hamburger menus aren't likely to understand that they can horizontally scroll to see more of these sausage links either. If you really really want to make sure everyone knows how it works, just make it a real-deal list of links.

a9h74j 5y ago
At the very least, when horizontal scrolling isn't the more common use to drag a map with a "hand" pointer? In that case there is a natural mapping without any need to grab a (thin) scrollbar, if there even is one. On mobile, with such a drag operation, I suppose one could place a finger between menu items so as to not select anything while dragging.

charcircuit 5y ago

>Tell it to the many people who have no idea what it means on a mobile device, or increasingly on desktop websites The hamburger menu is literally used everywhere. Why should we design things for tech illiterate boomers. The most popular apps and websites use it. It's ubiquitous.

bcrl 5y ago

Personally, I dislike sausage links as well. Horizontal scrolling is a pain in the ass on a desktop computer with a mouse. Vertical scrolling is much more natural. Please, try to make use of the ample screen real estate on my system as that's the entire reason I own a 4K monitor. I'd be less frustrated if I could file bugs that would get to the developers of an app / website / etc and get the issues that drive me nuts fixed. Take Google Maps: it has built in menu options to report data errors, but what about bugs with the software itself? Sometime last year a bug was introduced where if I start typing the address in "too fast" before the page finishes loading, the address characters will appear out-of-order. It's a classic FIFO / LIFO ordering bug. I suppose it's my fault for thinking I could type as soon as the text widget becomes visible on the page.