Is the use of hamburger button in Google material design an example of a bad user experience?

Question

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.

Answer 1

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.

Answer 2

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.

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

Answer 3

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

Answer 4

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!

Answer 5

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.

Answer 6

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

Answer 7

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.