Hamburger menu - should be on the left or right?

Hello All,

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

What do you guys think?

4 Likes

I’m not sure if anybody has gotten around to reading “Designing for Touch” yet, but I imagine there would be a wealth of considerations discussed in this book: https://abookapart.com/products/designing-for-touch

It is a familiar pattern to see the menu in the top left, although it isn’t ideally placed for right handed users (the majority), who use the device in one hand. As with most things there is an element of “it depends”, what other elements are in the interface? Do you need a “Back”, a “Cancel”, a “Done”, if you are designing an app UI then these requirements could dictate the placement.

A post worth reading which relates to placement: http://www.lukew.com/ff/entry.asp?1649

Something that you also should consider is whether a hamburger is the best solution for you. There have been a wealth of posts which relate to how poor hamburger menus perform, including this one: http://www.lukew.com/ff/entry.asp?1945

Finally this post is worth a read: http://exisweb.net/menu-eats-hamburger - if you cannot avoid hiding some options behind a menu then perhaps it would be wiser to use language, rather than iconography.

5 Likes

I’ve been wondering for quite a while less about left vs. right placement and more about top vs. bottom. For even light, single-hand use, the distance up to the menu on screens over five inches is too much for most thumbs. Google recently updated Material design specs with some additional bottom navigation (https://www.google.com/design/spec/c…avigation.html), though a hamburger style menu was not included.

So what about having a hamburger in the bottom-center of the screen, with the menu options in ascending order from most to least used?

2 Likes

Other considerations are:

  • Which conventions may need to be broken or retained across the adaptive designs? Information architecture, menu positioning, OS/ecosystem engagement-related stuff too.
  • Which other navigation-related elements are also used (global navigation, account settings, other menus or links), and how important is this menu amidst those?
  • How important is this menu for the frequent use of these screens?
  • How savvy is the target audience with use of the hamburger menu pattern?

While placing ‘menu’ text beside (or instead of) the icon seems to communicate with users more clearly, I’ve also seen people wonder if it is a food menu, so it’s not without issues either. Facebook uses ‘more’.

2 Likes

Funnily enough I’ve seen that on a restaurant website myself. ‘Menu’ would be certainly be more appropriate in some instances over others.

1 Like

I’ve always been a big proponent of putting things where folks are used to finding them even if they are not the best ways to make the system interactions fast.

The measure of a quality interface is determined by the end user and they measure quality by their frustration level. If they don’t have to think in order to find the menu in the top left (I like to add “menu” too) that is likely the best place to put it.

Some of my favorite projects in UX have been those where we have actually removed functionality from a system in order to make the UX more intuitive and once it’s done the users rave about how much better things are.

Lesson learned tends to be that making things appear “right” is more important than trying to force the user to evolve.

1 Like

Just like @Alvey_UX, I also usually put things where users know they can find them. So my hamburger menu (although I avoid using it as often as I can get away with it) is always on the left side in apps. Sometimes I put it on the right side on mobile websites.

What I think is more important is not its placement, but how else you can make the navigation active. I never understood apps with a hamburger menu where the side navigation doesn’t become active when the user swipes from the side of the screen. I think this is really important to keep in mind.

3 Likes

My concern with becoming too attached to this type of thinking is that it actively prevents you from being a change leader and may lead you to overlook conditions that demand change for the sake of to adhering to “best practices,” (like in this example, phone screens that are nearly 6 inches diagonally).

Yes, a change in navigation placement may initially require an increase in cognitive load, but every brilliant deviation from the norm requires this. Like pull-to-refresh, the goal is to make the change feel natural and necessary and eventually ubiquitous.

1 Like

SO true. I think that’s a very valid concern. There has to be middle ground. Change for change’s sake is dangerous, but then so is getting left behind.

Consider:

In western countries we read from left to right, reading and glancing a menu placed on the right is harder and less natural.

You hold the phone with your right hand, an outwards movement of your thumb is the easier.

I think it totally depends on user convenience and user experience.

what you can do the best is test 2 versions of pages and do A/B Test with left and right menus

Then you can have a more precise idea about which one is performing best.

Let me know your thoughts on this.

Best Regards,
John Ahya
Custom Web Developer at WebDesk Solutions

I think majority of the people use their phones with their right hand. So hamburger menu on the right side would be a good option because it would be easy to reach with right hand’s thumb.

Hamburger menu should be on the left is the correct ans.

i am working on one project and i am using ‘Materio – Figma Admin Dashboard Builder & UI Kit’
this design system ux is so amazing and also useful so you can check the Hamburger menu style in the design system

This is the download link: https://themeselection.com/item/materio-figma-admin-dashboard-ui-kit

I’m wondering if the proponents of putting menu to the right are still using iPhone 6 or the likes. Otherwise I am afraid to imagine what sort of limbs they have to be able to reach the top right corner with their thumb. I have bigger than average hands and can’t reach it on iPhone 11. And not many people know/use “bring top of screen down” feature.

Also, it depends on how your user consumes your content. Are they just mindlessly browsing(twitter, Instagram, Facebook etc) or they are actively focusing on the content? (online shopping, SaaS). The latter more that often justifies usage of your left hand either to support your phone(cuz they are quite big nowadays) or to help with navigation.

Most put it on the left and I’ve seen a few times on the right. It’s kind of weird that the norm seems to be the left since the right is slightly more convenient to reach. I also think a floating bottom right nav would be the most convenient, I think I only saw facebook or some other app put it there.

it’s recommended to place hamburger icons in the top left corner of a page.

Apple Safari on iOS now defaults the URL bar at the bottom instead of the top and the navigation menus open up to about halfway up the screen. This seems like they’re making it easier for one handed operation (right handed more than left). So maybe since Apple, a huge influencer on UX design, seems to be going more in the direction of navigation at the bottom, it will become more common. Chrome puts some of their navigation at the bottom, but not the URL I still put the menu icon on either side of the top, I’ve never heard of anyone having an issue not finding it. Over time, I may reconsider.

Hi, I’m a ux designer working on a real estate website and I want you to give me an idea of what you thought would be the best way to serve the user, thanks

yes, i agree with you

Hello. I think it`s better to put it in the place where users accustomed to find them. Because it is how our brain works :grinning_face_with_smiling_eyes: