Use a Consistent Visual Design

How it Helps

Those with difficulty understanding how to interact with information need to use cues like color, layout and other visual information to help them know where to look, what they should do and how they should complete that task.

For example, an older user with age appropriate forgetfulness takes a long time to learn new designs. When they come to a site, the first page takes time to understand, but then they know what to do on the next page. If the next page is different from the first and also difficult to learn, they become tired and make more mistakes, as they move to a third page the cognitive load becomes too much and they cannot complete the task. This pattern helps by:

• Ensuring a consistent user experience by providing familiarity and building confidence;
• Making it possible to easily use and interact with content;
• Aiding the completion of tasks; and
• Reducing cognitive overload which can lead to increased stress and mental fatigue.

More Details

This includes:

• Design themes, including heading styles, font choices, symbols, colors, visual appearance of controls, buttons and links should be consistent.
• Headings with the same structural level have the same font and visual style.
• Icons, controls and menu items that have same function and role have the same look and style
• State and focus for elements with similar function and roles have the same style used consistently across a site.
• Layout should be consistent, including position of interactive elements and navigational controls.
• Structure of content and style of presenting information should be consistent throughout, such as organization of block text, images and bullet points.

Getting Started

Plan the design for your information before adding content. Think about the colors, font choices and areas where text and images will appear.

Examples

Use:

A web page has two submit buttons, both should visually look and function the same way.

All selected radio buttons on the site look the same.

When all links on a page have keyboard focus the focus indicator looks the same.

Avoid:

3 pages have a submit button, but each one is located in a different place on the page.

There are 6 heading level 2s on a page. 4 are styled using Times New Roman, and 2 use Helvetica.