Microinteraction

What is a microinteraction?

A microinteraction is a small flow inside a product with exactly one purpose: flipping a switch, saving an item, revealing a password or seeing that a file is uploading. It often lasts only a moment, but it's designed on purpose.

The term became widely known through Dan Saffer's 2013 book "Microinteractions". He describes four parts: a trigger that starts it, rules that define what happens, feedback that makes the state visible, and loops and modes that shape its behavior over time.

Why microinteractions matter

Microinteractions provide feedback. They show that an input was received, that something is loading or that an action worked. Without that feedback, people click twice, wait in doubt or give up. Done well, they make a product feel faster, more reliable and more polished, without touching its core features.

How to use microinteractions in practice

• Feedback first: Every important action needs a visible response almost instantly.
• Define every state: Plan default, hover, active, loading, success and error for each element.
• Keep it short: Animation should explain, not entertain. What's cute the first time is annoying the tenth.
• Respect reduced motion: Honor system settings for people who prefer less movement.
• Test in context: Check microinteractions inside the real flow, not just in isolation in your design tool.

Example

In a fashion store, tapping "Add to cart" takes shoppers straight to the cart page. In testing, people find this interrupts their browsing. In the new version, the button briefly turns into a checkmark, the counter on the cart icon ticks up, and shoppers stay on the product page. The feedback is clear, and the shopping trip continues without a break.