An (ICON)ic Story Of HAMBURGER and MENU

The Definitive History of Hamburger and Menu

Now tell me,

What is worth a thousand words? A picture? Exactly!

Beyond question, this statement became voguish when the editor Tess Flanders was discussing ‘journalism and publicity’ in a 1911’s newspaper article.

Now, this concise statement could be more relevant to the icons that we use on our websites. And when the icon ‘Hamburger’ was launched, it was new, yet omnipresent because of its name linked to a popular food item.

In the midst of all these naming sport, Geoff Alday reached out to Norm Cox, the designer of this nameless visual nugget to know more about it.

He also told him an in-joke about Hamburger icon…

On and on, when this icon started coming up on screens for real, consumers felt distraught. They weren’t sure of what it meant and what they were supposed to do with it — the three bold lines!

Later, some of the designers and developers came forward with the idea of running A/B tests to solve this uncertainty.

“Finally, A/B tests showed them how much users engaged with the new Hamburger icon.”

The results seemed a shocker! That, bordered Hamburger (aka sandwich) was not even recognized well as we first thought.

This article will do the heavy lifting for us collating the ideas of when to use icons and when the written words will best suit our need.

And if you want to know more about Hamburger, refer the study done by theatlantic.com. It will explain to you why this design choice didn’t actually make any sense.

Icons — To cope with space reduction

The reason why most of the designers choose icons over text is: Icons need less space.

And this has risen to the top of the designer’s priority list as mobile screens are becoming smaller day by day also the responsive designs are gaining larger traction rapidly.

As a fact, Google has recently updated its application to make more use of icons. They mean, that icons are one of the most legible ways to represent a status or influence an action.

Also, their reasons for focusing on iconography comes with a lot of sense because icons are instinctive and small and with mobile devices and their shrinking screen size, on-screen real estate has become a costly asset!

Google, in specific, creates simple icons because light and legible icons are easy to understand and adapt.

Simple icons require very less learning. But looking at the other side of the spectrum, larger ones are immensely valuable in niche situations but their learning curve is lengthy that they require ages for becoming a no-brainer.

In cases where companies like Microsoft want their newbies to learn about their product quickly, they include text instead of icons while other companies spend time training their users to recognize their new and unusual icons.

Texts — For clarity

In spite of icons’ convenient size, some of the designers think that icons are not an effective mode of communicating with users.

Among other issues, the meaning of icons can vary based on one’s culture. Sometimes they carry no meaning at all whatsoever. This, of course, is one of the major usability issues.

Along with other designing myths, one very prevalent and disproven myth is “icons enhance usability.”

Let’s see what the expert panel of UXMYTHS.COM thinks of icons…

Considering the speed with which we are developing features nowadays, we are seeing plenty of features coming in and going out (growing old), while some of the icons’ style or meaning change over time.

Our world is getting smaller and issues like “check box” can have the major impact too.

“Hence it is always important to have ‘context’ as the key while designing”

Of course, we understand the consequence of using texts in an international application. The language barrier complications are so high in such cases that the usage of icons or symbols is to be made mandatory here.

However, when creating applications for local or single culture, with diversified age groups and technical abilities, texts are often the best choice.

Many applications pick the most important functionality and mark it with texts instead of creating an icon for each.

“Companies provide text for their significant functionality instead of icons.”

Despite the fact that, good designs never come without a good deal of research, I am listing some of my suggestions for you to start along with some educating posts.

• Use icons whenever necessary
• For desktop/apps, make the icons slowly animating on hover
• Make the icons easy to locate
• Show labels initially

Research by Aiga.org about symbol signs.

Research by design.tutsplus.com about the history of computer icons.

Research by gizmodo.com about founding HAMBURGER icon.

Thank me for not boring you 😉 (you could pretend at least!)