Micro interactions in web design: small feedback that confirms an action
Micro interactions in web design are the small responses to a single action: a button that visibly presses, a toggle that slides, a field that flags an error, a form that confirms it was sent. Their job is to tell the visitor “that worked” or “that needs fixing” in a fraction of a second. If one draws attention to itself, it's too big.
Where the idea comes from
The term was popularised by Dan Saffer's book Microinteractions, which described them as contained product moments built around one task, with a trigger, rules, feedback and sometimes loops or modes. Physical products had them long before screens: the click of a switch, the light on a kettle. On the web they're mostly feedback: the interface acknowledging what the visitor just did.
The four parts
- Trigger
- What starts it: a click, a tap, a key press, a hover, or a system event such as a form being received.
- Rules
- What happens: the setting changes, the item is added, the field is checked.
- Feedback
- What the visitor sees or hears: a colour change, a movement, a message, a change of label.
- Loops and modes
- What happens over time or on repeat: a reminder, a state that persists, a different response the second time.
Examples that earn their place
| Moment | Good feedback | Avoid |
|---|---|---|
| Button press | A slight darkening or a one- or two-pixel shift on press, within about 100ms | Ripples, bounces or glows that outlast the click |
| Hover on a link or card | Underline appears or thickens; a card's border or surface changes | Fading the whole element's opacity, which reads as disabled; lifting every card |
| Toggle or checkbox | The thumb slides and the colour changes together, with a text label | Colour alone to show on and off |
| Choosing a time slot | The chosen slot fills with a solid colour and stays filled | A subtle tint that's hard to tell from hover |
| Field validation | A clear message and border colour after the visitor leaves the field or submits | Red errors appearing while the visitor is still typing |
| Form sent | A confirmation page or message in words saying what happens next | A brief toast that vanishes before it's read |
Timing
Feedback has to feel immediate. Responses within roughly a tenth of a second are perceived as instantaneous, which is why press and hover feedback should start at once and usually finish within 100ms to 200ms. Toggles and small movements can take 150ms to 250ms. Anything longer starts to feel like waiting. Use a strong ease-out curve so most of the change happens straight away; the default ease is soft enough to feel slightly late. UI animation duration and easing curves for UI animation cover both in more depth.
Do's and don'ts
- Do make the feedback match the size of the action. A small press gets a small response; a completed purchase gets a full confirmation.
- Do keep one style. If buttons darken on hover, all buttons darken on hover.
- Don't animate for decoration. If nothing changed, nothing should move.
- Don't hide the result in the animation. The new state must be clear when the motion is switched off.
- Don't rely on hover. Touch screens don't have it, so anything hover reveals must also be reachable another way.
Accessibility
- Focus is a micro interaction too. Keyboard users need a visible focus indicator on every control; WCAG 2.2 requires one at level AA (2.4.7). See focus state design.
- Don't use colour alone to show a state such as selected, on or invalid. Pair it with a label, an icon or a shape change.
- Respect reduced motion. Under
prefers-reduced-motion: reduce, replace movement with an instant change of colour or label. - Announce what isn't visible. In scripted interfaces, status messages that appear without moving focus, such as “Added to basket”, should be exposed to screen readers, for example with a live region.
Micro interactions in Anticode
Anticode's design-engine pages have no scripts, so their micro interactions are CSS states. Every design system defines a visible :focus-visible outline in the action colour, button hovers that change the fill rather than fade it, and booking time slots that fill solidly when chosen. Form fields mark themselves invalid only after the visitor has interacted with them, and a sent form leads to a thank-you page in words. Brutalist buttons press into their hard shadow on hover. Under reduced motion, transitions and animations are switched off.
The Critic checks the habits that make feedback feel generic on every build: default ease timing curves, hovers that only fade the opacity, and cards that all lift on hover. The layout editor's inspector sets an element's scroll motion (none, rise or parallax); it doesn't add hover or press effects.
Questions people ask
What are micro interactions?
Small, single-purpose moments of feedback in an interface, such as a button press, a toggle switching or a field showing an error.
Do micro interactions need JavaScript?
Many don't. Hover, focus, pressed, checked and invalid states can all be styled in CSS. Messages that depend on a server response, or live updates, need a script or a new page.
How long should a button animation be?
Short: feedback should begin immediately and usually finish within 100ms to 200ms.