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 was discussing ‘ ’ in a 1911’s newspaper article. Tess Flanders journalism and publicity Now, this concise statement could be more relevant to the that we use on our websites. And when the icon was launched, it was new, yet omnipresent because of its name linked to a popular food item. icons ‘ Hamburger ’ In the midst of all these naming sport, reached out to , the designer of this nameless visual nugget to know more about it. Geoff Alday Norm Cox He also told him an about Hamburger icon… in-joke 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 to solve this uncertainty. A/B tests “Finally, A/B tests showed them how much users engaged with the new Hamburger icon.” The results seemed a shocker! That, Hamburger (aka sandwich) was not even recognized well as we first thought. bordered 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 . It will explain to you why this design choice didn’t actually make any sense. theatlantic.com 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 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! iconography 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 thinks of icons… UXMYTHS.COM 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 “ ” can have the major impact too. check box “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 whenever necessary icons For desktop/apps, make the icons slowly animating on hover Make the icons easy to locate Show initially labels Research by about symbol signs. Aiga.org Research by about the history of computer icons. design.tutsplus.com Research by about founding HAMBURGER icon. gizmodo.com Thank me for not boring you 😉 (you could pretend at least!)

Google

Microsoft

List Of Performance Monitoring Tools

How To Deep Personalize Without Annoying Your Users

Read My Stories

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

An (ICON)ic Story Of HAMBURGER and MENU

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Skills We All Need To Thrive In The AI Driven Future

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

3 Skills We All Need To Thrive In The AI Driven Future

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps