Message ambiguity and why words (still) matter
Use your words
People process visuals faster than they do text, especially when they already know the visuals’ meanings.
But can you rely on a single icon to convey the same message to everyone? In many cases, words will clarify an icon’s message and give people confidence in the results of their interactions. That increased confidence can result in significant positive boosts to key metrics.
So while icons may be faster, words are more reliable. And they work even better together!
Increasingly, user interface designers combine icons and words. It’s a minor sacrifice. The hamburger icons, which has practically become famous due to its lack of clarity, suddenly comes into sharp focus with the word “Menu” below it.
Avoid the vogue
Vogue icons, by definition, aren’t here to stay. They’re fun to use for short-lived projects, but for applications that expect a long shelf life, you’ll want to stick to the classics.
In Hollow Icons, Aubrey Johnson explains his reactions when he was asked to a review a peer’s mobile designs.
The app looked pretty great overall, but some of the design was following the lead that iOS7 created precedent with. They were designing to ‘fit in’ on the platform.
As Johnson argues later, despite the trendiness of thin-line icons, they’re actually the inferior choice compared to filled icons. Designers should be wary of being in vogue when usability is sacrificed.
If your icons seem too situationally specific, then challenge yourself to find a better solution for your designs.
The classics became the classics because of their timelessness and consistent use. And that consistent use has created the familiarity we’re looking for. We know them. We’ve interacted with them. We know what results to expect.
Vogue icons lack recognizability, and that’s a critical element in setting a user’s expectations.
Nine times out of 10, if an icon needs to be explained, it’s already failing. Familiarity arises from repetition, and deviations can result in confusion or a bad UX.
Avoid letting an icon pull all the weight by using other design elements to clarify its meaning.
For example, to reinforce that your magnifying glass icon stands for search and not zoom, place it within a text-input field. That way, people are primed to recognize the search tool via the icon, and that priming gets reinforced by the presence of the search bar, whether expanded or shrunk.
Here’s an example of an expanding search bar design that uses the magnifying glass supported by a subtle interaction. The preview of the search bar nails down the meaning of the magnifying glass, in this context, as the search icon.
How can we improve?
Use sparingly, and thoughtfully
Icons shouldn’t always be your go-to solution, despite their efficiency.
Instead, intelligent design solutions can reinforce your icons’ message and increase user engagement. Take the current trend in top websites as example: they’re shifting away from a single hamburger menu icon to represent top-level navigation and instead implementing an icon hierarchy. The new layout promotes the most popular pages as icons, increasing familiarity, and reducing the reliance on one ambiguous menu icon.
Facebook really championed this shift to the “tab bar” navigation when they redesigned their menu layout in 2013 to better reflect how people use the Facebook app.
Stick to convention
Tread carefully and always be aware of the implications of using unfamiliar icons — any deviations from accepted norms should be intentional, i.e., designed to take advantage of the abnormal meaning or usage.
Icons that uphold conventions will be more easily recognized by a larger user base, thus helping people interact with your icons with more confidence.
Design a meaningful context
Like language, icons gain meaning through their context. So reinforce your icons with good design that creates a context for the icon to shine in.
For example, an arrow at the right edge of a digital book could mean anything, but given its placement, people will probably get that the arrow will turn to the next page.
Note that this example is fairly low-risk (a user can easily get back to the previous page if they didn’t mean to move on yet), making it a good place for experimentation. A more high-risk scenario, such as posting a status update on social media or sending an email, would be a poor place to try something new.
Be intentional and deliberate with your icons, support them with words when needed, and be as inclusive as possible. In addition, design your icons’ context to reinforce their meaning.
Never forget that a successful icon is built on widespread recognition and a concrete, consistent message. With that in mind, you can't go wrong.