Shape
Motion Design
Using movement to show what changed and where things went, with restraint.
What is Motion Design?
Using movement to show what changed and where things went, with restraint.
What you learn
Use motion to explain a change, briefly, or not at all.
When it helps
changes on screen are hard to follow, or animations slow people down.
Use it at work
- Use motion only to explain a change.
- Keep it short, usually under half a second.
- Move things in the direction they’re going.
- Respect people’s setting to reduce motion.
Your output
For each animation in your product, write what it explains. Shorten it, or remove it if it explains nothing, and check the reduced-motion setting.
Watch for
Animating for decoration, slowly, or ignoring people who turn motion off.
Related practices
Sources
- Understanding SC 2.3.3: Animation from Interactions
- Motion
- Understanding SC 2.3.1: Three Flashes or Below Threshold
- Understanding SC 2.2.2: Pause, Stop, Hide
Enable JavaScript to try the interactive activity.