SKP
Get in touch

JOURNAL 04

MOTION THAT MEANS SOMETHING.

A single test for whether an animation should exist, and what I got wrong for the first two years of doing this professionally.

Entry
04
Subject
Motion design
Test
One question
Bias
Toward less
Chrome hand emerging from a field of drifting white particles, motion that carries intent not decoration
Concept render — motion that carries intent

//The test#

If you removed this animation, would the interface be harder to understand? Not less impressive — harder to understand. If yes, the motion is doing work: it's showing where something came from, what it belongs to, or what just changed. If no, it's decoration, and decoration is paid for by everyone who uses the interface repeatedly.

//What motion is good at#

Three things, mainly. Showing origin: a panel that grows from the button you pressed tells you what it belongs to, and no label achieves that as directly. Showing relationship: an item that flies from a list into a basket connects two regions of the screen. And showing change within a stable frame: a number that counts rather than jumping tells you it moved and roughly by how much.

What it's bad at is carrying personality without cost. A bouncy overshoot on a dialog is charming on first encounter and an obstacle by the fiftieth, and the people who hit fifty are your most engaged users. Charm on first use is the cheapest thing to optimise for and the least valuable.

//What I got wrong#

I animated everything. Staggered list entrances, hover lifts on every card, page transitions with a wipe. It looked exceptional in a portfolio and it was tiring to actually operate. The moment it became obvious was watching someone use a tool I'd built for eight hours of their working day — they were waiting for my animations constantly, and every one of them was a tax I'd imposed for my own satisfaction.

Now I start from none and add only where the test passes. Interfaces end up with far less motion and the remaining motion means something, which is a better result on both counts.

Fig. 33 — motion design, interaction, restraint