Interaction Design

Interaction Design

Design natural interactions with clear feedback that gracefully handle all states. Covers user flows, micro-interactions, state transitions, and interface behavior patterns for web and mobile applications.

When to Use This Skill

• Designing interaction flows for new features (drag-and-drop, wizards, modals)
• Creating loading, empty, error, and success states
• Improving micro-interactions on forms, buttons, or navigation
• Designing undo/redo and recovery patterns for destructive actions
• Reviewing interaction clarity in multi-step flows
• Planning animation and transition behavior
• Designing accessible interaction patterns

Quick Reference

Workflow

1. Map all states: What states can this element be in? (loading, empty, partial, full, error, success, disabled, offline) 2. Design feedback: How does the user know their action worked? 3. Handle errors: What happens when things go wrong? How do users recover? 4. Consider edge cases: Empty data, slow connections, partial failures, concurrent actions. 5. Add delight: Where can micro-interactions improve the experience without adding noise?

Domain Vocabulary

user flows, interaction patterns, micro-interactions, state transitions, feedback loops, error states, empty states, loading states, progressive disclosure, gesture design, affordances, haptic feedback, animation timing, skeleton screens

Guiding Questions

Ask these when designing any interaction:

1. "What is the natural interaction pattern here?" 2. "How do we provide feedback at each step?" 3. "What happens in error and edge cases?"

Capabilities

Interaction Patterns

• Natural gesture and input design (touch, mouse, keyboard)
• Multi-modal interaction design
• Voice and conversational UI patterns
• Accessibility-first interaction design

State Design

• Loading state optimization (skeleton screens, spinners, progress bars)
• Empty state design that guides users toward action
• Error state recovery patterns
• Success state celebration and next steps
• Offline state and sync indication

Micro-interactions

• Button and input feedback (hover, focus, active, disabled)
• Form validation feedback timing
• Progress indicators and completion signals
• Notification and alert patterns
• Transition and animation design

Flow Design

• Multi-step wizard patterns
• Progressive disclosure implementation
• Modal and overlay interaction patterns
• Navigation and wayfinding
• Undo/redo and recovery patterns

Example Interactions

• "Design the interaction flow for a drag-and-drop file upload"
• "Create loading and error states for this API call"
• "Improve the micro-interactions on this form"
• "Design an undo pattern for destructive actions"
• "Review this wizard flow for interaction clarity"

State Patterns and Micro-Interactions

Practical patterns for handling every UI state and designing micro-interactions that provide clear, consistent feedback.

Loading States

Skeleton Screens

Use when the layout is predictable and content takes > 300ms to load.

+----------------------------------+
| [████████████████]  (avatar)     |   <- grey placeholder shapes
| [████████████████████████]       |      mimic the final layout
| [█████████████]                  |
+----------------------------------+

Guidelines:

• Match the shape and position of real content.
• Animate with a subtle shimmer (left-to-right pulse).
• Replace progressively as data arrives; do not wait for everything.
• Avoid skeleton screens for actions that complete in < 300ms.

Spinners

Use when the layout is unpredictable or the area is small.

Guidelines:

• Show a spinner after 200-300ms delay; avoid flash for fast responses.
• Pair with a message for waits > 2 seconds ("Loading your dashboard...").
• For waits > 5 seconds, add a progress indicator or explain the delay.

Progress Bars

Use when you can estimate completion (file uploads, multi-step processes).

Guidelines:

• Show percentage or step count ("Step 2 of 4").
• Never let a progress bar go backward.
• Use indeterminate style only when you truly cannot estimate progress.
• Consider adding estimated time remaining for long operations (> 10 seconds).

---

Empty States

Empty states are opportunities to guide users, not dead ends.

Types

First-Use Empty State Template

[Illustration or icon relevant to the feature]

[Headline: Value proposition, not "Nothing here"]
[Subtext: Brief explanation of what this area does]

[Primary CTA: "Create your first ___"]
[Secondary: "Learn more" or "Import existing"]

Good example: "Track your team's progress. Create a project to get started." Bad example: "No projects found."

No Results Template

[Search icon or illustration]

No results for "[query]"

Try:
- Check spelling
- Use fewer keywords
- [Clear filters] button

---

Error States

Severity Levels

Error Message Pattern

[What happened] + [Why it happened (if known)] + [What to do next]

Good: "Could not save your changes. The server is temporarily unavailable. Try again in a few minutes, or contact support if this persists." Bad: "Error 500: Internal Server Error"

Form Validation Errors

Timing:

• Validate on blur (when user leaves a field), not on every keystroke.
• Show inline errors next to the field, not in a summary at the top.
• For complex validations (server-side), validate on submit and scroll to the first error.

Visual treatment:

• Red border on the input field.
• Error message directly below the field in red text.
• Error icon inside the field (optional).
• Keep the error visible until the user corrects the input.

Network Error Recovery

---

Success States

Confirmation Patterns

Celebration Patterns

Reserve for meaningful milestones:

• Completing onboarding
• First successful action (first project, first deployment)
• Achievement thresholds

Keep subtle: a brief animation, a congratulatory message. Avoid blocking the user's next action.

---

Micro-Interaction Design

Button States

Input Field States

Animation Guidelines

Principles:

• Animations should feel responsive, not decorative. If removing an animation makes nothing worse, remove it.
• Respect prefers-reduced-motion: disable non-essential animations.
• Enter animations should be slightly faster than exit animations.
• Stagger list item animations by 30-50ms per item (max 5-7 items, then fade as group).

---

Feedback Patterns

Optimistic Updates

Show the result immediately, then confirm with the server. Roll back on failure.

When to use:

• Actions with high success rate (> 99%): likes, toggles, reorders.
• Low-risk actions where a brief inconsistency is acceptable.

When to avoid:

• Financial transactions, data deletion, permission changes.
• Actions where rollback would confuse the user.

Implementation: 1. Apply change to UI immediately. 2. Send request to server in background. 3. On success: do nothing (UI already correct). 4. On failure: revert UI, show error toast with retry option.

Progressive Disclosure

Reveal complexity gradually as users need it.

Levels: 1. Primary: Always visible. The most common action or information. 2. Secondary: One click away. "Show advanced options" or an expand/collapse. 3. Tertiary: Behind a link, modal, or separate page. Rarely needed settings.

Guidelines:

• Default to the simplest view.
• Use clear labels that describe what will be revealed ("Advanced filters", not "More").
• Remember user preferences for expanded/collapsed state.
• Do not hide critical information behind disclosure.

Toast Notifications

Stacking: Show max 3 toasts at once. Queue additional ones. Newest on top.

---

Skeleton Screen Recipes

Card List

+----------------------------------+
| [██]  [████████████]             |
|       [█████████████████]        |
|       [████████]                 |
+----------------------------------+
| [██]  [████████████]             |
|       [█████████████████]        |
|       [████████]                 |
+----------------------------------+

Data Table

| [████████] | [████████] | [████████] |  <- header (static)
|------------|------------|------------|
| [████████] | [██████]   | [████]     |  <- shimmer rows
| [██████]   | [████████] | [██████]   |
| [████████] | [████]     | [████████] |

Profile Page

+--------+  [████████████████]
|        |  [████████████████████████]
| [████] |  [█████████████]
|        |
+--------+  [████████████████████████████████]
             [██████████████████████████]
             [████████████████████]

Replace each section independently as its data loads.