Use motion only to explain change.
Animate state, position, or hierarchy changes, not static content.
Contents 5. Visual Communication 8. Motion
How movement communicates change.
First, ask yourself
“Does motion in your system explain what changed without slowing or distracting users?”
Mission statement
Ensure users understand change by using motion to show relationships, continuity, and state.
Key heuristics Motion
- Motion must explain a change of state, place, or relationship.
- Motion must show where elements come from and where they go.
- Duration must be short enough not to delay the user.
- Motion must not block input while it runs.
- Easing must reflect physical plausibility.
- Similar changes must use the same motion.
- Motion must be reducible or removable at the user’s request.
- Motion must not compete with the primary task for attention.
- Essential information must not depend on motion alone.
Executive brief
The system must use motion to explain change, never to decorate it.
Core questions Motion
“What does this motion explain?”
“Would the change be harder to understand without it?”
Focus areas
Meaning-first
“Which change does this animation clarify?”
“What would be lost if it were removed?”
Timing-aware
“Does motion make users wait?”
“Can users act before it ends?”
Consistency-aware
“Do similar transitions move the same way?”
“Is motion vocabulary stable across the system?”
AI-aware
“Does motion imply progress or thought that is not happening?”
“Is streaming output distinguishable from final output?”
UX directives Motion
Show origin and destination.
Let motion connect where an element was to where it is.
Keep motion brief.
Prevent animation from delaying task progress.
Never block input with motion.
Allow users to act while transitions run.
Use physically plausible easing.
Make movement accelerate and settle in ways users can follow.
Keep a consistent motion vocabulary.
Use the same motion for the same kind of change everywhere.
Respect reduced-motion preferences.
Provide equivalent non-animated feedback when motion is reduced or off.
Keep motion subordinate to the task.
Avoid movement that draws attention away from the primary activity.
Do not encode meaning in motion alone.
Pair motion with a static cue that remains after it ends.
Executive summary
- Motion is explanation of change, not decoration.
- It shows continuity between states, places, and relationships.
- The system must keep motion brief, non-blocking, and physically plausible.
- Motion vocabulary must be consistent and reducible on request.
- Meaning must survive when motion is off.
- Motion succeeds when users understand what changed without noticing the animation itself.
Success indicators
- Each animation explains a specific change.
- Transitions show where elements come from and go.
- Users can act while transitions run.
- Similar changes move the same way.
- The interface remains fully understandable with motion reduced.
One-line summary
Before motion can help users, it must explain something they would otherwise miss.