What is a micro-animation in UX design?
A micro-animation is a brief, focused animation triggered by a specific user action or system event that provides immediate feedback at the level of an individual interaction. Unlike broader transitions that animate between full screens or states, micro-animations respond to specific actions: a button briefly scales down and back on press to confirm the tap, a toggle slides and changes color when switched, a heart icon bounces when a user likes something, a checkmark draws itself when a task is completed. These small animations communicate that the interaction was registered and that the system has responded.
Why do micro-animations improve user experience?
Micro-animations close the feedback loop at the most granular level of interaction, reducing the uncertainty that causes users to repeat actions or question whether their input was received. A button that provides no visual response to a tap leaves users unsure whether the tap registered. A button that briefly animates on press eliminates that uncertainty immediately. Beyond functional feedback, micro-animations contribute to the perceived quality and personality of an interface: products with thoughtful micro-animations feel more crafted and responsive than equivalent products without them, even when functionality is identical.
How to design effective micro-animations?
Effective micro-animations are fast, typically between 100 and 300 milliseconds, purposeful, directly tied to a specific action or state change, and subtle enough to not distract from the task at hand. They should feel like a natural response to the interaction rather than a performance. The easing curve matters: most natural-feeling animations use ease-out or ease-in-out curves rather than linear motion, because objects in the physical world rarely move at constant speed. All micro-animations must respect the prefers-reduced-motion accessibility preference, which means providing a non-animated alternative for users who need it.