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:
- Controls and content that do not move about as the page loads or refreshes.
- 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.
- Controls and content that only move when the user initiates a change.
Avoid:
- 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.
- Links in a list shifting positions.
- Orientation changes that cannot be easily turned off.
- Slow loading pages that the user thinks are complete.
Related Information
User Story
Personas
- Alison: An Aging User with Mild Cognitive Impairment
- George:
- Gopal: A Retired Lawyer with Dementia
- Jonathan: A Therapist with Dyscalculia
- Kwame: A Traumatic Brain Injury Survivor
- Maria: A User who has Memory Loss
- Sam: A Librarian who has a Hemiplegia and Aphasia
- Tal: A Student who has Dyslexia and Impaired Eye Hand Coordination
- Yuki: A Yoga Teacher who has AD(H)D