Microinteractions

A microinteraction is a small, contained moment built around one task: toggling a setting, liking a post, pulling to refresh, showing a password. Dan Saffer described four parts:

1. Trigger: what starts it (a tap, or a system event such as a new message).
2. Rules: what happens.
3. Feedback: how people know it happened (visual, sound, haptic).
4. Loops and modes: what happens over time or on repeat.

Good microinteractions

• Serve a purpose: confirm, guide, prevent errors or reduce effort.
• Are fast: most should finish in 100–300ms.
• Stay consistent across the product.
• Do not block people from carrying on.
• Respect reduced motion preferences.

Examples: a password field that shows requirements ticking off as you type, a copy button that changes to "Copied" for two seconds, a toggle that slides and changes colour.

Microinteractions are where products feel polished or clumsy. Small feedback moments reduce errors and uncertainty, and a few delightful touches build affection for a product. But overused or slow animations become irritating, so purpose matters.

A developer documentation site has code snippets with a "Copy" icon. People click it but are unsure whether anything happened, so they select and copy manually.

The designer adds a microinteraction: on click, the icon changes to a tick, the label says "Copied" for two seconds, and a screen reader announcement confirms it. Manual selection of code drops, and people start using the button routinely.