microinteractions

---
name: microinteractions
description: Use when designing button feedback, loading states, toggles, or animations. Applies Dan Saffer's Trigger/Rules/Feedback/Loops framework to make interfaces feel responsive.
category: Business Knowledge
version: 1.0.0
tools: []
---

# Microinteractions Framework

Design the tiny, contained product moments users touch every day -- toggles, password fields, loading indicators, pull-to-refresh, like buttons. Based on Dan Saffer's four-part structure: Trigger, Rules, Feedback, Loops & Modes.

## Core Principle

The difference between a product you tolerate and one you love is almost always in the microinteractions. A microinteraction is a contained moment built around a single use case -- so small users rarely think about it consciously, but they feel it. Every microinteraction follows the same structure: a Trigger initiates it, Rules determine what happens, Feedback shows what's happening, and Loops & Modes define its long-term behavior.

## Scoring

**Goal: 10/10.** Score by how many of the 8 Quick Diagnostic rows the microinteraction passes: `score = round(passed / 8 x 10)`. **9-10** = passes all 8: deliberate discoverable trigger with visible states, simple predictable rules, sub-100ms feedback scaled to event significance, evolves over time, mode-free or mode-visible, learnable without help. **5-6** = 4-5 rows pass -- it works but feels generic (e.g. uniform feedback, trigger lacks distinct states). **<=3** = 2 or fewer rows pass -- missing feedback, invisible triggers, or hidden modes that break trust. Always state the score, the failed rows, and the fix for each.

## The Microinteraction Structure

### 1. Triggers
The front door -- manual (tap, click, swipe, voice) or system-initiated (time, location, data, error state). A trigger must communicate three things: that it exists, what it does, and its current state. Match trigger prominence to action importance -- high-stakes actions need prominent triggers (a red "Delete" button sets expectations before the click). Pair invisible triggers (gestures, shake, proximity) with a visible alternative for discoverability. Make states -- default, hover, active, disabled, loading -- visually distinct. Ethical boundary: never hide critical triggers behind gestures without a visible fallback.

### 2. Rules
Define what happens once triggered -- the sequence, constraints, processing, and ending. Users never see rules directly but feel when they're wrong. Define the goal first, then derive rules from it; match platform conventions and existing mental models. Constrain inputs to prevent errors (character limits, value ranges, formats) and handle edge cases explicitly: zero, maximum, repeated triggers, interruption. Example: Gmail's "Undo send" gives a 30-second reversal window. Ethical boundary: keep rules transparent -- never make unsubscribe harder than subscribe.

### 3. Feedback
Communicates the rules -- answers "what is happening right now?" -- visually (color, animation, movement), aurally, or haptically. Show only what matters: minimal, meaningful, contextual. Must be immediate: **under 100ms** for direct manipulation. Prefer animating existing elements (the button itself) over a separate toast; scale feedback to event significance (small action = small feedback, big result = big feedback). Visual feedback is primary; audio/haptic are supplementary. Progress indicators reduce perceived wait time even when actual time is unchanged. Ethical boundary: no fake progress bars or deceptive completion percentages.

### 4. Loops and Modes
Loops are meta-rules over time -- does the interaction change after the 100th use, expire, adapt? Open loops continue until stopped (a repeating alarm); closed loops run once (a timer). **Long loops** mature the interaction -- first use shows a tooltip, the 50th does not (progressive reduction, stripping scaffolding as users show mastery). Modes are forks where the same control temporarily behaves differently (edit vs. view) -- they violate "same action, same result," so minimize them and make the current mode highly visible (a Caps Lock indicator, an "Editing" banner). Ethical boundary: loops should benefit the user, never adapt to ramp up notifications or make opt-outs progressively harder.

### 5. Signature Moments
A microinteraction so distinctive it becomes part of the product's identity -- the Facebook Like, slide-to-unlock, Slack's loading messages. Every product should have one or two; not every interaction should be one. Put them on frequent, visible actions, never buried settings. Functional first, delightful second -- never sacrifice usability for novelty. Apply the removal test: if users wouldn't miss it, it's decoration, not signature. Ethical boundary: never block input behind a non-skippable celebration animation.

### 6. Reducing and Simplifying
The best microinteraction is barely noticed because it's simple and fast: reduce (fewer options, steps, decisions), then simplify what remains. If a microinteraction needs instructions, it's too complex. Remove options with smart defaults; collapse multi-step interactions into one action; use progressive disclosure (simple first, complexity on request). Ethical boundary: a "smart default" must serve the user -- never pre-check marketing opt-ins, paid add-ons, or data-sharing.

## Product Applications by Element

| Element | Context | Example |
|---------|---------|---------|
| Trigger | Toggle controls | iOS Wi-Fi switch: tap to toggle, position shows state |
| Rules | Password strength meter | Meter updates in real time; color shifts red to green |
| Feedback | Form validation | Green checkmark next to a valid email field |
| Loops & Modes | Onboarding tooltips | First 3 sessions show "Swipe to archive," then stop |
| Signature moment | Social reaction | Facebook Like: thumbs-up animates with particles |
| Reducing | Anticipatory design | Shipping form fills city and state from ZIP code |

## Common Mistakes

| Mistake | Why It Fails | Fix |
|---------|-------------|------|
| No feedback on action | Users can't tell if their tap registered | Add immediate visual state change to every interactive element |
| Overdesigning simple moments | Complex animations slow frequent actions | Reserve rich animation for infrequent, high-impact moments |
| Ignoring edge cases | Breaks at zero, max, or double-tap | Map every state: empty, loading, partial, full, error, disabled |
| Invisible triggers | Users can't discover functionality | Pair gesture triggers with a visible alternative |
| Mode errors | Same action gives different results based on hidden state | Make current mode visible; minimize modes |
| Ignoring long loops | Feels identical on day 1 and day 100 | Use progressive reduction for returning users |
| Feedback overload | Every action triggers a toast, sound, or animation | Use the smallest feedback that communicates |
| Fake progress indicators | Users feel deceived when they discover it's fake | Use honest, deterministic progress; indeterminate spinner when unknown |

## Common Mistakes (continued)

| Mistake | Why It Fails | Fix |
|---------|-------------|------|
| Copying another product's signature moment | Feels bolted-on, disconnected from your brand | Design a signature moment aligned with your own brand personality |
| Adding a mode without a visible indicator | Users perform the wrong action in the wrong context | Always show current mode (banner, icon, color) |
| Treating every microinteraction as equally important | Wastes design effort on low-frequency moments | Reserve craft for the highest-frequency, most visible interactions |

## Quick Diagnostic

Is there a clear, discoverable trigger? Does the trigger show its current state? Are the rules simple and predictable? Is there immediate (sub-100ms) feedback? Does feedback match the event's significance? Does the interaction evolve over time (long loops)? Is it free of unnecessary modes? Could a first-time user figure it out without help?

Based on Dan Saffer's *"Microinteractions: Designing with Details."*