When it comes to icons, these visuals that constantly surround us, we automatically connect messages to them. Stop signs tell us to stop, speed limit signs tell us how fast we can go and so on. Icons on a website are very similar, these image shortcuts convey a message. Websites sometimes use icons instead of text because the goal is to be concise and to the point. Icons can create simplicity, they’re easily configurated, moved, and applied. However, sometimes icons can be used in the wrong way, causing a poor user experience. When used in the right manner, though, these icons are subtle impressions that go a long way.
Icons stand out to the viewer and drive attention from one part of the page to another. For example, a call-to-action like the telephone icon quite obviously tells a site visitor that they can call the business. The phone icon naturally translates to, “Call our company now!” You can convey a whole message in one simple image, but our official recommendation is to stick with universal icons for important actions on your site. Which ones? We thought you might ask that.
- House icon for the Homepage tab
- Map icon for the Map tab
- Envelope icon for the Contact tab
- Wrench for the Schedule Service tab
Steer clear from unconventional icons like unconventional phones, nonstandard printer icons, engine or gears (assumed service and or parts), checkmarks (assumed certifications), ribbons (assumed awards), thumbs ups (assumed reviews), chairs (assumed staff), magnifying glass (assumed unknown search) or head or brain (assumed research).
Pair Your Icons with Text
Now, this next part is very important. What can be an obvious association to one type of business can be a completely different meaning for another. This is why you always want to include text with an icon. Fewer things are more frustrating than clicking something, only to find out it wasn’t what you thought.
True, people often process visuals faster than they do text, but you don’t want to rely on a single icon to convey the same message to everyone. On mobile, you get even less of an opportunity to impress, so our own data-driven research recommends dropping icons all together and sticking to text. Icons might be faster, but words are more reliable, at least for mobile.
As for the color scheme for your icons, contrast is all that matters when it comes to icons. As for the color scheme for your icons, contrast is all that matters when it comes to icons. Just make sure it’s a good fit for your aesthetic too.
Overall, make sure your icons are consistent and that they convey a distinct message within seconds. Keep your icons simple and conventional so as not to confuse the reader. Double-check that your icons have widespread recognition and always include text besides your icon to avoid message ambiguity.
And keep in mind that these icons are ubiquitous among car dealerships. Like I said earlier, images sometimes have different meanings. A wrench on a retail site probably means “account settings,” which is why it’s crucial that you stick with universal icons. Getting too creative with it may seem like a good idea, but it ends up creating a confusing user experience. And what do people do when they’re confused about what to do on your site? They usually just leave.
Recap: Don’t lose clicks because your visitors are confused, use brilliant icons that are universally recognized, well-placed, and paired with text.
Join the discussion One Comment
All good points here. The only one I’d disagree with is the gear. So many apps, sites, and programs use a gear icon to mean “settings” that I don’t think you can justify using it as anything else, even on a car-related site. That doesn’t mean you have to avoid it, though.