11

I have constantly found numerous issues with hamburger button, like:

  1. People tend to show a lot of options with them.
  2. It takes at least twice as many taps to change sections.
  3. Hamburger button is also not very recognizable as a menu button for older generation.
  4. Hamburger menus are terrible at illustrating where you are, and where else you can go.

Can anyone specify why Google's material design is following the "hamburger icon" if it is that troublesome? I tried a lot of things, but wasn't able to figure out.

Edit: Defend your answers with examples and bounty will be yours. Thanks!

PS: I am talking specifically about mobile apps not mobile websites.

||improve this question
  • Tweet Roman Nurik and ask – AndroidHustle Oct 27 '14 at 10:31
  • @AndroidHustle Yeah, if I am unable to get a reply on stackexchange, then I'll definitely do it. :) – steve Oct 27 '14 at 10:34
  • Someone decided to start using it and adoption rates are high enough to keep using it. I'm staring at it right now on my Firefox and Chrome browsers. Maybe you could invent some cool new icon to replace the hamburger icon. – Stephen Dec 17 '14 at 14:37
12
+50

First off, I prefer calling it a 'navicon', helps me to avoid hunger issues during working hours.

Secondly, not all of your points are actually about the hamburger icon (3 & 4). The other ones are more about the navigation drawer in general.

Anyways, let's commence..

  1. People tend to show a lot of options with them.

    A lot of options isn't going to be an issue as long as the important ones are high up and above the fold.

    Example:

    Google Inbox - Navigation drawer http://i.picresize.com/images/2014/12/17/j9z4.png

    All the important labels are high up (you can even choose which ones are more important) and are separated by dividers. Settings and Help & Feedback are fixed as well.

  2. It takes atleast twice as many taps to change sections.

    I'm not entirely sure what you mean by this, but I'm guessing you mean:

    • tap 1: open menu
    • tap 2: select menu item

    How else would you solve this?

    • Dropdown at the top: 2 taps
    • Menu at the top: 1 tap, lots of scrolling to get to the content
    • Menu at the bottom: 1 tap, lots of scrolling to get to the menu

    The best solution (imo), is a navigation drawer. Doesn't get in your way when you don't need it and pops up when you do.

  3. Hamburger button is also not very recognizable as a menu button for older generation.

    I beg to differ. There have been studies (Google's your friend) that prove it to be among the most recognizable icons for a menu (in general).

    Long before it was even used for navigation, it was used as an icon to sort lists. The hop from 'menu' to 'navigation menu' is quite small and fairly obvious. The only thing that bothers me just a little, is that the icon doesn't represent the navigation drawer's movement. It's not at all clear as to where the menu might be coming from.

  4. Hamburger menus are terrible at illustrating where you are, and where else you can go.

    If you want to track the movements of the user, use breadcrumbs.

    For the 'Where can I go?': using collapsible panels (clarity vs taps), dividers and/or indentation can get you a long way.

||improve this answer
4

  1. This isn't necessarily a problem with a hidden menu, more the information architecture of the site possibly.

  2. This might not matter as much as we once thought, with the "three click rule" - http://uxmyths.com/post/654026581/myth-all-pages-should-be-accessible-in-3-clicks

  3. The hamburger icon is beginning to become recognisable, this question is useful - Has user testing found that the "three horizontal bars" for main menu on mobile is commonly understood?

Personally I still partner it with the word "Menu" to reinforce or help define what the icon means.

  1. I would prefer to rely on breadcrumbs for this.

EDIT:

This answer might give some origin story to the hamburger menu, that you will find interesting - What is this side menu called that can be found in many multi-touch apps, and where does it originate from?

Also this article about the zeebox app, although not sure the results would be the same now.

||improve this answer
  • 3
    there was a good lecture by Luke W about this very issue. Bounding the hamburger icon with 'menu' below it drove clicks up by 50% or similar – colmcq Oct 27 '14 at 14:24
  • Thanks for your inputs, I have added more information to my question for added quality. I would love to hear about hamburger button in mobile apps. :) – steve Oct 28 '14 at 6:09
  • There shouldn't be a huge difference in behaviour between apps and websites with this type of interface. – Stephen Keable Oct 28 '14 at 8:37
2

A brief excursus into this symbol's history: it was designed by Norm Cox for the Xerox Star console, in 1981. http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787 https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83?utm_content=buffer84840&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

So not only hamburger symbol has been around long enough to become at least partially conventional, but it was also designed for a system with limited screen space, alike to those of mobile phones. It is a nice legacy, and I think it's a good form to use it.

Your questions:

1. People tend to show a lot of options with them.

Yes, as it's functionality is contextual.

2. It takes atleast twice as many taps to change sections.

I'm not sure which case you meant here.

3. Hamburger button is also not very recognizable as a menu button for older generation.

Older generation tends to struggle with many things.

4. Hamburger menus are terrible at illustrating where you are, and where else you can go.

As their purpose is contextual, they can work like Sidebar in OS, showing user's location or like Dock in OS, showing the menu.

This all being said, I would rely on hamburger only if my TA is at least partially internet-fluent, otherwise I would add a label to it. http://www.creativebloq.com/mobile/10-mobile-behaviours-and-designing-them-81412606

||improve this answer
  • Just goes to show that what we usually tend to think of as 'new' is just something that has resurfaced again from the past :D – Michael Lai♦ Mar 10 '15 at 22:30
1

The hamburger menu is a bit lazy because there are other methods to get to the menu and most apps don't really need an overflow option set.

A good example of an app that does? Chrome, because it has 14 functions built into the one menu. For an app like Chrome where there's a ton of functionality but 99% of users need to access exactly 1% of them daily on average, this action set is unnecessary. Except when it isn't.

YouTube's overflow menu is different in that it's not really an overflow menu (though it uses the stupid hamburger, likely because it is recognizable). But accessing it is different; either tap the button or swipe right. Many apps are making the distinction to swipe for overflow options, typically on the homepage (on iOS using the swipe to go back function, on Android the left sidebar menu function). These are good uses because they are for overflow.

So what is overflow? It's all of the options/functions that an application user may need because it's important, but most of the time won't. Functions with few but vital use cases. If it's a new, small mobile app, it almost certainly doesn't need an overflow menu. If it's almost any desktop app, then there's likely one built in and spread around through the File, Edit, View, etc. menus largely built into desktop UX thanks to Microsoft and Apple.

Google isn't killing the design because Google loves functionality. Google is the everything's-still-in-beta company. So new features and functions get added, not edited out because most people don't need them like Apple does. So Google has them in apps that need them, and manages to fit in nearly every function that an app can possibly have. Hurray!

||improve this answer
  • "Google is the everything's-still-in-beta company."- True. The material design guidelines are not full and final at this point, Google themselves have declared this. – steve Oct 28 '14 at 6:03
0

The hamburger isn't intended to show where you are, and just about every mobile website and app uses it as the menu icon, so it's very easily identifiable.

To show a user where they are, you can use breadcrumbs.

Twice as many taps versus what? If you're referring to a desktop menu that's a yes and no, depending on it it has drop downs etc.

||improve this answer
  • 3
    It's easy to assume that the "hamburger menu" is an established patterns, however that's not the case. There are still a broad amount users who won't recognize that icon and know that it's a navigation element. And I think Steve refers to using eg. tabs for navigation, which would require one tap on a tab to switch to it rather than requesting a list with one tap and then selecting a section with an additional tap. However, counting clicks/taps to measure usability is a very misleading method. – AndroidHustle Oct 27 '14 at 11:51
0

Key consideration is that material design is a (multi) platform UI. This is not an application UI. As such there are a few considerations

  • specification can reasonably set paradigms that users will be expected learn
  • ability for a single UI approach to scale to large and/or complex navigation requirements means that more applications can fit within the consistent design
  • clear separation of navigation / primary task / secondary task consistently for all applications in a platform would be significantly beneficial UX, far beyond one extra click in some cases
  • other parts of the specification handle UX requirements like current location
||improve this answer
  • 1
    "Key consideration is that material design is a (multi) platform UI"- I disagree with that. When I think of material design, I think of the new physics and animations involved. I know about Polymer approach, but the question here is that "Hamburger" icon has several shortcomings, and there is no quantitative measure for the possible trade-offs. Hope you understand my point :) – steve Oct 29 '14 at 5:47
  • I would agree with you about those considerations in terms of the "What" and "How" of material design. Sure. But first and foremost is "Why" do the specification, i.e. What's the goal of creating a design standard and publishing it? That will be the key driver of design decisions. – Jason A. Oct 29 '14 at 9:55
0

Menus in general are more likely to decrease the engagement of the content within it.

If your navigation items are out of sight, they are more likely to be out of mind.

If engagement is critical to your navigation, use tabs (up to 5). More than 5 tabs is worthy use of menus and their icons.

||improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.