The hamburger icon is, undoubtedly, number one in showing hidden menus. Do you go on social media at least once a day? If you do, you should be acquainted with it by now. Even if you don’t understand it or notice it – it’s so ubiquitous that no matter whether you go to check news or new posts on your apps, desktop sites or mobile ones, it’s probably already there.
Although the icon itself has been getting, gradually, more and more popular for the last few years, it’s not anything new. It was designed in the 80’s by Norm Cox, who is now a co-founder and the president of the design company Cox&Hall, founded in 1983. But before he set up his own company, he’d worked as a designer in Xerox and that is where we can look for the beginning of the infamous hamburger icon.
What is the story behind the hamburger icon?
Norm Cox: Back in the late 1970s and early 1980s, I worked at Xerox PARC, as the designer for the first graphical user interface – the Xerox “Star”. At the time, the display was a simple black and white CRT. Resolution was only 72 pixels per inch, so every pixel was important, and each was carefully considered. The coarse resolution tended to dictate very simple designs for all the images.
In the “Star” GUI, the window headers contained two lines of “objects”. The top line contained the title of the window. The second line contained a series of command buttons to control the window. At the right of this line of buttons was the infamous “hamburger” icon button, containing additional options for the context of the window.
But why this icon? Why this design?
Norm Cox: There was a need for a symbol to represent this container, and only two symbols were considered (if I remember correctly). One symbol was a downward pointing arrow in the shape of a triangle, representing the direction that the resulting menu would appear. We decided that this symbol tended to be interpreted too often as a pointer, or directional instruction like “go here”, or “look here”.
The other symbol was the three line “hamburger” image, representing the look of stacked command buttons. There was never a question as to how many lines, since 2 lines looked like an “equal” sign, and 4 lines were visually too many. Three lines were the perfect number. The only other design consideration was whether to have the lines vary in length, to further mimic the varying width of the stacked buttons. We decided that the consistent length lines were less distracting, and more purposeful design.
Some people say that the icon is ambiguous. Do you think, nowadays, when the icon is almost everywhere, not understanding it may be justified?
Norm Cox: We knew when we designed the symbol that it would not be necessarily intuitive to users, who were about to be introduced to this new, digital “desktop”. Our intention was to make it easily described and a visually logical design, and therefore “memorable”. The simple design “made sense” to users, and became a quickly recognizable image to represent “more options” and a de facto visual standard for hidden menus. The symbol’s longevity (since 1980) is a testament to its simplicity, utility, learnability and memorability. While it may not be as intuitive as other symbols (like the document icon with the folded corner that I designed at the same time), there is no such thing as a perfect symbol to fit all users. About the best we can hope for is a sensible, logical and learnable symbol that becomes a part of our digital language and subconscious.
The hamburger icon is a topic that appears on numerous IT blogs and one may say it’s considered, for some reason, controversial. The popularity of the icon started in 2010 when it was introduced on Facebook. Lots of people still find it incomprehesible, but its increasing popularity and the fact that IT journalists write whole articles about it, may just be the chance it needs to, finally, become understandable. There’s only one thing that seems ridiculous – all that hatred does not go hand-in-hand with alternative icon propositions, so what can we change it for? Exis Web ran AB tests to see whether it’s the hamburger icon or its variations that are more comprehensible for their customers. As it turned out the best results and coversion got a word MENU with a border. On the other hand, Booking.com also ran those tests and there was no significant change in customer interaction. There’s only one thing to remember that should keep you going: Always be testing.
This post was originally published on ActiveMobi.