Designing microinteractions
Microinteractions use small cues and transitions to show what is happening on screen.
Background
A button confirms a click and a form field flags valid input. Such feedback reduces input errors, double clicks and support requests.
Typical uses
Button and link states: hover, focus, pressed, loading
Feedback on valid or invalid input
Loading states and progress indicators
Transitions for menus, dialogs and accordions
Confirmations after saving, sending or adding
Design rules
Every animation explains a change or confirms an action. Decoration alone distracts. Durations and easing curves are set in the design system. With reduced motion turned on, users get a calm version. This also protects people with vestibular disorders.
Technology
We use CSS transitions and the Web Animations API. Only transform and opacity are animated, which browsers handle cheaply. This keeps the interface smooth and the Core Web Vitals intact.
Approach
Interactions are defined in the Figma prototype, agreed with developers early and documented in the design system.