Micro-interactions

They reduce uncertainty. The user knows immediately whether their action worked, whether something is being processed or whether something has failed. The interface becomes predictable, and its use less hesitant. Well designed, they stay invisible, and you only notice them when they are missing.

Dan Saffer describes four components. The trigger, the action that starts it, a click, a hover or loading. The rules, what should happen in response. The feedback, the way the interface communicates what is happening. The loops and modes, the duration and any repetition. This breakdown helps design intentional micro-interactions rather than animations added as an afterthought.

By keeping it short, between 150 and 300 milliseconds for a state transition, beyond which the user perceives a delay. By keeping it discreet, since an animation that draws too much attention distracts instead of guiding. And by respecting system preferences, with the prefers-reduced-motion rule allowing animations to be turned off for people who are bothered by movement.

Most current design tools include a prototyping feature that is enough to design and test them. For implementation, CSS transitions and animations cover the majority of cases. More complex animations go through dedicated libraries, such as Lottie for vector animation. What matters most is testing before implementing, since an animation that looks convincing when static can become annoying in use.