Design Pattern: Use Icons that Help the User
User Need
I need to know what features and content are on this page or if I should move on.
What to Do
Add familiar icons, images, and symbols to important content such as controls and section headings. Each icon or symbol should convey a single meaning and be next to the content it relates to.
How it Helps
People who have language comprehension, learning, or reading difficulties may rely on symbols to understand content and navigate to content they need. Symbols also help people who struggle with language and attention to navigate content, including media.
For example, a person with aphasia, has the intellectual ability to understand concepts, but struggles with language. They may be dependent on the use of symbols to browse pages for information.
It can also help the elderly population who can find cluttered pages with dense text hard to read on a screen. Clear symbols, icons, and images that act as signposts to the text content can be very helpful.
More Details
- Use clear and unambiguous icons or symbols that are easy to see and enlarge.
- Be aware of cultural differences.
- In left-to-right languages, when adding a few icons or symbols to a page place the image to the left of the text.
- When adding multiple symbols to a paragraph or section of text, place the symbols above the text.
- Use personalization semantics such as [[personalization-semantics-1.0]] to help the user load familiar symbols.
Getting Started
Use common icons that the user is likely to understand.
Provide common icons next to key texts, headings, media sections, “contact us” buttons, and “help” buttons.
Examples
Use:
- Instructions and important lists where each bullet point starts with an icon that relates to the content within that point. For example, see the summary of this document.
- Icons next to help, contact information, and search.
- Icons in call out boxes.
Avoid:
- Important instructions without icons or images to guide the reader.
- Cluttered, dense pages full of icons that can confuse or overwhelm the user.