A good look at the hamburger menu, why it failed for some big companies and how you can avoid it.

http://deep.design/the-hamburger-menu/

Be great to hear how you feel about them (as a user or creator).

Yeah, I've always thought that they suck for discovery/engagement, and should very rarely be used on native mobile apps (here's looking at you, Spotify!) unless absolutely unavoidable. Often if an app gets near the point that the designer feels it's necessary, they're probably either mis-architecting their experience, or just straight-up bloating their product.

We've refused to use the navigation drawer on any Android apps that we've built, and I can't see it happening any time soon, no matter what Google says. We've also managed to build a large number of iOS apps for clients and none of them ever felt like a hamburger menu was a better solution than a tab bar and careful architecture.

My feeling is that on the mobile web they're somewhat more acceptable, but we should be moving away from them wherever possible. For example this very site eschews the hamburger menu and places the top level nav below the title bar on smaller screens. It was a conscious decision to add an extra bar as discoverability of the new creations and discussions features was a priority for us.

I think his ideas are somewhat simplistic. While the basic concept of what he says is true (mystery meat), the examples he gives don't add up.

His main example of bad usage is a hamburger menu used on a desktop news website, an environment where you have plenty of room to expose a navigation. Obviously that's a shitty decision.

Then he goes on to cite Luke W's examples of Facebook and other mobile apps that switched back to a tab bar menu. The mobile app navigation context is a fully different one from a website. A website lives inside of Mobile Safari, and you see Mobile Safari most of the time.

So you have way less vertical room. His suggestion of having both icons and words (in a sort of mobile website emulation of a tab bar) suggests little experience with vertical spacing in this context. This type of design would come across as very busy.

Case in point, the Gamestop example he cites as good would look terrible on a first load on a device. Instead of the site's content you see 4-5 menu's stacked on top of each other before you even get to the content.

Some things in user interfaces have to be learned. If you click the Windows start menu, you can open apps. To go to the multi tasker on iOS, double click the home button. To find the menu on a mobile website, find the hamburger menu and look through the sections.

Microsoft has also incorporated the hamburger menu as one of the navigation methods to deal with responsive applications in Windows 10. In Windows 10 it's called split view but really it's just a hamburger menu.

I'm sorry James... the hamburger is here to stay.

You make some good points, Johan, but I'm not sure I agree with you entirely on the vertical spacing issue, unless I'm misunderstanding your "4-5 menu's stacked on top of each other".

If you visit m.gamestop.com with Mobile Safari on an iPhone 4 you'll see that the tab bar style menu takes up 64pt out of an approximate 372pt viewport (before scrolling, after which it becomes 440pt), and importantly scrolls with the page (as opposed to a fixed bar on iOS). I don't see that as a big issue in return for potentially increased discoverability.

However Gamestop's choice of items to put in their menu does seem a little strange. Although of course I don't know their business as well as they do, so I'm sure (hope!) there's a good business reason!

Also, I think that interactions that have to be learned, such as the start menu and multi tasker, are necessary as features of a complex tool such as an operating system, where repetition is high, interface priority has to be given to the apps it's running, and users are more willing to invest time to learn. However for mobile sites, especially in situations where you have new visitors who have yet to be engaged, there often isn't the time for learning. The features/content the interface provides access to has to be more instantly understandable and relevant.

Also, Amy Schade from Nielsen Norman just posted an interesting article titled "Supporting Mobile Navigation in Spite of a Hamburger Menu" which can be found at www.nngroup.com/articles/support-mobile-navigation which I think is definitely worth a read for anyone working with this kind of issue.

Here's what I mean by the 4-5 items stacked on top of each other:

My point is mostly that the author in the original article treats native apps the same as web sites while web sites live in a small viewport living next to browser controls, so you should also take the browser controls in consideration when evaluating the placement of things (e.g. buttons/menus).

Ouch, that looks bad. Maybe an improvement point for Canvas :)

Gotcha. Yeah I can see your point, and perhaps the GameStop example isn't the best example for discussing this kind of structure, ha ha!

I think that there are likely many situations where this style of menu (handled with more care) would result in higher discoverability and engagement. The most notable example of this is probably Facebook's mobile site, which uses tab-style buttons at the top of the page in a similar way, while being more respectful of viewport limitations. They then use a hamburger-style menu as the last item in the row to provide access to functions of lesser importance.

Hopefully we'll be able to experiment with this as our feature set grows on this site, and publish some results in the future! :D

And thanks for helping to discover the layout bug with the pic. Will add it to our todo list. :)

Interesting stuff. Reminded me of a BBC article I read recently on the same topic http://www.bbc.com/news/magazine-31602745. The crux of that argument is people just don't know what the hell it is. Adding - or even completely replacing it with - the word 'Menu' increases comprehension and engagement if we buy into the research in that piece

There's something to be said for "Don't make me think" design.
"menu" make not look as cool as an icon but it's a clear laser signal that cuts easily through cognitive noise.