Duration

When the brief for a movement was "make it feel natural," the values differed by whoever built the screen. Numbers went in by feel and the spec said only that the panel opens smoothly. That's how the time a dialog takes to open and the time a drawer takes to slide out end up three times apart inside one product.

Going through eleven Pagedeck screens, Noa found six different values used for the same kind of movement. One dialog opened over half a second and felt like waiting; another finished in 0.15 seconds and looked like it had simply appeared.

Duration is where that time gets written as a value rather than left to instinct. Put the values in a table and why a panel moves at this speed stops being an argument and becomes a lookup.

Set the value in proportion to the area and the distance being moved. Wide movement gets more time; something shifting slightly in place gets less.

1. Fix the values you're allowed to use. 100, 200, 300 and 400 usually cover it, and a value like 250 in between doesn't get used. Allow in-between values and the numbers scatter again even with a table.
2. Small elements take 100 to 200. A button changing color, a checkmark being drawn — the micro-interactions attached directly to an action.
3. Part of a screen moving takes 200 to 300. A drawer sliding in from the edge, a card expanding.
4. A whole screen changing takes 300 to 400. The area is larger, so the same time makes it look rushed.
5. Give the disappearing direction less time than the appearing one. There's no reason to keep showing something the user is done with.

There's a wall at each end. At 0 the transition itself is invisible, so nothing tells you what came from where; past 500 people start to feel they're waiting. On an action performed twenty times a day, half a second of movement adds up to ten seconds a day. For users who have asked for reduced motion, bring the value close to zero.

"This dialog is at half a second. Let's bring it to 300 — right now you wait for it to open."

Adjusting time as a value rather than as an impression.

"Don't put in 250. Pick 200 or 300 from the table."

Asking not to grow the set of values.

"Give the exit less time than the entrance. The user is already done with that screen."

Movement coming in and movement going out serve different purposes.

Noa built a four-step table and brought the values on all eleven screens into it. After that, conversations about whether a movement felt slow turned into checking which step the case belongs to.