31

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

  • 1
    It sounds like you're an ecommerce site. Keep the hamburger menu and don't listen to calls for bottom nav - they are from people who don't live in nor understand the ecommerce world. With that said, left side seems to be more common, and it's likely due to most people being right handed (reaching with the thumb to open the menu). – SnakeDoc Nov 18 '16 at 21:46
  • Consistency should be done within your app not with competitor one. I think there is no standard because the accessibility benefits here might not be as important as consistency with your layout. – Alvaro Nov 19 '16 at 9:59
  • Personally I'm waiting for UX people to realize that common taps should be bottom right for easy one-handed use, that doesn't mean that should be a hamburger though... – Brad Thomas Nov 19 '16 at 18:48
26

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.

enter image description here

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:bottom navigation menu picture vs
    hamburger menu picture

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.

  • 1
    Yes I have seen that but I still think that web pages are at least couple of steps behind and it is still unusual for website to have bottom nav. – Awfor Nov 18 '16 at 17:27
  • 1
    For the desktop resolutions the navigation shouldn't be at the bottom. The bottom nav would be only for mobile resolutions. – Kristiyan Lukanov Nov 18 '16 at 17:30
  • 2
    Just make sure the bottom nav menu is actually useful. Today there was a bottom section on Medium's desktop site bothering me to make an account and mostly just getting in the way of the article, and it annoyed me so much that I set the div to invisible. – Milo P Nov 18 '16 at 20:39
  • 2
    There's still a hamburger menu in that Facebook nav bar... In the "after" picture, they just moved the buttons from the top to the bottom, added labels, and moved the hamburger menu to the right hand side. – Harrison Paine Nov 18 '16 at 20:40
  • 4
    You totally ignored the fact that OP is an ecommerce site. Ecommerce uses hamburger menu's for good reason - to show/hide categories! Bottom nav might be good for sites like Facebook and Google, but they seriously do not work on ecommerce. You might even notice next time you shop, all of the "big guys" use hamburger menus still. (not to mention, you didn't answer the OP's question about left or right side). – SnakeDoc Nov 18 '16 at 21:51
16

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

enter image description here (source)

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

  • Then again, many people hold the phone in one hand and poke at it with the other, but then I have an iPhone 7Plus. With some good UI design, the hamburger should only be used for relatively low-frequency actions. – Snow Nov 18 '16 at 15:03
  • @Pete that is true, but in the case where the user is holding the phone with a hand and interacting with the other it really doesn't matter this accessibility rule. – Alvaro Nov 18 '16 at 15:22
  • 1
    I really love this picture. – Zoltán Schmidt Nov 18 '16 at 23:32
  • 17
    So it's easier to click for most people on the right side, and your conclusion is to keep it on the left side? Can you explain the logic? – Robert Nov 19 '16 at 0:26
  • Love the picture, it's a very clear representation of accessibility of screen area. I do agree with @Robert though, I was just thinking the same. Typo? – Darren H Nov 19 '16 at 7:16
5

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

enter image description here

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.

  • Actually, I believe the navigation icon is on the left as material design arranges screens spacially in such a way as to have the parent screen on the left of the current screen. (That's why the Material "up in hierarchy" button points to the left—that's where the parent is.) – Tin Man Dec 9 '17 at 16:26
2

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.

  • 1
    currently we have the same discussion about the placement of the menu. In the initial lab test you wrote, people preferred right placement over left. The A/B test resulted in the opposite but was only conducted with few users. Did you happen to collect any futher data on this? Thanx! – ChrisP Jun 15 '17 at 13:28
  • What was your sample size? – Davbog Feb 20 at 20:34
  • 2
    @Davbog sorry for horribly late reply, at the moment i was working at global fashion brand. So while i do not remember exact sample size it was in tens to hundreds of thousands. – Awfor Apr 15 at 12:50
1

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.

0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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