Motion as Hierarchy

We are used to thinking of hierarchy as a visual problem: size, weight, color, space. But on a screen, hierarchy is also a temporal problem. The order in which things move tells the eye the order in which to read.

Motion answers questions

A user arriving at a section is silently asking three questions: where am I, what changed, and what happens next. Good motion answers them without a word.

• A reveal that staggers top-to-bottom says read this first, then this.
• A counter that ticks up says this number is the point.
• An arrow that slides on hover says this is where you click.

When motion answers a real question, it feels invisible — which is the goal. When it does not, it feels like noise, because the brain spends energy deciding it can be ignored.

The test for every animation

Before adding motion, I ask one question: what does this movement tell the user? If the answer is “it looks nice”, it gets cut. If the answer is “progress”, “direction”, “priority” or “transformation”, it stays.

This single filter removes most of the animation that makes sites feel cheap. The remaining motion is the kind that makes them feel directed.

And then: get out of the way

The final rule is the one most often broken. Persistent motion — the things that loop forever — must run at low intensity. A background that never stops competing for attention is not alive; it is annoying. Restraint is what separates motion design from motion decoration.