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?
asked Jan 21, 2013 at 7:53
-
6You might want to add some borders and shading to the button to make it actually look like a button.– icc97Jan 21, 2013 at 8:49
-
2Also 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– konturJan 21, 2013 at 9:42
-
Ah, the hamburger button. mlkshk.com/p/LOQQ– Steve MoserJan 21, 2013 at 16:48
-
1You'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.– DaniJan 21, 2013 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.– KOVIKOJan 23, 2013 at 14:56
Add a comment
|
6 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
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.
Reference
A nice and working implementation guide: How to Build a “Three Line” Drop-down Menu for a Responsive Website in jQuery.
answered Jan 21, 2013 at 8:11
-
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!– MohitJan 28, 2013 at 10:39
-
I personally was never satisfied with three lines (and dots) since they never indicate what happens to the system in a predictable manner.– uxfelixDec 12, 2013 at 11:57
-
@uxfelix I can agree to that. But the "Hamburger Menu" is soon to be, if not already, a convention. As much as we dislike the infamous save icon, it'll still be the reference to save something. Dec 12, 2013 at 13:13
-
1I'm afraid so to. And i guess the three-line-handle-icon will be recognized context sensitive. Do you mean the small disk symbol on the "save" button? Yes I've also asked my self if future generations will understand the old symbols (disk, microphone, video camera, tape, vhs, etc.) or if there will be a paradigm shift.– uxfelixDec 12, 2013 at 14:04
-
@uxfelix LOL. Take a look at the answers to the question Save icon, is the floppy disk icon dead? Dec 12, 2013 at 14:14
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/
-
1+1 I really like the microsoft solution in the smashing article. It's so obvious.– FrankLJan 21, 2013 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.
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."
or
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?
