Cognitive Accessibility Design Pattern: Clearly Identify Controls and Their Use
User Need
I need to understand my options and the tasks I can perform and I can identify the controls I can interact with in order to complete actions.
What to Do
Use a clear and recognizable design for controls. Make it clear what elements are controls and how to use them.
This includes:
- Using a common style on controls (for example, links being underlined).
- Using common design patterns on links and controls (for example, clicking on a link takes you to the page).
- Making the borders of controls clear. Links in text do not need borders if identified properly (for example, a help icon has a border).
- Making controls large enough so that users can click on it and not the item next to it.
- Ensuring items that are not clickable do not look like links or controls.
When this is not possible, provide instructions that explain how to use the control. Instructions should be on the same page or one click away and written in easy to understand language.
How it Helps
Controls are parts of web pages that do something, e.g. a link, button, checkbox. Common style and design patterns on controls are easier to recognize and understand how to use it.
The goal of these controls is to allow someone to use them. As soon as the user needs to discover the control or work out how to use it, some users will fail.
For example, an older user with age-related forgetfulness takes longer to learn new designs. They go to an ecommerce site that has boxes around the headers (such as “sale”). It also has simple large text for controls such as the “add to cart” button. The user clicks on the headings and not on the “add to cart” button (that looks like text). After a few failures they assume they cannot manage it and leave the site.
Some users have trouble when controls have a different look, color, or shape than they have used before. For example, when links do not have underlines and blue or purple text some users will not know there is a link (even if this appears with focus).
If you have difficulty with memory, it can be harder to use unique controls. It may take longer to find controls on the page. Even if they work just a little differently than similar ones, some users may need to relearn how to use them each time.
Using typical controls on the page will help people know how to use them. When using more unique controls, include easy to follow instructions and make them easy to find. It should be easy to identify, understand, and use the controls, regardless of how a user uses the page (vision, auditory, voice input).
Getting Started
Use standard controls and design patterns.
If you are designing a new control, make them easy to:
- identify (I know they are there),
- understand (I know what they do), and
- use (I know how to use them).
Use a simple style or have easy to follow instructions that explain their use. Test with people with different cognitive and learning disabilities.
Examples
Use:
- Standard blue and purple link colors or links with an underline and distinct text color (the link text color used is not used for static text on the site).
- Buttons with a standard button design (3D rectangles) that support the standard user actions and make it clear when they are pressed.
- Tabs that look like tabs and make it clear when they are selected.
Avoid:
- Links without an underline.
- Links that have the same color as static text on the site, even if the links have a clear focused state.
User Stories and Personas
User Story
Personas
- Alison : An Aging User with Mild Cognitive Impairment
- Amy : An Autistic Computer Scientist
- George
- Gopal : A Retired Lawyer with Dementia
- Sam : A Librarian who has a Hemiplegia and Aphasia
- Tal : A Student who has Dyslexia and Impaired Eye Hand Coordination