Before: movement as decoration
Several blocks pulse and slide even though nothing changed, pulling attention away from the task.
Core idea
Motion needs a job. It should confirm an action, show where something came from, reveal a state change, or guide attention to one update.
- Name the purpose before choosing the animation: feedback, continuity, attention, or brand expression.
- Small interaction feedback should feel fast. Longer transitions need a clear reason and should not delay the task.
- Animate transform and opacity when possible so the motion stays smooth.
- Respect reduced-motion preferences. Reduced motion can still keep simple color, opacity, or text feedback.
Visual example
A button can move just enough to confirm the action.
Before and after
Keep motion tied to the state change.
After: movement as feedback
Only the changed control moves: press feedback, a loading shimmer, and a short success reveal.
Worked example
Why the improved version works
The improved version uses motion as evidence. The press says the tap registered, the shimmer says work is happening, and the success mark says the state resolved.
Nothing loops forever and nothing large travels across the screen. That restraint keeps motion useful instead of making it the loudest thing in the interface.
Common mistakes
Watch for these patterns
Adding animation because a screen feels plain, not because anything changed.
Making users wait for a decorative transition before they can continue.
Animating many areas at once, so attention has no target.
Ignoring reduced-motion preferences for sliding, zooming, or looping effects.
Visual comparison
Which motion choice has a clear purpose?
One card animates many decorative pieces. The other moves only the control that changed state.
Wähle eine Option, um die Design-Logik zu sehen.
Übung abgeschlossen
Next lesson
Forms and Data Entry
Improve labels, grouping, validation, and action feedback.
Small exercise
Diagnose motion purpose
Choose the motion that explains the state change, then identify which animation should be removed or reduced.