Test your website's icons

Understand how you can test your website's icons in UserZoom and the importance of doing so.

Plan Availability: Essentials, Professional, International, and Premium
👥 User roles: Owner, Admins, and Researchers
For more information, see our article on how to find your plan and user role.

 

On this page:

 


 

About icon testing

  • Designing unique, on-brand icons is great, but without testing them you could be causing users problems or influencing their behavior in ways you don’t want to.
  • When you’re testing icon suitability, you generally want to gauge:
    • Recognition and understanding: do users know what it is and what do they understand by it?
    • That it represents what you actually want it to represent - How well does it do the job in the users’ eyes?
    • Information scent: What will happen if they click it? Where does it go and what is expected to happen?
  • To do the above, you’re likely going to do a few different tests in different ways and gather the data.
  • In addition to this,  it's important to think about context.

 

 

Questions to ask when testing your website's icons

 

What do you think this icon represents?

  • When asking this question, provide limited to no context.
  • Present the icon with a free text box and ask what participants think it represents.
  • If your icon has to be very recognizable, but there isn’t much context to help, this is a good question type to follow.
  • It helps to unearth associations or expectations from users that you may not have considered when designing the icon.

 

 

Which icon best represents the action you want a user to take?

  • This is great for picking different icons from a selection.
  • Follow up with an open text question asking why they made their choice.
  • To narrow down your options or explore which options could possibly work, use a ranking style question instead. For example, “Please rank the icons in order of most suitable (1) to least suitable (4)."

 

 

What would you expect to happen in a particular context?

  • Adding context to your questions can help you determine how much knowledge or understanding is needed for your icon to be effective at doing its job.
  • Think about your site and the context and knowledge your users are likely to have when you are writing your questions.
  • Here you could ask participants, “What do you expect to happen when you click this icon?”
  • This is another way to find how easily participants can guess what an icon means with little context.

 

 

Specific feature context

  • Imagine you are asked various questions about your current living status.
  • What do you expect to happen when you click an icon next to the question: “What is your current relationship status?”

 

 

Full visual context

  • It’s important to test your icons with full visuals to find how they work alongside other aspects of the visual design.
  • To do so, show an image and highlight the appropriate icon.
  • For example, “What do you expect to happen when you click this icon?”

 

 

Rating the effectiveness of an icon or image

  • Sometimes icons have to be more than a functional aspect but also represent a feeling or a company’s branding.
  • For example, "Please indicate on a ranking of 1-7 how the icon reflects “INSERT YOUR CRITERIA” for you personally (1 is not effective and 7 is very effective)."

 

 

Outcome or task-first approach

  • When you want quantitative results for understanding the information scent, using a multiple-choice question is an effective option.
  • You may have done some quick guerrilla testing, some usability testing, or even a lab session to come up with your shortlist of options.
  • For example, "Which of these tasks do you think this icon most accurately represents?" with multiple answers you've gotten from your initial research.

 

 

Fully open-ended

  • There may be an icon you haven’t thought of using when none of your suggestions seem to be getting good results.
  • In that case, an open-ended question for participants can help you refill your ideas bank.
  • For example, “Please describe what icon you would use to represent ‘Go to Checkout’ on a retail website?"

 

 

Test your website's icons

  • Icons can be used to add a modern look and visual appeal to a website's design.
  • Unfortunately, visual appeal doesn’t help people more effectively use a site if they don’t know what the icon represents.
  • Below are a few approaches to use to find out how people are interpreting your icons, and if they associate the intended meaning with the image.

To test your website's icons, follow these steps:

  1. Create a Survey to find out what people think the icons mean.
    1. Upload the icons as an image into an open-ended comments box.
    2. Give a scenario for why they would be seeing the icon.
    3. Ask participants to tell you what they think it means.
      For example, Imagine you were shopping online for [product/category] and saw the above icon. What do you think this icon means or symbolizes? Please be specific.
  2. Find out how easy the icon is to understand:
    1. Upload an icon into single choice question.
    2. Give a scenario for why they would be seeing the icon.
    3. Ask them to rate their level of agreement with the following statements:
      • This icon was easy to understand (1=Strongly Disagree to 5=Strongly Agree)
      • This icon presents information I care about or is important to me (1=Strongly Disagree to 5=Strongly Agree)
  3. If you have multiple icon designs:
    1. Ask participants Which image below best represents [what you are trying to represent]?
    2. Have them choose the best answer. Show all icons, choices are A, B, C, D, None.
    3. Ask them to explain their answer with an open ended comments box.

Please provide any feedback you have on this article. Your feedback will be used to improve the article and should take no more than 5 minutes to complete. Article evaluations will remain completely confidential unless you request a follow-up. 

Was this article helpful?