Skip to content

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:

  1. 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.
  2. Icons next to help, contact information, and search.
  3. Icons in call out boxes.

Avoid:

  1. Important instructions without icons or images to guide the reader.
  2. Cluttered, dense pages full of icons that can confuse or overwhelm the user.

Related Information

User Story

Personas

Reference

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.