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?

Wouldn't a button simply saying "Navigation" or "Menu" be much more effective?
|
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?
Wouldn't a button simply saying "Navigation" or "Menu" be much more effective? |
|||||||||||||||||
|
|
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
iPhone - Facebook app
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:
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). |
||||
|
|
Something similar to Benny's answer However, that three-liner icon (as suggested by Benny) is more popular and intuitive |
|||
|
|
|
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/ |
|||||
|
|
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. |
|||
|
|