Why interaction detail matters more than layout now
By Allan Leone on
A model will produce a competent pricing page in seconds, and it will look like every other competent pricing page. What does not come out of the box is how the thing behaves when you touch it.
Static layout became a commodity faster than most people expected. Ask for a pricing page, a settings panel, a dashboard shell, and you get a competent one immediately. It will also look approximately like every other competent version of that thing.
Behaviour did not commoditise at the same rate, and the reason is that behaviour is mostly absent from the training data. A screenshot does not record what happened when someone pressed the button.
The details that carry the difference
- Whether a button acknowledges the press before the network responds. A hundred milliseconds of local feedback removes the entire question of whether the click registered.
- How a list reorders. If items jump, people lose their place and re-scan. If they move, people track them.
- What a panel does at the end of its travel. A small overshoot and settle reads as a physical object. A linear stop reads as a div that changed opacity.
- Whether focus lands somewhere sensible after an action. This is invisible to mouse users and decisive for everyone else.
The rule that keeps it from becoming decoration
Motion has to carry information. If the animation does not tell me where something came from, where it went, or that the system heard me, it is decoration, and decoration is the first thing that reads as filler.
The test I use is to describe what the animation communicates in one sentence without using the words smooth, polished or premium. If that sentence does not exist, the animation is spending time and attention for nothing.
Where the budget should go
Interaction work is expensive per pixel and cheap per screen, because it concentrates in a handful of components that appear everywhere. Getting the button, the input, the list row and the overlay right covers most of what a user touches in a session.
That is a much better use of a week than adding motion to a marketing page nobody scrolls twice.
Where to start
- Pick your four most-used components and spend one week on their interaction states only. No new features.
- Add optimistic local feedback to every action that waits on a network call. Press state first, result second.
- Write the one-sentence justification for each existing animation. Delete the ones you cannot write.
- Check what happens to keyboard focus after your three most common actions. This is usually broken and usually a ten-minute fix.
Tags: design, craft, motion