Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Using hamburger menus? Try sausage links (2019)

tdarb.org

Post reply on HN
Print view View original

121–130 of 208 posts

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

#121

Post by dkonofalski »

politelemon wrote: post #91
hn_throwaway_99 wrote: post #67

Earlier quoted context omitted.

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

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…

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.

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

#123

Post by autoexec »

> 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.

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

#124

Post by timwis »

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?

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

#125

Post by thesuitonym »

grumbel wrote: post #39

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.

I guess you missed this bit:

>Better suited for small to medium menu lists compared to massive sitemaps

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

#126

Post by krossitalk »

karaterobot wrote: post #13
flak48 wrote: post #7

Better known as pill navigation

I think of pill navigation as connected, like: (___|____|___) These remind me of what Material Design called Chips.

Yes, these are Chips exactly (especially when scrolled horizontally, ala YouTube mobile Home page). https://material.io/components/chips

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

#127

Post by bo1024 »

autoexec wrote: post #123

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

I also was frustrated that CodePen seemed to need to set a cookie before it would function.

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

#128

Post by [deleted] »

brimble wrote: post #48
ilamont wrote: 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…

[deleted]

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

#129

Post by pygy_ »

autoexec wrote: post #123

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

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.

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

#130

Post by slowmovintarget »

Izkata wrote: post #103
hn_throwaway_99 wrote: post #67

Earlier quoted context omitted.

> 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 original symbol represented a menu that pops up from the bottom of the screen, as they worked in the early Android versions: https://www.cnet.com/a/img/resize/06c3657d29dbfaf9cc921d2690... The three-lines version was an evolution of that, just chopping off the sides to go extra minimal, and happened very quickly. And nowadays we have an even more minimal one, shortening the three lines to three dots.

Kebob menu isn't much better than the hamburger menu. Why are all these web affordances named after food? I'm hungry now.
Post reply on HN