Live data from Hacker News

The Hamburger Menu Doesn't Work

deep.design

11–20 of 192 posts

Re: The Hamburger Menu Doesn't Work

#12
> As a last-ditch attempt to solve the problem, they made it yellow

Amazing! I could almost write a script for the meeting in which that solution was decided upon.

Rough sketch:

Idea is proposed by one individual at level N in the hierarchy. Some cursory justification is provided, based on theory from a design article they read, they think, or maybe it was a youtube video - doesn't matter: Yellow attracts attention! Green makes people want to proceed! Red makes people want to stop! It's so obvious.

Numerous objections are raised by individuals at level Meeting concluded.

Re: The Hamburger Menu Doesn't Work

#15
Worse is the "invisible x" menu. The one for the options that help the user but decrease revenue, such as "mark this item as spam". Facebook uses this a lot. (Mouse over a Facebook ad. A greyed-out "x" appears at the right of the ad. Mouse over the "x", and the grey turns darker. Click on the "x", and a menu comes up demanding to know why you didn't like that ad.) So does Youtube. (Those silly pop-ups on Youtube, if moused over, display a tiny, tiny "x" in the upper right hand corner which will make them go away.)

Yet another tool for "screw the user" UI design.

Re: The Hamburger Menu Doesn't Work

#16

It is almost always preferable to have all of your options available to the user at all times. However, it's very important to make the distinction between apps and websites when talking about a hamburger menu. A tab bar is great in an iOS app with a limited scope of functionality. That just doesn't work a sprawling news site covering dozens of topics. A small, product-focused website may even be able to get away wit…

But there's almost always a better way to present it to the user. If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. If you absolutely must hide your sections behind a menu, there are practically infinite different menus that make more sense.

The hamburger menu only makes sense when it's the literal junk drawer of the app/site, when there's no possible way to categorize its contents with anything more than the completely generic 3 horizontal bars. But primary navigation elements are not junk and don't belong there.

Re: The Hamburger Menu Doesn't Work

#17

It is almost always preferable to have all of your options available to the user at all times. However, it's very important to make the distinction between apps and websites when talking about a hamburger menu. A tab bar is great in an iOS app with a limited scope of functionality. That just doesn't work a sprawling news site covering dozens of topics. A small, product-focused website may even be able to get away wit…

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 just regurgitating what we've heard for a while, hamburgers suck.

Re: The Hamburger Menu Doesn't Work

#18

Yes it does. Now stop it with these stupid articles.

They really don't. Here's a bunch of A/B test results:

http://exisweb.net/menu-eats-hamburger and followup http://exisweb.net/mobile-menu-abtest

http://conversionxl.com/testing-hamburger-icon-revenue/

http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer...

http://www.adammcfarland.com/2013/10/24/responsive-mobile-ui...

Anecdotally, I don't use a ton of mobile social apps, and the first time I encountered this icon I thought it was some weird play on an equals sign. Never occurred to me it was a menu. Now my own dev team is using it and for some bizarre reason I cannot convince them to stop.

Re: The Hamburger Menu Doesn't Work

#19
My co-founder and I debated whether to use the hamburger menu for our iOS and Android apps (currently in beta -- https://recent.io/).

We decided to keep the hamburger menu on both platforms for launch. Our reasoning was that it's a common UI convention and our primary navigation options -- Home, Recommended, Hot News, Local News, and topics -- are visible in the extended app bar. An option to follow additional topics appears inline in the Home tab.

So the three functions that are only accessible through the hamburger menu are bookmarks, history, and settings, which seems like a reasonable compromise. You could use our app fully for a year, albeit with the default settings and no bookmarks/history, without ever seeing the hamburger menu.

Analytics shows that the hamburger menu is used frequently by our beta users, so I'm fairly confident that we made the right choice. On the other hand, the new YouTube Android app -- which had more in its hamburger menu than we do -- has moved in the opposite direction and eliminated it.

Re: The Hamburger Menu Doesn't Work

#20
post #16

It is almost always preferable to have all of your options available to the user at all times. However, it's very important to make the distinction between apps and websites when talking about a hamburger menu. A tab bar is great in an iOS app with a limited scope of functionality. That just doesn't work a sprawling news site covering dozens of topics. A small, product-focused website may even be able to get away wit…

But there's almost always a better way to present it to the user. If I'm viewing a news site, I'm not going to think that the hamburger menu is where I go to find the Lifestyle section. If you absolutely must hide your sections behind a menu, there are practically infinite different menus that make more sense. The hamburger menu only makes sense when it's the literal junk drawer of the app/site, when there's no possi…

> "infinite different menus that make more sense"

This a a little hyperbolic. If you want surface a link to the Lifestyle section, then you also have to accept that links to about a dozen other sections need to be visible as well - on mobile, this would lead to about a third of the visible page (or more) being consumed by navigation links. Alternatively, you put the nav at the bottom of the page, but I would argue that doing so makes it less accessible/visible than it would be in a hamburger menu.

The real challenge is not when you're trying to put 3-4 links or nav-groups in a hamburger menu, but when your site structure is so flat/shallow that you have a dozen or more equally-viable nav/action options for users. Except for the NBC example in the article, the nav in the examples can be distilled into a narrower, deeper structure.

The article author doesn't appear to realize that on NBC news, the hamburger-equivalent "more" menu still appears at mobile widths. Sometimes it really is a decent solution.

Post reply on HN