Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What's the best way to indicate the navigation menu on mobile?

I see this three-bar icon being used a lot but do users really understand what it means?

Facebook navigation

Wouldn't a button simply saying "Navigation" or "Menu" be much more effective?

share|improve this question
3  
You might want to add some borders and shading to the button to make it actually look like a button. – icc97 Jan 21 at 8:49
1  
Also see theindustry.cc/2013/01/07/13-design-trends-for-2013 , point 4) and a related question here on UX: ux.stackexchange.com/a/32879/21973 – kontur Jan 21 at 9:42
Ah, the hamburger button. mlkshk.com/p/LOQQ – Steve Moser Jan 21 at 16:48
1  
You're right to wonder about user misinterpretation, I've witnessed the confusion of first-time mobile users with this button. Positioning, experience, and wide-spread use can give users insight, but it is inherently unintuitive. – Dani Jan 21 at 18:01
The icon has gained widespread use, like the floppy disk "Save" icon or the ajar manila folder "Open" icon. That's not to say that many of us don't prefer words like "Open," "Save," or "Menu," but we are accustomed to the icons and should be able to recognize them either way. – Koviko Jan 23 at 14:56

4 Answers

The three lines represent a menu as several links stacked on top of each other. If not already a convention - it is very close to become a cross plattform convention representing a menu. Take a look at this image search on Google: mobile menu button, and see that this is the most used representation for a menu on a mobile device.

And looking closely this is how different devices handles the menu button...

Android

enter image description here

iPhone - Facebook app

enter image description here

Windows Phone - is different. There well known panorama view where the user swipes left and/or right to access another context of the app, is the closest we get to a navigation menu:

enter image description here

Windows phone also uses three dots [...] for the "more"-menu, but this is not the same as iPhone and Android menu button.

To conclude: the three lines represent menu button on mobile devices (which uses a menu button).

share|improve this answer
I like 3 dots better than 3 lines as they are less intrusive and take up less space on screen, but again, they are small and have a smaller hit area and users' eyes can easily miss them or mis-hit them! – Mohit Jan 28 at 10:39

Something similar to Benny's answer

Mobile Settings Button

However, that three-liner icon (as suggested by Benny) is more popular and intuitive

share|improve this answer

The majority of responsive websites (such as Starbucks, Facebook or Path) use the three horizontal stripes icon. An alternative could be the grid icon (depending on how you decide to visualize your menu items) or the three horizontal stripes of different lenghts with a dot, representing “table of contents”.

This article lists some interesting solutions: both icon or labelled buttons, illutrating pros and cons and showing high-profile responsive website that use them.

http://mobile.smashingmagazine.com/2012/10/08/the-semantic-responsive-design-navicon/

share|improve this answer
1  
+1 I really like the microsoft solution in the smashing article. It's so obvious. – FrankL Jan 21 at 17:57

Even if facebook and other popular sites use the 3 line icon and that should be enough to think that people will understand its meaning.

I would say that if the access to your menu is important you should use a link labeled something like "menu".

In facebook for example the menu is secondary as the most important thing in its mobile usage is the post feed.

I find this icon confusing as it is really close to the visual used on "blind" interactions link when you pull down the ios notification center. I have not "user tested" it though to see if some users had the same misunderstanding of the icon.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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