<i>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</i><p>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. (<a href="https://www.oecd-ilibrary.org/education/skills-matter_9789264258051-en" rel="nofollow">https://www.oecd-ilibrary.org/education/skills-matter_978926...</a>)<p>I like the sausage link concept <i>because it clearly labels options with text</i>.
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.<p>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.<p>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.
> Zero JavaScript needed<p>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."<p>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.
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.<p>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.<p>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.<p>Please do not use this ridiculous thing for navigation.<p>0. <a href="https://www.nngroup.com/articles/hamburger-menus/" rel="nofollow">https://www.nngroup.com/articles/hamburger-menus/</a>
Clear menus that aren't hidden away are great, but a <i>significant</i> 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.<p>To demonstrate, I've forked the example and set the main element to 625px wide instead of 600px - <a href="https://codepen.io/onion2k/pen/mdpVWmr" rel="nofollow">https://codepen.io/onion2k/pen/mdpVWmr</a>
I think this would be a problem in terms of accessibility.<p>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.
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
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.
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.<p>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.<p>At first I didn't even know that the example in the article was functional! I thought it was a screenshot.<p>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 <i>have</i> 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.<p>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.
Zach Leatherman has my favorite hamburger menu implementation on his homepage: <a href="https://zachleat.com" rel="nofollow">https://zachleat.com</a>
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.<p>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.
As for the bad of hamburger menus:<p>"Adds an additional point of interaction from the user (click to open, then proceed to read through available options)"<p>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.<p>Sausage links is a weird name though. They're horizontally scroll-able menu items, which can be anything: links, icons, pills, combinations.<p>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.<p>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.<p>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.<p>I'm not even sure how I would horizontally scroll with a mouse (I seem to remember something about hold middle clicking and dragging).<p>Why not just have all the links in multiple rows or have a few subcategories + expand and navigate through the list of links?
I can confirm that the Meatverse [0] will be built on these UX primitives.<p>[0] <a href="http://meatver.se" rel="nofollow">http://meatver.se</a>
I enjoyed thinking about this. A few thoughts on usability!<p>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.<p>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?<p>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.<p>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.<p>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!<p>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.
Respected user interface researcher Jakob Nielsen has determined that Pizza Menus are better than Hamburger Menus, Pie Menus, and Sushi-Belt Menus.<p><a href="https://www.nngroup.com/articles/hamburger-menu-vs-pizza/" rel="nofollow">https://www.nngroup.com/articles/hamburger-menu-vs-pizza/</a><p>However, Pizza Windows are another alternative to Pizza Menus:<p><a href="https://medium.com/@donhopkins/the-story-of-sun-microsystems-pizzatool-2a7992b4c797" rel="nofollow">https://medium.com/@donhopkins/the-story-of-sun-microsystems...</a>
I just went ahead and made the hamburger menu look like a hamburger in this (out of date) project: <a href="https://aframe.city/" rel="nofollow">https://aframe.city/</a>
> <i>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.</i><p>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 <i>sausage link menu</i>".
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].<p>[0] <a href="https://reactjs.org/docs/getting-started.html" rel="nofollow">https://reactjs.org/docs/getting-started.html</a><p>[1] <a href="https://github.com/multiprocessio/datastation" rel="nofollow">https://github.com/multiprocessio/datastation</a>
These are not the sausage links I thought they would be.<p>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.<p>They were, in my opinion, a much better paradigm than this.<p>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 <i>everything</i> 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.
For hamburger menus, I would add an item under "the bad" that they make every website feel like it's intended for mobile.<p>I think one significant advantage of sausage links is that they feel less uniquely intended for any single form factor.
> Without proper fade / cut off visual cues, users may not understand they can scroll<p>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.
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.
How about just put a <ul> with anchors in it on your index.html and call it a day.<p>I can't be the only one that's tired of hieroglyphs and controls whizzing everywhere.