Microinteractions That Respect the User
A hover state is a promise. An animation is a sentence. How to design microinteractions that inform without performing.
Every interaction is a sentence
A hover state is a promise: this thing is clickable. A loading spinner is a sentence: I am working, please wait. A success animation is a sentence: it worked. Every microinteraction communicates something. The question is whether it communicates the right thing, or just performs.
Performance is when the animation draws attention to itself rather than to the information. A button that bounces on hover is performing. A button that subtly shifts color and lifts a pixel is communicating. The difference is whether the user notices the animation or notices the affordance.
The rules of respectful microinteractions
First, every animation should have a purpose that is not decorative. If the only reason for the animation is that it looks nice, remove it. Purposeful animations answer a question: did the click register? Is this loading? Did it succeed? Decorative animations ask a question: look at me.
Second, duration should match meaning. A state change that matters — a modal opening, a panel sliding in — can take 200-300ms. A state change that is minor — a hover, a focus — should take 100-150ms. Anything longer than 300ms for a minor interaction feels sluggish. Anything shorter than 100ms feels instant, which is fine for hover but wrong for a modal.
Third, easing should feel physical. Linear motion feels mechanical. Ease-in-out feels natural for things that start and stop. Ease-out feels right for things that arrive. Spring physics feels right for things that bounce. Match the easing to the metaphor and the interaction feels grounded.
