openskills.info
Course catalog
Course Preview

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

Don't Panic: Interaction Patterns and Micro-interactions

An interaction pattern is the reusable answer to a recurring interface problem: the familiar behavior behind a dialog, disclosure, menu, or search box. A screenshot cannot carry that answer by itself. It can look admirably finished while saying nothing about a key press, a slow request, or how someone gets out again. Without a pattern, each screen can quietly invent its own behavior, which is how an interface becomes a set of decorative disagreements.

The useful mental model is trigger, rule, state change, feedback, and next action. Someone clicks Save, presses a key, or touches a control. The interface checks whether that input is valid in its current state, changes state, and makes the result perceivable. Then it offers the next valid action. This is less mystical than it sounds, which is fortunate because the button does not care how elegant the mockup is.

The surprise is that state is often the hidden architecture. A control can be idle, focused, pressed, disabled, pending, successful, or failed. Each supported state needs an entry, feedback, and a way out. A Save button that accepts another click while pending, or an error that loses the person's input, is not a small visual omission. It is a missing part of the interaction.

Feedback should match consequence. A pressed state can acknowledge an immediate action. Progress can represent a delayed operation. A reversible change can offer undo, while an irreversible or unexpected loss calls for confirmation. Motion can explain where content came from or where it went, but it cannot be the only signal. Reduced motion still needs to preserve the status and meaning, even if the scenery declines to travel.

Accessibility is not a polish pass bolted to the side of the control with a hopeful label. Semantics describe role and state, but they do not create keyboard behavior or put focus in a useful place. Test the implemented interaction with keyboard input, assistive technology, reduced motion, slow responses, errors, long content, cancellation, and repeated activation. The awkward cases are where the contract earns its keep.

Read the Intro for the full map of control, composite, and flow patterns. Use the Cheatsheet when recording states, feedback, motion, and diagnostic signals. The Practice Reference turns one interaction into a reviewable contract. The Quiz checks the decisions, and Field Notes points at the costs that tend to arrive after everybody agrees the component looks done.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources