Mobile website menu. Should hamburger menu be on left or the right?

Question

Quite a while ago we decided to move our hamburger menu (I know they are evil but we got stupid amount of subcategories) to the right. Reasoning behind that was based on accessibility and in indoors labs it proven that people preferred it this way.

Now we are doing some reworks regarding mobile top banner and search. While doing research I noticed that literally all of our competitor has their hamburger menus on the left.

Is it worth sacrificing usability (way easier to reach menu) for consistency (everyone one else is having their hamburger menus on the left).

It is worth noting that our customer base is heavily using mobile devices especially iPhones.

There is similar topic but I dont think it covers particular use of hamburger menu location on websites, and not apps. Should the search box be on the left or the right side

Answer 1

Replace hamburger menu with bottom navigation menu

I know that I don't specifically answer your question but decided share the latest research about hamburger menus and a possible alternative.

Lately, there has been a good amount of research about mobile navigation. It turns out that the bottom navigation menu was creating more user engagement for Facebook compared to hamburger menu. Watch a video of Luke Wreblowski explaining why most of the Google apps are replacing the hamburger menu with bottom navigation.

Yes, Hamburger navigation save a lot of valuable screen space but:

Problems with Hamburger menu:

• Lower Discoverability

  The available actions of the app are hidden behind the hamburger menu. They're not explicit and the user have to make an action to discover that the certain activity is available.

• Higher interaction cost

  Even if you know that a certain action is available you need to tap on the hamburger menu first and then tap on the action while the bottom navigation you can select an action with only 1 tap.

• Notifications about different activities cannot be shown all at once

  Specificity of notifications is low, see the images below for explanation: vs
  

Why Bottom navigation menu?

• Users can concentrate more on the core features of the app because they're explicitly available

• It drives more user engagement, according to the studies outlined here

• It is more ergonomical as it is easier to reach the bottom than the top of a mobile phone (look at @Tarek illustrations).

Use cases:

• Redbooth use case:

  • Customers used the app more frequently: the number of sessions more than doubled!
  • They spent more time in the app: session time increased 70%
  • We ultimately saw more customers return, with a 65% increase in daily active users nearly overnight.

• Spotify removed hamburger navigation

  The company tested the tab bar on iOS to see how it impacted user engagement. It found that users with the tab bar ended up clicking 9% more in general and 30% more on actual menu items. The tests also revealed that reducing the number of options in the tab bar to five increased the reach of Spotify’s programmed content, the company says.

  Before rolling it out more broadly, Spotify tested the tab bar with both new and existing users to make certain there were no negative effects. It found that the new bar encouraged users to explore more types of content (e.g., Spotify-programmed, self-programmed etc.) without impacting retention, engagement or consumption time metrics.

Conclusion

When Google and Facebook have removed the hamburger menu (they base their decision on tons of data) then it makes sense to test bottom navigation on your app. Also, its not only Google and Facebook - other research cited here had great results replacing the navigation.

Answer 2

When hamburger icons first started becoming ubiquitous, they were placed on the left side.

But as apps started iterating, like yourselves, the icon shifted the right side because it's easier to click (given that the majority of people are right handed and the top right corner is slightly more accessible than the left one).

(source)

So I'd say keep it on the right side if you're using the hamburger icon.

Answer 3

My conclusion after reading about UI structure in Google Material Guidelines is on the Left:

Icons on the right side of the app bar are app-related actions. The menu icon opens the overflow menu, which contains secondary actions and menu items like help, settings, and feedback.

Primary actions should be displayed on the right and secondary on the left (probably due to right-handedness).

So only display it on the right if the hamburger menu is the main action or if it is by itself.

---

In case you are developing an App for Right to Left languages then invert the order.

Answer 4

Thanks for all the answers, this topic has generated loads of valuable info and in the end I decided to do A/B test regarding burger position and so far I only ran it for small portion of my customers and hamburger on the left has increased add to cart rate, average time on site and page views compared to hamburger on the right.

So my conclusion is that at current time hamburgers on the left outperforms same hamburgers on the right. I still strongly believe that this should vary from industry to industry and different companies.

Hope this will help others running into similar questions.

Answer 5

Apps on iPhones seem to have hamburgers on either the left or right - I think that users are used to either, so the choice between the two depends on other items you have at the top of the screen.

MSN News app has a search bar at the top and hamburger on the right.
Amazon app has a search bar with the hamburger on the left.

As long at it's at the top of the screen on one side or the other, that's the most important thing.

Answer 6

On iPhones, "Back" navigation usually occurs through the top left corner.

You are strongly encouraged to also support swipe-from-left-edge (as the top left corner is very hard to reach for a right-handed user using a single hand on a larger screen), but you should still keep the "Back" navigation in that position (as a visual clue, as a way to navigate back for people who don't know about swipe-from-left-edge, and as a way to navigate for people using a smaller screen, are left-handed, or use the phone with both hands).

So now you have a conflict between "Back" navigation and the menu, which means it makes more sense to put it on the right. If you keep it on the left, you could:

• switch between the menu (if you're on the "top" page of each category) and the Back button (if you're on a secondary page), but this is inconsistent and complicates navigation when you're in an "inside" page (have to do "Back" first, then menu).
• have both buttons next to each other, though only when there's actually a "Back" navigation (inside pages), which means the layout is possibly inconsistent (depending on the order of the buttons), and you're adding two buttons very close one to another when they're already very hard to reach even on smaller screen phones.

Now, this may be different if:

• you don't ever have Back navigation (though this is really not that frequent),
• or you somehow know your users only/mostly use the app in a "steady" context where they can use both hands, as opposed to while moving around, where one-handed use is prevalent.

Of course, the best option for your specific case would be to perform some A/B testing!