There’s no denying that icons are a huge part of your company’s brand. People recognize images faster than text, and in most cases, your company’s logo (icon) will be the first thing that pops into a customer’s mind when they think of your company.
Icons are great for brand recognition, and they’re a good way to give your audience subtle visual clues about what to expect from your brand. So, with these benefits in mind, doesn’t it make sense to incorporate more iconography throughout your website?
Not necessarily.
The Drawbacks of Icons
People recognize a brand’s logo before anything else. It doesn’t matter what kind of website branding, layout, theme, or voice you have; when users think of your company, they think of the icon you’ve chosen to represent your company.
But what happens if the user doesn’t understand what your icon means? Or worse yet, what if they misinterpret it and think your company is something that it isn’t?
Misunderstandings Happen
This is the biggest issue with icons, logos, and other visual tokens. As non-written forms of communication, they’re dependent on shared meaning and context.
To put that another way, unlike the written word, visual cues are subliminal; we aren’t being told that John Deere specializes in agriculture, but we can easily infer it from their use of woodsy, green colors and the image of a leaping buck.
This makes sense in our U.S. culture, where green represents nature, new life, and luck. But cross the equator into South America, and the meaning of green changes to a representation of death. In this region, those unfamiliar with John Deere might have a completely different perception of the brand than their U.S. counterparts.
But the problems aren’t limited to color choice or cross-cultural misinterpretations. Icons are entirely reliant on an agreed-upon understanding between creator and viewer. If this understanding isn’t there, the icon fails—even when the audience is right and all the design considerations are correct.
Jalopnik published a great article on this issue, dubbed “email and bacon”—a collection of examples showing how users can easily misinterpret vehicle icons, even when they’re placed in the appropriate context.
Of course, these are mostly jokes, but they highlight an important point: When you use icons instead of text in your design, you’re going out on a limb. There’s no guarantee that your viewers will understand what they mean. And in website design, this ambiguity can be a serious detriment to the UX.
Iconography In Web Design
Logos are one thing, but what about the icons we use in website layouts every day?
- Stacked “hamburger” icons to indicate a menu;
- Magnifying glasses that represent either search or zoom;
- Speech bubbles signifying a live chat window;
- Shield images that signal your site is protected by antivirus software.
The examples are endless. And this isn’t a bad thing! Each of the above examples has become a staple in web design for one reason: They’re easy to understand. They do their job at conveying information, and they do it well. Plus, icons support a minimalist approach to design where developers can show instead of tell—a great goal for most websites.
But as we’ve described above, you can certainly have too much of a good thing. When used too often without the right supporting elements to back them up, icons can create ambiguity in viewers’ minds and turn them off from the browsing experience.
What kind of supporting elements do we mean?
Text is certainly an option—but it’s a bit counterproductive to use both at once. Instead, we recommend designing your layout to support your icons via context and visual clues.
For example, a magnifying glass icon on its own might be enough to indicate to users that it’s a search field—but why not make it ironclad by placing it in a form field?
Along the same lines, it’s fine to include a speech bubble on your page as a way to let users access live chat—but you need to be careful about its placement. Most users expect such chat windows to live in the bottom-right corner of the window. By reinforcing this practice, you’re sending a different kind of message and playing into your audience’s expectations of where site elements should be.
(Incidentally, this is a huge component in building a good visual hierarchy on your site, but that’s a conversation for another day.)
Iconic Web Design: Yea or Nay?
We’ve been a little down on icons in this piece, but only because there are only so many ways to say that “icons work.” Icons add clear, identifiable visual elements to your layouts and help declutter your limited webpage real estate.
But hopefully, we’ve outlined why you should think twice before blindly applying them to your layout. They’re helpful tools, but like any tool, they need to be used strategically. The best icon-based web design is built by a cohesive site layout that supports each of its elements and reduces confusion in readers’ minds. It’s not the easiest goal out there—but if you want to keep your readers engaged, it’s a necessary one.
