Motion in interfaces is a design tool, not a decoration. Used well, it communicates relationships, provides feedback, and guides attention. Used badly, it adds latency, creates distraction, and undermines the sense of direct control.
The three legitimate uses of motion
First, feedback. An interface element responding to input — a button press, a form submission, a file upload — communicates that the system received the instruction. Loading states, success animations, and error shakes all fall into this category. They are not decorative; they are conversations.
Second, spatial orientation. When a panel slides in from the right, the user understands that they have moved deeper into a hierarchy. When it slides back, they understand they have moved up. Motion communicates the spatial relationships that structure a navigation system.
Third, attention. A subtle pulse on an important element, a badge count updating, a notification appearing — these use motion to direct attention without requiring the user to search for it.
The principle of performance
Every transition that takes longer than 300ms will feel slow to most users. Animations should feel instantaneous — so fast that they are felt more than noticed. The goal is never 'look at this animation.' The goal is 'this interaction felt natural.'
If a user can describe your animation, it is probably too long or too prominent. If they just feel like the interface responds well, you have got it right.
When not to animate
Do not animate things that do not move in the physical world. Do not animate for the sake of demonstrating technical capability. Do not animate when users are in a flow state — interrupting a productive user with an animation is an interruption, full stop.
Always respect reduced motion preferences. Not everyone can tolerate motion on screen, and your product should be just as usable without it.
Motion in interfaces is a functional design tool, not decoration. Used well, it:
- Provides feedback
- Communicates that input was received (button presses, form submissions, uploads).
- Loading states, success confirmations, and error shakes are conversational, not ornamental.
- Supports spatial orientation
- Sliding panels indicate movement through hierarchy (in = deeper, out = back).
- Modals fading over content signal a temporary, dismissible state.
- Motion explains how screens relate in space and structure.
- Guides attention
- Subtle pulses, updating badges, and appearing notifications direct focus.
- Effective when rare and purposeful; noisy and ignorable when frequent.
---
Performance and feel
- Transitions longer than ~300ms feel slow for most users.
- Animations should be felt more than noticed: the experience is smooth, but users cannot easily describe the animation itself.
- Ease curves matter:
- Linear (constant speed) feels mechanical.
- Ease-out (fast start, gentle end) feels more physical and natural, echoing real-world acceleration and deceleration.
---
Motion language
Strong teams define a small, consistent motion language:
- A limited set (≈5–6) of transitions, durations, and easing curves.
- Applied consistently across the product to create:
- Consistency: motion follows a recognizable grammar.
- Constraint: designers cannot invent arbitrary animations.
Treat motion like typography: a curated, disciplined set beats a large, ad hoc collection.
Motion in interfaces is a functional design tool, not decoration. Used well, it communicates relationships, provides feedback, and guides attention; used poorly, it adds latency, distraction, and a loss of direct control.
The three legitimate uses of motion
1. Feedback
- Motion confirms that input was received: button presses, form submissions, uploads.
- Loading indicators, success confirmations, and error shakes act as conversational responses, not ornamental effects.
2. Spatial orientation
- Sliding panels (e.g., in from the right, out to the right) convey movement through a hierarchy (deeper vs. back).
- Modals fading over content signal a temporary, dismissible layer.
- Motion clarifies how screens and panels relate in space and structure.
3. Attention
- Subtle pulses, badge updates, and appearing notifications direct focus without forcing users to hunt for changes.
- Motion for attention should be rare and purposeful; overuse turns it into ignorable noise.
---
Performance and feel
- Transitions longer than ~300ms typically feel slow.
- Animations should be felt more than consciously noticed: the interaction feels natural, but users cannot easily describe the animation.
Ease curves
- Linear (constant speed) feels mechanical and artificial.
- Ease-out (fast start, gentle end) feels more physical and natural, mirroring real-world acceleration and deceleration.
---
Motion language
