How do you define motion and interaction feedback?
Use motion to explain changes and results while respecting reduced-motion preferences.
Motion is a visual change over time, such as a menu opening or a progress indicator moving. It should help users understand events. Essential feedback must remain clear without animation.
Keep these basics in mind
- A transition changes one state into another. Duration is how long that change takes.
- Easing describes how animation speed changes, such as gradually starting or stopping. It is presentation, not action logic.
- After submission, explain processing, success, or failure. A spinner cannot replace a result message.
- Reduce unnecessary movement when users request reduced motion. Completing a task should not depend on an animation.
See Spectrum’s motion guide for purposeful motion and MDN’s reduced-motion guide for browser support of user preferences.
Motion and feedback flow
Illustrative feedback changes
These are hypothetical actions, not performance measurements.
| Stage | Previous behaviour | Adjustment |
|---|---|---|
| Submitting | Button does not change | Show Saving |
| Failure | Animation stops without explanation | Explain the failure and allow a retry |
| Reduced motion | Large flying movements continue | Keep text feedback and reduce movement |
Walk through an example
Saving a profile immediately shows processing. A successful response changes the message to Saved; failure preserves the input and offers a retry. Users who reduce animation can still understand the process through text.
Limits and common misunderstandings
No fixed duration suits every interaction. Animation speed does not prove request speed or justify hiding a long wait. Reduced motion does not mean removing feedback; its meaning still needs to remain available.