Microinteraction
Interactions & GesturesA small, contained interaction that accomplishes a single task, providing feedback and enhancing the user experience through subtle animations and responses.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Microinteraction coming soon.
How It Works in Apps/Websites
Microinteractions are moment-to-moment interactions: a like button animating, a toggle switch sliding, a pull-to-refresh spinner, or a form field highlighting on focus. They consist of: trigger (user action), rules (what happens), feedback (visual response), and loops (repeat behavior). They make interfaces feel alive and responsive.
How AI Interprets This Term
When you say 'microinteraction', AI expects: small, delightful animations and responses - button ripple effects, heart animation on like, checkbox morphing to checkmark, toast sliding in, hover effects on cards. Subtle, purposeful, quick (100-300ms typically).
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Add a like button with heart animation
Design microinteractions for a like button: on tap, heart icon scales up 1.2x then back, fills with red, small particles burst out, count increments. If already liked, reverse animation and decrement. Total duration 300ms with ease-out.
Show a plain toggle switch vs one with smooth thumb sliding, color transition, and subtle bounce
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •User action confirmation
- •System status changes
- •Enhancing engagement
- •Guiding user attention
When NOT to Use
- •When they delay task completion
- •For decoration only
- •Performance-critical applications