Live data from Hacker News

Using hamburger menus? Try sausage links (2019)

tdarb.org

131–140 of 208 posts

Re: Using hamburger menus? Try sausage links (2019)

#131
post #48
post #5

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…

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…

You can turn the regular menu on for them in the options. (Firefox: Right-click on tool bar, choose "Menu Bar" option to enable.)

Re: Using hamburger menus? Try sausage links (2019)

#132
> 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".

Re: Using hamburger menus? Try sausage links (2019)

#133
post #65

Earlier quoted context omitted.

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.

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.

Re: Using hamburger menus? Try sausage links (2019)

#134
post #5

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…

> 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 t…

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.

It's just not that great.

Re: Using hamburger menus? Try sausage links (2019)

#135

Earlier quoted context omitted.

> 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 a…

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.

Re: Using hamburger menus? Try sausage links (2019)

#137
As 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.

Re: Using hamburger menus? Try sausage links (2019)

#138
post #62
post #18

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 h…

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? https://sourcegraph.com/search https://sourcegraph.com/search?q=context:global+errorf&patte...

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.

Re: Using hamburger menus? Try sausage links (2019)

#139
post #18

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 h…

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.

Re: Using hamburger menus? Try sausage links (2019)

#140
post #60
post #48

Earlier quoted context omitted.

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…

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.
Post reply on HN