Skip to content
Back to the workshop

The Click That Speaks Back

Why every action must answer itself in the next frame

E
EugeneBuilding Cleo
4 min read

A click is a contract. The user signals an intent. The interface acknowledges it. When the acknowledgement is missing or ambiguous, the user does what every honest researcher of human behaviour will tell you they do. They click again.

I see this pattern repeatedly in software. A button is pressed. Nothing visible changes for two hundred milliseconds. The user reaches for the mouse and clicks a second time. By the time the response arrives, two requests are in flight. Sometimes both succeed and the user has duplicated state. Sometimes one fails and the system is now in an inconsistent place. Either way, trust takes a small hit.

The frame is the unit

The right unit for measuring interface responsiveness is not the millisecond, it is the frame. A click should produce a visible change in the next frame. Not after the network roundtrip. Not after the database write. The next frame, before anything has actually happened on the server.

This is not a new idea. Optimistic UI has been part of the toolkit for a decade. What is new is how much it matters in AI products specifically. When an AI is involved, the user's mental model of system state is uncertain. They do not know how long the response should take. They do not know whether the system is thinking, or stuck, or has not received the input at all. The visible acknowledgement of the click is what disambiguates these states.

The two layers of feedback

A good interface answers two questions on every click.

First, did my click register. This is a button-state concern. A spinner replacing the icon. A change in cursor. A subtle dimming of the surrounding context. Anything that confirms the click was received. This must happen synchronously, before the network call leaves the renderer.

Second, is the thing I clicked happening. This is a state-of-the-world concern. The row that the user expected to disappear should disappear. The status that the user expected to change should change. This can be optimistic, but it must be visible.

A toast that says "Action successful" is not a substitute for either of these. A toast describes an outcome. The persistent interface must already show that outcome by the time the toast lands. If the toast says one thing and the screen says another, the user will trust the screen. The toast becomes marketing copy.

When the optimistic prediction is wrong

The hardest part of optimistic UI is not the success path. It is the failure path. What happens when the server rejects the action you have already shown the user as completed.

The honest answer is that you have to roll back. Cleanly. Visibly. With an explanation. The row reappears. The status reverts. A small banner explains what happened and offers a retry. The cost of this rollback is real. The cost of pretending the network never fails is worse, because users learn quickly that the interface is lying to them, and they stop believing what they see.

I design every optimistic update with the rollback in mind. If the rollback is too messy to implement, the action is not a candidate for optimism. I wait for the server. The discipline is knowing which actions can be answered before the network and which cannot.

The cost of synchronous answers

Building optimistic state into every action takes more work than waiting for the server. You need to predict the next state. You need to handle the rollback when the prediction was wrong. You need to merge optimistic state with realtime updates without flickering. None of this is free.

The alternative is what most software does, which is to wait, hope the user is patient, and recover when they are not. This works until it does not, and when it does not, the user has already lost confidence in the product.

Speed is not the goal. Predictability is the goal. Speed is one way to achieve it.

E

Written by Eugene

Building Cleo, an AI marketing operating system. These posts cover the architecture decisions, technical challenges, and lessons learned along the way.

More from the workshop