Back to Playbook

Micro-interactions

Small, delightful animations that provide feedback and make the UI feel alive.

Why it matters

Micro-interactions are the secret sauce of great product design. They acknowledge user actions, provide immediate feedback, and guide attention. While often subtle, they significantly enhance the perceived performance and quality of an application.

Micro-interaction Playground

Test how timing and easing affect the feel of common interactions.

The 4 Parts

Trigger

What starts the interaction? Can be user-initiated (click, hover) or system-initiated (notification).

Rules

What happens once triggered? The logic that determines the behavior of the interaction.

Feedback

How the user knows what's happening. Visual, auditory, or haptic cues.

Loops & Modes

How long does it last? Does it repeat? How does it change over time?

Design Checklist

  1. Purposeful

    Ensure the animation serves a function (e.g., showing status) rather than just being decorative.

  2. Fast

    Keep interactions snappy (usually under 300ms) so they don't slow down the user.

  3. Subtle

    Don't distract the user. The best micro-interactions are felt, not seen.

Previous: Stroke Style Next: Animation