Cognitive Accessibility Design Pattern: Make the Site Hierarchy Easy to Understand and Navigate

User Need

I need to easily understand, navigate, and browse both the site and page structure.

How it Helps

Users often become confused and lost when they do not understand the visual hierarchy of the site, menus, and structure. Clear sub-menus and a well-defined structure will help the user know what is on the site and how to find it.

Users often are confused when:

• organization is unclear,
• menu terms are hard to understand, and
• menus and sub-menus are hard to find.

Dividing the site into clear logical sections can help. Make sections clear and subsections easy to find. Make the category structure and headings easy to understand. Create an outline that could serve as a summary of what is on the site.

The terms used in the menu need to make sense to the user. It needs to be obvious to the user what category the page they are looking for would fall under. Using common words that are familiar to the user is very important.

Make the levels in the content hierarchy easy to perceive and understand. Minimal type size or type weight differences or color differences may not be perceived or understood. Hierarchy solely dependent on small unique design elements creates confusion.

For example, a drop down accordion menu of additional sub-menu items may not be viewable without understanding it needs to be clicked (or “rolled over”) as indicated by a small unique design element.

When opening a web page for the first time, the sub-menus are typically collapsed. Some designs may make it difficult to know that there are sub-menus. Some users with cognitive disabilities may not guess that sub-menus are present. Even if they see a menu expand by accident, they may not generalize that this structure may be present for other items in a menu. Making it easy to notice that there are sub-menu items by adding a visual indicator to ensure users can use all of the site.

There are times when opening the sub-menu item may not be easy for some people with cognitive and learning disabilities. For example, the control to expand a menu item relies on a particular gesture or way of rolling over the area with a mouse. The end user may not figure out how to expand the sub-menu and may abandon the task. For example, a menu that expands only after moving the mouse over a particular side of the menu text.

More Details

• Small design elements that indicate sub-menu items are not always meaningful to the user. Test designs with a diverse user set whenever possible to make sure they are clear.

• Consistently use best practices should be used to make it understandable to the user.

• Series of nested elements that depend on interpreting small design elements are also confusing, and users may not understand the hierarchy.

• Clearly indicate when text is hidden or when it can be hidden or revealed.

Getting Started

1. Think about the types of content and categories of content in your site.
2. Divide the content into clear categories.
3. Build the main navigation from the important categories.
4. If you have sub-menus, add a clear symbol that show when sub-menus are closed and when they are open.

Examples

Use:

1. A visually clear and logical site hierarchy.
2. Clear indicators when text is hidden. For example:
   • Consistently using “+” sign to show that additional information will be shown when pressed.
   • Consistently using triangles next to hidden sub-menu items in menus.

Avoid:

1. A site hierarchy where users do not correctly guess what item is under each menu item.
2. Unclear logic for the menu categories.
3. No visual indication of sub-menu items next to the menu item. For example:
   • The only way to discover the presence of the sub-menu item with a mouse is to move the mouse over the sub-menu item.
   • Opening a sub-menu requires putting the mouse on part of the menu item, and this area is not clear and visually distinguished.

User Stories and Personas

User Story

• Clear Navigation

Personas

• Alison : An Aging User with Mild Cognitive Impairment
• Amy : An Autistic Computer Scientist
• Gopal : A Retired Lawyer with Dementia
• Maria : A User who has Memory Loss
• Sam : A Librarian who has a Hemiplegia and Aphasia

Glossary

• Cognitive Accessibility Glossary