What's the best way to indicate the navigation menu on mobile devices?
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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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...
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.
A nice and working implementation guide: How to Build a “Three Line” Drop-down Menu for a Responsive Website in jQuery.
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.
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.
A button is still a button.
Options, Settings, Reload and all other Buttons will always swap the content of the page or will precede in immediate action. In an old metaphor a button changes the state of a machine immediately (Switch TV on/off, start recording, blow horn, increase pressure, etc.)
If you press a menu button a menu will open which will increase, enhance but change the navigation structure and maybe hide content (state of system) the user is aware of:
Where and how will this happen? Where will it show its content and in what manner? What content I am looking at will be pushed out of sight?
A menu is a form of pre-state literally showing more buttons, a state the system (your app) resides in before the user wants to change it.
My suggestion would be to symbolically indicate how or where the navigation-content will be displayed. In that way your button says: "This is what I am going to do."
Edit: In some way the three lines abstract "further buttons". This justifies its existence of the icon I guess.
Something similar to Benny's answer
However, that three-liner icon (as suggested by Benny) is more popular and intuitive
I think this new 3 line icon, if trending toward universal meaning as 'menu', still needs to include the 'menu' label text for now. Until it's universal, really universal like an arrow, question mark, or unordered list icon, the 3 line icon somebody here calls hamburger, elsewhere 'neticon' or in asia as the 'qian' lucky symbol, or by chrome developers as 'the hotdog', is still unrecognizable by the regular public as anything more standard than the tiny 2 or three lines in the center of a border bar that does universally denote "drag" (though none of the applied 3 line icons in gmail, youtube, or phone apps denote 'drag'). So what is it and how do we expect our users to know, especially when no one even has a standard name for it yet?