Part of: Images
Icons
Last updated: 28 March, 2020
Following this helps people with:
time-pressures: wondering what an icon may mean takes time
stress: hard to comprehend icons can increase stress
multi-tasking: no time to think about what an icon means
cognitive impairments: unlikely to guess vague icons correctly
sight loss: screenreaders will read out labels and alt text
colour blindness: meaning will be missed if only given by colour
Guidelines
Icons are visual representations of an object, action or idea. This page does not cover emojis or non-moving images.
Icons can be:
understood across languages and culture,
fast to recognise by non-fluent and low literacy users,
good targets to interact with, both on touch screens and with a mouse cursor: this can save people time,
space-saving, especially on smaller interfaces, giving more room for important messages.
But icons frequently cause access and usability problems. These guidelines will help you design and position them accessibly.
1. Add visible text labels to icons.
2. Use alternative text if you ever do not add a label.
3. Choose icons that are familiar and generally understood by all.
4. Position icons where people expect to find them.
5. Do not use colour as the only way you communicate meaning.
1. Add visible text labels to icons.
Users need to understand your icons. Add a label to explain what you intend the icon to represent. Few icons are considered to be generally understood by everyone. Labels reduce cognitive load and confusion.
Without a text label, many icons are misunderstood. Users are less likely to click on things they do not understand.
Symbolic icons
Some icons are not direct representations. For example, a paper clip to suggest an email attachment. To understand these users need to make several connections in their brains.
Clearly written labels mean users do not have to guess the meaning behind the symbol.
Be aware that your users may have different cultural associations from you, so may attach a different meaning than you intend.
Visible labels
Make text labels visible at all times. Users should not need to interact to make them show. For example, users should not need to hover their cursor over the icon before they see the label.
2. Use alternative text if you ever do not add a label.
For a very familiar icon, like the Home button, you might not need a visible text label.
But, like all images, icons without text labels need alternative text, also known as alt text, to describe their purpose or action.
You may be tempted to add alt text instead of labels when designing specifically for a small user interface like a mobile device. Consider that this might make your interface less easy to use.
3. Choose icons that are familiar and generally understood by all.
Icons work best if they’re easy to recognise. Some icons are familiar to most people who use the internet or digital interfaces. For example, the house symbol for ‘home page’ or magnifying glass for ‘search’.
Recognising and comprehending icons is often the result of people learning their meaning over time.
Your users should not need to work it out for themselves by trying something that does not do what they expected. World Content Accessibility Guidelines 2.1 advise against this.
4. Position icons where people expect to find them.
Put familiar icons where people would look for them. For example, the search magnifying glass and search box in the top right hand corner of a screen. When icons are placed in an unexpected location users:
might not find them,
waste time looking them,
need extra help to find them.
You should not need to provide instructional copy to explain either where to find or how to use an icon, or any design feature. Any benefit of using an icon disappears if you do that.
5. Do not use colour as the only way you communicate meaning.
As with all graphics, colour used on its own is not an accessible way to add meaning to an icon. The Web Content Accessibility Guidelines 2.1 advise not to use colour as the only visual way to:
give information,
indicate an action,
encourage a user to respond,
make a visual element unique from others.
Usability evidence
Yes, Icons Need Text Labels (Video), Harley, A., Nielsen Norman Group, Undated.
Usability Testing of Icons, Harley, A., Nielsen Norman Group, 2016
Icon Usability, Harley, A., Nielsen Norman Group, 2014
The Magnifying-Glass Icon in Search Design: Pros and Cons, Sherwin, K., Nielsen Norman Group, 2014
Effects of language fluency and graphic animation on modality choices by adults when following online explanatory demonstrations, Wright, P. and others, 2009
Orbitz Can’t Get A Date, Spool, J., User Interface Engineering (UIE), February 2006
Guideline 3.2 Predictable: Make web pages appear and operate in predictable ways, Web Content Accessibility Guidelines (WCAG) 2.1, W3C, 2018
Success criterion 1.4.1: Use of Colour, Web Content Accessibility Guidelines (WCAG) 2.1, W3C, 2018
Relevant wiki content:
In this section:
We invite you to share further usability studies and academic papers in the comments section of this page.
Live discussion of usability evidence: 26 February 2020, in Slack
Wiki page published: 27 March 2020