40

Hamburger menus (the three small horizontal bars: the new menu icon). Should they be on the right or left?

I'm only thinking of mobile and tablet applications.

enter image description here

The pattern I see the most is on the left side: Youtube app, Evernote app, and many more. However, I've seen the argument of the right being more user-friendly because when you're grabbing the phone with your right hand, it's easier to reach the menu.

enter image description here

What do you guys think? Should I go with the flow and implement the menu on the left side?

Improve this question
5
  • 5
    I wondered when you said "mostly on the left side", before I saw that iPhone picture (haven't used iOS myself, but seeing this question, I assume it must be on the left there). On Android, it is always on the right side, including on the Evernote and YouTube apps. If by now Android users have formed an expectation for right-side and iOS users for left-side, you might want to go with the target platform convention.
    – Rumi P.
    Sep 19, 2013 at 9:46
  • On my Android 4.4.2 smartphone, the Google apps have the hamburger menu on the left. I take it you've set the primary language on yours to one where the text runs right-to-left.
    – Huperniketes
    Apr 20, 2015 at 13:16
  • 2
    Gosh, I always thought that three-line shape was like a ventilation grill. Sometimes it turns red in Chrome, and I would think, "Oh-oh, it is overheating!" When it turned green, I would think that it was too humid in here and algae was growing. It took a while for me to realize that it was supposed to represent a "menu". (Hamburgers are right out.) Then I started to see it other places too: "Oh, they are copying Chrome!"
    – user67695
    Jan 14, 2016 at 21:10
  • You should use whatever is standard on the OS instance.
    – Fattie
    Jan 16, 2016 at 19:07
  • It will be easy to access if it's placed on the right. If placed on the left it's hard to reach. Many of the sites are placing hamburger icon to left.
    – NB4
    Jan 27, 2017 at 9:20

8 Answers 8

Reset to default
55

This menu got "famous" because Facebook and Path implemented it for the first time. Personally I'm not really attracted to this menu but if I need to choose a side I would choose the right side.

That's because aprox. 67% of users use the right thumb (so that means the right hand) and in several studies have proved that the screen area is more difficult to reach with this hand posture is the top-left one. Something that you can see properly in this image from the LukeW's book Web Form Design
enter image description here

The navigation of an application of mobile website it should easily reachable and accessible. In this way the experience is more comfortable (at least for that 67% of right hand users).

Here you can find a really interesting article about how users hold mobile devices: How Do Users Really Hold Mobile Devices?

Improve this answer
1
14

Firstly you should do what is already done.

Users love consistency

If the majority of apps are doing it on the left top side, then go with that. It's very much like how a lot of phones, even though different companies, apply the same mechanics for touch screens (tap once to open an app, instead of twice, or even swiping at it).

Additionally, as research points out (thanks @Izahaki) the left side is better because it's much easier to stretch out, then to compress (less balance that way in the hand from what I found).

Also, I cannot express this enough: User test.

See what your target users (stakeholders) are more comfortable with or are used to. If they are tech savvy, I would go with consistency.

However, there is also something called learned behaviors. Something that users start doing after repetitive usage. So really, if you set a standard, don't break it and there could be a potential of learned behavior. However, I highly suggest you go with what is done first, then establish your own rules if necessary.

Improve this answer
1
  • I would on the whole agree with this approach; and to the point of your last "however" paragraph, would add the following quote by Paul Rand: "Even if it is true that the average man seems most comfortable with the commonplace and familiar, it is equally true that catering to bad taste, which we so readily attribute to the average reader, merely perpetuates that mediocrity and denies the reader one of the most easily accessible means for esthetic development and eventual enjoyment."
    – jbyrd
    Nov 5, 2015 at 17:31
8

We've given this a lot of thought and testing recently and have tried the hamburger / curtain menu on both the left and right. One important factor to keep in mind is the position of other navigation elements that you have, in particular a Home or Back icon.

Apple frown upon having the hamburger directly beside / on top of a Back button - and have rejected one of our apps because of this. Interestingly though, others have gotten through so Apple seem to be somewhat inconsistent about this. Possibly it depends on other factors such as the size of the tap zones, visual distinction between functions etc.

Generally though, I would argue for having the hamburger icon on the right hand side. The top left seems like a natural position for the Back / Home buttons. Previous research that we've done has shown the users like having a Back / Home button as it gives them a sense of security / grounding in the nav hierarchy - they always know they can get back to a "safe" area.

Perhaps you should ask firstly though whether a curtain navigation is needed at all ... they are convenient in that they effectively act as a global nav, accessible from anywhere in the app. Does your app require this though? Is it easier to simply have a navigation page with a table of icons / functions for the app on the homepage? This helps to give customers a good mental model of the app / functions that are possible. It depends on your app, the number of functions who have and how your users use it.

Whatever you do, make sure you test a prototype of your solution with real users before you send it into development!

Improve this answer
2
  • 1
    Very interesting point about Apple rejecting an app because of the position of this button. Did they reference any particular rule / guideline of theirs when doing so? Such as from the Apple HIG?
    – JonW ♦
    Oct 3, 2013 at 10:17
  • Insightful. Thnaks.
    – John Assymptoth
    Oct 3, 2013 at 14:43
4

The most used controls should be in the most easily reachable screen area.
If the menu is seldom used, which I think it's the case, then it doesn't qualify to be within the right thumb reach.
A seldom used menu that opens for example a busy configuration screen calling for active interaction is more likely to be operated with two hands.
Also, having the menu at the left top corner has two more advantages: it's always visible, and it's less likely to be touched accidentally.

Improve this answer
1
  • I like your perspective as well Juan. Thanks for the input.
    – John Assymptoth
    Sep 24, 2013 at 21:04
3

Since this was answered, a lot has changed. We now know that bottom menu's are a lot more user friendly, which is why we see larger brands more towards this concept.

The way these menu's work is, you place 4 of your menu actions in this bar, and have a 5th "menu" button, to hide the other, less important, menu items you'd have on a desktop version.

It's obvious if you think about it, your fingers are closer to the bottom of the screen, so why wouldn't you place it there?! I've gathered a few examples.

Spotify menu

enter image description here

Facebook menu

enter image description here

Various other menu's

enter image description here

Improve this answer
6
  • Your examples are menus not a button to active the menu. The icon on the top right of the facebook app, is a button that activates the menu. I do agree that a lot of menus are shown as you point out, but it's not what this question is about.
    – Anders
    Jan 27, 2017 at 9:13
  • @Anders Not all of them, but most show a similar button. You can see the "More" button in the last example, the "More" button in the facebook example and the "your library" in the spotify example. These are exactly the same button as the question is about.
    – MJB
    Jan 27, 2017 at 9:37
  • Thanks @MJB. Indeed, research shows the hamburguer menu has discoverability problems. Nowadays, I would recommed an approach similar to what you describe OR a combination of both. Regards.
    – John Assymptoth
    Jan 27, 2017 at 12:58
  • @mjb They are a part of a menu/set of buttons, so it's not quite the same, but the discoverability is definitely greatly improved when making a menu. But also has this in this mockup, and want's to know the best placement of the extra button. It's like the facebook screen you added, so that's a good example of where it probably should go.
    – Anders
    Feb 2, 2017 at 8:00
  • Facebook menu on android is on top now, just below the search. So it makes this answer towards the wrong side.
    – Everts
    Feb 4, 2018 at 22:05
2

Western people are used to reading left to right, top to bottom, so putting interesting info on the top left (like the current app logo and title) instead of a boring static button, saves them time. Also, righthanded people like interactive stuff on the right.

Improve this answer
0

In my opinion, this would depend on how the button is to react. If it is going to show a hidden vertical menu then it should be on the side that the vertical menu is on (much like Facebook's app). If the menu drops in from the top, bottom, or goes to a completely different view, then it should not really matter.

When in doubt, I would go with what is easiest and fits the best on the screen.

Improve this answer
0

I think it depends on the action that the button causes. If it activates a menu that appears on the left part of the screen then the button should go on the left to reinforce the association between the button and menu by proximity.

If activates a menu that appears on the top part of the screen then the button should go on the right, because this is the way drop down list boxes are configured, and this style of menu is conceptually descended from drop down lists.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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