Motion & interaction
Purpose before motion
Every animation needs a job: orientation (where am I?), feedback (did it work?), explanation, continuity (what changed?), or softening a jarring state change. If you can't name the job, cut the animation.
slides from its edge — motion explains where it lives
bounce — motion explains nothing
Drawer slides from its edge
Drawer bounces in
How to apply it
- 1
Before animating anything, name the job it does; if none of the five applies, cut it.
- 2
Use directional motion for navigation and panels so the movement shows where things came from — a drawer slides from the edge it lives on.
- 3
Remove bounce and flourish effects that run on every load regardless of context.
- 4
Reserve punchier motion for feedback moments so it stands out from routine transitions.
Why it works
Motion is a channel with a fixed budget of attention. Users learn quickly which movements carry information and which do not, and once they have written the channel off they stop reading the movements that matter. An animation earns its place by doing one of five jobs: orientation (where am I?), feedback (did it work?), explanation, continuity (what changed?), or softening a change that would otherwise be jarring. A drawer sliding from its edge does two of them at once — it says where the panel came from and keeps the page continuous behind it. A bounce does none.
What breaks
A logo that bounces on every load answers none of those questions, and after a week of it the reader has written the whole channel off. The cost lands somewhere else: the shake on a rejected card number is the same channel, and now it goes unread.
Review questions
- 1
Can you name the job of every animation on this screen?
- 2
Does each panel or view move from the direction it belongs to?
- 3
Is any motion present purely for decoration, playing on every load?