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 constraintsThe 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 simplicityIn 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.
- 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