interaction-design

name

interaction-design

description

Design intuitive, meaningful interactions grounded in user goals and cognitive principles. Use when designing component behaviors, user flows, feedback systems, error handling, loading states, transitions, accessibility, keyboard navigation, touch/gesture interactions, or when evaluating interaction quality. Also use for modal vs modeless decisions, direct manipulation patterns, input device considerations, emotional/dramatic aspects of UX, or when asked about making interfaces feel responsive, humane, and goal-directed.

Interaction Design

Design interactions that help real people accomplish real goals with minimum friction and maximum meaning.

The Fundamental Question

Before any pattern or timing value, ask: What is the user trying to accomplish, and how does this interaction help or hinder that goal?

Interaction design is not about mechanisms. It is about helping specific people achieve specific purposes while respecting their time, attention, and humanity.

Output Contracts

Interaction Specification

## Interaction Spec: [Component Name]

### User Goal
What is the user trying to accomplish? What are the stakes?

### Conceptual Model
How should users understand this interaction? What mental model should they form?

### States & Transitions
| State | Appearance | Transition | Emotional Tone |
|-------|------------|------------|----------------|
| Default | [appearance] | — | [calm/ready/inviting] |
| Hover | [changes] | 150ms ease-out | [responsive/acknowledged] |
| Active | [pressed] | 50ms | [committed/engaged] |
| Loading | [feedback] | — | [progressing/patient] |
| Success | [confirmation] | 200ms | [accomplished/closure] |
| Error | [clear indication] | — | [recoverable/guided] |

### Keyboard & Input
- Tab: [focus behavior]
- Enter/Space: [activation]
- Escape: [reversal/dismissal]
- Touch: [gesture, target size]

### Error Prevention & Recovery
- How does design prevent errors?
- What happens when errors occur?
- How does user recover?

### Accessibility
- Screen reader announcement
- Focus management
- Reduced motion behavior

Flow Analysis

## Flow Analysis: [Journey Name]

### User Goal & Stakes
What does success mean? What does failure cost?

### Dramatic Arc
- Setup: How does user enter this flow?
- Rising action: What builds toward the goal?
- Climax: The moment of commitment/completion
- Resolution: Confirmation and next steps

### Steps
1. [Step] → [Interaction] → [User feeling]

### Friction Analysis
- Necessary friction (builds engagement/prevents errors)
- Excise to eliminate (work that doesn't serve the goal)

### Error Paths
- [Error scenario]: [Prevention] → [Recovery]

Core Principles

1. Goal-Directed Design

Users are not "operators" triggering state changes. They are people with purposes.

Ask first:

• Who is using this? (Not abstract "users"—specific archetypes)
• What are they trying to accomplish?
• What excise can we eliminate? (Work that doesn't serve their goal)
• How should they feel during and after?

The perpetual intermediate: Most users are neither novices learning nor experts optimizing. They learned enough to work and won't learn more. Design for them—make the common path fast while keeping advanced options discoverable but unobtrusive.

2. Conceptual Models

Users must form accurate mental models of how the system works. The gap between the designer's model and the user's model is where confusion lives.

The system image (what users see and interact with) must accurately convey the designer's model. When users are confused, the system image has failed—not the user.

Signifiers communicate where action is possible and how to perform it. A drag handle icon is a signifier; the ability to drag is the affordance. Design signifiers that make affordances discoverable.

3. Direct Manipulation

Make the computer disappear so users concentrate on their task.

Core properties:

• Visible objects of interest, always accessible
• Rapid, incremental, reversible actions
• Immediate feedback—action and result visibly connected
• Operations in the problem domain, not command syntax

The syntactic/semantic insight: Direct manipulation works because it operates at the semantic level (the problem domain) rather than requiring translation into syntactic commands. This reduces cognitive load by eliminating the translation step.

When direct manipulation is inappropriate:

• Precise specification (typing "24pt" may be better than dragging)
• Batch operations across many objects
• Abstract operations without spatial metaphor
• Expert users who prefer keyboard efficiency

4. Reversibility Enables Exploration

Reversibility is not a feature—it is a psychological safety mechanism that transforms a system from intimidating to inviting.

• Undo depth: Support multi-step undo, not just single-step
• Congruent inverses: If Cmd+B bolds, Cmd+B unbolds (same action reverses)
• State visibility: Show that undo is available
• Graceful degradation: When true undo isn't possible, confirm before destructive actions

5. Error Prevention Over Error Handling

Errors are usually design failures, not user failures.

Slips (execution errors): User intends correctly but acts wrong

• Prevent with constraints, defaults, confirmation for destructive actions

Mistakes (intention errors): User forms wrong goal or plan

• Prevent with clear conceptual models, visible system state

Design forcing functions:

• Interlocks: Require prerequisite actions
• Lockins: Prevent stopping mid-action when dangerous
• Lockouts: Prevent entering dangerous states

See references/cognitive-foundations.md for error psychology and prevention patterns.

6. Feedback & System Status

Every action deserves acknowledgment. Users should never wonder "Did that work?"

Response Time	Perception	Design Response
<100ms	Instant	Direct result, no indicator
100ms–1s	Brief delay	Subtle state change (cursor, opacity)
1–10s	Noticeable wait	Spinner or determinate progress
>10s	Long operation	Progress bar, estimate, allow cancel

Optimistic UI: Update immediately, reconcile errors gracefully. But be honest—don't show success before confirming it for important actions.

7. Modality: A Necessary Evil

Modes cause errors when users forget which mode they're in. But modes also isolate cognitive scope and can reduce errors when users would otherwise forget context.

Use modeless design (inspectors, inline editing) when:

• User needs to see results while adjusting
• Trial-and-error is expected
• Context switching is frequent

Accept modality when:

• Isolating scope reduces errors (complex multi-step wizards)
• Action is destructive and confirmation prevents accidents
• System needs exclusive attention (authentication)

If you must use modes:

• Make current mode highly visible (not just status bar)
• Ensure mode indicators are near the locus of attention
• Provide quick escape (Escape key, clear exit path)

8. Meaning and Emotional Design

Interactions are not just efficient or inefficient—they carry meaning.

Visceral level: Immediate emotional response to appearance Behavioral level: Pleasure or frustration from use Reflective level: What the experience means, how it's remembered

A loading state that builds anticipation differs from one that frustrates—same mechanism, different meaning. Consider:

• What should the user feel during this interaction?
• What story does this interaction tell?
• How does completing this action transform the user's situation?

See references/goals-and-context.md for dramatic structure and emotional design.

Decision Frameworks

Activation Type

Use Frequency	Recommended Activation	Rationale
Constant	Always visible (spatial)	Zero activation cost
Frequent	Keyboard shortcut + visible control	Fast for regulars, discoverable for others
Occasional	Menu or command palette	Saves space, still findable
Rare/Dangerous	Menu only, possibly nested	Prevents accidents

When to Animate

Animation serves purposes—it is not decoration.

Animate when:

• Maintaining object constancy during transitions
• Communicating causality (this caused that)
• Reducing change blindness
• Conveying emotional tone appropriate to context

Don't animate when:

• User performs action habitually (animation becomes excise)
• Speed is critical (expert workflows)
• User has indicated reduced motion preference
• Animation would obscure rather than clarify

See references/animation-timing.md for timing, curves, and emotional qualities.

Friction: Eliminate or Leverage?

Not all friction is bad. Distinguish:

Excise (eliminate): Work that doesn't serve user's goal

• Navigating to buried menus
• Re-entering information the system knows
• Waiting for unnecessary animations
• Confirming non-destructive actions

Productive friction (consider keeping):

• Confirmation before irreversible actions
• Deliberate pacing that prevents rushed errors
• Moments that build anticipation or mark significance
• Resistance that indicates "this matters"

Input & Physicality

The device shapes the interaction. A finger on glass is not a stylus is not a mouse.

Touch Targets

Platform	Minimum	Comfortable
iOS	44×44pt	48pt+
Android	48×48dp	56dp+
Web (touch)	44×44px	48px+

Gesture Vocabulary

Gesture	Use	Considerations
Tap	Primary action	Clear affordance required
Long-press	Secondary/context	Needs discoverability hint
Swipe	Reveal, delete, navigate	Always provide undo; don't hide primary actions
Pinch	Zoom	Maintain focus under fingers

Two-Handed Interaction

When designing for tablets or considering desktop power users:

• Non-dominant hand: coarse positioning, context setting
• Dominant hand: fine manipulation, action
• Consider: Can both hands be usefully engaged?

See references/input-and-physicality.md for device-specific patterns and haptics.

Platform Considerations

Web

• Focus management in SPAs (trap in modals, restore on close)
• Respect prefers-reduced-motion
• Design for touch AND mouse—avoid hover-only interactions
• Keyboard navigation for all interactive elements

iOS

• Respect system gestures and scroll physics
• Support Dynamic Type (test at largest sizes)
• Haptic feedback for significant moments
• VoiceOver with proper traits

Android

• Material motion principles
• Predictive back gesture (Android 14+)
• Edge-to-edge with proper insets
• TalkBack support

Desktop

• Keyboard shortcuts with discoverability
• Multi-window state management
• Trackpad gestures where appropriate
• High information density options for power users

Anti-Patterns

Breaking Direct Manipulation

❌ Modal dialog with Preview button ✓ Live preview as user adjusts

❌ Must click Apply to see changes ✓ Changes visible immediately, undo available

Hidden State

❌ Current mode only in status bar ✓ Mode visible at locus of attention

❌ Unsaved changes with no indicator ✓ Clear dirty state (title, dot, changed button)

Excise Accumulation

❌ Confirmation for every action ✓ Undo support; confirm only destructive/irreversible

❌ Animation that user must wait through ✓ Animation user can interrupt or that doesn't block

Cognitive Overload

❌ All options visible at once ✓ Progressive disclosure based on task stage

❌ Error messages that blame user ✓ Clear explanation + recovery path

Reference Files

Load these as needed for detailed guidance:

• references/goals-and-context.md — User goals, personas, dramatic structure, emotional design
• references/cognitive-foundations.md — Mental models, error psychology, measurement approaches
• references/input-and-physicality.md — Input devices, haptics, two-handed interaction, sketching
• references/component-patterns.md — Detailed patterns for forms, modals, menus, etc.
• references/animation-timing.md — Timing, easing, springs, emotional qualities
• references/accessibility-patterns.md — ARIA, focus management, screen readers

Theoretical Foundations

• Direct Manipulation (Shneiderman): Visibility, reversibility, immediate feedback. See references/direct-manipulation.md
• Instrumental Interaction (Beaudouin-Lafon): Tools mediating user-object relationship; degrees of indirection, integration, compatibility. See references/instrumental-interaction.md
• Goal-Directed Design (Cooper): Personas, perpetual intermediates, eliminating excise
• Emotional Design (Norman): Visceral, behavioral, reflective levels
• Computers as Theatre (Laurel): Dramatic structure, meaning, engagement