What is Microinteractions?

Microinteractions are small, single-purpose animations that provide feedback or guide user behavior. Think: button ripple on click, checkmark animation when task completes, heart filling when you like something. They make interfaces feel responsive, alive, and polished—but only when done subtly.

When Should You Use This?

Use microinteractions for feedback (button clicked, form submitted, item saved), state changes (toggle on/off, checkbox checked), and system status (loading, success, error). Keep them fast (200-400ms), purposeful (communicate something), and skippable (don't block user). Great for onboarding, gamification, and premium feel. Avoid in data-heavy apps where speed matters more than delight.

Common Mistakes to Avoid

• •Too slow—microinteractions should be quick; 200-400ms max or they feel laggy
• •Overusing them—animation on every action is exhausting and slows users down
• •Blocking interactions—never prevent users from continuing while animation plays
• •No purpose—animation for animation's sake is annoying; it should communicate state
• •Ignoring reduced-motion—respect prefers-reduced-motion for accessibility

Real-World Examples

• •Twitter—heart animation when liking a tweet, feels satisfying
• •Stripe—checkmark animation on successful payment, builds trust
• •Linear—smooth transitions between states, everything feels connected
• •iOS—spring animations everywhere, makes OS feel alive