← Go Back

Microinteractions

What are Microinteractions?

Microinteractions are small, contained product moments tied to a single use case: they provide feedback, show state, or guide the user. They’re the brief animations and visual responses that make the interface feel responsive and clear (e.g. button press, toggle switch, like animation, loading indicator).

Use it when: you need to confirm an action, show a state change, or make a small moment feel clear or satisfying without overwhelming the user.

Copy/paste template

  • Trigger: [user action or system event, e.g. click "Save"]
  • Feedback: [what the user sees/hears, e.g. button pressed state, success check]
  • Duration: [short, e.g. 200–400 ms for most UI feedback]
  • Accessibility: [reduced motion alternative, focus visible, no reliance on motion alone]

Why Microinteractions matter

  • Give clear feedback so users know their action was received and what happened.
  • Reduce uncertainty and perceived wait time (e.g. loading or progress).
  • Reinforce interaction patterns and make the product feel coherent.
  • Can add a moment of delight when they’re purposeful and consistent with motion design principles.
  • Support accessibility when they’re optional or have a reduced-motion alternative.

What a good microinteraction includes

Checklist

  • [ ] Clear purpose: feedback, state change, or guidance (not decoration only).
  • [ ] Short duration: typically 200–500 ms for simple feedback so the UI feels responsive.
  • [ ] Consistent with the rest of the product (timing, easing, style).
  • [ ] Respects reduced motion: use prefers-reduced-motion or a setting; essential info doesn’t rely on motion alone.
  • [ ] Performant: doesn’t cause jank or block interaction (prefer transform/opacity where possible).

Common formats

  • Trigger–feedback: user acts (click, tap, toggle), UI responds (state change, brief animation).
  • System-initiated: e.g. loading spinner, progress bar, notification appearance (with clear meaning and, where relevant, reduced-motion option).

Examples

Example (the realistic one)

On "Save", the button shows a pressed state, then a brief checkmark and "Saved" label. Duration is under 400 ms. If the user has reduced motion enabled, the checkmark and text still appear but without animation. The same timing and style are used for other primary actions so the product feels consistent.

Common pitfalls

  • Decorative only: animation that doesn’t communicate state or feedback. → Do this instead: tie every microinteraction to a clear purpose (feedback, state, or guidance).
  • Too long or distracting: animation drags or pulls focus from the task. → Do this instead: keep UI feedback short (200–500 ms) and subtle; save longer motion for intentional moments.
  • Ignoring reduced motion: motion is the only way to understand the result. → Do this instead: respect prefers-reduced-motion and provide a static or minimal-motion alternative.
  • Inconsistent: similar actions behave differently across the product. → Do this instead: define a small set of timings and patterns in your motion design or design system and reuse them.
  • Microinteractions vs motion design: Motion design is the broader practice of using animation and transition; microinteractions are the small, task-focused moments within it.
  • Microinteractions vs interaction patterns: Interaction patterns define how controls work (e.g. "how buttons behave"); microinteractions are the specific feedback and state changes in those patterns.
  • Microinteractions vs loading states: Loading states are one type of microinteraction (system-initiated feedback); microinteractions also include button feedback, toggles, and success/error cues.

Next step

If you’re defining feedback and state changes, align with motion design and interaction patterns. Ensure accessibility is covered (reduced motion, focus, no motion-only information). Document microinteraction timing and style in your design system.

Related Terms