Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Usability Foundations Mobile Usability Devices and Screen Size

UX experts push back against "Hamburger" menus, suggest Tabs

Edited to provide more links and quotes.

http://www.lukew.com/ff/entry.asp?1945

"A similar fate befell the Zeebox app when they transitioned from a tab row for navigating between the major sections of their application to a navigation drawer menu. Critical parts of the app were now out of sight and thereby out of mind. As a result, engagement fell drastically."

"When critical parts of an application are made more visible, usage of them can increase. Facebook found that not only did engagement go up when they moved from a “hamburger” menu to a bottom tab bar in their iOS app, but several other important metrics went up as well."

https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/

"...Instead of using these iOS patterns, simply display the navigation in the website header as a list... As long as it’s evident as website navigation, people will still scroll past it and will definitely be immediately exposed to the available options."

http://conversionxl.com/testing-hamburger-icon-revenue/

"Our own test showed that the word MENU helps + using a color to make it stand out from the noise can help."

I'm with you man.

4 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points

There is nothing wrong with hamburger menus, it is completely subject to your target market of your app/website. If your target market is not going to understand what a hamburger menu is for, you have three options in my opinion:

  1. Change the button to something more easily understood by everyone (For example a button that says Menu)

  2. Have instructions / Gestures to explain what the button does (in the similiar way that you would gesture how to swipe a parralax website).

  3. Use a different form of navigation.

Listing your navigation before your content is just going to cause poor userability and increase bounce/exit rate on your website because the users have to scroll away from the navigation to find the content. Taking the extra time to redesign or make a hamburger bar more user friendly for target markets that do not understand its use is far more effective then just filling your page with navigation and loosing all your conversions.

In my opinon if a user needs the navigation bar on your landing page and there isn't seperate call to action buttons to direct the users where they need to go or where you want them to go, the design is completely failing already anyway.

Hi Ashley,

Thanks for the reply. Yes, of course you should consider your users and also test A/B whether this menu is working. Unfortunately, even when users say they love the new (hamburger menu) design, their engagement drops. This is just based on my reading - check out that article I linked and its related links.

  1. The menu button does tend to perform better than the hamburger, but does not solve the discoverability issue. Users will never know what is hidden in the menu unless they click it.

  2. If you have to explain it, reconsider the design.

  3. Tabs are indeed the recommended alternative given in the article I linked. I shouldn't have focused on the navigation list.

"In my opinon if a user needs the navigation bar on your landing page and there isn't seperate call to action buttons to direct the users where they need to go or where you want them to go, the design is completely failing already anyway."

^ I'm not sure what you mean by this.

Codin - Codesmite
Codin - Codesmite
8,600 Points
  • That is why you have call to action buttons directing users to the next part of your website you want them to engage with, if you've designed your landing page/content pages correctly it shouldn't require the user to actually use the navigation menu unless they are looking for something specific or less important then the call to action buttons lead to.

Scenerio: You are designing a website for a hairdresser, when the client lands on the page there is only a few things they need, to know your services, where to contact/find you and how to book an appointment).

Client lands on the landing page and is met with a normal landing page that boasts trust, expertise, testimonials (the normal stuff). Three easy to see call to action buttons "Our Services", "Contact Us", "Book an Appointment". Unless the user wants to know more about your company then the landing page had shown they don't need to even consider the navigation.

  • I don't agree with your second point at all, from a markting perspective and UX design level you need to engage the client and direct them through your website to where you want them to go or where you believe they want/need to go, even if the client does not require explination a simple un-intrusive gesture example for instance can help direct through the website while at the same time explaining to less knowledgeable clients how to navigate the website. (A lot of my work has been in the retail sector and a good majority want to target younger and older generations at the same time and this covers both).

  • I would say if you have good direction, call to action and a couple of key tabs in your design a navigation bar is almost irrelevant, hence why I do not not see the burger bar (or menu button) a bad thing because if the direction in your design is good, the burger bar should only be aimed at a small percentage of your clients that actually require.

On average I would say most users have an attention span of 10 seconds or less, if you cant catch them in the first 10 seconds, unless they are already really interested in your project/service before finding your website they will probably bounce, having to scroll past a navigation bar or even interact with a normal navigation bar outside of the scope of your landing page you probably wont convert.

Yep, prominent links directing to most-wanted sections make perfect sense, and then using the hamburger as a "last resort" is reasonable. (I didn't understand the wording; I associate "call-to-action" with a singular purpose (ie. book an appointment, get the e-book, sign up, etc), not navigation of sub-pages.) Consider, though, that many people will not arrive on your landing page, so these links should be somehow visible on each page.

Avoiding UI situations that require explanation is pretty widely accepted. I can appreciate that it may sometimes be necessary - just saying it should be avoided if possible, since it is often indicative of an unclear design (poor signifiers), and it draws attention away from other important elements, ie. the primary message or call-to-action.

I totally agree with your points on user attention being (very) limited, but it suggests to me that they should be able to find what they are looking for by visually scanning, rather than having to interact with a hidden menu.

Perhaps the articles I linked to are being too hard on the hamburger, but they certainly bring up some good points, the main ones being:

  • Hidden menus (like vertical menus in general) can encourage bad information architecture, since there is less need to prioritize.
  • Hidden menus don't make the key areas of your site discoverable to users scanning the text of your page. (Again, not everyone lands on the homepage)
  • Tab-bars for key pages/screens encourage interaction vs. hidden menus.

Anyway, thanks for the discussion, Ashley and Jeff. I will take the hamburger haters with "a grain of salt". It sounds like we agree that the important links should be visible outside of the hidden menu, either with tabs or another prominent, directly clickable link.

Jeff Lemay
Jeff Lemay
14,268 Points

Yes, there are some issues with hamburger menus not being recognized, but you definitely do not want to just list out all the nav items on mobile. Except for 3 or 4 main pages/sections which you can show as tabs at the top of the page, you should hide the nav behind some sort of button (one that says "MENU" is a decent option). Don't make the user scroll past a nav list on each page they visit, that's a terrible user experience.

Hi Jeff,

Did you check out the link? It is very much "pro-tab". A button that says "Menu" is indeed preferable.

Regarding scrolling past navigation - yes, that could be a problem for sure, on inner content pages. One could use Javascript to move past the navigation on load, but show it when the user scrolls up. People expect the navigation to be at the top, so its not unreasonable to expect they would scroll up to find it. Just an idea that I haven't tested!

I'm not an expert, I'm just trying to bring attention to the experts who are saying the Hamburger is a problematic design pattern.

Miguel Palau
Miguel Palau
24,176 Points

Great read thank you very much for the links I've read some of that stuff and decided to give it a try.

I made this site-mockup for a fake technology company here I tried flexbox, video backgrounds and my own take on responsive hamburguer menu. Please view on mobile or resize to try it out and tell me your thoughts :)

http://solohaz.click/idt/

The hamburger icon is a hot topic among designers (as you can see on this thread.)

I do believe that is a necessary evil, but agree I was disappointed that it wasn't addressed in more depth in the videos.

Humans are bad at remembering things if we don't see them. That's why the fruit in the fridge goes to waste but if you leave it within sight you eat it (or have a higher chance of eating it.)We forget where we put things/where things are all the time.

That's why solving the navigation issue without the use of a hamburger is preferred. It should not be used as a "go to" crutch for a navigation.

Great article by Smashing Mag here:https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/