Microinteraction
also called micro-interaction (community), interaction detail (community)
A small self-contained loop of trigger, rule, feedback, and result, such as a toggle that flips, buzzes, and settles into its new state.
Dan Saffer named the thing and then took it apart, which is why the word survived. A microinteraction has four parts. The trigger starts it, and is either something the person did or something the system noticed. The rules say what may happen, in what order, and what the interface refuses to do. The feedback is everything the rules make visible: the heart that pops, the count that ticks over, the tick of haptic on a phone. And the loops and modes are the long tail nobody budgets for, the part that decides what the same interaction does the second time, the hundredth time, and when the network is not there. Say those four words over any small piece of an interface and the missing one is usually obvious.
The scope is the useful part of the definition. A microinteraction is one task at one moment: like a post, mute a room, choose a size, dismiss a warning. It is not a flow and not a screen, and the moment it needs a second decision from the reader it has become something else. That boundary is what separates the term from animation in general. A page transition is motion in the service of navigation; a microinteraction may not move at all, because a rule that quietly refuses an invalid character is still the whole loop running. Motion is only the most visible way feedback gets delivered.
Most of the craft lands in the two middle parts. Rules are where an interaction stops lying: if a like is optimistic, the rule has to say what happens when the write fails, and the feedback for that failure is part of the same loop rather than a separate error screen. Feedback should be proportioned to the act, so a destructive step gets more of it than a routine one, and it should be cheap enough to survive repetition, since anything a person does forty times a day must not perform for them each time. The vocabulary for the individual pieces already exists on this site: the ripple and the state layer are feedback spellings, haptics are a channel, optimistic UI is a rule about time, and the toast is what the result says when the change happened somewhere the reader cannot see.
Treat the word as a budget line rather than as a compliment. Teams that say “add some microinteractions” at the end of a project are asking for decoration, and decoration is what they get. Teams that ask which trigger, which rules, what feedback, and what the loop does over time are using it as a checklist, and it is a good one: it catches the toggle with no pressed state, the field that validates only on submit, and the button that gives you nothing at all for the two seconds before the answer arrives.
Which word?
| If you want | say |
|---|---|
| one tiny complete interaction, trigger to feedback | microinteraction |
| more than one thing moves and the order matters | motion choreography |
Family
16 terms belong to microinteraction · see them grouped by category
Variants
- Copy button
A small control beside a value that copies it to the clipboard and confirms by turning into a tick for a second or two.
- Hold to confirm
Requiring a press to be held for a moment before a destructive action commits, with progress shown so the wait is understood as deliberate.
- Inline validation
Checking a field as the reader fills or leaves it and showing the verdict beside that field, rather than saving every complaint for the submit button.
- Password reveal toggle
The control inside a password field, usually an eye or the word Show, that switches the characters between masked and readable.
- Pull to refresh
Dragging a list downward past its top edge to trigger a reload, with an indicator that appears in the space the drag opens up.
- Slide to confirm
A control that commits only once its thumb is dragged the length of its track, so the effort of the gesture is the guard against doing it by accident.
- Swipe to dismiss
Flinging an item off the edge of the screen to remove it, with the item tracking the finger and snapping back if the throw is too short.
- Type to confirm
Guarding a destructive action by making the reader type the name of the thing being destroyed before the confirm button becomes usable.
- Yellow fade technique
Washing a just-changed element in colour and letting it fade back out, so a change made without a page reload is still noticed where it happened.
Contains
- Auditory icon
A recorded everyday sound standing for an event, so a crumple means delete by resembling the act rather than by convention learned in the interface.
- Earcon
A brief synthesized sound standing for an event, abstract by design, so a rising figure means success only because the interface taught you it does.
- Haptic feedback
A brief physical vibration or tap produced by the device to confirm an interaction, mark a boundary, or signal success and failure.
- Optimistic UI
Showing the result of an action immediately and reconciling with the server afterward, instead of making the user wait for confirmation.
- Ripple
A circular wash that spreads from the point of contact to acknowledge a touch, Material's way of tying feedback to where the finger landed.
- State layer
A translucent sheet of the content colour laid over a control at a fixed opacity per state, so hover, focus and pressed are one rule instead of three palettes.
- Toast
A brief, self-dismissing message that appears at a screen edge to confirm an action or report status without interrupting the user's flow.
Related
See also: Hover lift · Detent · Feedforward · Juiciness · Rage click