UX Glossary · M
Motion design
Also: Animation design · UI animation
Using movement to show what changed, where something came from, and whether the system heard you.
Motion design in an interface is not decoration. It has three jobs: confirm that an action registered, show a relationship between two states, and direct attention to something that changed.
An element that slides out of a menu tells you where it came from, and where it will go back to. A list item that fades in place tells you nothing.
Duration
Useful durations are shorter than most people expect. Roughly 100 to 150 milliseconds for small state changes like hover and focus, 200 to 300 for elements entering or leaving, and longer only for movement across a large distance. Material Design and Apple’s guidelines both publish duration scales in this range.
Beyond about 400 milliseconds an animation stops feeling responsive and starts feeling like waiting.
Accessibility
Motion is not neutral. Vestibular disorders can make large parallax and zoom effects cause
genuine nausea. WCAG success criterion 2.3.3 covers animation from interactions, and every
modern browser exposes a prefers-reduced-motion setting. Honouring it is a few lines of
CSS and there is no good argument for skipping it.
In practice
If you cannot say which of the three jobs an animation is doing, it is decoration, and decoration on a repeated interaction becomes an irritation by the fiftieth time.