6 Ways to Test Icon Usability

by Colette Mason on September 9, 2009

Icons used in interface designs must be meaningful and quickly interpreted by your users, or usability will suffer.

A set of 3d styled RSS feed buttonsDesigners are often tempted to use icons to create a specific visual theme or mood for a software interface or website.

Usability specialists usually advise clients to be careful when using icons, and to only use them when the add to the user experience, or are  very clear and not open to misinterpretation, like a standard print, back or home icons.

If your site relies on icons for navigation, and your visitors and customers don’t “get” what the icon “does”, they are in for a rough ride. 

Counter-intuitive icons make things frustrating for the user because they make a lot of  incorrect assumptions and selections as they try to get something done. Systems that make people “feel stupid” do not succeed.

If you think your customers would benefit from the use of icons in your interface, perhaps for an online game that needs a lot of player controls, then it makes sense to test the icons to make sure they can be quickly and correctly interpreted.

2 Types of User Testing Methods for Icons

Here are two ways to conduct icon usability tests:

  1. Icon intuitiveness test in which an icon is shown to a small number of users (typically 5) without its worded label. The users are asked to state their best guess as to what the icon is supposed to represent. This test assesses the degree to which the graphic chosen for the icon represented the intended concept.
     
    For commonly used icons like Home and Print this is quite straight forward. An icon for an accounting application that ran a “Trial Balance” would be much more difficult to design and be correctly interpreted.
     
    If you need lots of icons for your application, this is a great way for getting some quick feedback on intuitiveness which can then be added to your prototyped interface for user testing.
     
  2. Standard usability test in which the icons were shown to users as part of the full user interface and where the users are asked to “think aloud” as they use the system to perform set tasks. This test accesses the degree to which the icon would work well in context of the interface as a whole (where it would typically be displayed with a label).
     
    When icons are viewed in context, test participants are in a better position to make educated guesses as to the purpose of the icon.
     
    By asking the user to think aloud, you can hear the label they mentally assign to the icon, and see if they make a correct interpretation of its purpose.

4 Techniques for Measuring Icon Intuitiveness

There are 4 further techniques you can use to assess how intuitive a set of icons are as you run the test. You’ll need to observe the user and record the time taken to do 4 key mental processes, which gives some great quantitative and qualitative feedback on your icon set.

  • Speed of selection

    Speed measures how quickly an icon is selected by a user compared with the average. The quicker the correct icon is selected, the more intuitive (or learnable) it is. 

    As an example, I’ve picked out some home icons here. Most of them are pretty standard, except the igloo on the bottom left. Without the other “house-based” home icons to guide the user, using an igloo icon would be confusing for a significant number of test participants.

A selection of Home Icons

  • Association
     
    Association measures the percentage of users within the sample that assigned an icon with a particular term.  The higher the association figure, the more intuitive the icon design.
     
  • Multiple association 
     
    Multiple association  measures how often an icon was assigned to other terms by participants. Icons that get multiple terms assigned to them are less intuitive than one that consistently gets a single term applied to it more often.
     
  • Ask participants for verbal descriptions
     
    Icons from Nielsen's 1st iteration of designsAlso ask the users to comment on what comes to mind when they see an icon. In Nielsen’s study, users commented on an icon that had been drawn for a link to some resources for software developers. The first iteration clear had problems with the users stating the following (surprising) things came to mind:
     

    • thunder and lightning
    • electric – looks painful
    • person being killed by technology
    • dance machine
    • why do Sun developers look bug-eyed?
       
  • Make sure your icons have a clear meaning, and avoid any unintended sub-conscious meanings too!

Conclusion

Icons can suffer from poor usability and I always recommend using words rather than pictures to convey meaning, as they are more intuitive and can also help with search engine optimization if your navigation contains useful keywords.

Sometimes, though, the nature of a project means icons are the only choice, especially for smaller display areas like mobile phone screens, where there often isn’t room for a lot of words.

So remember, when you need to incorporate icons into your interface,  make sure you conduct some user testing and refine the icon designs to make them as intuitive and memorable as possible.

{ 4 trackbacks }

Tweets that mention 6 Ways to Test Icon Usability | Think Like a User -- Topsy.com
September 9, 2009 at 10:32 am
6 Ways to Test Icon Usability | Think Like a User interface
September 14, 2009 at 10:52 am
6 Ways to Test Icon Usability | Think Like a User
September 14, 2009 at 11:27 am
Round-up of useful usability resources « CyberText Newsletter
December 16, 2009 at 9:20 pm

{ 4 comments }

Sheena Suyal September 11, 2009 at 1:02 pm

You mentioned you prefer not to use icons in your web interfaces where you can.

Could you explain a bit more about why you think it causes a problem? What sort of things went wrong with the projects you’ve worked on?

Icons seem ok for what I need to do.

Colette Mason September 11, 2009 at 2:01 pm

Well the main problem is coming up with something meaningful – in one example I was working on an interface for foreign currency sales.

The currency buttons were based on flag icons. This worked well for USA and Great Britain, but knowing the flags for Pakistan, India, Austalia and New Zealand posed more of a problem for the users.

Selling the currency was not supposed to be a “test” to see how well the clerks could memorise details and drawings, it was supposed to be a quick and simple retail transaction for the clerk and the customer. It wasn’t, which was why I was asked to revamp the UI.

Another problem is keeping the graphics up to date. If you expect a variable set of options for sale, unless you’ve got access to cost-effective (i.e. cheap) graphic artists, it costs a small fortune to keep adding new icons that match the existing branding and have the drawings user tester for intuitiveness, and go through some fine tuning. One system just ended up with buttons the word on in and a supplementary “coming soon” image for the icon *groan*!

One minor point, the last big system I worked on needed an image to be associated with a very negative topic – declaring how much cash had been stolen from the till during a robbery. Quite how you were supposed to assign a image to that was a mystery. The choices weren’t too great – go cartoonish and have a bloke in a mask and black and white striped shirt and a swag bag, or go a bit Tarantino and show a hold up taking place, like Reservoir Dogs??. I don’t think so, somehow. I used that as a prime example of why icons just don’t work very well in the commercial world.

Hope that extra info helps, if you want to know anything else, Sheena, please do ask.

K Williams December 1, 2009 at 1:57 pm

The icon intuitive test you mentioned – is that a new model for testing icons? Pls point to me where I can read more about this test method. Thanks!

Colette Mason December 1, 2009 at 4:26 pm

Hi,

This is a standard way of testing usability for a lot of things, it’s just been modified for icons.

Do you have access to your users to run a test, or have you got to predict what happens in their absense?

In the past I’ve usually run icon usability tests to show that whilst icons “look pretty” they’re a real pain to work into a user-friendly interface :)

I create a set of icons, then ask the target audience to explain what they are for and how sure they are that they’ve made a correct assumption and ask them to explain their reasons for the responses.

Then I graph out the quantitative information like correct answers vs wrong answers and confidence vs uncertainty and sprinkle in a few of the comments when they help explain the findings.

Then put the findings and my recommendations into a report and give it to the client.

Does that help?Let me know if you have any more thoughts in how you plan to test your icon set.

Cheers for the comment :)

Comments on this entry are closed.

Previous post:

Next post: