Skip to content

Cognitive Accessibility Design Pattern: Use a Familiar Hierarchy and Design

User Need

I need to understand my options and the tasks I can perform and I can identify the controls I can interact with to complete actions. (I find it hard to learn new interface design patterns.)

What to Do

Use common designs that are familiar to most users. This includes:

  • design elements,
  • affordances (visual hints about how to a control),
  • patterns, and
  • the layout and visual hierarchy (arrangement of elements to show the order of importance).

How it Helps

Many users cannot easily learn and remember new design metaphors. Without these skills, it can be much harder or impossible to locate desired items with which to interact, and to know what interactions may do. Users can feel lost or overwhelmed.

Users are more likely to find and recognize common design elements that are repeated often over a long period of use, across many sites.

For example, a user with a mild cognitive impairment or dementia, goes to a site to buy a product. They cannot find where to pay for the item that they want. They may think the site does not allow shopping and the site just provides information.

More Details

Common design elements, affordances, and patterns include:

  • A standard layout and visual hierarchy (arrangement of elements to show the order of importance). Place elements where the user is expecting them. For example, in an English site:
    • search in the top right hand corner in a web site,
    • link to the home page in the top left hand corner,
    • link to “contact us” in the top navigation area,
    • link to the site map in the footer area, and
    • submit button at the bottom of a form.
  • Common design patterns (repeated designs for controls and other elements), such as:
    • WAI-ARIA authoring best practices [[wai-aria-practices-1.2]],
    • patterns used in the most popular sites,
    • very common navigation design patterns and common icons,
    • platform specific (operating system) user interface design for navigation mechanisms and icons, and
    • adaptive user interface design that can be personalized (see above).
  • User interface (design) from a prior version. Allow users to revert back to a prior version of the application with which they are familiar.
  • Links that look like links and buttons that look and act like buttons. For example:
    • underline links with a standard style throughout a page,
    • links generally navigate to a new page, and
    • buttons generally perform an action.

Getting Started

  1. When designing web pages, select standard components that look and behave the way users expect. Use standard conventions for layout such as:
    • home link in the upper left corner,
    • navigation at the top, and
    • search in the upper right.
  2. Create an obvious visual hierarchy in the page.

Examples

Use:

  1. Common web layouts.

Avoid:

  1. Unfamiliar layouts.
  2. Unfamiliar visual hierarchies.

User Stories and Personas

User Story

Personas

Glossary

Back to Top