Interaction Design Patterns

Interaction Design Patterns

Design patterns in HCI are the equivalent of software design patterns in engineering: reusable solutions to recurring problems. They have been tested on millions of users, their trade-offs are understood, and they spare designers from rediscovering solutions to problems that have already been solved.

The value of patterns is not that they eliminate creativity — it is that they provide a starting point that users already understand. Deviating from patterns requires a reason proportional to the learning cost the deviation imposes.

Core Interface Patterns

Wizard / Step-by-Step

For complex, multi-step processes (checkout, onboarding, account setup), wizards break the task into discrete steps with a visible progress indicator. Key principles: show step count ("Step 3 of 5"), allow backward navigation, save progress automatically, and confirm before abandoning a partially completed flow.

Infinite Scroll vs. Pagination

Infinite scroll (content loads automatically as the user scrolls) suits content-discovery contexts — social feeds, image galleries, news streams — where browsing is the goal. Pagination suits task-oriented contexts — search results, lists of records — where users need to re-find specific items and orient themselves within a bounded set. The mistake: applying infinite scroll to task-oriented interfaces because it feels modern.

Modals and Dialogs

Modals interrupt the current context to request a decision or display urgent information. Used appropriately: confirmation of irreversible actions, focused input forms, alerts requiring immediate attention. Overused: for promotional content, for secondary information users didn't ask for, for errors that don't require immediate action. Modal overuse is one of the most common and frustrating interface patterns.

Tooltips and Popovers

Tooltips (appear on hover) provide brief clarification for ambiguous controls. Popovers (click to reveal) show supplementary information without navigating away. Both require careful restraint — used for clarification, never to compensate for unclear primary labelling.

Empty States

Every interface has states where no content exists: a new user's dashboard, a search with no results, a deleted item. Empty states are a design opportunity, not an edge case. Good empty states explain what would normally appear, guide users toward the action that creates content, and reassure users that nothing is broken. Bad empty states show a blank screen or a cryptic "No items found."

Form Design

Forms are where users give up most often. Research on form abandonment consistently identifies:

• Too many fields — each additional field drops completion rates. Ask only what is essential; collect the rest later.
• Unclear labels — labels must be above the field (not inside it, which disappears on focus), in plain language, consistently formatted
• Inline validation — validate as users type, not just on submit; catching errors early reduces frustration
• Grouping — related fields should be visually grouped; a wall of 15 equally-spaced fields is harder to process than three logical groups of five
• Primary vs secondary actions — "Submit" must be visually dominant; "Cancel" should be present but visually subordinate

The single most impactful form change in documented research: removing optional fields. If a field is optional, question whether it belongs at all.

Onboarding Patterns

Onboarding is the transition from new user to activated user. The goal is minimising time-to-first-value — the moment the user gets a tangible benefit from the product. Common onboarding patterns:

Product tour: Highlights key features sequentially. Effective when there is a core set of features that determine success; ineffective when features vary by user type.

Empty state onboarding: The first-run empty state guides users toward their first action. Dropbox's first-empty-state says "Drag a file here" — the entire onboarding is one instruction.

Progressive onboarding: Features are introduced contextually when they become relevant to the user's actions, rather than upfront. Reduces overwhelm; requires careful trigger design.

Checklist onboarding: A persistent checklist of initial setup steps gives users a clear sense of progress and completion. LinkedIn's profile completion bar is the canonical example.

Feedback and Microinteractions

Every user action should produce feedback. The types:

• Immediate visual feedback — button states (hover, active, disabled), form field focus states
• Progress feedback — loading indicators, progress bars, skeleton screens (placeholder layouts that appear before content loads)
• Success/failure states — confirmation messages, error states, undo prompts
• Transition animations — used to communicate spatial relationships and state changes; overuse slows users down

The principle: the delay between action and feedback must match the scale of the action. A click on a button must respond in under 100ms to feel instantaneous. A background process taking 30 seconds needs a progress indicator.