Make it feel right

Our products should feel magical to use. Care should be apparent in the ordinary actions people repeat: a control responds to their touch, a change is easy to follow, and the next step feels natural. Design the behavior and the appearance together.

Benji Taylor’s Family Values is an important influence: simplicity, fluidity and delight work together. We want that degree of care throughout a product. A single impressive transition cannot carry a confusing flow.

Give the eye a clear path

Use type, spacing and contrast to establish importance. Group things that belong together; put controls near their consequences. Choose density for the task. A busy table can be comfortable when its alignment and hierarchy make comparison easy.

At each step, show where the person is, what they can do and what happens next. Before a payment, keep the recipient, amount and network together. Details can sit behind a disclosure; consequences should remain visible. Use the product’s components and tokens so equivalent interactions agree.

Lead with the facts

State what happened, what matters and what the person can do next. Use concrete names, amounts and consequences.

Say each thing once, where it is useful. If a heading, description and banner repeat the same message, remove the duplication.

Reserve warnings for consequences that affect a decision. Combine warnings about the same risk. Make important information prominent through hierarchy, rather than making everything an alert.

Remove filler, self-congratulation and vague reassurance. Every sentence should help someone understand or act.

Instead of “Warning! Please be aware that this action is irreversible. Are you absolutely sure you want to proceed?”, use “Delete 12 drafts? They cannot be recovered.” Label the buttons Cancel and Delete drafts.

Respond to the person

Give a button visible feedback as it is pressed, while committing its action on activation. A drag should follow the pointer without easing behind it. Keep focus visible and provide keyboard alternatives to gestures.

Distinguish acknowledgment from success. A pressed save button can respond immediately; “Saved” requires the write to succeed. Preserve input on failure and show a useful next step. Loading, empty, stale and failed states deserve the same attention as the happy path.

Keep the connection visible

Help people recognize what persists through a change. A selected indicator can travel between options. A detail view can grow from its source. Closing should make the return to the previous context understandable. Keep unchanged content stable instead of fading the whole screen again.

Motion can give the product personality: a satisfying settle or a considered completion moment can make an ordinary action enjoyable. Put that attention where people interact. Repeated flourishes that interrupt reading or delay work lose their charm.

Choose how it moves

Use a short easing curve for a simple change between known states. An ease-out starts quickly and settles, which suits a control reacting to input. Start with a small movement, then adjust its distance and duration together in the actual layout. Larger travel may need more time to remain legible; frequent actions should settle quickly. The example below uses 180 ms as a starting point, not a rule for every product.

Use a spring when momentum and repeated redirection matter, such as releasing a dragged sheet. A spring follows a target while carrying velocity. Damping controls how much it overshoots; stiffness affects how quickly it responds. Start with little or no bounce. Reuse a proven implementation and tune it on the supported devices. A CSS transition is enough for many small controls; it does not preserve a drag’s release velocity for you.

Never make someone wait for an animation before accepting their next input. Reverse from the current visible position. Restarting from an endpoint creates a jump; queuing every click makes the interface fall behind the person. Apple’s fluid-interface talk shows why response and interruption belong together.

Press and hold an option to see immediate feedback. Switch between CSV and SQL, then reverse before the indicator arrives. Enable slow motion to inspect the transition; use Replay for another pass. The format changes immediately while the indicator catches up. Reduced motion keeps the selection and feedback, without the travel. This is a local interaction demo, not an export.

The example’s core transition is small:

.indicator {
  transform: translateX(var(--position));
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .indicator { transition: none; }
}

The radio selection changes --position. The same indicator stays mounted, so CSS can retarget an in-progress transition from its current position. The standalone example includes native keyboard controls, press feedback and the reduced-motion preview.

Verify the feeling

Use the interaction at normal speed first. Repeat it quickly, reverse it halfway, and try it with touch and keyboard. For each animation added or changed, capture it and inspect it frame by frame: the start, movement, interruption and settled state. Look for jumps, flicker, clipping and unintended layout shifts. Return to normal speed to judge the rhythm.

Try long labels, real data and a slower supported device; measure dropped frames when a transition stutters. Prefer transform and opacity when they express the movement, and measure layout animation when resizing is essential.

With reduced motion enabled, keep the meaning, focus and outcome intact. Someone should be able to complete the same task without following a moving surface. Removing travel is often enough; feedback should remain.

Record the interaction and conditions another teammate should try, including the capture method and what a good result looks like. Automated checks can establish the selected state, continuity and reduced-motion behavior. Someone still needs to inspect the frames and use it. A screenshot cannot prove that an interaction feels good. Clean up the capture session when finished.