Microinteractions

Microinteractions are small, contained moments of interaction that accomplish a single task. Examples include toggling a switch, seeing a like animation, or pulling to refresh. They add personality, feedback, and polish.

Category: Design (also: UX)

Author: Atomic Glue Editorial Team

## Definition

Microinteractions are the small, functional interactions that accomplish a single task within a product. They are the moments between major features: the toggle that switches dark mode on, the pull-to-refresh animation, the subtle vibration when you toggle a switch, the confirmation checkmark that appears after saving. Dan Saffer, who wrote the definitive book on the subject, defines their structure as four parts: a Trigger (what starts it), Rules (what happens), Feedback (how the user knows it is happening), and Loops/Modes (what happens with repeated use or extended states). Well-designed microinteractions make a product feel responsive, polished, and human. Poorly designed ones feel jarring, confusing, or cheap.

## The Four Parts of a Microinteraction

Trigger: The initiating action. Triggers can be user-initiated (clicking a button, swiping a card) or system-initiated (a notification appearing when data arrives). Rules: What happens and in what order. Rules define the logic. Feedback: What the user sees, hears, or feels during the interaction. This is the most visible part. Loops and Modes: How the microinteraction changes over time or with repetition. A snooze button that extends the delay each time it is pressed is using a loop/mode. Understanding this structure helps designers plan microinteractions systematically instead of adding them as afterthoughts.

## Why Microinteractions Matter for UX

Microinteractions are often the difference between a product that feels mechanical and one that feels delightful. They provide feedback (confirmation that an action was registered), guide behavior (the subtle bounce of a scroll position that tells you where you are), prevent errors (a form field that shakes gently when validation fails), and express brand personality (the playful loading animation that matches the brand voice). They are small, but they accumulate. A product with polished microinteractions feels crafted. One without them feels unfinished.

## Microinteraction Design Principles

Be invisible when working and obvious when something goes wrong. Do not start from zero: use existing mental models users already understand. Bring the data forward: show relevant information at the moment of interaction, not in a separate settings screen. Use what is already there instead of adding new elements. Play the long game: a microinteraction that teaches a good habit is better than one that only provides a momentary dopamine hit. Respect the user's time: animations should be fast (under 300ms for feedback, under 500ms for transitions).

## In code

/* Toggle switch microinteraction */
.toggle {
  width: 48px;
  height: 26px;
  background: #d1d5db;
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
  position: relative;
}

.toggle.active {
  background: #0066ff;
}

.toggle::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle.active::after {
  transform: translateX(22px);
}

## Common questions

Q: Can microinteractions hurt UX?

A: Yes. Overdone or too-slow microinteractions frustrate users. A 1-second loading animation on every page transition makes the product feel slow. A form that animates every field validation individually creates a frustratingly drawn-out experience. Microinteractions should be subtle, fast, and purposeful. If the user notices the animation more than the result, it is too much.

Q: Are microinteractions only visual?

A: No. They can include sound (the camera shutter click), haptics (the vibration on an iPhone toggle switch), motion (the bounce of a scroll boundary), or a combination. The best microinteractions engage the appropriate sense for the context.

## Key takeaways

• Microinteractions are small, contained interactions that accomplish a single task (toggle, swipe, pull-to-refresh).
• Dan Saffer's structure: Trigger, Rules, Feedback, Loops/Modes.
• They provide feedback, guide behavior, prevent errors, and express brand personality.
• Keep them fast (under 300ms for feedback). Overdone microinteractions hurt UX.
• Microinteractions can be visual, auditory, haptic, or motion-based.

## Related entries

• [Animation / Motion Design](atomicglue.co/glossary/animation-motion-design)
• [UX (User Experience)](atomicglue.co/glossary/ux-user-experience)
• [UI (User Interface)](atomicglue.co/glossary/ui-user-interface)

Last updated July 2026. Permalink: atomicglue.co/glossary/microinteractions