The best micro-interactions are the ones users don't consciously notice — but would absolutely miss if they were gone.
Animation is easy to add and easy to overdo. A bouncing icon or a sliding panel can look impressive in a demo and become irritating by the tenth use. The test for any micro-interaction is simple: does it help the user understand what just happened, what is happening now, or what they can do next? If not, it is decoration, and decoration has a cost.
Four Jobs a Micro-interaction Can Do
Feedback: confirming that an action registered. A button that visibly presses, a checkbox that ticks immediately, a row that highlights when selected. Without feedback, users click twice.
Status: showing that something is in progress or has finished. A spinner that becomes a check mark, a progress bar on an upload, a saved label that appears after an autosave. Status reduces anxiety during waits.
Affordance: hinting at what is possible. A card that lifts slightly on hover suggests it can be clicked; a handle that appears on a list row suggests it can be dragged.
Continuity: helping users keep their place when the screen changes. A panel that slides in from the button that opened it, or an item that animates into its new position after sorting, shows where things went instead of making them reappear somewhere new.
Timing Is Most of the Craft
Most interface motion should be short. Small feedback such as a button press works best almost instantly, transitions between states generally feel right somewhere around 150 to 300 milliseconds, and anything much longer starts to feel like waiting. Easing matters too: elements entering the screen should decelerate into place, and elements leaving should accelerate away.
.toast {
transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
opacity 200ms ease-out;
}
.button:active {
transform: scale(0.98); /* instant press feedback */
}Respect Reduced Motion
Some people experience discomfort or dizziness from movement on screen, and operating systems let them ask for less of it. Honour that setting. Keep the information, a state change, a confirmation, a new position, but drop the movement.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Patterns Worth Getting Right
Inline validation that waits until a user leaves a field, rather than shouting while they are still typing. Optimistic saving, where the interface shows the change immediately and quietly rolls back with a clear message if the server rejects it. Undo instead of confirmation dialogs for reversible actions, so users stay in flow. Skeleton placeholders that match the final layout, so content does not jump when it arrives.
A Quick Checklist
For every animation in a flow, ask which of the four jobs it does, whether it would still make sense on the hundredth use, whether it is short enough that nobody waits for it, and whether it still communicates clearly with motion reduced. Keep the ones that pass. Remove the rest without regret.