The Problem With Icons
Estimated reading time: 2 minutes, 21 seconds
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.
Share This Post
[...] The Problem With Icons Share and Enjoy: [...]
[...] The Problem With Icons January 17th 2010 3:03am Quick test Don8217t worry it8217s 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 How8217d you do If you8217re like me I8217m guessing not well The problem with icons is From: http://www.smallfarmdesign.com [...]
I found this blog on digg.com social bookmarking site. I liked it and gave you a fave! By the way I also really like your blog theme! Did you create it yourself or can I download it from somehwere?
Nice site I use ncubedigital.com for all of my Web Design and I would definitly recommend them to anyone looking for a excellent web design company. I can honestly say that I have never dealt with a company in the industry so ready to answer a phone or an email and give great help.
Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share.
[...] This post was mentioned on Twitter by Nicolò Volpato, Vasil Yordanov. Vasil Yordanov said: The problem with icons: http://bit.ly/cWiPHF [...]
Art on the Avenue, thorns, this is a good thing, most people discouraged, strong-willed exception
[...] The Problem With Icons的文章裡提供了一個很好的例子，到底多難猜到沒有文字標籤的icon的含義。 [...]
I LOVE how this is about how icons alone simply aren’t enough, and yet even this article is followed by five unlabelled icons.
Genius.
I was wondering the same thing as the previous commenter: what about social media icons? I believe most know about Facebook, but Delicious and Digg..?
In your toolbar, I expect the average user, quickly scanning top to bottom (from the article to the comments) to ignore the social media toolbar if he’s not familiar with Delicious and Digg.
I agree with both you and Richard. As with everything there are trade-offs. In this case I wanted to experiment with social icons but didn’t want to spend a lot of time so I opted for a plug in that would allow me to get something up and running.
I’ve been debating about just taking them off. I don’t see them getting much use, maybe because they don’t know what they are.
[...] The Problem With Icons Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計，讓這個世界變得更美好。 [...]
A pleasant surprise, it occurs seldom, but the following we can speak of a real bonus value towards person who reads.