responsive menu logo

Question

often times a menu bar on a responsive website turns into this three line logo:

☰

i'm curious as to why this symbol has been thoroughly adopted. why aren't words such as "Menu" or "Navigation" used more often? is there research that this 3-line metaphor has any benefit of use in place of the verbal metaphor or other visual metaphors that represent menus?

possible duplicate of What is this side menu called that can be found in many multi-touch apps, and where does it originate from? — , May 15 '14 at 04:41
I wouldn't say this is a duplicate. This is asking specifically about the 'ellipsis' or 'hamburger' icon used to open the menu, which is not present in any of the screenshots on that other question. — dsample, May 15 '14 at 05:41

score 4 · Answer 1 · edited Apr 13 '17 at 12:32

That is the "hamburger menu" and it appears that it has a history dating back as far as the 1980s.

According to the article it was designed my Norm Cox, designer behind the Xerox "Star" interface. In his own words:

I designed that symbol many years ago as a "container" for contextual menu choices. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.

The icon is designed to be reminiscent of a menu or stack of possible options.

In this related question, but the accepted answer suggests that it made a resurgence in an old twitter app, before being picked up by the Facebook app where it got wide exposure.

thanks for the resources Lego Stormtroopr. i hadn't known it was called a "hamburger" icon or its history. it makes more sense now that I've seen the links you provided. i still wonder if the icon has been compared to verbal metaphors in our newer computer systems — sheriff1, May 15 '14 at 10:59

score 2 · Accepted Answer · answered May 15 '14 at 12:47

You're curious about why we don't use the word 'Menu' instead of this drawer icon (hamburger for aficionados) and you're right.

This icon is becoming more and more used, but I don't think it is a standard yet (even if less and less confidential).

I found this link A/B Testing hamburger vs. other icons that will provide you more insights about your questions.

The outcome of this study: a bordered 'MENU' button is still more understandable than this hamburger icon.

exactamundo. thanks for finding this, exactly what I was looking for — sheriff1, May 15 '14 at 20:24

responsive menu logo

2 Answers2

Linked