Motion · 03 of 04
Match timing to the transition
Choose a duration that makes the change understandable without unnecessary waiting.
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
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
The test
Use the interface at normal speed. Can you follow large changes while repeating small actions without waiting for the animation to finish?
Reviewed against all forty, on your product.
The audit is the cheapest thing we sell, and it regularly concludes that you do not need the project you came for.