Every interaction between a user and a digital interface involves a moment of uncertainty. The user performs an action — clicks a button, submits a form, swipes a card — and waits to learn whether the action was received, whether it succeeded, and what happens next. Micro-interactions are the design elements that fill these moments of uncertainty with clear, purposeful communication.
The term was popularised by Dan Saffer, who defined micro-interactions as contained product moments that revolve around a single use case. A toggle switch that animates between states. A button that provides haptic feedback on press. A form field that validates input in real time. A progress indicator that communicates system activity. Each of these is a micro-interaction, and collectively they define the perceived quality of an interface.
The Four Components
Every micro-interaction consists of four structural components: a trigger, rules, feedback, and loops or modes.
The trigger initiates the micro-interaction. It can be user-initiated (clicking, tapping, scrolling) or system-initiated (receiving a notification, completing a background process). The design of the trigger determines whether users discover and engage with the interaction.
The rules determine what happens when the micro-interaction is triggered. These are the invisible logic that governs the interaction — what changes, what constraints apply, and what outcomes are possible.
The feedback communicates the result of the rules to the user. This is the visible, audible, or tactile response that confirms the interaction has occurred and communicates its outcome. Feedback is where most micro-interaction design effort should be concentrated, because it is the component that users directly experience.
Loops and modes determine the meta-rules of the interaction: does it repeat? Does it change over time? Does it behave differently in different contexts?
Purposeful Animation
Animation in micro-interactions serves a functional purpose, not a decorative one. Every animated element should communicate something specific: a state change, a spatial relationship, a causal connection, or a temporal sequence.
State Communication
The most fundamental use of animation in micro-interactions is communicating state changes. When a toggle switches from off to on, the animation communicates the transition between states. When a button changes from idle to loading to success, the animation sequence communicates the progression through system states.
Effective state communication animations are fast (150-300 milliseconds for simple transitions), directional (they move in a direction that communicates the nature of the change), and consistent (the same type of state change always uses the same animation pattern).
Spatial Relationships
Animation can communicate where interface elements come from and where they go. A dropdown menu that slides down from its trigger communicates a spatial relationship between the trigger and the content. A modal that scales up from the element that opened it maintains spatial context. These animations reduce cognitive load by helping users build mental models of the interface architecture.
Feedback Hierarchies
Not all interactions deserve the same level of feedback. A well-designed feedback hierarchy allocates attention proportional to the importance and frequency of each interaction.
High-frequency, low-importance interactions (hovering over a link, scrolling through content) receive subtle feedback — a colour change, a slight scale adjustment. Low-frequency, high-importance interactions (submitting a payment, deleting an account) receive prominent feedback — a confirmation animation, a success state, a clear acknowledgement.
Interactions that fail receive the most prominent feedback of all. Error states must be immediately visible, clearly explained, and accompanied by a path to resolution. The asymmetry between success and error feedback is deliberate: success confirms expectations, while errors violate them and require more communication to resolve.
Performance Considerations
Micro-interactions must perform well or they undermine the quality they are intended to create. An animation that stutters or delays communicates system weakness rather than system responsiveness.
The critical performance constraint is frame rate. Animations must maintain 60 frames per second to appear smooth. This means using CSS transforms and opacity for animations rather than properties that trigger layout recalculation (width, height, margin, padding). It means using the will-change CSS property to promote animated elements to their own compositor layer. And it means testing animation performance on the lowest-specification devices in your target audience.
Restraint as a Design Principle
The most common mistake in micro-interaction design is excess. Every animation adds cognitive load, processing overhead, and potential for distraction. The goal is not to animate everything but to animate the moments where animation provides genuine communicative value.
A useful test: if you remove the animation, does the user lose information? If the answer is no, the animation is decorative and should be reconsidered. If the answer is yes, the animation is functional and should be refined.