Active

There was a time when the only way to tell whether a press registered was the result. Press save, have the server take a second to answer, and the user concludes their finger missed. So they press again, both requests arrive, and the document saves twice.

Lists produce the same thing in a different shape. When tapping an item takes half a second to open the detail view, people tap two or three more times inside that half second. One tap opens the view; the rest land on whatever item now occupies that position on the new screen.

What was missing was a response that arrives ahead of the result. If the screen changes the instant a finger touches it, whatever the server is doing, the user knows the press registered. That's the job the active state holds.

It appears the moment the press starts and disappears when the finger or the mouse button lifts. Four things have to hold.

1. Make the change one step larger than the state before it. Darken the background one or two steps past the default state, or give it the feel of being pushed in by a pixel or two. Hover is already one step darker, so active has to go further for a press to read as distinct.
2. Don't put a transition on the way in. Add 150 milliseconds of smooth color change and a quick tap lifts before the change finishes, leaving nothing visible. Appearing should be instant; only the disappearance gets a short fade.
3. Keep all three states moving in the same direction. Darker from default to hover, darker again from hover to active. Reverse direction partway and color alone no longer tells the user which stage they're in.
4. Hand off when the result is slow. This state vanishes the moment the press lifts, so for an action that answers a second later, lock the control and switch to a waiting indicator. Skip that and the screen goes unresponsive again right after the finger lifts.

On touch screens this state carries more weight. A mouse gets a hover step announcing the control before the press; a finger gets no such step, which makes active the only immediate response available.

"Tapping it does nothing visible. Looks like the active state is missing."

The appearance that changes on press was never implemented.

"We added a 150-millisecond transition and now a fast tap shows nothing."

Put the appearance time back to zero.

"Hover and active are the same color. You can't tell you pressed it."

The two states overlap in how far they change, so neither reads distinctly.

Noa wrote the order into a table while tidying up Pagedeck's button states: grey 60 at rest, 70 on hover, 80 while pressed. Theo set the transition in to zero and left 80 milliseconds on the way out, so a fast press still shows the change and releasing doesn't snap.