Motion · 01 of 04
Use motion to explain change
Help people follow a transition without delaying their task.
The idea
Motion can connect an action to its result: a panel opens from its trigger, a moved item settles into its new place, or feedback confirms a completed action.
Use it where that continuity makes the interface easier to understand.
Keep essential information available even when animation is disabled or interrupted. Repeated decorative movement can compete with reading, so review the experience over a whole task rather than one transition. A direct state change may be the clearest choice for frequent actions.
How to see it
Terms used in this lesson
The parts
- Transition
- The change between interface states.
- Continuity
- A visual connection that helps someone follow the change.
- Feedback
- An indication that an action was received or completed.
In practice
- Connect transitions to their triggers
- Keep state changes clear without animation
- Review repeated use
Avoid
- Movement that delays frequent actions
- Animation as the only explanation of a state
- Hiding essential content until motion finishes
The test
Repeat the task with and without animation. Which transitions help you understand what happened, and which only add waiting or distraction?
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.