Think about pressing a lift button that doesn't light up. You press it again, then again, unsure whether anything happened. Websites do this to people all the time. A form submits with no visible response. A button gets tapped and nothing seems to change for a second. An item is added to the cart and the only sign is a tiny number that changes in a corner.
Microinteractions are the small moments of feedback that fix this. They're not decoration. They tell people "yes, that worked" or "here's what's happening."
Where they matter most
Buttons. A subtle change on hover and a clear pressed state on tap. On mobile, where there's no hover, the pressed state is especially important.
Form submission. Disable the button and show a loading state while the form sends, then a clear success message. This alone prevents a lot of duplicate submissions.
Form validation. Gentle, inline messages as people fill in fields, rather than a wall of red errors after they hit submit. A small check mark when an email address is valid is reassuring.
Add to cart. A brief animation or a slide-out mini cart confirms the action and shows what's next.
Copy buttons. A short "Copied!" message after clicking "copy link" or "copy code."
Toggles and switches. A smooth slide rather than an instant jump helps people understand what changed.
Principles we follow
Fast. Most microinteractions should take 100 to 300 milliseconds. Longer animations start to feel sluggish, especially on repeated actions.
Purposeful. Every animation should communicate something. If it doesn't help the visitor understand what happened, remove it.
Consistent. Similar actions should behave the same way across the site. If one button lifts on hover, they all should.
Respectful of preferences. Some people experience discomfort or dizziness from motion. The prefers-reduced-motion media query lets us tone animations down or remove them for those visitors. We build this in from the start.
Lightweight. Most microinteractions can be done with CSS transitions alone, with no JavaScript library required. Heavy animation libraries hurt performance, especially the responsiveness metric INP.
A recent example
On a client's appointment booking page, people were frequently booking the same slot twice. The cause: after tapping "Confirm booking", nothing happened visually for about two seconds while the server processed it, so they tapped again.
We added three small things:
- The button immediately changed to "Booking..." with a small spinner and became disabled.
- On success, a short check mark animation and a clear confirmation message with the date and time.
- On failure, a friendly inline message explaining what went wrong and how to try again.
Duplicate bookings dropped almost to zero, and support calls about "did my booking go through?" fell noticeably. About half a day of work.
Don't overdo it
The goal isn't to make everything move. A site where every element bounces, fades and slides becomes tiring quickly. The best microinteractions are ones visitors don't consciously notice. They just feel like the website is responsive, reliable and paying attention.
That feeling, multiplied across every click and tap, is a big part of what makes people trust a business online.
