Original Design Studio

04 / Time

Motion

Use movement to make changes understandable. Choose easing and timing for the action, and provide a clear experience with reduced motion.

Motion specimen
Principle 1 of 4 · 01Full entry

Use motion to explain change

The idea

Motion can connect an action to its result: a panel opens from its trigger, a moved item settles into its new place, or feedback confirms a completed action.

Use it where that continuity makes the interface easier to understand.

Keep essential information available even when animation is disabled or interrupted. Repeated decorative movement can compete with reading, so review the experience over a whole task rather than one transition. A direct state change may be the clearest choice for frequent actions.

How to see it

Movement can connect the trigger to its result. The final state must also be clear without animation.

Terms used in this lesson

The parts

Transition
The change between interface states.
Continuity
A visual connection that helps someone follow the change.
Feedback
An indication that an action was received or completed.

In practice

  • Connect transitions to their triggers
  • Keep state changes clear without animation
  • Review repeated use

Avoid

  • Movement that delays frequent actions
  • Animation as the only explanation of a state
  • Hiding essential content until motion finishes
Test

Repeat the task with and without animation. Which transitions help you understand what happened, and which only add waiting or distraction?

Principle 2 of 4 · 02Full entry

Choose easing for the action

The idea

Easing controls the rate of change during an animation.

A panel that slows as it reaches its position can feel settled; a constant-speed indicator may be appropriate for continuous movement. Neither approach is automatically more natural or more correct.

Compare the curve together with duration and distance. A strong overshoot can draw attention, but it may be distracting on a frequently used control. Reuse a small set of curves with clear roles, then check them in the real interface rather than choosing from an isolated demo.

How to see it

Different curves change how the same transition starts and settles. Choose in the context of the action.

Terms used in this lesson

The parts

Easing
How the rate of change varies during an animation.
Linear
A constant rate of change.
Overshoot
Movement beyond the destination before settling back.

In practice

  • Choose curves for specific interaction roles
  • Compare easing with duration and distance
  • Reuse a small set of tested curves

Avoid

  • Treating linear motion as always wrong
  • Overshoot that distracts from routine tasks
  • Choosing easing only from an isolated preview
Test

Trigger the transition several times while completing a task. Does its movement communicate the intended change without making the control feel delayed or unstable?

Principle 3 of 4 · 03Full entry

Match timing to the transition

The idea

A checkbox response and a large panel transition do different jobs.

The first needs to acknowledge an action quickly; the second may need enough time to show where content moved. Distance matters, but so do the size of the element, the task and how often the motion repeats.

Start with a small timing scale and adjust in context. Keep the interface responsive during animation where possible. Avoid making duration mechanically proportional to travel distance, or treating a timing example as a requirement for every device and transition.

How to see it

A checkbox and a page transition use different example timings. These demonstrate different roles, not universal limits.

Terms used in this lesson

The parts

Duration
The time a transition takes.
Distance
How far an element travels.
Response
Feedback that acknowledges an interaction.

In practice

  • Test timing in the full interaction
  • Keep frequent feedback prompt
  • Check responsiveness during transitions

Avoid

  • One duration applied without context
  • Duration based only on distance
  • Unnecessary waiting before a control can be used
Test

Use the interface at normal speed. Can you follow large changes while repeating small actions without waiting for the animation to finish?

Principle 4 of 4 · 04Full entry

Respect reduced-motion preferences

The idea

Some people find large slides, zooms or parallax uncomfortable.

Respect the reduced-motion preference by removing or simplifying nonessential movement. Keep the resulting state obvious through layout, text or other stable feedback.

An instant change may work better than a fade; a fade is an option, not something every reduced-motion version must retain. Ensure content appears even when an animation never runs. Review the reduced-motion path as a complete experience, including navigation, dialogs and loading feedback.

How to see it

The same change can travel or appear directly. Reduced motion should retain the result without unnecessary movement.

Terms used in this lesson

The parts

Reduced motion
A preference for less nonessential animation.
Travel
Movement across the screen, including sliding or zooming.
State feedback
Information that makes a change understandable without requiring motion.

In practice

  • Provide a reduced-motion version
  • Keep content available without animation
  • Use stable feedback for state changes

Avoid

  • Retaining large nonessential movement
  • Assuming a fade is always necessary
  • Waiting for a disabled animation to reveal content
Test

Enable reduced motion and complete the main tasks. Is all content available, and can you understand every state change without large movement?

Motion, in practice

View full size ↗
Four visual examples of motion: use motion to explain change; choose easing for the action; match timing to the transition; respect reduced-motion preferences.

Four principles at a glance

  1. 01

    Use motion to explain change

    Help people follow a transition without delaying their task.

  2. 02

    Choose easing for the action

    Shape how a transition starts and stops to suit its purpose.

  3. 03

    Match timing to the transition

    Choose a duration that makes the change understandable without unnecessary waiting.

  4. 04

    Respect reduced-motion preferences

    Provide a clear experience when people ask for less movement.

⊕Put these principles to work

Motion & Video

Product films, launch pieces, explainers and social cuts, edited as arguments, not as showreels.

← Previous discipline

03 — Composition

Next discipline →

05 — 3D & Spatial

Apply it

Score your work against this discipline.

An audit reviews what you have shipped against all ten disciplines, tested with assistive technology and on real hardware, and returns a prioritised plan.

Book an auditAll disciplines