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_978926...)
I like the sausage link concept because it clearly labels options with text.
> 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.
The hamburger menu on the web is what the touch screen are for cars. You can fit anything on there, no matter what the future might hold. No need to think about your content too hard.
And in fact the designer is really not supposed to think about the content too hard. It's not how we do web. This is how we do: There's a CMS and you can add and remove items. How many? As many as the client later discovers they want.
It makes sense, kinda. It solves issues for different parties that are involved in the process. Like with touch screens in cars, we get something for what we give and it might just be the best we can reasonably do given constraints.
> The hamburger menu on the web is what the touch screen are for cars.
I thought this was a brilliant analogy. But you don't seem to have meant it.
> Like with touch screens in cars, we get something for what we give and it might just be the best we can reasonably do given constraints.
Touchscreens in cars are a huge step back from what we had in the 80s. They're far more despised than the hamburger menu. Complaints about the hamburger menu generally take a tone of disgruntled resignation. Complaints about car touchscreens are burning outrage.
There is no way touchscreens in cars can be the best we can do given constraints, because they're much worse than what they replaced.
> There is no way touchscreens in cars can be the best we can do given constraints, because they're much worse than what they replaced.
It is not about how poorly touchscreens perform against what they replace, but what they enable: A continuously developed car, built around software (updates).
"Modern" design is so opposed to any skeuomorphism that every item on the screen has been totally drained of color and detail. So many UIs are frustrating to use because everything is an abstract monochrome glyph. The extreme of fashion over function we're suffering right now is mind-boggling.
In the early 2000's we had books like Steve Krug's "Don't Make Me Think"; but now, for some reason, decades of design and engineering knowledge are being totally ignored, to society's great detriment.
I wonder if those books are ever read nowadays or if the sheer number of projects requiring design skills led to uneducated masses of coders or whatever (me too) doing the job of real educated designers. And fashion, and Bootstrap and all those time saving toolkits.
I take the 3 lines to mean "click/press here for a list of something". Perhaps because people called it a hamburger, that created some extra mental friction, contributing to the confusion/hate?
Not quite, the usage of lines are still conveying something, it's similar to pause, play, stop on media players, it's similar to back, forward and refresh icons on the browser. Line based symbols are easy to pick up and have been picked up by users from our testing, I'm really not sure what studies you're referring to (?)
For an actual shitty example, look at Macos window button controls. Red yellow and green circles, they convey absolutely nothing, you're expected to learn them. Instead of slating this shitty design, everyone just rolls over and learns them.
I think you're either unaware or ignoring that, in both of those cases, there was precedent that people were already familiar with when those icons came out. Pause, play, and stop, for example, were found on nearly any media/cassette/tape player and served as simple indicators of the direction the tape/spool was going. The arrow to left meant the reel was spinning backwards because the tape moved to the left, the square meant stop because the reel didn't move at all, and the play icon meant that the reel was moving to the right. Add in double arrows to denote speed. Add a line at the far left/far right to indicate beginning/end.
The hamburger has no such lineage. It started as a menu icon and changed slightly but no one had any idea what even the initial icon meant without an explanation that it's a list.
The hamburger menu represents a list of items. It's symbolic, but at least a direct representation of the outcome the user wants.
The play and stop icons were icons that describe an operation of a machine that will then indirectly produce the outcome the user wants. They require the user to know how the machine functions. No one thinks "I would like the tape to move to the right" or "I would like the music to stop, which means the tape needs to stop moving, which means stopping the spools, which means selecting the least circular shape".
>They require the user to know how the machine functions.
No, they don't. That's why they worked so well and was my entire point. All people needed to know was that they wanted to go forward, backward, or stop movement in whatever music or video was playing and that's a clear metaphorical and symbolical link. Someone with no knowledge of the function could walk up to a tape recorder and infer what the symbols meant in relation to what was happening.
The hamburger menu is not even intuitively a list and there's no connection that a user presented with it would recognize it as a call for a menu/list. There are plenty of user studies that confirm this.
> I'm really not sure what studies you're referring to (?)
We did multiple usability studies over years for a company I worked at that built a very popular mobile app. The tests were standard usability test format, where we'd ask a user to complete a task and then just say "go" and figure it out. Times where the user had to find something in the hamburger menu, when we replaced the 3 lines with words like "MENU" or "MORE" always tested better.
Designers pretty much universally hated the text version, and I do appreciate the localization challenges, but the results weren't ambiguous.
Designers like the hamburger because it lets them sweep anything they haven't considered under the rug. They're simple so no one attempts to cram in carousels or videos or what have you, so its the easiest way to add functionality into an app that doesn't have any other thought put into expanding the navigation. So in that sense they're highly productive.
> Designers like the hamburger because it lets them sweep anything they haven't considered under the rug.
Aren't you just describing all collapsible menus? I thought the complaint about the hamburger menu was specifically that the icon is unclear. It seems odd to disparage all collapsible menus, particularly on mobile where it's very easy to have a small number of reasonable menu options with no way to possible fit them onto the screen without a way to collapse them.
This is one of the things I dislike most about hamburger menus: they're effectively junk drawers than can contain anything and everything and are painful to try to search through.
Just about every prior type of navigation is better.
I design and I don't like them, but clients insist on them against my advice over and over. Clients routinely take informative sites and want to pare it back to minimal information, because they don't like having to write text or maintain anything. Or hide navigation because it feels like cleaning up. You'd be amazed at the ridiculous things they insist on even when there is logical or industry best/decent-practice suggesting otherwise. It's very frustrating.
Flat minimalism (compared to using words) is popular because you don't need to have translations of square, circle, and triangle into foreign languages.
(Square, circle, and triangle is also the old Electronic Arts logo, but that's probably not the reason.)
> 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.
In Android[0], the "back" button on the bottom is a triangle pointing left. The "home" button is a circle. The "show recent apps" button is a square. All are just flat shapes.
Completely unintuitive to anybody that's never used Android before.
Contrast that to the early days of Android where the Back button was a curved arrow, the Home button was an icon of a house, and the Menu button was the hamburger menu people are familiar with, except the lines were thinner.
[0] This may actually vary depending on what phone you have and if the maker changes these, but on my Pixel 6, this is the description.
Back symbol pointing left is probably less intuitive if your language isn't left to right oriented. Wonder if back symbols or back animations have ever been "localized" to orient based on the language used.
Android sort of gets a pass in that it's something that's constantly used by the user, so there's some ability to train people into arbitrary and unclear UXes, especially if they're only a few buttons (a good example is game controllers where what buttons do is completely disconnected from the letter or symbol they're assigned).
iOS is pretty similar in that a good number of the navigation gestures aren't super intuitive and not really discoverable until you build some muscle memory.
I believe the navigation buttons on the bottom. I see no issue with them, since it's easy to associate the left triangle with back, the circle with something that affects everything and the square with something else which does something which is obvious once you tap it.
Where is this from? Some sort of skin? I don't have a square at all on my Android phone, a Google Pixel (which I assume is "base" Android). You see recent apps by sliding up.
Also the triangle is only an arrow on my phone and the circle is an oval.
It's configurable in Android settings. I think you must have "2 button navigation" option selected? The default is (or used to be) 3 button and looks like the screenshot above, as far as I'm aware
> 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.
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.
That’s anecdotal, but my mother who "grew up" on DOS and Windows was never able to grasp the relationship between the top menu bar and the application window on MacOS. I bought her a Mac in 2010 because they are supposedly more intuitive and I didn’t want to provide PC support anymore, but it was no better than Windows for her at all (also not worse overall I guess).
The first time I discovered that "dragging an icon to the trash" was one of the few ways to uninstall an application on Mac, my mind was a bit blown. I was struggling so hard to find an "Add/remove programs" equivalent or an uninstaller.
With OS X (maybe even OS 9?) the interaction was changed so that when you dragged a disk to the trash can icon, the icon changed to an eject icon (⏏), but it seems that this has been removed at some point in the last 18 years since when I went to check it, it doesn't happen anymore. On the other hand, the disk icon now has an eject button next to it in at least some Finder views.
Exactly, wave goodbye to any attempt at user consistency. Same with Win10, it launched 7 years ago and they still haven't made the the new UI standard. Try changing user passwords or system sounds or..etc. In all honesty find Linux Mint with XFCE far less mental grind than either of the predominant platforms. It has a rough edge here and there but that's it - things in general stay in place. As a result I dedicate more time to end result of my computing rather than the medium.
there kindof are, though it's very inconsistent. For example, yesterday I installed the AdGuard app, which adds a proxy and some Extensions.. When I finally realized I didn't need it and it was a paid service, and I really just needed the free AdGuard DNS, I dragged the icon to the trash....
And that also prompted me to confirm that it would delete the proxy and the Extensions that were installed.
I remember a few more apps being like that. So there ARE hooks, just not used universally. AND it won't delete personal files or preferences related to the app, which is what users are expecting these days when they delete an app, UNLESS it's an app installed from the App Store, because those store prefs and data in a different folder than regular apps..
> And that also prompted me to confirm that it would delete the proxy and the Extensions that were installed.
I would be interested if someone could point me to the mechanism used for that (triggering application-specific uninstall logic upon dragging the application to the trash).
I spent years thinking they [EDIT: Apple's always-top-of-screen application menus, that is] were dumb for that reason. It never occurred to me that major software vendors would be stupid and/or user-hating enough to ditch the standard top menu, when they have a whole bunch of stuff that should go in it.
I seem to recall Steve Jobs saying the reason the menu is at the top of the screen is that it's easier to hit it with the mouse, you just push it all the way up. I think it's a valid point.
I've noticed it's really nice if you like quarter- and half-screen layouts (or anything else that's sorta tiling-like). Four different programs on the screen, only one "file, edit, ..." menubar eating space.
Apple's HIG used to have a bunch of these nuggets - things about predictability of where inputs are, what was clickable, etc. Not sure how much has been preserved over the years, but the original docs are pretty legendary.
One nice thing about this too is that when you have something like a full-screen video playing, pushing the mouse to the top of the screen will reveal the menu pretty much universally. Trying to get to the application menu in full-screen on Windows is going to vary from one app to the next and has poor discoverability.
At the same time they don't utilize the 4 most easy to reach points of the screen, the corners. Windows always used those for essential interactions so the interface was really fast to use: for the start menu just throw your mouse to the bottom left corner; to close the window throw your mouse to the top right corner; to show your desktop throw to to bottom right; not sure anymore about the other corner as I am on Mac for a while already. Since switching to Mac I am always thinking about how stupid the interface is for disregarding important user-friendly details like these.
Apple has Hot Corners (configurable in the Desktop & Screen Saver > Screen Saver section of Settings) that can replicate some of the functionality that you described.
The top menu made sense when computer screens were small and the mouse pointer thus never far away from the top, and applications were fullscreen most of the time anyway.
To me it seems the top menu bar is a holdover from early Mac OS. I saw a demo of one of the early versions of the OS, and it made a ton of sense there. The OS could only run a single application at a time, but that application could have multiple windows. From that perspective it's very sensible that whichever application had full control over the screen would want a menu bar global to its own windows.
Now though, it's just weird to have the menu bar at the top of the screen. And it's especially strange when there's no windows for the application left but the menu bar for it is still visible (something that wouldn't be strange in the single app at a time model)
Except that in this scenario, the application is still running, it just has no documents open. It's a nice thing to have because you can close all the documents in say Word, do some other work, and then when you need to open Word again, it's there ready to go without having to load again. The Mac seems to do a better job of having apps hanging out in the background than Windows does.
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.
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.
> 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.
I would bet in almost all cases, these can be directly attributed to the developer company's poorly devised career incentives. Behind every full-screen "OMG CHECK OUT WHAT'S NEW" takeover or notification-spam lies a product manager or engineering manager whose bonus is tied to some vanity measurement of how many users are engaging with the new feature they launched. "How much of the user's attention and screen space can I take over in order to try to jam this unwanted feature down their throat and show huge usage numbers next performance review?"
> - 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)
For this one, I don't think it's a software update but rather user error (though it's not clear even to me how).
I myself have accidentally enabled it, there seems to be some combination of buttons on the remote that will enable it. Still not sure on the specific combo though.
The way Apple does it is also better design than a conventional menu bar.
I can see why FF and Chrome hide it by default. Most of the actions tucked away in it are either used infrequently, or have common keyboard shortcuts. Turning it on in Firefox makes the chrome feel cluttered to me.
By exporting the application's menu bar to an OS-provided panel that includes other OS-provided functions (clock, status indicators, wireless controls), they enforce both a strong level of consistency while allowing for reduced window clutter.
In case it's helpful: You can also tell them to right-click anywhere in the main toolbar area aside from the URL field, select "Customize Toolbar...", and then drag the "Print" button to wherever they want it. Alternatively: Hamburger menu > More tools > Customize toolbar...
It'd occurred to me there was probably a setting to fix it, but I've forgotten to check the last couple times I've been over, because I'm a bad son :-( Thanks for confirming my suspicion, will try to remember to change that setting for them next time.
To help your parents, in FireFox simply pressing Alt once conjures the familiar menus (for now). They disappear as soon as they are first used or on first mouse click.
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.
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.
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.
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.
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."
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.
>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.
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.
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'.
The other thing to note is that traffic signs are designed to alert people of one particular thing and are intended to be language neutral. Hamburger menus are designed to conceal multiple things and the contents are usually in a specific language.
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.
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.
At least when hovered upon (with a mouse or pointer) that vertical ellipsis shows both a grey disk and the text "Customize and control Google Chrome". Happily, that suggests one could click on it and not directly invoke an unwanted operation.
I don't know the equivalent works for phone or tablet users with no such thing (AFAIK) as hover. To me, that's a problem with such interfaces beyond the hamburger icon.
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.
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.
Sometime back UberEats switched from a hamburger to a sausage menu for the restaurant’s menu categories and I really feel the experience is worse overall for it.
While I suppose it’s now more obvious that the categories are there, it’s way less usable trying to scroll left and right to see them compared to before where you scrolled up and down the old vertical hamburger menu.
On a related note, it’s incredible to me that Uber never seeks feedback on whether or not you think something in their app is crap, they only ever ask you for feedback on riders and restaurants as if they’re the only aspect of the experience that could possibly be poor.
Uber A/B tests everything extensively before it gets rolled out to everyone. They would not have switched away from the hamburger menu unless it drove better metrics. I used to work there.
The scrollable sausage links make it harder to skim them, and make you instead read them. I think they might be doing that to get you to see more of the menu and perhaps order more, which makes them more money.
Having a "..." at the end that drops down a menu panel like most hamburger menu do instead of having a horizontal scroller may be the best of both worlds.
As someone who has JS disabled by default I was happy to see this and excited to see what 'sausage links' look like, but when I went to the link I was hit with a giant "CodePen requires JavaScript to render the code and preview areas in this view."
Since this person has a website (this isn't a tweet or something) and feels it's "Pretty simple, eh?" to implement such a menu, _and_ already wrote up some sample code, why not have the example on the page itself? At least I have the code so I can copy/paste and throw it back in the browser, but the author came soooo close to making that unnecessary I can't help but wonder what happened or what their thought process was.
Yeah, for that use case, https://bl.ocks.org is better than CodePen. Publish a GitHub gist, replace gist.github.com with bl.ocks.org, and sneak in "/raw" between the username and the gist id. You can even point to specific commit hashes.
What's wrong with having a globally shareable codepen? They run absolutely everywhere, can be updated and versioned, and executed right on the web page?
I am not sure what your complaint is beyond "I don't like javascript on most websites".
How is CodePen any more "globally shareable" than a website hosted on tdarb.org? HTML and CSS run a lot closer to "absolutely everywhere" than CodePen does since javascript is an additional (and in this case wholly unnecessary) requirement.
"Zero JavaScript needed" isn't just my personal preference, it's explicitly stated as being desirable by the author. I fully expect to be That One Weird Guy who doesn't like running random code on his system from untrusted remote sources, but here the author states _himself_ that not needing javascript is preferable, so it's just a very weird choice that he decided to have the only live example be in the form a link to a third party site that requires javascript, especially after he went through the trouble of writing up a simple demo on his website but only as source when he could have also used that same code to provide a live demo of the thing being discussed. If I'm going to write a whole webpage about something, it just seems natural to display the thing being discussed on that same page when possible.
I'm not even really complaining exactly, I'm just confused as to how someone managed to line up all of those dots, but never take that last step to connect them.
Isn't that just reinventing tabs or tab-like top menus that have been around for decades? Works nice enough when you only have a few items to deal with, but really doesn't scale to a larger number of items. Horizontal scrolling might work better on mobile than on desktop, but it's still not great due to the items being so much wider than they are high.
No no no. Hamburger menus are terrible[0] for navigation, and this is worse. The only user-centric "Pro" listed by the author, namely that users understand its functionality, is totally unsubstantiated, and I think, exactly the opposite of what is true.
These kinds of menus are fine as "filtering inspiration", shortcuts for commonly chosen filters on a dataset, but they are not at all OK as general navigation. They hide the vast majority of menu items, especially in a long list; their sorting logic is typically impenetrable; and horizontal scrolling is terrible on a huge array of devices.
On mobile, prefer a tab bar for navigation. If you have a huge number of top-level items, deeply consider your information architecture before downgrading to a hamburger menu. I won't go on, but I could.
Please do not use this ridiculous thing for navigation.
I had to read the article a few times to figure out that I was supposed to scroll horizontally. When I did that in Chrome on MacOS, the following happened:
- the notification widgets popped out from the right of my screen
- The entire center-aligned blocks of text on the page moved over in relation to my scrolling for some reason
- The browser navigated "back"
- The H scroll bar appeared for a few seconds then went away
Some of these were due to my cursor being outside of the 'nav class="sausage-links"' tag, but it seems strange to expect a user to first place their cursor inside of an invisible box somewhere around the nav strip to be able to navigate it by scrolling to and fro.
Seriously, H scroll is way overloaded, and there are so many ways to subtly "do it wrong". That, combined with the lack of affordance to show users that "there is more to see here if you scroll left and right" makes this a really poor UX.
- The entire center-aligned blocks of text on the page moved over in relation to my scrolling for some reason
This one kind of makes sense to me. It's the browser's way of telling you "you're doing the right thing to scroll the whole page over, but there's no content outside of your viewport so we'll just snap you back after we let you peek to see for yourself".
The rest... yeah, it's definitely an overloaded pattern.
I love this type of highly-opinionated design thoughts. At work we have a pretty complex UI that seems a little bit inescapable to me (hard to keep legible due to complexity, etc.) Could I get you to critique it?
It's easy to respond with general opinions to a general article like this. It's a lot harder to comment on a specific design without an understanding of the business/product goals the design is trying to achieve.
However.
My totally irrelevant opinion on Sourcegraph is that it does a really good job of balancing high information density (which I love) with comprehensibility.
Of course I don't love the hamburger menu, but if it works for your users, great. The top-level menu items are few and seem well-differentiated, although I haven't dug in too deeply. I think you could probably do an iOS-style tab bar, but I know they don't always work too well on the web, and it might eat into your vertical real estate. No hamburger on desktop, which is nice.
Where it shines is in the filters, which are tremendous. Really, really easy to understand, and the response time when you click one is very fast.
Love the contrast, colors are pleasing. Spinny logo is cute and fun.
OK, now ignore all of that and listen to your users instead. :)
Disclaimer: am dev, not designer. Home / welcome feels good, search is front and center but I can find out more easily. Results are eye-friendly as well. I would suggest getting rid of the internal scroll panes in the left bar if possible - it's difficult to scroll that and / or the left nav or the main page. Maybe show the top N and then a "show more" or expand / collapse button.
If you have a huge number of top-level items, deeply consider your information architecture before downgrading to a hamburger menu.
Ir seems like you can hide all the items (hamburger menu), hide some of the items (sausage links or overflow menu), or have a deep hierarchical navigation.
While breadcrumbs were fairly established on desktop, mobile apps typically only have a single-level back/up button. It's easy to lose your place if you have a deep hierarchy. Are there are good solutions for this?
Accordions, lists where selecting one item scrolls the view one screen to the right to show a sublist... there are many common idioms for nested structures.
But the best strategy is always to simplify the number of different nodes to flatten navigation as much as possible.
Horizontal scrolling isn't that bad on mobile devices. I wouldn't want to scroll one of these on desktop but it's so simple to just, flick through it with my finger on a phone.
Just put it behind a media query when your desktop-sized nav bar gets too big?
It can be OK in some cases, but it can be hard to discover unless it's very obvious. Thanks to Apple hiding scroll bars, if the elements in a horizontal scroll happen to line up with the edge of the screen it can be impossible to tell that horizontal scrolling is even an option unless you trigger it accidentally.
Edit: Oh yeah, and horizontal scrolling interacts unpredicatably with horizontal gestures on mobile. E.g. forward/back in iOS Safari.
Once I got confused on Google maps android, because I thought they had removed the "Share" button. It was a sausage menu, but the size of the buttons were such that the rest of the buttons were perfectly hidden (you could not see the rest of a half button) and of course there was no visible horizontal scrollbar.
> Horizontal scrolling isn't that bad on mobile devices
I disagree, it’s not easily discoverable and I have yet to see a single website that implements it well in any context. I alway find elements scrolling multiple directions at once or end up scrolling down the page instead.
It's not bad UX per se (I love it for certain mobile uses), but it's bad to make an assumption that horizontal scrolling is always available.
Similarly, it's bad to assume that everyone is always using a keyboard and mouse (a frustration I encounter in Desktop environment communities (e.g. Gnome / Linux) in gesturing that some use tablet PCs).
Please do go on! I'd love to hear more of you thoughts on better menus or better info architecture.
I have a project that could have many menu items, and the sausage is an interesting idea but not common/well known enough that I'd want to use it. Tabs might work.
For many websites, there are SEO implications to having menu links (or so we are lead to believe) so I think ridiculous menus are sometimes partly a consequence of optimizing for SEO.
Mobile browsers frequently come with gestures that can effectively override any attempts to scroll horizontally, instead taking the user backwards/forwards in browsing history, for example.
This is certainly true of Safari, the default web browser for iOS, to the point where even trying to cycle through a horizontal slideshow of images can bait the user into accidentally going back to the previous page.
Not only that, but on iOS I believe it was/is possible to cycle between open apps with a very similar gesture as going back/forth in browser history -- this already proved pretty dumb for browser usability and would prove worse still for horizontal scrolling elements on websites.
Personally, I like to operate my mobile device one-handed a lot of the time, and at the very least I'm not scrolling websites or switching back/forward with both hands even if I'm holding the device with both hands.
So the last thing I want to do, especially if I'm carrying something in one hand, is to have to try and stretch my thumb to the far side of the phone to scroll through a horizontal menu.
My other argument against this sausage menu idea, which has been around far longer than the date of the linked article, is that on many viewport sizes your links may not be half-occluded by the edge of the screen. Given that mobile browsers tend to hide their scrollbars, since without a cursor the scrollbar is just a progress indicator w.r.t. how far down the page you are.
Thus, on some screen sizes -- and it isn't difficult to encounter, given how many different devices there are out there -- n links will be visible in full before the edge of the screen, and then there may not necessarily be any visual hint that there are more menu items to scroll to. So you don't discover that there are more menu items until you accidentally scroll that region.
Finally, I would argue that even for the technophile the hamburger menu is preferable at this point, simply because they have been conditioned by a good decade's worth of responsive web design UX. The sausage menu, being often an edge case, is less obvious even to the technophile purely because not many sites elected to do it that way.
* * *
It seems to me that the superior alternative to both hamburger and sausage menus would be to adopt the hamburger menu style, but simply replace ≡ or the menu icon with the word "Menu"
The hamburger style can be done without JS too. If you really want to avoid JS, just use :target selector or other CSS shenanigans.
And one advantage of short or medium length sausage menus on PCs is that they probably don't require any scrolling.
In my opinion, that's what's so nice about them; natural to scroll on mobile, and probably not requiring any scrolling on PCs.
If the items don't entirely fit on most PC screens, then I would take that as a hint that there's too many items for a sausage menu to be a good solution. (subsequently reaching for hamburgers, reducing the number of items, or exploring other options... eg. a sausage menu could also be more than one line?)
I'm curious about why horizontal scrolling feels so bad.
Like it works just fine in mapping apps, which naturally align to a 2d canvas, but why does it feel so lousy to use with almost any other form of information?
Is it because we write left-to-right, top-to-bottom? So text chunks fit better with no horizontal scrolling? (I think this is also why vertical tabs are so much better than horizontal tabs).
Next time you use a mapping app and scroll with your fingers or thumb, pay close attention to the direction: Most likely you're actually dragging it slightly diagonally then adjusting vertically afterwards.
I think a large part of it is that horizontal navigation as in OP is too thin, so if you do these natural dragging shapes your finger leaves the scrollable area. It may still work fine, but it feels wrong. Vertical scrolling on the other hand, because of what you say with our writing style, has a much larger grab area so we can easily stay within the box.
There's also parts specific to it being a menu: A vertically-aligned one usually has empty space on the right because the menu items probably aren't the same length, giving you a nice "grab area" (either your finger with touch or a place to put the mouse pointer for a scrollwheel) that doesn't hide anything. Plus scanning down a list is easier than sideways anyway because every item starts at the same place; just imagine how annoying it is to read a bulleted list on here when someone accidentally puts it all on one line because they didn't add an extra blank line between bullets.
Intuitively, it might be because the mouse predates the touchpad, and most mice only have vertical scroll wheels (so it conditions users to avoid discovering horizontal scrolling as an option, unless you click and drag a horizontal scroll bar).
Currently, it's also rare for webpages to feature horizontal scrolling, so by habit most users scroll vertically to access new information.
Discovery is also another reason mentioned by users elsewhere in these comments. Since horizontal scrolling is a rare behaviour, a clear signifier [0] is needed to quickly communicate that horizontal scrolling is a possibility, which is an extra problem that other potential methods don't have.
what we need are literal site maps with (lat, lon) defined for each link, so users can scroll around a fun treasure map to find what they're looking for
Clear menus that aren't hidden away are great, but a significant problem with horizontal 'sausage' menus is that it isn't obvious that you can scroll, especially on Apple devices that hide scrollbars. The article mentions this as a bit of an after-thought ("Without proper fade / cut off visual cues, users may not understand they can scroll") but it's the key reason why you should avoid them.
Yeah it took me several minutes to figure out how to scroll on a macbook because there is no visible scrollsbar, to hit right arrow, and then the scroll bar appeared. I couldn't click and drag it.
That's solved by adjusting the scroll starting position so that the first element is partially offscreen. It may initially look jarring, like the designer made a mistake but it provides a nice visual affordance that you can scroll and it will work regardless of the screen width.
I think this would be a problem in terms of accessibility.
Gestures are required, text disappears horizontally, no visual indicator that you may have to scroll horizontally… I don’t know, maybe I’m wrong, but I’ve also been a fan of the hamburger menu since it arrived.
This isn't less accessible than a hamburger menu. Even the opposite might be the case as defacto most hamburger menus are implemented without proper focus handing or correct aria attributes for announcing open/closed states.
With the sausage menu, at least as screenreader user, you will have less issues as you can tab through a list of links immediately without the need to open a broken menu . Also scroll position is adjusted by the browser automatically to the element in focus, so it isn't even a problem for keyboard users with eyesight.
Perhaps a little mean, but its odd that this article about website design is plaintext with maximum contrast and default font, and the viewport to the code pen is so small I can't even see what it's trying to show me without clicking through
Sorry its a bit of a late reply, but I'm not against text-focused simple content, it is indeed great. But some simple css rules would have gone a long way here. Choosing a readable font, making the codepen iframe a bit bigger so you can actually see the thing the author wants to show and either changing background to like #222 or the text color to #DDD would have been a very simple and seemingly obvious improvement in my eyes.
Normally I wouldn't be so nitpicky, its not an outright bad design by a long shot, but when you are literally writing about website design I feel it's okay to expect a little more
It adds a scrollbar or else some kind of cue that scrolling is available. Horizontal scrolling in desktop feels unnatural personally. And finally, the oval links look like tags in an article, not navigational controls. That last point could be adjusted by squaring off the buttons, by adding a symbol between links indicating a nav path, or something like that.
Not to mention when using a laptop it would be easy to unintentionally trigger a “navigate back or forward” browser event when scrolling horizontally. Such an annoying browser feature.
Takes up way more space, the point of the page isn't to serve menu options. They should be tucked away until the user determines they want to use them.
Also its so hard to scroll the window without accidentally clicking the buttons on mobile.
Absolutely not on sausage links most of the time. I can't tell you how many times I didn't realize that menus like this could be scrolled.
Another negative not mentioned in the article: they're biased toward touch and trackpad users. My browser (and probably most browsers) hides the scroll bar by default, so anyone using a vertical scroll wheel mouse is going to be confused and/or have some kind of difficulty scrolling.
At first I didn't even know that the example in the article was functional! I thought it was a screenshot.
Hamburger menus function the same for all platforms, are easy for non-technical people to figure out (especially by this point), they also don't have to be a hamburger (they can be a word that says "Menu," or some other kind of icon like a settings gear), and they can expand to a regular menu that quickly shows all possible options.
An alternative I thought of: a grid of colorful/contrasting icons with text (example: The Uber app for mobile). I think sometimes you shouldn't be afraid of taking up screen real estate if your app needs to have a lot of options.
I'm mostly on my desktop PC and I didn't know those were called "sausage links", and never even heard that term before. I did notice that YouTube has them and it was at least a few months before I clicked on one of the links. It was several more months before I realized I could scroll them by clicking and dragging them and that was by accident when I moved my mouse while clicking on one.
I'm not a fan of them. I'd rather have and use a drop down menu. I think they're more intuitive and compact.
"Adds an additional point of interaction from the user (click to open, then proceed to read through available options)"
The real world impact of this downside cannot be emphasized enough. People click on things they can see by several factors more (sometimes 10 times more) compared to the "clean design" approach. This is why in very large companies there's internal political battles on which links get to be placed in this prime digital real estate.
Sausage links is a weird name though. They're horizontally scroll-able menu items, which can be anything: links, icons, pills, combinations.
As for this creating an ugly scrollbar on desktop, this pattern is for about 6-8 links max, which should all horizontally fit without a scrollbar on desktop.
As for the "problem" of this not supporting longer lists of links or even hierarchical links, don't bother, because those don't work anyway. I work on very large ecommerce sites and in one case (billion+ page views across 80 countries) even a 3 tier navigation structure found only 8% of users actually using it. And the trend is downwards, as mobile traffic is now 70%. Nobody navigates beyond level 1.
Finally, some polish for the demo: scroll fading should be stronger so that people get that it is horizontally scrollable. Also, use CSS scroll snapping. This way when people give a strong swipe, it doesn't keep going when you let go, it snaps into a favorable position.
Not a fan of hamburger menu but I disagree this is an improvement, the scrollbar wasn't visible on my platform (chrome, mac) and it wasn't clear how to scroll.
I'm not even sure how I would horizontally scroll with a mouse (I seem to remember something about hold middle clicking and dragging).
Why not just have all the links in multiple rows or have a few subcategories + expand and navigate through the list of links?
I enjoyed thinking about this. A few thoughts on usability!
The text on these sausage links makes the buttons quite visible and readable, but I find these joined buttons to be most helpful when one is always active and the options are mutually exclusive. For example, at the bottom the zoom buttons (1x, 0.5x, 0.25x) do this very well. One is always highlighted so it's very easy to understand the current state and to pick a different state.
I'd argue this works less well in the top-left buttons (HTML, SCSS) because there is a hidden behavior that collapse and expands the sidebar. It's clever, but I didn't expect the bar to open, nor did I expect it to close when I tapped it a second time. It workes pretty well in this website preview example because html/css feels like good use of the side panel, but I'd argue most hamburger buttons hide much more rarely used views like logout, account and privacy settings, payment options, etc, so not sure the sausage links can replace all these, but an interesting thought experiment.
I have a simple usability test. Can I use it one handed on my phone while riding a bike?
Hamburger menu: sort of, if my phone is small enough. Once I reach the menu I need only o e glance and one finger tap to select an option. I can remember where the option is located. Two short taps, looking at the screen twice.
Sausage links? I won’t even try. It requires to scroll horizontally a very small area, while watching it continuously. It doesn’t allow to see all options together. It doesn’t allow to remember where each option is located.
IMO sausage links is a dark pattern to hide menu options. It requires a very complex interaction just to see all available options.
The bulk of my browsing is done with JS turned off, and I'm astonished how many sites rely on a JS-powered hamburger menu, so I have to enable JS on specific sites just to use their menu! There are pure CSS ways to do hamburger menus, and I encourage all devs to use pure CSS for a hamburger menu for those visitors who browse with JS disabled by default!
For those curious: I have JS turned off because of privacy reasons, and accessibility. I find having JS turned off decreases the amount of annoyances and popups you see when browsing, and the 'fingerprintability' of the browser is drastically reduced.
Wait, but then web developers would need to actually learn their standard tools like HTML and CSS and how to achieve the goal with a minimalist approach. They might need to invest an hour or two, instead of downloading an NPM package and slapping everything with a meg of JS.
Not sure how realistic this is. When I look at most websites these days, I can see clear signs of bad engineering (and lack of ethics) everywhere.
I am totally on board with the idea to use CSS for things, where we do not need JS. But then again I am not a "modern style" web developer.
In my opinion knowing one or two hip and trendy web frameworks (I will intentionally not say their names now.) doesn't make anyone a good web developer. Real basics are lacking these days. When you only have a hammer, everything starts looking like the head of a nail. Websites with zero requirement of dynamic pages are rendered in JS frameworks, even taking longer than static server side rendering of some template, which could have been used, given the character of the websites. All done under the guise of "This is how websites are developed these days." No, not all websites need to be a SPA.
Anyone, who learned a framework can call themselves web developer these days. I am sure there are good web developers out there, who know their stuff and the basics as well. Even good ones working on the websites I criticize, but they may be forced to use inappropriate tooling by their environment. One does not simply come into an existing project and decide oneself to change a whole stack. Basically many projects are already locked into their inappropriate use of tools.
> I should start by mentioning that this concept is far from new. There are a good number of websites that already implement this menu type in some form or another. The point of this post isn’t to blow your mind with some new-never-thought-of navigation design. I’m just trying to bring awareness to another available menu concept.
More like "I'm just trying to bring awareness to my blog, and go down in UI history as the person remembered for the term sausage link menu".
I noticed this recently on the React docs site on mobile [0]. It's also used on Github mobile's view of repository for switching between Code, Issues, Pull Requests, etc [1].
These are not the sausage links I thought they would be.
The sausage links I remember were older than internet on mobile being a thing, they were laid out vertically, and they were proportional in size to the target sections such that clicking a link or clicking the scrollbar right at their side would essentially scroll you to the same place on the page.
They were, in my opinion, a much better paradigm than this.
Alas I cannot easily find the demo page again. It might have been lost to history.
That implementation is annoying to scroll on my desktop. I can only imagine that I'd sausage-finger a button trying to scroll it on my phone. No thanks.
Interesting idea, but (a) unless you ensure the second or third item is cut-off on all device sizes (may be possible with css tweak), it won’t be obvious that there’s more, and (b) how will windows users scroll horizontally? With a scroll bar in the UI?
I don't mind these on mobile. You can argue that part of the menu is cropped out, but with a hamburger menu everything is cropped out. You can at least put the most important stuff at the beginning, one less click for visitors in many cases.
On our website we do a similar thing. But we just wrap the navigation to multiple lines. Of course, that only works when you don't have that many navigation items. But when there are only few of them, I prefer wrapping over having to scroll.
These "hambugger" symbols wouldn't look so hambuggerish (but more like menu) unless someone had less maniacal affection towards rounding all the corners... (typo intended) And now sausages... oh no.
How can this handle more complex menus though, which have multiple nested layers? I think this is fine for some things, but I don't see it as a great replacement for the hamburger.
So the author is trying to argue that on a (usually) vertical rectangle screen the better option to display interactable information is horizontally? I'm so confused.
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_978926...)
I like the sausage link concept because it clearly labels options with text.