Interaction Patterns

Concept of the skill

An interaction pattern is the chosen shape of how a user makes a decision or takes an action on a surface — tabs versus pages, dropdown versus combobox, stepper versus wizard, modal versus inline edit, command menu, disclosure, bulk selection, filtering, and the rest. The discipline is to derive that choice from the shape of the user's decision rather than from a catalogue of available components. Two questions settle most cases: what is the user actually deciding (compare, choose one, choose many, sequence, search, edit, confirm, or recover), and what is the choice set like (small, large, searchable, hierarchical, ordered, destructive, reversible, repeated)? From those the simplest pattern that keeps the needed context visible follows. A chosen pattern is then pressure-tested against its edges — selection, cancel, escape, undo, invalid action, keyboard alternatives to pointer gestures, and behavior under loading, empty, error, and permission-limited states. Pattern choice is upstream of component design and accessibility implementation: it decides which control the user faces; the component API and the ARIA wiring come afterward.

Coverage

Choose and audit interaction patterns before implementation. Covers control selection, mode switching, progressive disclosure, modals, drawers, tabs, accordions, command menus, comboboxes, steppers, wizards, inline edit, bulk selection, filters, sorting, gestures, keyboard alternatives, and pattern fit under task pressure.

The decision shapes that drive pattern choice are: compare (the user must weigh options side by side — favors visible options over hidden ones), choose one (single selection from a set — radio/segmented for small sets, dropdown/combobox for large), choose many (multi-selection — checkboxes, tag inputs, bulk-select with a contextual action bar), sequence (ordered steps — stepper for short known sequences, wizard only when ceremony is genuinely warranted), search (the set is large and the user knows what they want — combobox/command menu), edit (modify a value in place — inline edit when context must stay, modal/panel when the edit is involved), confirm (a deliberate gate before a consequential action), and recover (undo, cancel, escape, retry).

Choice-set characteristics modulate the pattern: a small closed set tolerates always-visible controls; a large set needs search; a hierarchical set needs nesting or a tree; an ordered set needs a sequence pattern; a destructive action needs a confirm or an undo window; a reversible action can skip the confirm in favor of undo; a repeated action favors keyboard-first and bulk patterns.

Hidden options (in dropdowns, accordions, overflow menus) are acceptable only when comparison is not required. Modals are justified only when the interaction genuinely needs to block the surface; otherwise a drawer, panel, or inline pattern keeps context. Every pointer-only gesture needs a keyboard or explicit-control alternative before handoff.

Philosophy of the skill

Most confusing interfaces are not missing components; they chose the wrong pattern for the decision the user has to make. A dropdown hides options that need comparison. A modal blocks context the user needs. A wizard adds ceremony to a task that only needed one form.