When you tap a heart icon and it pulses, or a form field shakes after a bad password, you have seen a micro-interaction. These small, single-purpose responses tell users that the system heard them. Designers Dan Saffer and others break them into four parts, and thinking in that structure makes them easier to design and test.
The four parts
- Trigger: the user action or system event that starts it, such as a click, a swipe or a finished upload.
- Rules: what happens once triggered. A toggle flips; a counter increments.
- Feedback: what the user sees, hears or feels, such as a color change, a movement or a vibration.
- Loops and modes: how long it lasts and whether it repeats or changes after repeated use.
What micro-interactions do well
- Confirm actions. A button that changes from "Add to cart" to a check mark tells the user the action worked.
- Show system status. A spinner, a progress bar or skeleton screen reassures users during waits.
- Prevent errors. A live password strength meter or character counter helps users fix problems before they submit.
- Guide attention. A subtle pulse on a new notification badge draws the eye once without nagging.
- Add personality. A brand-specific loading animation or a playful empty state makes a product memorable.
Timing and easing
Most interface animations should last between 150 and 300 milliseconds. Shorter feels abrupt, and longer slows people who repeat the action many times. Use ease-out curves for elements entering the screen, ease-in for elements leaving, and ease-in-out for movements across the screen. Avoid linear motion for UI because it looks mechanical.
.btn { transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }Performance
Animate transform and opacity. Browsers can run these on the GPU without recalculating layout. Animating width, height, top or left forces layout work and can stutter on mid-range phones. For complex sequences use the Web Animations API, CSS animations or a library such as Framer Motion. Lottie works well for designer-made vector animations at small file sizes.
Accessibility
- Respect
prefers-reduced-motionand replace movement with a simple fade or a static state. - Avoid flashing content more than three times per second, which can trigger seizures.
- Never convey information through animation alone. Pair a success animation with text or an
aria-liveannouncement. - Give users enough time to read messages that appear and disappear.
Common mistakes
Teams often animate everything, which turns the interface into noise. Pick the moments that matter: completing a task, recovering from an error, first-time onboarding. Another common problem is delay. An animation that blocks the next action, such as a 600-millisecond modal transition users must wait through, becomes irritating by the tenth visit. Let users interrupt animations and keep the interface responsive during them.
Measure the effect
Test micro-interactions with A/B experiments. Compare form completion rate, error rate and time to complete for the version with and without the change. A good micro-interaction moves a number; a decorative one only adds code.
Where to begin
Examples worth copying
The add-to-cart button
Click the button and it shows a spinner for the length of the request, then swaps to a check mark and the text "Added" for two seconds before returning to normal. The cart icon in the header bounces once and its counter updates. The user gets confirmation at the point of action and at the place they will look next.
Inline form validation
A field validates when the user leaves it, not on every keystroke. A valid email shows a quiet green check. An invalid one shows a short message such as "Add an @ sign" under the field, with the border turning red and the error linked to the input for screen readers. The user fixes problems while the context is fresh instead of facing a wall of errors at submit.
Pull to refresh and skeleton screens
Mobile feeds let people pull down to reload, and a rotating indicator confirms the request. Skeleton screens show gray placeholders shaped like the final content, which makes waits feel shorter than a blank page or a spinner because the layout appears to be loading in place.
Toggle switches and like buttons
A switch slides with a short ease-out and changes color, so the state is clear at a glance. A like button might scale up briefly and fill with color. Keep each of these under 300 milliseconds and make sure the new state is also exposed through an accessible attribute such as aria-pressed or aria-checked.
How to test whether they help
Watch five users complete a task with the sound off and no coaching, and note every moment they hesitate or click twice. Hesitation points to missing feedback. Then run an A/B test on the highest-traffic flow and compare task completion, error rate and time on task. Remove any effect that does not improve a measure or that people describe as slow or distracting.
Common questions
Do animations slow my site down?
Animations that use transform and opacity run on the compositor and cost little. Large Lottie files, scroll-linked effects written in JavaScript and animated box shadows can hurt performance, so profile on a mid-range phone.
Should every button have a hover effect?
Hover cues help pointer users find clickable elements, but touch devices have no hover, so never hide essential information in a hover state. Provide a focus style for keyboard users that is at least as visible as the hover style.
List your five most-used flows: sign-up, search, checkout, upload, settings. For each, check the system's response at every step. Where the user waits or wonders "did that work?", add feedback. We design and build these details as part of our UI/UX and web development work. To improve the feel of your product, talk with our designers.