Skip to content

Day 22 - Predictability

Predictability is best when it is invisible. We take it for granted that each page on a website has the navigation items listed in the same order, in about the same position on the page, links look consistent on a single page and between pages, and visited links are identified.

We have throughout this course used the keyboard to navigate through a website, imagine if that focus changed the context of the page as you were tabbing. Or if you start entering content into a form and the context around the form starts changing without you being warned beforehand.

These are items that yield predictability within a website.

Example

Three screenshots in a row with arrows pointing to interface elements between themto show they show up in the same location on each page

Illustration of multiple pages showing the consistency of search, navigation, and breadcrumbs

The example above shows the consistency between the search, navigation, and breadcrumbs between multiple pages on the same website.

Task

  1. Visit the homepage of your website.
  2. Take note of the following items: header, main navigation, internal search, main heading
  3. Tab through the page, and ensure the page is not changing context when an item is focused unless the visitor is explicitly told beforehand.
  4. For search or any other input, start typing into the box. Ensure the context of the page is not changed unless the visitor is explicitly told beforehand
  5. Visit another page on your website, and take note of the initial items from step #2. Are they in the same position or did they move around?
  6. Repeat steps 2-4 on as many pages as possible in 20 minutes.

Considerations

  • It can be disorienting for visitors to re-learn how to use various common areas of a site between pages.
  • Link colors, focus ring, visited and active states should be consistent throughout the site.
  • Contact information should be consistent throughout the site.
  • Common examples of changing content when items are focused or user input is auto-complete fields or dropdowns that change content without requiring a button submit.
  • If your website does change context on focus or input, allow the visitor to change that behavior.

Further resources