In "Microinteractions: Designing with Details" (2013), Dan Saffer broke every small interface moment into four working parts: trigger, rule, feedback, and loops and modes. Pull-to-refresh, the gesture Loren Brichter built into his Twitter client Tweetie in 2009 - later patented by Twitter, which pledged to use the patent only defensively - is the framework in miniature: a manual trigger (the drag), a rule (release past a threshold to fire), feedback (an arrow flips and a spinner appears), and a loop (the spinner runs until the fetch resolves). Nearly every micro-interaction below breaks down the same way.
The Four Parts, Briefly
1. Trigger
What starts the interaction. Manual triggers are user-initiated - a tap, a swipe, a long-press. System triggers fire automatically when a condition is met, like a battery-low warning or an "you've been idle" prompt.
2. Rule
What happens once the trigger fires, and under what conditions. A password field's rule might be "show a green check only once every listed requirement is met" - the rule is invisible to the user, but its output has to be predictable or the interaction feels broken.
3. Feedback
How the system communicates that the rule fired. Feedback can be visual, auditory, or haptic, and it's the only part of a microinteraction most users consciously register.
4. Loops and Modes
A loop governs how long an interaction repeats - a spinner during a fetch, a streak counter that resets daily. A mode is a state that persists until deliberately changed - dark mode, airplane mode, "Do Not Disturb." Saffer's point: modes should be rare, because every mode is a chance for a user to forget which one they're in.
14 Micro-Interactions Worth Studying
1. Pull-to-Refresh (Twitter/Tweetie, 2009)
Covered above - still the clearest real-world example of all four parts working together, which is why it's been copied into Gmail, Chrome, and nearly every feed-based app since.
2. Gmail's Undo Send
The trigger is pressing Send; the rule is a configurable 5-, 10-, 20-, or 30-second hold before the message actually transmits; the feedback is a bottom-left toast with an Undo button; the loop ends the moment the window closes. It isn't really an "undo" - it's a delayed send - but the feedback makes it feel instant and reversible, which is the only part users need to believe.
3. Duolingo's Streak Flame
A system-triggered celebration (sound, animation, occasionally confetti) fires on lesson completion, and the streak count is a mode that persists across sessions until a missed day resets it. Duolingo has published data showing animation changes to the streak feature measurably moved 7-day retention - a rare case of a company disclosing that a microinteraction's polish, not just its existence, affected the metric.
4. Instagram's Double-Tap to Like
A manual trigger (double-tap) with a rule that only toggles one direction visibly (double-tapping an already-liked photo does nothing visible, avoiding accidental unlikes) and feedback so overbuilt it became the interaction's identity: a heart bursts from the center of the image regardless of where the tap landed.
5. Real-Time Password Validation
Each keystroke is a system trigger; the rule checks the input against every requirement (length, character types) independently; feedback turns each requirement green the instant it's satisfied, instead of waiting for form submission to report every failure at once. This pattern is one of the most studied fixes for form-abandonment in usability research.
6. Skeleton Screens
Designer Luke Wroblewski coined the term in 2013, proposing gray content-shaped placeholders instead of a spinner while a page loads. The trigger and rule are system-driven (navigation fires it, the rule is "show structure before content"); the feedback is the placeholder itself. Research on the pattern found it reliably outperforms spinners on perceived speed even when actual load time is identical - the interaction doesn't make anything faster, it changes what the wait feels like.
7. Slack's Loading Messages
A system trigger (app launch) pairs with a rule that randomly selects one of hundreds of written lines - jokes, trivia, tips - as feedback instead of a generic "Loading…" string. It's a small decision that turns dead time into personality, and costs nothing functionally; the loop just ends when the connection completes.
8. Toggle Switches
Saffer's textbook example of a mode: flipping a toggle doesn't just fire once, it sets a persistent state - dark mode, notifications on or off - that has to be visually unambiguous at a glance, because a user checking a toggle days later has no memory of setting it, only the switch's current position to go on.
9. Inline Form Error Recovery
Rather than clearing a form and returning a generic error banner, a well-built rule flags only the specific field that failed, keeps every other field's input intact, and feedback (a red outline plus a specific message) appears next to the field itself. The rule here is really a scoping decision: fail small, not everything at once.
10. Progress Bars With a Moving Target
A loop that runs from trigger to completion, but the best-performing versions (checklist-style onboarding, file uploads) show discrete steps rather than a smooth percentage, because discrete steps let users predict when the loop ends - smooth percentage bars are notorious for appearing to stall near 90%.
11. Contextual Tooltips in Onboarding
A system trigger (first visit to a screen) with a rule limiting the tooltip to appear once, feedback that's deliberately lower-intensity than a modal (no overlay, no forced dismissal), and no loop - it's designed to be seen once and never again, which is what separates a tooltip from an interruption.
12. Apple's "Do Not Disturb"
A mode in the strictest Saffer sense: triggered manually or on a schedule, it changes how every other trigger in the system behaves (notifications, calls) until explicitly turned off. Modes like this are powerful exactly because they're invisible most of the time - which is also why poorly signaled modes cause the most user confusion of anything on this list.
13. Spotify's "Like" Heart Animation
A manual trigger (tap) with instant feedback (the heart fills and briefly scales up) and a rule that's fully reversible with the same gesture - unlike Instagram's double-tap, a single tap toggles cleanly in both directions, a deliberate rule difference between two products solving a similar problem.
14. iOS Haptic Feedback on Toggles and Pickers
Feedback delivered through touch rather than sight: a light tap when a switch flips, a stronger one when a destructive action is confirmed. It's the only channel on this list that works with the screen not in view, and Apple's own Human Interface Guidelines treat haptic intensity as a rule to be matched to the significance of the action - a picker wheel gets a light tick, a delete confirmation gets a heavier thud.
Designing Your Own
- Name all four parts before building anything - if the rule can't be stated in one sentence, the interaction is underspecified.
- Keep feedback proportional. A tooltip that behaves like a modal, or a toggle that behaves like a tooltip, breaks the user's model of what kind of interaction they're in.
- Minimize modes. Every mode is a state a user has to remember they're in - Saffer's framework treats them as a last resort, not a default tool.
- Test the loop's exit condition specifically. A spinner or progress bar that never resolves, or resolves inconsistently, does more damage than having no feedback at all.
None of these fourteen examples required a redesign to ship. Each one is a small, scoped addition to an existing flow - which is the actual argument for taking microinteractions seriously: the return on a week of polish here is disproportionate to the effort, in a way a broader visual refresh usually isn't.
