18 ms·
Using hamburger menus? Try sausage links (2019)
- uallo 5y agoOn 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.
- felix_n 5y agochef kiss
- unethical_ban 5y agoIt 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.
- dumpsterdiver 5y agoNot 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.
- RugnirViking 5y agoPerhaps 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
- _Algernon_ 5y agoWhy would that be mean? That's great, readable design...
- RugnirViking 5y agoSorry 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
- ilamont 5y agoWhen 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 agoWell, 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 agoIcons 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 agoI 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.
- ggambetta 5y agoI can confirm that the Meatverse [0] will be built on these UX primitives. [0] http://meatver.se http://meatver.se
- flak48 5y agoBetter known as pill navigation
- karaterobot 5y agoI think of pill navigation as connected, like: (___|____|___) These remind me of what Material Design called Chips.
- krossitalk 5y agoYes, these are Chips exactly (especially when scrolled horizontally, ala YouTube mobile Home page). https://material.io/components/chips https://material.io/components/chips
- dangus 5y agoAbsolutely 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.
- dpcan 5y agoI 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.
- oh_boy 5y agoThis 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.
- BatmansMom 5y agoTakes 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.
- jonathanlydall 5y agoSometime 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.
- benatkin 5y agoThe 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.
- kingnothing 5y agoUber 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.
- jonathanlydall 5y agoI suspect that it would have been better in A/B testing as a lot of people probably didn’t realise the hamburger menu would reveal the categories. So it probably won due to discoverability rather than usability. So on average more people now navigate the menu, but doing so is a less pleasant experience for those “in the know” before.
- benatkin 5y agoIf it's an intentional dark pattern, they may take A/B testing into consideration, but still decide to make usability tradeoffs. https://www.darkpatterns.org/ https://www.darkpatterns.org/
- fuzzythinker 5y ago
- css 5y agoHorizontal scrolling should be avoided in almost all cases.
- CharlesW 5y agoOn PCs, at least. On mobile, it's very natural.
- css 5y agoI do not agree. Content should fit the viewport.
- jokethrowaway 5y agoThis. I still don't understand why editors all have horizontal wrapping disabled by default. Every time I scroll horizontally I die a little.
- CharlesW 5y agoKind of an anti-web stance, no?
- gsich 5y agoNo, as there is usually no proper indication that you can scroll. Even if, it's annoying one missclick and you might land somewhere else.
- Jaruzel 5y agoUnless you are left handed, in which case those 'natural' swipes, become unnatural shoves.
- josefresco 5y agoSide swiping is "normal behavior" on mobile, side scrolling is not (on really any device)
- wanda 5y agoMobile 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.
- KimJongUndrpnz 5y ago
- spansoa 5y agoThe 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.
- zelphirkalt 5y agoWait, 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.
- ftio 5y agoNo 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. 0. https://www.nngroup.com/articles/hamburger-menus/ https://www.nngroup.com/articles/hamburger-menus/
- pwdisswordfish9 5y agoSo you’re saying that either is mystery meat navigation?
- amarshall 5y agoSee also: https://twitter.com/LukeW/status/591296890030915585/photo/1 https://twitter.com/LukeW/status/591296890030915585/photo/1
- cobertos 5y agoHorizontal 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?
- slaymaker1907 5y agoI suspect the writer of this blog post wrote it on a machine with a track pad or a magic mouse.
- AlexandrB 5y ago
- oldstrangers 5y agoI thought this was presented as a tongue in cheek kind of thing, but I guess its not. =(
- onion2k 5y agoClear 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. To demonstrate, I've forked the example and set the main element to 625px wide instead of 600px - https://codepen.io/onion2k/pen/mdpVWmr https://codepen.io/onion2k/pen/mdpVWmr
- jdsampayo 5y agoYou can edit ::-webkit-scrollbar to always show it - https://codepen.io/jdsampayo/pen/zYprwao https://codepen.io/jdsampayo/pen/zYprwao Not a fan but could be forced if needed. Based on - https://stackoverflow.com/a/7855592/1342097 https://stackoverflow.com/a/7855592/1342097
- josho 5y agoThat'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. https://codepen.io/blipo/pen/Rwxrgpd https://codepen.io/blipo/pen/Rwxrgpd
- onion2k 5y agoNow your menu requires JS though, which isn't ideal, especially on a brochure site that could work perfectly well without it.
- ddlutz 5y agoYeah 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.
- davidspiess 5y agoAirbnb comes to mind, they added left and right arrows to their tabs. https://imgur.com/a/MXDabnS https://imgur.com/a/MXDabnS
- klyrs 5y agoThat 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.
- Zecc 5y agoThese 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.
- evanmoran 5y agoI 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.
- jokethrowaway 5y agoNot 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?
- kfarr 5y agoI just went ahead and made the hamburger menu look like a hamburger in this (out of date) project: https://aframe.city/ https://aframe.city/
- eatonphil 5y agoI 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]. [0] https://reactjs.org/docs/getting-started.html https://reactjs.org/docs/getting-started.html [1] https://github.com/multiprocessio/datastation https://github.com/multiprocessio/datastation
- grumbel 5y agoIsn'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.
- thesuitonym 5y agoI guess you missed this bit: >Better suited for small to medium menu lists compared to massive sitemaps
- IYasha 5y agoThese "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.
- vincentmarle 5y agoI really had something else in mind when thinking about sausage links
- gowld 5y agoThe analysis of Good and Bad is good, and strongly convincing why Bad wins.
- bjornlouser 5y ago
- tpoacher 5y agohow about just good old plain html links that reflow exactly how you want them to? </luddite>
- pupppet 5y agoI 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.
- danielyaa5 5y agoThe only thing I like about this is the name
- Kaze404 5y agoSo 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.
- kulix425 5y ago
- lnxg33k1 5y agoI really hate those menus, didn’t know their names but thank you for telling me, now I can hate something by name
- cjlm 5y agoZach Leatherman has my favorite hamburger menu implementation on his homepage: https://zachleat.com https://zachleat.com
- autoexec 5y ago> Zero JavaScript needed 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.
- bo1024 5y agoI also was frustrated that CodePen seemed to need to set a cookie before it would function.
- pygy_ 5y agoYeah, for that use case, https://bl.ocks.org 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.
- phist_mcgee 5y agoWhat'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".
- autoexec 5y agoHow 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.
- timwis 5y agoInteresting 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?
- kazinator 5y ago> 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".
- zamalek 5y ago> Without proper fade / cut off visual cues, users may not understand they can scroll You could resolve this by connecting the sausages with a line. The continuity would give the user a hint that something is going off to the right.
- fleddr 5y agoAs for the bad of hamburger menus: "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.
- didip 5y agoWhy not slot machine menu? Same idea, but vertical scrolling 3 items at a time and the list is a circular linked list.
- jfoster 5y agoFor hamburger menus, I would add an item under "the bad" that they make every website feel like it's intended for mobile. I think one significant advantage of sausage links is that they feel less uniquely intended for any single form factor.
- thrusong 5y agoI could see "sausage" catching on, but I knew these as "pill" buttons or links up until now.
- deleted 5y ago[deleted]
- partiallypro 5y agoHow 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.
- oblib 5y agoI'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.
- DonHopkins 5y agoRespected user interface researcher Jakob Nielsen has determined that Pizza Menus are better than Hamburger Menus, Pie Menus, and Sushi-Belt Menus. https://www.nngroup.com/articles/hamburger-menu-vs-pizza/ https://www.nngroup.com/articles/hamburger-menu-vs-pizza/ However, Pizza Windows are another alternative to Pizza Menus: https://medium.com/@donhopkins/the-story-of-sun-microsystems-pizzatool-2a7992b4c797 https://medium.com/@donhopkins/the-story-of-sun-microsystems...
- moltke 5y agoHow about just put a <ul> with anchors in it on your index.html and call it a day. I can't be the only one that's tired of hieroglyphs and controls whizzing everywhere.
- marcosdumay 5y agoHum... What would you do differently from the article?
- aabbcc1241 5y agoIsn't it bad to require horizontal scroll in general ?
- wubbert 5y agoWhy bother using either? They are both unnecessarily bloated and a waste of space. What is nothing wrong with a list of plain old links?
- srg0 5y agoI 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.