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

The Hamburger Menu Doesn't Work

deep.design

Post reply on HN
Print view View original

121–130 of 192 posts

Re: The Hamburger Menu Doesn't Work

#121

Post by maw »

[deleted] wrote: post #98
abalone wrote: post #86

It's very interesting that Apple just adopted a hamburger menu for their apple.com redesign (mobile version). They even told everyone not to use hamburger menus at last year's WWDC! [1] [1] WWDC 2014 Session 211 Designing Intuitive User Experiences @ 32:00, available here: https://developer.apple.com/videos/wwdc/2014/ Addendum: It's a responsive design so you can see this even on a desktop browser just by shrinking t…

[deleted]

The problem is that Apple is always right but has contradicted itself.

Re: The Hamburger Menu Doesn't Work

#122

Post by oneeyedpigeon »

Chrome has a hamburger menu, even on a huge desktop screen with plenty of room for a proper menu. OSX has an excellent universal menu which, due to consistent placement, behaviour, and content, provides a high level of usability. Chrome's hamburger menu duplicates some - but not all - of its functionality, and includes some bonus functions not available in the main menu at all. It also has a submenu named - and you might want to check this yourself, because it's pretty hard to believe - "More tools".

The main menu would be absolutely fine on its own; I think the hamburger menu is present because it's present on Windows, which - of course - doesn't have a universal menu. Still, I'm not letting Google off the hook here. These flagrant abuses of usability are things that the average undergrad should be able to identify, yet one of the biggest companies in the world can't? Disappointing.

Re: The Hamburger Menu Doesn't Work

#123

Post by eridius »

CognitiveLens wrote: post #64
eridius wrote: post #45

Earlier quoted context omitted.

You seem to have completely missed the entire point of my comment. In no way am I saying that a news site needs to have a link "Lifestyle" visible to the user at all times. In fact, you quoted directly from the most relevant point, the bit that says that there are practically infinite different ways to design a menu that avoids the problem of the hamburger. As a trivial example, you could have a single menu labelled…

> You seem to have completely missed the entire point of my comment This is a little hyperbolic. You've basically recommended a labeled hamburger menu - 'Sections' instead of 'Menu' - and text labels definitely have a demonstrable advantage over icon-only buttons, but the OP isn't advocating for text labels instead of the hamburger icon (see NBC example that had a labeled hamburger menu originally), it's proposing th…

It's not just about labelling, it's also about not putting everything into the same generic menu. And I completely agree with the original article that anything[1] that you can pull out of the menu entirely and turn into a top-level element, you should. But freshyill's comment was specifically about large sites, such as news sites, that have too many elements to put them all at the top level. And in the context of that, I'm saying that the hamburger menu is still the worst solution you can come up with. If you must hide things behind menus, group them in a way that makes sense, with a label that tells the user immediately what the menu will contain. If the user has to actually open the menu to find out what's in it, then you've already lost, because it means the user won't know to click on that menu when searching for a thing that happens to be in it. For a news site, if the user wants the Lifestyle section, they'll probably understand that clicking on a menu named "Sections" is likely to give them what they want (or perhaps clicking on a menu labelled "More" right next to a few of the most popular sections such as World News). What they won't figure out without guessing blindly is that a menu with an icon of 3 horizontal stripes is where they can find the sections list.

So basically, what I'm saying is that if you must use a menu, label it appropriately, and only put relevant items in that menu. If you have a bunch of things that aren't related to each other, they should be in different menus. A real hamburger menu is only appropriate for items that the vast majority of users are expected to never click on, and for which you're ok with making it hard to find for the rare user that actually does need it.

[1] Well, anything that you want users to actually click on.

Re: The Hamburger Menu Doesn't Work

#124

Post by nkassis »

pbreit wrote: post #113
abalone wrote: post #86

It's very interesting that Apple just adopted a hamburger menu for their apple.com redesign (mobile version). They even told everyone not to use hamburger menus at last year's WWDC! [1] [1] WWDC 2014 Session 211 Designing Intuitive User Experiences @ 32:00, available here: https://developer.apple.com/videos/wwdc/2014/ Addendum: It's a responsive design so you can see this even on a desktop browser just by shrinking t…

Possibly consistent in that the no-hamburger rule mainly applies to apps, not mobile-optimized web pages.

Why is that? What makes the web different in this case?

Re: The Hamburger Menu Doesn't Work

#125

Post by icebraining »

jalfresi wrote: post #82
shampine wrote: post #17

Earlier quoted context omitted.

I keep reading these articles about how awful hamburgers are but so far not a single one addresses menus that have more than 3-5 items. I manage sites that we have kicked around ideas for how to deal with the menu better, but the size of what is in that menu makes all the proposed ideas I've seen not feasible. So I'm right there with you that it is unfortunate, I wish these articles had more in way of solutions than…

I'm gonna sound like an old fart now (mostly because I am) but back in the late 90s we used to have a discipline called Information Architecture that existed to handle exactly this case. You see, Information Architecture has more to do with capital D Design, not fad, bandwagons and styles. Its about solving this exact problem. I really hope the concept of User Experience dies in a fire so we can go back to real Desig…

OK, so what does IA have to say about this problem? From what I remember about it (my course didn't have it, but I read a bunch in the early 2000s), it was more concerned about the overall organization of the information over the pages, and not with the specifics of how a menu should be formatted.

By the way, it's not "an" experience, it's "the" experience, and nobody would agree more with you about it being invisible than the coiner of the term UX - after all, Don Norman's seminal work (The Design of Everyday Things) was all about designing stuff to be more intuitive and fast to use.

Re: The Hamburger Menu Doesn't Work

#126

Post by masswerk »

> "and it’s consistent with the logic of the progressive disclosure design pattern."

And this is the crucial misinterpretation. Progressive disclosure as defined and used by Xerox is about objects and related actions. And it's all about visible objects! [1]

(Mind the classic example of a square in a drawing application: Clicking the shape discloses editing functions and displays handles to size the object.)

And here is the real problem: The hamburger icon as used today has no other object but the global context. By exposing context to the global context, it's a mere apropos without an object the user might relate to.

When Norm Cox designed the original icon for the Xerox Star user interface, it was a visual anchor for a menu revealing contextual functions to the visible content of the document. (Like selecting rows, etc. [2]) This is notably something else than the global, quite abstract context of a site navigation, disclosing navigational functions to address off-screen content.

Today's hamburger icon is just a paradigmatic misunderstanding.

[1] "A subtle thing happens when everything is visible: the display becomes reality. The user model becomes identical with what is on the screen. Objects can be understood purely in terms of their visible characteristics. Actions can be understood in terms of their effects on the screen. (...) In Star, we have tried to make the objects and actions in the system visible." (Designing the Star User Interface; David Canfield Smith, Byte, Issue 4/1982)

[2] Compare: http://g.recordit.co/8Q5oAYCaVx.gif (Outtake from a ACM CHI 1990 conference video, https://vimeo.com/61556918. Mind that the window-less bar at the top represents the global system as opposed to the document window below and its menu button(s).)

Re: The Hamburger Menu Doesn't Work

#128

Post by Ollinson »

marcosdumay wrote: post #76
dperfect wrote: post #36

Before hamburger menus became popular, weren't people complaining about the exact opposite problem? That is, if you break out the menu items into more prominent interface elements (e.g., tab bar items), then you're at risk of cluttering your visual design with less-common functions. As in all things design, I suppose a balance needs to be found, but I personally don't find anything wrong with a hamburger menu per se.…

Before the hamburger menu, people were complaining about the MS Office style ribbon. Design fads are an endless cycle of "ops, just froze my thumb!" -> "wait, I'll just put your hand on fire to solve that" -> "ops, my hand is on fire!" -> "wait let me freeze your arm", and so on. Just like the ribbon, there are plenty of things wrong with the hamburger. One of them is that people can not even find it on a large scree…

hah I like your endless cycle analogy

Re: The Hamburger Menu Doesn't Work

#129

Post by amsilprotag »

unicornporn wrote: post #114
abalone wrote: post #86

It's very interesting that Apple just adopted a hamburger menu for their apple.com redesign (mobile version). They even told everyone not to use hamburger menus at last year's WWDC! [1] [1] WWDC 2014 Session 211 Designing Intuitive User Experiences @ 32:00, available here: https://developer.apple.com/videos/wwdc/2014/ Addendum: It's a responsive design so you can see this even on a desktop browser just by shrinking t…

To be completely truthful though (and to make it even more cryptic) they decided to go for just two slices of bread — vego style menu. https://i.imgur.com/aIxIpmU.png

It seems like they chose two lines to make a cleaner SVG animation to the "x" when you click on it.

Re: The Hamburger Menu Doesn't Work

#130

Post by pbreit »

nkassis wrote: post #124
pbreit wrote: post #113

Earlier quoted context omitted.

Possibly consistent in that the no-hamburger rule mainly applies to apps, not mobile-optimized web pages.

Why is that? What makes the web different in this case?

Basic, significant factors like screen real estate, input devices & processor speed.
Post reply on HN