Design Pattern: Use a Consistent Visual 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 in order to complete actions.

How it Helps

Many users take a long time to learn new designs and recognize elements. Once learned, the elements should be used throughout the site.

For example, an older user with age-related 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 difficult page the cognitive load becomes too much and they cannot complete the task.

More Details

This includes:

• Consistent design themes, including heading styles, font choices, icons, colors, visual appearance of controls, buttons and links.
• 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 across a site.
• Layout is consistent across blocks of content. This includes the position of interactive elements and navigational controls.
• Structure of content and style of presenting information is consistent. This includes the organization of blocks of text, icons, 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:

1. Headings at the same level look similar, across the site.
2. A consistent look across the site for controls. For example:
   • Two submit buttons in a web site, both look and function the same way.
   • All selected radio buttons on the site look the same.
   • When an item is tabbed to, it has focus and can be activated. The keyboard focus indicator (outline that shows which element has focus) for all links look the same.
3. A consistent location for common features. For example:
   • The search box is always in the same place in the entire site.

Avoid:

1. Elements with similar functions looking different. For example:
   • There are six heading level 2s on a page. Four are styled using Times New Roman and two using Helvetica.
2. Elements with similar functions presented in different locations. For example:
   • Three pages have a submit button. One is located at the top of the form. One is located at the bottom. One is located in a sidebar.