Optimistic actions (like, save, undo)

The user clicks "Like." The naive answer is to wait for the server before the heart fills in — a small button with a small wait, but a wait the user feels every time. The tuned answer is to flip the heart immediately, send the request in the background, and roll back visibly if the rare failure case fires. At 99 % success the user's experience is sub-perceptible feedback; at 1 % they get an honest, recoverable error.

This scenario sits in the 0–100 MS band, but only because the optimistic flip moves it there. The actual server round-trip is in the 100 MS – 1 S band; the perception layer is what compresses the perceived response into the perceptual frame Card-Moran-Newell Card, Moran & Newell 1983 describe. Miller 1968's Miller 1968 button-press tier and Doherty 1982's Doherty 1982 productivity-cliff finding both get cleared — for free — by skipping the wait the user would otherwise experience.

What is happening in the demo

Click the heart on either side. Both run the same simulated server round-trip — a 600 ms p50 wait drawn from a gamma distribution. The naive side waits the full duration before flipping the heart and updating the count; you can feel the lag on every press. The tuned side flips the heart immediately, increments the count, and runs the simulated commit in the background.

The tuned side has a 10 % simulated failure rate. When the failure fires (try clicking 5–10 times), the heart rolls back, the count corrects, and an error message appears in role="alert". The user is told the action failed — silently rolling back would be the polished-lie failure mode covered in Concepts §6.

The visual flip uses an active:scale-[0.97] press feedback in addition to the optimistic state change — the pre-action feedback layer is still doing its work on every press, even when the optimistic state change is the visible result.

What to tune

1. Pre-action signal — start the request on mousedown, not click. ~100–150 ms head-start.
2. Press feedback — active:scale-[0.97] (or equivalent) within ~50 ms. Always, even when the optimistic flip is the visible change.
3. Optimistic flip — heart fills / count increments inside the perceptual frame. ~200 ms state-change transition.
4. Background commit — request runs while the optimistic state is visible. On failure, roll back the heart and surface role="alert".
5. Failure path — visible rollback; never silent. For irreversible actions, skip optimistic UI entirely and run a real progress indicator.

When perceived performance hurts you here

The pattern fails when the failure rate is too high. At 1 % rejection the rollback is a rare event and the trust budget pays for itself; at 30 % rejection — pessimistic actions misrepresented as optimistic — the user sees three rollbacks in every ten interactions and learns that the system lies. The perception layer becomes a tax on trust.

The other failure mode: silent rollback. If the action visibly succeeded, then quietly reverted because the server rejected it, the user has no signal anything went wrong. They notice the wrong state hours later and lose confidence in everything they have done since. The error state in the demo is the minimum — a role="alert" text label tied to the action that failed. Production implementations should also offer a retry control on the failed item itself.

For irreversible actions — payments, deletions without undo, irreversible state changes — optimistic UI is the wrong tool. Surface the irreversibility before the action runs (a confirmation dialog, an explicit submit button), and run the action with a real progress indicator afterwards.

Accessibility

1. aria-pressed reflects the optimistic state on toggle buttons.
2. role="alert" on the rollback message — interrupts to announce the failure, since the user thought the action succeeded.
3. Don't lose mid-flight user input. If an optimistic action runs while the user is typing nearby, the rollback must not clobber their in-progress work.
4. prefers-reduced-motion — the heart's fill transition reduces to an instant colour change.
5. Keyboard parity — Space and Enter trigger the same optimistic flip on focused buttons. The press animation can be skipped for keyboard activations.

References