Interaction Patterns and Micro-interactions

Interaction patterns are reusable ways for people to control an interface, such as opening a menu or submitting a form. Micro-interactions are the small state changes and feedback loops inside those patterns, such as a pressed button, progress indicator, validation message, or undo confirmation.

itWeb development

Interaction Patterns and Micro-interactions

An interaction pattern is a reusable arrangement of controls, states, and expected behavior that solves a recurring interface problem. A dialog, disclosure, search autocomplete, and drag-and-drop list are patterns. A micro-interaction is a focused feedback loop around one action or state change. A button press, inline validation message, progress indicator, and undo notice are micro-interactions.

Patterns reduce relearning when they preserve familiar meaning and behavior. They are not screenshots to copy. A pattern includes its trigger, state model, input methods, feedback, escape routes, semantics, and failure behavior. Visual styling can change while those behavioral commitments remain recognizable.

The interaction loop

Every interaction starts with a trigger. A pointer click, key press, touch gesture, voice command, timer, or system event may provide it. The interface interprets that trigger against its current state, applies a rule, changes state, and presents feedback.

The compact model is:

Trigger → rule → state change → feedback → next available action

Consider a Save button. Activation begins a request. The control enters a pending state and prevents accidental duplicate submission. Success updates the saved state and confirms completion near the affected content. Failure preserves the person's work, explains the problem, and offers a retry. Keyboard focus stays in a predictable place throughout the loop.

Interaction Patterns and Micro-interactions

The interaction loop

Relevant careers