In which our very own UX Researcher, Tom Hayes, investigates the world of online iconography and how you can test whether users understand all your various navigation signs and symbols.

What does this icon mean?

icon of a magnifying glass

Now I would be very surprised if anyone isn’t thinking ‘search’ right now. This icon, or variations of it, tend to be used by companies all over the world and users recognise it. This allows designers to do away with text and use something that, at a very quick glance, tells the user this is where you can search in one way or another.

But what about when you are trying to signify to users something that there isn’t a globally accepted icon for, or something that is specific to your journey or user-base?

Take a look at these icons below from the car configurator on Ford’s website. Here you can customise the car you are buying in various ways.

Each of these icons represents a section of this configurator. Looking at the icons try and decide what you think each of these could represent…

 

Don’t worry, the answers are here.

In instances like the above, you may design your own icons, but without testing them you could be causing users problems or influencing their behaviour in ways you don’t want to.

Ford has recently relabelled each of these icons with text, so the icons really just act as something to signify to the user that there are options to select. But in many cases, you will want the icon to stand alone.

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 good 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 collate these findings together to determine each of the above. In addition to this, context is important to think about.

How to test your iconography

Here are some examples of questions, or types of question formats, to ask in an icon usability test:

What do you think this icon represents?

Don’t provide any context (or very limited context), just present the icon with a free text box and ask the question of what they think the icon represents.

If your icon needs to be very recognisable but there isn’t much other context to help, then this is a good question type to follow. It should help unearth any associations or expectations from users that you may not have considered when designing it for the context you want it to represent.

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

For example: “Which of the following icons do you think best represents ‘pay by card’?”

This is great for picking different icons from a selection. It’s good practice to follow up with a free text question of why they picked the one they did.

If you are wanting to narrow down your options or explore which of your options could possibly work, you may want to go for a ranking style question instead. For instance: “Please rank the icons in order of most suitable (1) to least suitable (4) for indicating to ‘pay by card’”

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 own site and the context and knowledge your users are likely to have when you are constructing your questions.

Here you could ask your user, “What would you expect to happen if you were browsing your list of studies in your Userzoom account and clicked on this icon that appears next to each study?”

This is another one to see how easy your users can guess what an icon can do with only a certain amount of context.

Specific feature context

Imagine you have been asked various questions about your current living status.
What would you expect to happen if you clicked on this icon next to the question: “What is your current relationship status?”

Full visual context

Often it’s important to test your icons with full visuals to see how they work alongside other aspects of the visual design. In this instance you can show an image and highlight the appropriate icon.

“What would you expect to happen if you were creating a study in UserZoom and clicked on the icon highlight by the circle and arrow below?”

Rating the effectiveness of an icon (or image)

Please indicate on a ranking of 1-7 how well the icon reflects “exciting rewards” for you personally (1 is not effective and 7 is very effective)

Sometimes icons need to be more than a functional aspect but also represent a feeling or a company’s branding. The above example is from the Virgin train website and is used to suggest their rewards are worth getting excited about.

It would be interesting to see how many people actually understand and relate this to suggesting these rewards will “rock their world”.

Outcome or task-first approach 

Which of these tasks do you think the icon most appropriately represents?

  1. Being able to search for a missing payment
  2. Finding the nearest payment centre
  3. Searching what services in your area are available for you
  4. Searching the type of benefits available

Where you want quantitative results for understanding the information scent, having a multiple-choice option can be a good way of getting that. You may have done some quick guerrilla testing, some usability testing or even a lab session to come up with your shortlist of options.

Fully open-ended

“Please describe what icon you would use to represent ‘go to checkout’ on a retail website?”

There may be an icon that you haven’t thought of using when none of your suggestions seem to be getting good results. In that case, a good old open-ended question to your users may help refill the ideas bank.


These are just a few of the question types to ask when investigating your own website or app iconography. If you need any extra help, just click the button below…

Contact us!


Main image by Harpal Singh