Micro-interactions are the small responses that confirm something happened: a button pressing in, a toggle sliding across, a heart filling when you like a post. They are tiny, and they shape how responsive a product feels.
Most of that feeling comes down to timing.
Faster than you think#
Feedback for a direct action should start immediately and finish quickly. Common practice places most interface transitions between roughly 100 and 300 milliseconds. Hover and press states sit at the short end, larger movements such as panels and page transitions at the longer end.
Rough starting points#
- Hover and press states: around 100 to 150 milliseconds
- Toggles, checkboxes and small reveals: around 150 to 250 milliseconds
- Sheets, panels and page transitions: around 250 to 400 milliseconds
- Anything longer should have a clear reason
Easing matters as much as duration#
An animation that starts slowly feels laggy even if it is short. Ease-out curves begin quickly and settle gently, so the response feels immediate. Ease-in curves suit things leaving the screen. Linear timing is best kept for continuous motion such as progress bars.
Don't block the person#
If a micro-interaction delays the next action, it becomes friction. People should be able to tap again, scroll or navigate while an animation finishes.
The best feedback is felt before it is seen.
Test on real devices#
Timing that feels right on a fast laptop can feel sluggish on a mid-range phone. Test on the devices your audience actually uses, and adjust until the interface feels like it responds to the finger, not after it.
Consistency over perfection#
The exact number matters less than using the same timing for the same kind of change everywhere. Define a few durations and curves as tokens, apply them across the product, and the interface will feel coherent even if each value is a little different from a textbook.
