Micro-interactions

Small Moments, Big Impact

A micro-interaction is a small, contained moment built around a single task: liking a post, toggling a setting, pulling to refresh, copying an account number. Individually they are tiny. Together they decide whether a product feels alive and polished or dull and broken.

Think of the Twitter/X heart that bursts when you tap it, the WhatsApp ticks that turn blue, or the satisfying "copied!" when you tap an account number in a banking app. Nobody talks about these moments, but everybody notices when they are missing.

---

The Four Parts of a Micro-interaction

Dan Saffer's book Microinteractions breaks every micro-interaction into four parts.

1. Trigger

What starts it.

• Manual (user) triggers: a tap, swipe, long-press or keyboard shortcut
• System triggers: something happens automatically, such as a new message arriving, a transfer completing or the battery getting low

2. Rules

What happens once it is triggered. Rules are the logic, and users never see them directly.

• Tapping "like" adds one to the count and saves it to the server.
• If you are offline, queue the like and sync later.
• Double-tapping the image also likes it, but never "unlikes" it.

3. Feedback

How the user knows the rules ran. This is where visual design and animation come in.

• The heart fills with colour and pops
• The count increments
• A light haptic tap on phones that support it
• Sound, used sparingly

4. Loops and modes

What happens over time or on repeat.

• Loops: does the animation play every time or only the first time? Does the "new" badge disappear after three views?
• Modes: a different behaviour state, such as edit mode. Use modes rarely because they confuse people.

---

Examples From Products You Know

---

Designing Good Micro-interactions

1. Start with the rules, not the animation. What exactly should happen, including edge cases like being offline?
2. Make feedback proportional. Liking a post deserves a small pop. Completing your first savings goal deserves confetti. Over-celebrating everyday actions quickly becomes annoying.
3. Keep it fast. Most micro-interaction animations should last 100 to 300ms.
4. Keep it optimistic. Update the UI immediately and sync in the background. If the request fails, roll back gracefully with a message. This matters on slow Nigerian networks, where waiting for the server makes every tap feel laggy.
5. Respect reduced motion. Some users turn on "reduce motion" in their phone settings because animation makes them dizzy. Tone down or remove large movements for them.
6. Do not rely on animation alone. The final state (filled heart, updated number) must be clear even if the animation is missed.

---

Try It in the Lab

Design your own like button. Choose the trigger (tap or double-tap), rules (optimistic update, simulated offline failure) and feedback (pop, burst, colour, count animation), then tune duration and easing. The spec panel writes up your micro-interaction in trigger/rules/feedback/loops format, ready to hand to an engineer.