Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I recently experienced serious usability with a website I have done using twitter bootstrap. When accessing the website on a phone, specially older users did not recognize the 3 horizontal lines twitter bootstrap (and many other websites/apps) are using as a menu:

enter image description here

Actually they could not figure out how to navigate the website at all.

I would be interested in usability studies addressing the different navigation styles of mobile websites.

share|improve this question
2  
Why not put the word 'menu' next to / under the button? The best way to get ideal feedback on what to do with your app to help the target audience use it is to test with them directly. –  JonW Oct 5 '13 at 16:21
    
Had the same experience with older people, adding an icon label like 'menu' solved that. –  Volker E. Oct 6 '13 at 5:09
    
Not a usability research but rather a responsive design examples with pros/cons for different navigations. bradfrostweb.com/blog/web/responsive-nav-patterns –  AsafBO Oct 6 '13 at 5:47
    
@Jon/Volker yes adding an icon label like Menu is probably what I will do. Another thing I thought about is having the full navigation on the bottom of the site, and make the menu icon just an anchor that would scroll to that navigation section. –  Andreas Ka Oct 6 '13 at 12:58
    
@AsafBO thank you very much, good article with interesting links! –  Andreas Ka Oct 6 '13 at 12:58
show 1 more comment

1 Answer

The following article from Smashing Mag provides a good list of how companies have been using the "open nav icon" and offers some very interesting starting-points for discussion:

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

Highlights: at publication of the article, Happy Cog used the phone pad or nine square icon for menus, while Sony used a [my opinion: pretty intuitive] "MENU +" button, which explicitly states the action a user will experience.

Beware of drop-down menus though:

Icons vs. Dropdown for primary mobile navigation

And there's also the [my opinion: not-so-great] use of the "open nav icon" with a small arrow on the bottom right. The problem with this is that it may sit on the same page that has other "open nav icons" without the arrow, possibly causing confusion. This may suggest that you either stick with the standard "open nav icon" as is, or go with something largely different/unique.

A good ux question for the future and are there answers from the past:

When something becomes so ubiquitous will all users eventually come around to understanding its meaning?

For more info, try this article:

http://adactio.com/journal/5666/

Another interesting topic: can we come up with a definitive name for this icon? I've been using the term "open nav icon," because it says what it is, but I've seen "Trigram for Heavan" ("Trigram" for short), "Identical to" icon, and a variety of "three line..." names.

Chinese trigram for sky (or heaven) The unicode character ☰ ☰ (U+2630) http://www.fileformat.info/info/unicode/char/2630/index.htm

'IDENTICAL TO' The unicode character ☰ ≡ (U+2261) http://www.fileformat.info/info/unicode/char/2261/index.htm

An image can obviously be used to represent the icon.

share|improve this answer
    
I think it's fairly unanimously called the hamburger icon. Obviously, "Trigram for Heaven" is specific to a culture and there are many identity symbols. –  Brendon Oct 7 '13 at 21:40
add comment

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.