Micro-Interactions

Design tiny moments of feedback that make interfaces feel alive and responsive.

Category: Design | Type: Skills

Skills: Interaction Design, Animation, User Feedback

Prompt

Micro-interactions are the difference between functional and delightful. Anatomy (Dan Saffer's model): 1. Trigger — what initiates it (user action or system event). 2. Rules — what happens (the logic). 3. Feedback — what the user sees/feels/hears. 4. Loops & Modes — does it change over time? Key patterns: Button Press — subtle scale (0.95) + color shift on press. Loading — skeleton screens over spinners (perceived performance). Success — checkmark animation with haptic feedback. Error — shake animation + red highlight on the specific field. Hover — gentle elevation change implying interactivity. Principles: micro-interactions should be fast (< 300ms), consistent (same action = same feedback everywhere), and invisible (users feel them, not notice them). Over-animation is worse than no animation.

Browse all prompts at Ask Wisely