What are Micro-interactions
They are single-purpose events: "Like" a post, pull to refresh, toggle a switch. They connect users to the interface.
The 4 Parts of Interaction
Trigger (user taps), Rules (what happens), Feedback (visual/haptic response), and Loops/Modes (meta-rules).
Functional Animation
Don't just decorate. Use animation to explain changes in state. A button morphing into a loading spinner explains what is happening.
Providing Feedback
Actions should feel tangible. A subtle vibration or sound confirms input. This reduces uncertainty and "did I press it?" frustration.
Teaching Users
A "swipe" hint animation can teach navigation without a tutorial overlay. Micro-interactions guide users through the flow.
Emotional Connection
Twitter's heart explosion or a high-five animation creates positive reinforcement. It adds personality to utility.
When to Avoid
Don't slow down the user. If a task is frequent, keep the interaction nearly instant. Delight becomes annoyance if it adds delay.