Design & Accessibility
What is Microinteractions?
Microinteractions are small animations and feedbacks (hover, loading, confirmation) that bring an interface to life and improve perceived quality.
A microinteraction has 4 parts: trigger (what fires it), rules (what happens), feedback (what the user sees) and loops/modes. E.g., drag an item, see hover/lift, get confirmation on drop.
Done well, microinteractions communicate state without text, reduce perceived wait and differentiate premium products. Done excessively, they clutter — rule: every animation serves a function.
Related terms
Frequently asked questions
Do microinteractions hurt performance?
Badly implemented (heavy JS, layout shift), yes. Use CSS transforms/opacity + GPU acceleration — CPU-heavy is the exception.
Where to apply microinteractions first?
In action feedback (button pressed, form submitted, loading) — where the user needs to know something happened.