Design Pattern: Provide Feedback

User Need

I need rapid feedback or visual cues to indicate an event was successfully triggered. For example, I need to know when an email has been sent, otherwise it looks as if it has just disappeared.

What to Do

For each step in a process let the user know of its status and if it was successfully completed.

How it Helps

Making the result of each user action clear helps people with a variety of cognitive and learning disabilities. This includes:

understand that their actions were processed (e.g., the click did something),
prevent uncertainty or doubt regarding the outcome, and
remember what they just did.

For example, a user with age-related forgetfulness, may have difficulty remembering how the interface worked. So when they press the send button they may not feel confident that the form was submitted. Feedback, such as a thank you message, will tell them submission occurred and make them feel confident in the process.

During a multi-step task this feedback (user-action feedback) can also assist people with attention or short-term cognitive and learning disabilities to remember what they are doing. For example, a user with early dementia may get distracted and then forget exactly where they were in the task. This user-action feedback helps re-orient them. It also helps them avoid leaving a task by reminding them that they are in a process, and where in the process they currently are.

Provide easily-recognizable success or failure feedback with every user action. When possible, the feedback should use consistent and familiar design patterns. For example:

After a step in a multi-step task is completed, breadcrumbs display a tick, or a checkmark next to that step’s name; and, if applicable, the title or the name of the next step is readily apparent.
After a button is clicked, it should look depressed. (Note that if it is a toggle button, the state should also be programmatically determinable).
After a form is submitted or an email message is sent, feedback communicating what just happened is provided, such as “Your application was submitted, thank you” or “Your email message was sent”.

More Details

The success or failure of every user initiated action is clearly indicated to the user by visual, programmatically-determinable, rapid feedback in the primary modalities of the content. Audio feedback is supported.

Examples

Use:

Visual state feedback. Use CSS and WAI-ARIA [[wai-aria-1.2]] states such as aria-pressed and aria-selected, to gives a visual change that shows the change in state. For example: Buttons and tabs with a visually clear state when selected.
Messages that let the user know if a task is completed. For example:
- Confirmation messages when an email message is successfully sent, or a form is successfully submitted.
- Visible and programmatically-determinable information to show that a new password is set.

Avoid:

State changes without visual feedback.
Task succeeds or fails without feedback.

Related Information

User Story

Personas

Reference

Cognitive Accessibility Glossary