By the end of this lesson you can
- Use motion purposefully to explain change and give feedback.
- Choreograph timing and easing.
- Prototype and hand off motion, respecting reduced-motion preferences.
The idea
Motion is part of interaction design. Used well, it explains what changed, where things came from and whether an action worked.
Purposes of motion
- Feedback: a button press, a success tick.
- Orientation: a panel sliding from where it was triggered.
- Continuity: an item expanding into its detail view.
- Attention: gently highlighting a change.
Timing and easing
Most interface transitions take about 150 to 300 milliseconds; larger movements can be a little longer. Use easing: ease-out for entering elements, ease-in for exiting. Keep timing consistent with motion tokens.
Choreography
When several elements move, stagger them slightly and move them in a logical order. Avoid everything moving at once.
Prototyping and handoff
Prototype motion in your design tool or code. Hand off with specifications: trigger, properties, duration, easing and delay, plus a video reference.
Accessibility
Respect the prefers-reduced-motion setting by reducing or removing non-essential motion. Avoid flashing content and large parallax effects that can trigger discomfort.
Why it matters in real projects
Purposeful motion makes interfaces feel responsive and easier to understand. Gratuitous motion slows people down and can make some users feel unwell. Clear specifications ensure what is designed is what gets built.
A realistic example
In a task app, completed tasks vanish instantly and people think they have been deleted. The redesign adds a 200ms tick animation and a 250ms collapse, with the completed count updating. People understand what happened. With reduced motion turned on, the task simply fades out quickly.
Step by step
Find moments
List changes that could confuse users.
Define purpose
Decide what each motion should explain.
Set timing and easing
Use consistent motion tokens.
Choreograph
Sequence multiple elements.
Prototype
Build and test the motion.
Specify and respect preferences
Write specs and a reduced-motion alternative.
Common mistakes
Mistake Decorative motion everywhere.
Instead Use motion only with a purpose.
Mistake Slow transitions.
Instead Keep most transitions around 150 to 300ms.
Mistake Ignoring reduced motion.
Instead Support prefers-reduced-motion.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Motion spec
Design and specify a motion for one interaction.
Steps
- Choose an interaction such as adding to a basket.
- Define the purpose of the motion.
- Prototype it with timing and easing.
- Write a spec including a reduced-motion version.
Deliverable
A motion prototype and specification.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Use motion for feedback, orientation, continuity and attention.
- Keep transitions short with appropriate easing.
- Choreograph and specify motion clearly.
- Respect reduced-motion preferences.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.