Skip to content

Cognitive Accessibility Design Pattern: Make Each Step Clear

User Need

I need to recognize where I am in the architecture of the web site, application, or multi-step process, even after I get distracted.

What to Do

Provide breadcrumbs, a “how I got here” button, or heading to help the user orientate themselves inside a site or task.

In a multi-step process, this includes showing:

  • the steps completed,
  • the current step,
  • the steps pending, and
  • any important choices.

How it Helps

This pattern helps a user who loses focus, forget what they are doing or gets distracted reorient themselves to their current activity. Clearly indicating the current location and progress helps the user continue after they lose focus without reading a great deal of content or restarting.

Providing information about the steps that need to complete a task helps users determine if they can successfully finish the task. This is especially important for users who often find processes difficult to complete.

Examples include:

  • Someone with early stage dementia is interrupted in their task or loses focus and then cannot remember what they were doing. By seeing the bread crumbs they can remind themselves where they are and continue their task.
  • Someone with an attention disability gets distracted and then needs to pick up where they left off.
  • Someone with a processing difficulty is not sure if this application has too many steps and if they will manage. By seeing they are half-way through they can gauge if they can cope with the entire process.

Examples

Use:

  1. Breadcrumbs that indicate the current step in the process, important choices, as well as past and future steps.
  2. Headings that clarify exactly were the user is inside the content.
  3. A “how I got here” button. When the user clicks the button they receive orientation information about:
    • the page,
    • how they got here, and
    • where they are inside the content.

Avoid:

  1. Completed steps and choices that are hard to find and check. For example:
    • Placing completed steps on previous pages.
    • Placing selected choices in a control that hides and reveals content (such as an accordion).

User Stories and Personas

User Story

Personas

Glossary

Back to Top