Why not have the hamburger menu at the bottom?

Question

Considering this : http://www.lukew.com/ff/entry.asp?1649

... and considering that displays get bigger, I'm wondering why the hamburger menu isn't located at the bottom of the UI.

Just like this (the only one design pattern I was able to find ... and which was abandoned in the newest version of the App) :

---

Just to make sure everyone understands the issue, I've read the new Android Guidelines but, from my experience, users tend to tap the button instead of swiping left/right.

By the way, I'd more than happy if you could direct me to a study/test proving that users DO actually swipe.

edit : I'm also aware of the issue concerning the proximity with the physical buttons on Android devices but I'm convinced that it can be easily addressed by making the UI icons/buttons big enough.

Answer 1

In terms a reachability for large displays i agree on your concerns. I also appreciate luke w.'s design video sessions. But here some things which you should consider:

Reading direction - Page Scanning

I guess i do not have to mention studies here, where it was proven that the point with most attraction/attention is the top left corner. So, if this hamburger icon (there are lots of discussions, if this icon is appropriate for navigation...) represents the entry point for your main navigation, designer would want it to place in a very prominent place to make it easy perceivable (think of left hand users, who's thumb is over the bottom left corner, hiding the icon).

Perceived affordances

Second, in terms of perceived affordances (D. Norman), most navigation items are placed on the top by convention. So maybe navigation is easier to reach on the bottom, but by convention, easier to find and recognizeable on the top. For sure, someone can argue, there are the toolboxes/tabs on the bottom and i think this is valid for lots of use cases.

So i guess there is actually no clear "guideline" where it fits best. The latest facebook ios application comes to my mind, where the hamburger icon appears in the bottom right for profile settings and on the top right for your chat contacts.

I hope this helps :)

Answer 2

I see your point and I have to say I'm wondering the same thing since a while ago.

I think there is one thing to have in account which is the human interface guidelines for iOS and Android (which are the examples here).

In case of iOS, they recommend to place the tap bar dock) at the bottom of the screen and the navigation bar (which applies actions over the elements of the current screen) on the top. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Bars.html#//apple_ref/doc/uid/TP40006556-CH12-SW1

But in case of Android they have recommended since always to place the navigation of the top, due the Android devices have the physical buttons and the bottom and can create some conflicts.

I already saw several apps with the hamburger menu at the bottom left of the screen, which I think is not a bad idea in terms of scanning at least in iOS, since the dock menu has been always there (users are already used to). http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

In the other hand, with the recent Google Material Design, they have introduce a new element "floating action button" which solves the problem of reachability and which Luke W. recently also started to experiment with it. http://www.lukew.com/ff/entry.asp?1927

So, personally I'm expecting to see more apps with the burger button at the bottom of the screen either in a floating button or as part of the tap bar.

Hope this helps!

Answer 3

I think Rafa has some very good points.

For iOS, Apple in fact does not recommend the hamburger button/side menu. This is why they have not provided a default implementation of it nor used it in any of their apps, although many iOS apps use it. What Apple recommends is tabbars. The main benefit is that you see what's available right away, so no features are hidden from the user. The tabbar is at the bottom of the screen.

Google introduced the FAB (floating action button) with Material Design, and actually before that, the Path app is already using something similar. But for iOS, there are some reasons that I can see why the menu icon is at the top:

1. The Facebook app first introduced this pattern (or it popularized it), and that was back in the iOS 5ish time, when iPhones are still 3.5 inches. Users typically can reach wherever on screen just fine back then. Then a bunch of apps followed suit, and after several years, when people see the three lines at the upper left corner, they know that it's the side menu. It has become a convention. If you put it elsewhere, it looks weird or people don't know what it is.
2. For many iOS apps, the navigation bar at the top is always present. This is because as long as your app has hierarchy, you will need something like that to go back to the previous page (there's no back button like on Android). Therefore, adding a menu icon to the bar is "free", since it does not take up any extra space. On the other hand, apps using the hamburger menu typically don't use tabs also, so there's no space at the bottom of the screen to put the icon, unless it is a FAB. Still, that will block the content on the page, and may not be a terribly good option.

For Android, first it's obviously "influenced" by iOS. Then many android developers (esp. early ones) tend to keep the same look for their android/ios apps, so...

As whether the hamburger menu should be used at all is hotly debated, I'll not try to answer "why not put it at the bottom", but just offer my 2c about some reasons it ended up on the top. ;)