Skip to content

Design Pattern: Ensure Controls and Content Do Not Move Unexpectedly

User Need

I need to know where things are. Controls and content do not move unexpectedly as I am using them.

What to Do

Make sure controls and content remain in place and do not move, unless the user initiates the movement.

A user may initiate a movement by triggering an action or by altering a property of the device, such as window size.

This can usually be achieved by:

  • ensuring controls and content do not move about as the page loads or refreshes,
  • displaying a clear “loading” indicator if content moves or changes during a page load,
  • not updating or moving content, such as an item’s position in a list, unless the user causes it.

How it Helps

If a control moves, users with slow hand-eye coordination or impaired cognitive processing speed may hit the wrong control. This causes unwanted actions and errors. The user may experience disorientation, confusion or even incorrect understanding of the content.

For example, a user moves to press a button on a video. The user accidentally nudges the device. The orientation changes to landscape and the control moves. Because the user has slow eye tracking or hand-eye coordination, they end up pressing a link to a new video.

Shifting controls and content can also cause cognitive overload and increase mental fatigue. For example, as a user with Traumatic Brain Injury reads content, the content refreshes and an additional article appears above the current content. The article the user is reading moves down. The user becomes disoriented and the application becomes very hard to use or understand.

More Details

Controls moving unexpectedly includes:

  • links in a list shifting positions,
  • orientation changes, and
  • slow loading of a page that the user thinks is complete.

Examples

Use:

  1. Controls and content that do not move about as the page loads or refreshes.
  2. A loading icon, that is clearly visible while the page is loading. After the content is finished loading and there is no further movement, the icon is removed.
  3. Controls and content that only move when the user initiates a change.

Avoid:

  1. Controls and content that move without the user’s request. For example: The user is about to select a phone number to call. As the user is about to touch the phone number, it shifts down. The user presses the wrong phone number and calls the wrong person.
  2. Links in a list shifting positions.
  3. Orientation changes that cannot be easily turned off.
  4. Slow loading pages that the user thinks are complete.

Related Information

User Story

Personas

Reference

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.