Interaction Design Patterns

Why This Matters

Interaction design patterns are the building blocks of every interface you'll analyze and create in this course. You're being tested on your ability to recognize why specific patterns solve specific problems—not just what they look like, but how they reduce cognitive load, guide user behavior, and create predictable experiences. These patterns connect directly to core principles like affordance, feedback loops, progressive disclosure, and mental models.

The real exam challenge isn't memorizing pattern names—it's understanding when to apply each one and how they interact with human cognition. When you encounter a design problem, you need to diagnose which pattern addresses the underlying user need. Don't just memorize what a hamburger menu looks like; know that it solves the information density problem on constrained screens. That conceptual understanding is what separates surface-level answers from sophisticated design thinking.

---

Guiding Users Through Space: Navigation Patterns

Navigation patterns solve the fundamental problem of wayfinding—helping users understand where they are, where they can go, and how to get back. These patterns leverage spatial memory and reduce the cognitive cost of orientation.

Hamburger Menu

• Conserves screen real estate by hiding navigation options behind a single icon—ideal for mobile-first design where pixels are precious
• Trades discoverability for density—users must learn that options exist behind the icon, creating a slight learning curve
• Best paired with persistent bottom navigation on mobile to balance hidden complexity with quick access to core features

Breadcrumbs

• Visualizes hierarchical location within a site structure, answering "where am I?" at a glance
• Supports non-linear navigation by letting users jump back multiple levels without using the back button repeatedly
• Essential for deep content architectures—e-commerce categories, documentation sites, and nested file systems

---

Capturing User Intent: Input and Form Patterns

Input patterns address the data collection challenge—minimizing friction while maximizing accuracy. The underlying principle is reducing user effort through smart defaults, immediate feedback, and progressive complexity.

Forms and Input Fields

• Clear labeling above fields (not just placeholder text) ensures accessibility and prevents confusion when users begin typing
• Inline validation provides immediate error feedback, reducing form abandonment and cognitive load at submission time
• Progressive disclosure reveals additional fields only when relevant, preventing overwhelming users with complexity upfront

Search Patterns

• Autocomplete suggestions leverage recognition over recall—users select from options rather than constructing queries from memory
• Faceted search with filters allows iterative refinement, supporting exploratory behavior when users don't know exactly what they want
• Search history persistence reduces repetitive effort and acknowledges that user needs often recur

Filtering and Sorting

• Persistent filter visibility maintains user awareness of active constraints, preventing confusion about why results appear limited
• Sort options should match mental models—price, date, relevance, popularity—aligned with how users naturally categorize content
• Combined filter/sort interfaces require careful hierarchy to prevent cognitive overload; prioritize most-used options

---

Managing Attention: Content Presentation Patterns

These patterns solve the attention allocation problem—helping users focus on what matters while managing information density. The mechanism is controlled revelation: showing the right content at the right moment.

Modal Windows and Overlays

• Forces focus on critical decisions by dimming background content and requiring user action before proceeding
• Must include clear exit paths—close buttons, escape key support, and clicking outside—to maintain user control
• Overuse creates "modal fatigue"—reserve for genuinely interruptive moments like confirmations, errors, or time-sensitive actions

Accordions and Expandable Content

• Compresses information density by showing headers while hiding details, letting users self-select what to expand
• Clear expand/collapse indicators (chevrons, plus signs) signal interactivity—without them, users won't discover the pattern
• Avoid deep nesting—accordions within accordions create disorientation and violate the principle of predictable depth

Carousels and Sliders

• Showcase multiple items in constrained space but suffer from severe engagement drop-off after the first slide
• Auto-advance should be avoided or user-controllable—unexpected movement disrupts reading and violates user agency
• All carousel content must be accessible through other means; never hide critical information exclusively in later slides

---

Communicating System State: Feedback Patterns

Feedback patterns address the visibility of system status—the first of Nielsen's heuristics. Users need continuous confirmation that their actions register and the system responds.

Progress Indicators and Loading States

• Determinate progress bars (showing percentage) reduce perceived wait time more effectively than indeterminate spinners
• Skeleton screens maintain layout structure during loading, preventing jarring content shifts and preserving spatial memory
• Contextual loading messages ("Saving your changes...") provide reassurance and set appropriate expectations

Feedback and Error Handling

• Immediate micro-feedback on actions (button state changes, checkmarks) confirms registration before server response
• Error messages must be specific and actionable—"Password must include one number" beats "Invalid password"
• Positive reinforcement (success states, celebrations for milestones) encourages continued engagement and builds trust

Authentication Patterns

• Password visibility toggles reduce entry errors while maintaining security awareness through user-controlled revelation
• Social login options reduce friction by leveraging existing credentials but create platform dependency
• Two-factor authentication balances security with usability—implementation matters more than presence

---

Adapting to Context: Responsive and Adaptive Patterns

These patterns solve the device diversity problem—ensuring consistent experiences across screen sizes, input methods, and contexts. The principle is graceful degradation and progressive enhancement.

Responsive Design Patterns

• Fluid grids with relative units (percentages, rem, vh/vw) ensure layouts adapt mathematically to viewport changes
• Media queries enable breakpoint-specific styling, allowing designers to optimize rather than just shrink
• Touch targets must meet minimum size requirements (44×44 points on iOS, 48×48dp on Android) for reliable mobile interaction

Pagination vs. Infinite Scroll

• Pagination provides control and position awareness—users know they're on page 3 of 10 and can return to specific locations
• Infinite scroll maximizes engagement but sacrifices footer access and can create "content overwhelm" without clear endpoints
• Hybrid approaches (load more buttons, lazy loading with position indicators) balance engagement with user control

---

Building Understanding: Onboarding and Data Patterns

These patterns address the learning curve problem—helping new users build accurate mental models while supporting experts with rich data presentation.

Onboarding and User Guidance

• Progressive onboarding teaches features in context as users encounter them, respecting the "just-in-time" learning principle
• Tooltips and coach marks provide non-blocking guidance that users can dismiss—always include clear skip options
• Empty states are onboarding opportunities—use them to guide first actions rather than showing blank screens

Data Visualization Patterns

• Chart type must match data relationship—bar charts for comparison, line charts for trends, pie charts (sparingly) for part-to-whole
• Interactive elements (hover states, drill-down, filtering) transform static displays into exploratory tools
• Color accessibility requires sufficient contrast and alternatives to color-only encoding for colorblind users

Social Sharing Patterns

• Prominent but non-intrusive placement balances encouraging sharing with avoiding disruption to primary content
• Social proof indicators (share counts, likes) leverage psychological principles but can backfire when numbers are low
• Post-share confirmation provides closure and can suggest follow-up actions, completing the feedback loop

---

Quick Reference Table

---

Self-Check Questions

1. A user complains they "can't find anything" on a mobile app with a hamburger menu. What's the underlying discoverability tradeoff, and what complementary pattern could address it without sacrificing screen space?

2. Compare and contrast inline validation and error messages at submission. When would you choose one over the other, and what user experience principle drives that decision?

3. You're designing a product catalog with 500+ items. Compare pagination vs. infinite scroll—which better supports a user trying to compare items across pages, and why?

4. A modal window interrupts users during checkout to offer a discount code. Using attention management principles, explain why this might hurt conversion despite offering value.

5. How do skeleton screens and progress bars both address visibility of system status, and what determines which pattern fits a given loading scenario?