Quick test. Don’t worry it’s easy.

Take a look at the image below and see if you are able to correctly identify what each icon is supposed to represent. Scroll down to see the correct answers. Be honest and no cheating.

How’d you do? If you’re like me I’m guessing not well.

The problem with icons is people associate different things with each icon based on their past experience.

But wait, I have a solution, hell I have two

1. Use a rollover or alt text to explain what each icon means.
2. Add a legend or key to explain which is icon means.

These are workarounds and are not real solutions. Reason is each solution relies on the site visitor caring enough to figure out what the icons mean. The first actually takes effort for the user to move the mouse, position the cursor just so and then, if using alt text, wait for the text to display. The second increases the cognitive load of the visitor and adds a fairly significant degree of friction. To use use a legend the user must first think to look for a legend (remember we looking at a website and not a map), then scan back to the icon, take a glance, remember then icon, scan back to the legend, and then find the matching icon and description.

In both solutions the effort seems to outweigh the actual value the icon is trying to provide. I believe there is a much better way to use icons.

The correct way to use icons

• Use icons to show differences
• Use icons to show the unique characteristics of products; not every characteristic
• Icons should be used when it helps the visitor make a decision when choosing between multiple
  products (a way of narrowing selection)

Remember when using icons:

• Label and image is better than just one or the other (image or text). However, if using only one text works better than just the image.
• Icon images will be learned, the position of the icon is learned quicker. If you change the image, but the location remains the same , visitors usually won’t notice. However, if you change the the location and keep the image the same visitors will become frustrated.
• The speed the average visitor will recognize an icon’s meaning from the image alone is directly proportional to how quickly the team can decide on which icon to use. Meaning, things that are obvious to a designer (i.e. question mark for help) are more likely to be obvious to a visitor but things that aren’t as obvious, say maybe return policy, are more difficult to understand.

If you would like to better understand how icons will help or hurt your website drop me a line or check out the website review service for an affordable website review.