An Icon is Worth 1,000 Words

Icons are all around us, telling us when we have email, what button will save a draft, and where to find a site's navigation. There are plenty of icon options available; the trick is to identify when to use specific types of icons. This week, Marli Mesibov brings together a number of icon resources and revelations.

A picture is worth one thousand words. This aphorism means even more when we apply it to icons: save, open, and print are just a few of the many actions we associate with a simply sketched image. The “hamburger” menu icon is newer to the icon family, and yet it is now nearly as ubiquitous as its namesake food. Yet when UX designer James Foster conducted a series of A/B tests, he found it suffered in clarity compared to the simple word “menu.”

James Foster began A/B testing to satisfy his curiosity: would the full hamburger test better than the simple “three lines” menu icon? It did. He then compared the full hamburger to the word “menu” surrounded by a border, and that tested even better – 12.9% better. The test led him to the conclusion that the hamburger icon is not as universally understood as a square button—like box with the name of the item.

For those of us with less time on our hands, we can’t spend days running A/B tests on every icon and word combination. Even if we could, the tests alone might not provide a clear answer; plenty of designers and developers have struggled over whether icons or text are “better” with no clear decision. This article will do the heavy lifting for us, compiling research on when icons are the better choice, and when the written word will best suit our needs.

Icons for space constraints

The primary reason a designer might choose icons rather than text is simple: icons take up less space. This has risen to the top of the priority list for many designers as our screens and devices get smaller, and responsive design gains traction.

Google is one of the largest companies to have recently updated their applications to make more use of icons. In their developer guide, they include an explanation. They state that an icon is a “quick, intuitive representation of an action, a status, or an app.” They go on to provide advice for ensuring that icons will be legible across myriad devices, such as using vector images and designing the images on a large art board. Their reasons for supporting iconography are clear; icons are intuitive, and they are small, both of which are valuable assets on the growing number of mobile devices with limited screen space.

Google creates applications used the world over, and they create simplistic icons to reduce the need for a learning curve. On the other side of the spectrum, more complex icons have value in very niche situations – but accordingly, these more complex icons will have a longer learning curve. A company like Microsoft needs beginner users to immediately understand an icon’s meaning, and therefore might include text in addition to an icon. Other companies with internal applications will go so far as to train users to recognize new or unusual icons. A learning curve is not a negative thing in this situation, and even more so if the trade off is to communicate complex ideas in a limited space.

With all this in mind, icons are best used for the following situations:

  • Companies with time to train employees on icon meanings
  • International applications where language barriers preclude the use of text
  • The very young and not yet literate, which are becoming a common tablet audience
  • Small screen spaces requiring multiple and complex buttons

Words for simplicity

In spite of their convenient size, many designers have found that icons are not the most effective communication tool. Among other issues, icons can have different meanings for different cultures, and sometimes no meaning whatsoever – a true usability problem. UX Myths counts “icons enhance usability” as one of their disproven myths. They said:

“Many researchers have shown that icons are hard to memorize and are often highly inefficient. The Microsoft Outlook toolbar is a good example: the former icon—only toolbar had poor usability and changing the icons and their positioning didn’t help much. What did help was the introduction of text labels next to the icons. It immediately fixed the usability issues and people started to use the toolbar.”
UX Myths, “Myth #13: Icons Enhance Usability

Part of the issue with icons is the speed with which we are developing new features. Popular icons may go out of style, or the image may change meaning over time. In addition, the world is getting smaller, and different cultures recognize icons to mean different things. Something as simple as a check mark means “correct” in Britain, but “incorrect” in Sweden. In America, a red check mark is seen as a negative, and is oftentimes used in classrooms to mark incorrect test answers. A green or black check mark however, can be neutral, such as on the 1040 tax forms. Meanwhile, an “X” in America often denotes wrong, the opposite of the check mark, but if it can also be a neutral sign just like the check mark when designating something as complete or chosen – consider the customs forms for entering the United States, which use an “X” to identify where to sign.

Taxes

The key here is context. Obviously, using text for an international application will suffer from language barrier complications, so text is not necessarily preferable to icons. However, when creating applications for a single culture with diverse age ranges and technical abilities, text is often the best choice. For example, most computers now use icons for basic functionality, but include roll over text for older users. Many applications also choose the most important functionality and provide text instead of icons for those 5—10 buttons.

With this in mind, text or text and image together is likely the best choice for the following situations:

  • Applications used by multiple cultures with different meanings for iconography
  • Older or less technically savvy audiences
  • Applications with a few very important actions or buttons
  • Applications needing a very fast learning curve

Resources

Although good design never comes without a good deal of research, these resources provide a head start into the complex realm of intuitive icons.

Icons vs. Labels vs. Both Edward Sanchez divides icons into three categories: the representational, the abstract, and the semi–abstract. In this article he reviews important considerations when choosing one icon style over another, and he delves into some of the research surrounding the icon/label debate. In addition, he digs into specific situations where each style is best used. In short, if my article is helpful, Edward’s may provide additionally valuable details.

Seven Ways to Test the Effectiveness of Icons Jeff Sauro hits upon the single biggest arbiter of success when using icons: how well does the icon convey its meaning? In this article he suggests seven testing methods to determine whether an icon is successful. They range from the simple, such as asking a participant to look at an in–context icon and state what it means, to the complex, such as a usability test where the user will only be able to complete the action if the icon successfully guides him.

Who Designed the Hamburger Icon? Kelsey Campbell–Dollaghan doesn’t have the answer to whether or not the hamburger icon is always the best choice, but this is the article to read for anyone wondering how the hamburger icon came to be. Kelsey tracked down Norm Cox, and asked the question we’ve all been wondering: how did three lines in a square come to mean “menu?”

Know Your Icons Part 1 – A Brief History of Computer Icons LoungeKat, an author on Tutsplus, provides a full history of how and why computer icons came to be. This article is accompanied by Part 2 – Modern Icon Design, which is less modern now (it’s 4 years old). But history is still history, so part 1 is the right article for anyone looking to learn from the past to make a better iconographic future.

AIGA Symbol Signs The American Institute of Graphic Arts has compiled a full library of internationally recognized icons. All icons are available for free download through the Noun project, which is an even larger library, though not all of the Noun project’s icons are necessarily internationally–recognized.

The International Organization for Standardization offers another such compilation of internationally recognized icons. Their PDF explains the use of each icon along with cartoons to illustrate. However, the ISO does not provide a library; rather, this PDF is intended to inspire and educate.

Iconography gets to the heart of what UX designers live and breathe: they can make or break the usability of an interface. It therefore stands to reason that their use is context–specific. Like every other area of user experience design, icons are best suited for the target audiences that will most profit from their use. It’s up to us as communicators, designers, and creators to identify those audiences and get the most out of our icons.

This post’s lead image copyright MarcelaPalma

About the Author

Marli Mesibov

Marli is a content strategist with a love of education and games. Her work spans game design, web applications, and mobile. Marli can also be found on Twitter, where she shares thoughts on UX Design, literature, and Muppets.

Related Articles

11 Comments

  • Ritesh Reply

    Nobody claimed it to be new. In fact it even says in the article. Check out the hyperlink in the article
    “Who Designed the Hamburger Icon”

  • Mike Reply

    Google has failed with this area in the past:

    http://www.takadesigns.com/blog/2012/05/07/usability-when-icons-fail/

    Microsoft also had usability issues when developing the toolbar for Office:

    “In the end, one change caused a total turnaround: labeling the important toolbar buttons. Almost immediately, the toolbars were a big hit and everyone at all skill levels starting using them.”

  • Maciej Fita Reply

    Personally I really like the use of icons. The internet is much more visual then in the past and good quality imagery can hold a lot of weight. In my opinion, creative icons are more aesthetically pleasing as well than just text.

  • Noz Urbina Reply

    I think this is an interesting example of when we get a bit out of touch due to the circles we move in. I have literally never noticed or heard of The ““hamburger” menu icon”, so I find it natural that it would suffer in comparison to the world “menu”. Digital workers live in a hyper-digital world and it’s a bit of a saddening thing to remind outselves just how much of a walled garden it can be.

    When I was trouble-shooting with my mom and I said “Click on the WIFI icon” she said, “Which is that?” [I indicate by location] “You mean the picture of the fan. Got it.”

    My mom is a highly digital lady, especially for her age. She once said she can barely imagine life without her computer. Still, that icon just didn’t mean anything to her.

  • Noz Urbina Reply

    PS – I now realise what you mean by “Hamburger” menu icon. I’ve never heard the slang for it… don’t I look clever now. Still, it was a good story about my mom. And, although I realise that this icon is definitely something I have seen. I have seen people suffer with it right in front of me, so it’s definitely taking it’s time to percolate through society. That part of my comment stands.

    Generally speaking, I’d like to add that I find icons fantastic when used *sparingly*. Looking at the interfaces of Gmail and Skype, the gradular replacement of text with icons has only brought frustration to every user I know.

    It is hard for an icon to become truly ubiquitous (hamburger ubiquitous) and I think icon design is one of the most black magic arts I know in digital. I appreciate good ones, but they’re so hard to get right that, often, the illusion that they’re “simpler” or more modern makes teams go overboard when simply writing “menu” would suffice.

    PPS – I notice that the “Wifi icon” and the RSS icon are the same. Wifi is more often vertical vs RSS diagonal, but there are definitely many instances of Wifi on a diagonal. That hardly helps usability.

  • Marli Mesibov Reply

    Good point Noz! I’m keeping my eye out now for other icons that are used for double meanings. I worry that there’s no way around it – icons are similar to any other “language,” in that it will continue to exist in a variety of dialects.

  • Clinton Dixson Reply

    I’ve always favoured text overs icons. It follows that golden KISS method of design. Where possible, I like to do both together. That feels like a nice merger between icon or text.

  • Fragweb Develop Reply

    Might start to use it in the future. That is something to think about indeed. Great article.

    Although might be compatibility programs in some cases.

  • Marie-Louise Flacke Reply

    Excellent point Noz!
    IMHO an icon is NOT worth 1,000 words. Check “Warnings and Risk Communication” by Michael Wogalter, page 159 (talking about the well-known symbol of a pregnant woman together with the forbidden circle symbol) :

    “the warning symbol is meant to indicate that a drug for severe acne should not be taken by pregnant woman. Some women have apparently interpreted this symbol to mean that the drug acts as a contraceptive, illustrating a critical confusion”

  • Pixelpants Reply

    Interesting article, and equally interesting debate. Let me share some insights. My partner is both colourblind and dyslexic. He recently reviewed something I’d been working on and gave it a terrible critique (from the viewpoint of his disabilities). The reason – because the app used text-only labels for opposite actions – “submitted” and “unsubmitted”. He found these two 1) hard to read and 2) difficult to distinguish. His insight has helped to design a revised UI incorporate clearer language *and* icons to support the meaning of the action. I think it just goes to show that can you simply can’t rely on your own insights or experience – you absolutely must conduct usability testing and take heed – even if folk really don’t like your dribbble-worthy icon ;-)

Leave a Comment on This Article