What Is a Micro-Interaction?
Dan Saffer, who wrote the canonical book on the subject, defines a micro-interaction as a contained product moment that revolves around a single use case. The like button animation on Instagram. The pull-to-refresh indicator. The haptic pulse when your Apple Pay payment goes through.
Each one is small. Collectively, they define the feel of an entire product.
The Four Parts of Every Micro-Interaction
Trigger: What initiates the interaction. User-initiated (tap, hover, scroll) or system-initiated (low battery warning, error state).
Rules: What happens when the trigger fires. The logic of the interaction.
Feedback: How the product communicates that the rules are running. The visual, auditory, or haptic response.
Loops & Modes: What happens to the micro-interaction over time. Does it repeat? Does it behave differently after first use?
Why They Matter More Than They Look Like They Should
Micro-interactions address one of the most persistent anxieties in digital product use: uncertainty. Did my click register? Is the file uploading? Did my form submit? These questions exist in the gap between user action and system response.
Without feedback, that gap is stressful. With a well-designed micro-interaction - a button that depresses, a spinner that appears, a checkmark that draws itself - the gap disappears.
The Anatomy of a Good Button State
A well-designed button has at minimum four states: default, hover, active (depressed), and disabled. In practice, great products also design loading states (for async actions) and success/error states (post-completion).
The difference between a website and a product is usually this: the website has one button state; the product has five. The product feels alive. The website feels static.
Animation Principles for Micro-Interactions
Effective micro-interaction animations follow principles borrowed from physical animation:
Ease in, ease out. Nothing in the real world starts and stops at constant speed. CSS 'cubic-bezier' easing curves should reflect how objects actually move.
Duration. UI animations should sit between 100ms (imperceptible if shorter) and 300ms (starts feeling slow if longer). Transitions that take more than 500ms feel broken on fast interactions.
Purpose. Every animation should have a job - to confirm, to guide, or to delight. Animations that exist purely to show off are self-indulgent and usually make interfaces feel slower.
The Delight Layer
Above confirmation and guidance is delight - the unexpected, well-crafted moments that make users feel something. Mailchimp's nervous chimp before you send a campaign. Slack's loading messages. Notion's block animations.
These moments aren't frivolous. They're brand moments. They're what users screenshot and share. They're what makes someone describe a product as "feeling premium" without being able to articulate why.
