Your site can be visually clean, well structured and quick to load. And yet, if nothing reacts when someone clicks, if forms give no visual feedback, if buttons stay mute on hover, the visitor feels a discomfort they cannot necessarily name. That discomfort is the absence of micro-interactions. And it costs your brand credibility.
What is a micro-interaction?
A micro-interaction is an interface's visual response to a user action. Your button changing shade on hover. The form field turning green once it is filled in correctly. The loading animation showing that your page is processing a request. These details are there for a precise reason: to reassure, to confirm and to guide.
The micro-interactions worth getting right first
- Button hover: a change of colour or opacity with a transition of 150 to 200 ms
- Form field validation: an immediate visual indicator that confirms or flags an error
- Feedback after submission: a clear confirmation message rather than a plain page reload
- Links within text: a visible change on hover to signal that they are clickable
- Scrolling to anchors: smooth scrolling rather than an abrupt jump to a section
The 200 ms rule: a transition that is too fast goes unnoticed, one that is too slow feels heavy. For most micro-interactions, 150 to 200 milliseconds is the ideal range. Below that, the effect is invisible. Above it, navigation feels sluggish.
Useful animation versus decorative animation
An animation is useful when it carries information, confirms an action or guides the eye towards the next step. It becomes decorative when it loops, distracts attention or slows down loading. Work by Nielsen Norman Group on user behaviour documents that unsolicited animations increase cognitive load, particularly on mobile. The animation guide from web.dev recommends respecting the prefers-reduced-motion CSS property for users sensitive to on-screen movement.
Free tool: open Chrome DevTools (F12), switch on mobile emulation (Ctrl+Shift+M) and browse your site as if you were a customer. Note every place where you expect visual feedback and nothing happens. That is your design priority list.
An interface that responds well to every action gives the impression of a carefully made product, of a team that thought about each detail. For your micro-interactions to fit without dissonance, they have to respect your brand's overall visual logic. Our article on visual consistency in web design explains how to build that coherence from your colours through to your interactive components.