Micro-interaction

Concept

A short response of roughly 100 milliseconds that attaches directly to one small action, like pressing a button.

Why it exists

When the screen stays quiet, users have no way to confirm their input landed. Press something, see nothing change, and most people press it again.

That happened at Pagedeck. The share button had no pressed state, so the same document got shared twice. The recipient got two identical notifications, and the cause only turned up after a support message arrived. The button had worked correctly; the only thing missing was the signal that it had been pressed. A bug report that isn't a bug usually points at something like this.

That signal is called feedback — any response that tells a user what just happened. A micro-interaction is the smallest unit of it, the one attached to a single action.

How it works

Its job is to report, on the spot, that input landed. Press a heart button and it swells slightly and settles back; flip a toggle and the knob slides to the other side.

Three things get decided: what changes, how long the change takes, and how the speed varies in between. What changes can be one or two of size, color, position, and opacity. Move all four at once and a small response starts reading as a production number, and the user's attention goes to the animation instead of the result.

The length is set by duration, and this unit runs 100 to 200 milliseconds. The shortness has a reason. Give it 400 and there's now time to watch the response after pressing, which turns a notification into a wait. On a button pressed twenty times a day, that difference accumulates into seconds per day, and it accumulates in the direction of the product feeling slow.

The shape of the speed change comes from easing. Hold the speed constant from start to finish and the motion looks pushed by a machine, because objects in the physical world slow before they stop. Borrowing that expectation is most of what makes 100 milliseconds feel deliberate rather than glitchy.

There are cases for removing it. For users who have turned on reduced motion, drop responses that bounce or travel and keep only a change of color. The reporting function survives while the motion that causes dizziness comes out.

How it sounds at work

"I can't tell whether this button registered. Let's attach a response, even 100 milliseconds."

There's no signal at all, so users may press twice.

"400 milliseconds is too long. What was meant as a notification became a wait."

The length has exceeded what this unit is for.

"If reduced motion is on, drop the bounce and keep just the color change."

Delivering the same signal without movement.

Theo added a pressed state to the share button using a short duration the system already defined. Noa asked to keep only the color change and drop the size change, and the duplicate-share support messages stopped after that.

Easily confused with

TermWhat it bridgesHow it differs
TransitionThe gap where a state or a whole screen changesMuch larger areas move — a card in a list growing into the document screen — and it runs longer, 200 to 300 milliseconds. Its purpose is telling you where you came from, which is a different job

Where to go next

Last updated 2026-09-16