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.

23 Responses to “The Problem With Icons”

  1. ICONS PB | The African Art Store

    [...] The Problem With Icons Share and Enjoy: [...]

    10:25 pm on 12/30/09
  2. The Problem With Icons [ Small Farm Design ]

    [...] 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 [...]

    10:36 pm on 1/17/10
  3. Andrew Pelt

    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?

    5:03 pm on 4/12/10
  4. Web Design Manchester

    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.

    7:45 am on 4/17/10
  5. Calgary Tutor

    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.

    4:15 pm on 5/4/10
  6. Tweets that mention A Website That use Icons Incorrectly Will Have Problems | Small Farm Design -- Topsy.com

    [...] This post was mentioned on Twitter by Nicolò Volpato, Vasil Yordanov. Vasil Yordanov said: The problem with icons: http://bit.ly/cWiPHF [...]

    6:30 am on 6/24/10
  7. Tiffany Outlet

    Art on the Avenue, thorns, this is a good thing, most people discouraged, strong-willed exception

    7:52 pm on 11/8/12
  8. 迷思#13:icon可以增強易用性 | HPX Party

    [...] The Problem With Icons的文章裡提供了一個很好的例子,到底多難猜到沒有文字標籤的icon的含義。 [...]

    6:31 am on 11/17/12
  9. Richard

    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.

    11:28 pm on 11/17/12
  10. Michael

    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.

    9:37 am on 1/6/13
  11. Craig

    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.

    4:57 pm on 1/6/13
  12. 【Desiring Clicks 專欄】你知道怎麼設計功能圖示嗎? | TechOrange《 創新與應用 |

    [...] The Problem With Icons Desiring Clicks 是一個專門介紹使用者介面、使用者經驗、視覺設計、資訊架構和網路行為的網誌。歡迎你一起參與介面設計,讓這個世界變得更美好。 [...]

    5:26 am on 1/17/13
  13. Sago

    A pleasant surprise, it occurs seldom, but the following we can speak of a real bonus value towards person who reads.

    3:26 am on 4/19/13
  14. Simon

    I also chuckled about the ironic social icons. :D
    I think they must be some sort of exception: People have to be previously using the service to know what they are, anyway.
    For me, those icons look like the ticket to some exclusive club I don’t care enough to join.

    3:29 pm on 1/27/14
  15. Simon

    To add to my off-topic comment: Nice article! This is an important piece of information. Nice side border too.

    3:31 pm on 1/27/14
  16. Tatli Tarifleri

    To add to my off-topic comment: Nice article! This is an important piece of information. Nice side border too.
    Tatli Tarifleri

    2:15 pm on 3/14/14
  17. sallobaba1

    I also chuckled about the ironic social icons. :D
    I think they must be some sort of exception: People have to be previously using the service to know what they are, anyway.
    For me, those icons look like the ticket to some exclusive club I don’t care enough to join.
    http://www.sufitywarszawa.pl

    4:21 am on 3/26/14
  18. sallobaba1

    To add to my off-topic comment: Nice article! This is an important piece of information. Nice side border too.
    http://www.dkphoto.ie

    6:14 am on 3/26/14
  19. sallobaba1

    Art on the Avenue, thorns, this is a good thing, most people discouraged, strong-willed exceptio…
    bianorsolutions.de

    9:42 am on 3/26/14
  20. leo

    To add to my off-topic comment: Nice article! This is an important piece of information. Nice side border too..
    outsourcedinterimstaff.com

    10:57 am on 3/27/14
  21. maina khan

    To add to my off-topic comment: Nice article! This is an important piece of information. Nice side border too..
    debt relief

    3:54 am on 4/13/14
  22. maina khan

    Art on the Avenue, thorns, this is a good thing, most people discouraged, strong-willed exceptio…
    EscortForum

    5:11 am on 4/14/14
  23. maina khan

    A pleasant surprise, it occurs seldom, but the following we can speak of a real bonus value towards person who reads.

    phuket villa for rent

    1:12 am on 4/16/14

Leave a Reply

Get a Free Quote

Do you have a project you would like us to take a look at, we would love to hear from you. Send us your project details and we’ll get back to you within 24 hours.

Request Your Quote >>

From The Blog

Thoughts and Ideas on All Things Web