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.

  • 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, 2013 at 16:21
  • Had the same experience with older people, adding an icon label like 'menu' solved that.
    – Volker E.
    Oct 6, 2013 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, 2013 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, 2013 at 12:58
  • @AsafBO thank you very much, good article with interesting links!
    – Andreas Ka
    Oct 6, 2013 at 12:58

1 Answer 1


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:


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:


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.

  • 1
    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, 2013 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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