design hubs
On this page
Foundations
2 min read

What Motion Is

Motion in interfaces is not decoration — it is a communication channel that conveys state changes, spatial relationships, and cause and effect between actions and outcomes.

When an element appears or disappears instantly, the user must infer what happened. When it animates, the system shows them. Motion is explanation made visible.

What motion communicates

Motion in an interface carries three types of information. Continuity — an element that moves from one position to another is the same element, not a different one. Causality — an animation that follows a user action shows that the action caused the change. Hierarchy — elements that animate together belong together; elements that animate separately are distinct. These are things that static design cannot communicate with equal clarity.

What motion is not

Motion is not animation for its own sake. A background particle system does not communicate anything. A loading screen that plays a branded video does not make the wait feel shorter — it makes the wait feel branded. Decorative motion has a cost: it adds visual noise, slows users down, and can cause real harm for users with vestibular disorders. Every animation in an interface should be justified by what it communicates.

The functional question

The test for any animation is: what would a user misunderstand if this motion were removed? If the answer is nothing — the interface would be equally legible without it — the motion is decorative and should be questioned. If removing it would leave a state change unexplained, a spatial relationship ambiguous, or a cause-and-effect connection unclear, the motion is doing communicative work and belongs.

Motion and the four POUR principles

Motion interacts with accessibility at the perception layer: users who cannot perceive motion comfortably — due to vestibular disorders, cognitive load, or preference — must be able to opt out without losing information. This means that anything communicated only through motion must have a static equivalent. Reduced motion preferences are the mechanism; designing with a static fallback from the start is the practice.

The takeaway

Design with motion last, not first. Build the static interface until it communicates correctly without animation. Then identify the state changes and spatial relationships where motion would add clarity. Those are the places to animate. Everything else is polish — valuable, but never load-bearing.

Practice

0 / 3

Keyboard shortcuts

Show shortcuts
?
Search
CtrlK
Previous article
Next article
Close
Esc