Interaction Design

A practitioner's guide to interaction design for product designers, UX designers, UI designers, service designers, and interaction designers. This skill covers the full scope of IxD work — from foundational principles to practical state design, flow specification, and interaction review.

What This Skill Covers

• Designing and specifying interactions: flows, states, transitions, affordances
• Evaluating interaction quality against established principles
• Writing interaction specifications and handoff annotations
• Micro-interaction design (trigger, rules, feedback, loops)
• Feedback system design: timing, type, and hierarchy
• Response time standards and perceived performance
• Role-specific IxD responsibilities across design disciplines
• Common interaction anti-patterns and how to fix them

Tell Claude what you need. Examples:

• "Help me design the interaction flow for a multi-step checkout"
• "What states does this button need?"
• "Review this interaction — does the feedback arrive at the right time?"
• "I need to write an interaction spec for this drag-and-drop feature"
• "What's the right animation duration for this modal?"
• "How should I handle empty states in this dashboard?"

The 5 Dimensions of Interaction Design

Interaction design operates across five materials. Every interaction is composed of some combination of these dimensions.

When designing an interaction, identify which dimensions are in play. Most interaction failures are dimension mismatches — a system behaviour that contradicts the visual affordance, or microcopy that does not match what actually happens.

Core Principles

Norman's 6 Fundamentals

Norman's 6 fundamentals remain the most widely applicable framework for interaction quality.

Visibility Make the state of the system and available actions visible. Users should not have to guess what the system is doing or what they can do next.

• Visible current state (selected, loading, active, error)
• Visible affordances (interactive elements look interactive)
• Visible navigation and location within the product

❌ A form that submits silently with no loading state ✅ A submit button that transitions to a spinner immediately on click

Feedback Every action should produce an immediate, perceivable response. The system must communicate that it received the user's input and what it did with it.

• Immediate acknowledgment (within 100ms — before processing completes)
• Clear outcome communication (success, failure, in-progress)
• Feedback proportional to action significance

❌ A delete action with no confirmation, animation, or acknowledgment ✅ A delete action that shows an undo toast immediately, then fades the item out

Constraints Limit available actions to only those that are valid in context. Prevent errors rather than recovering from them.

• Disable invalid actions rather than showing errors after attempting them
• Use progressive disclosure to surface only relevant controls
• Form fields that only accept valid input types

❌ Allowing date entry as free text, then showing "invalid date" on submit ✅ Using a date picker that constrains selection to valid dates only

Mapping The relationship between controls and their effects should be intuitive. Controls should spatially or conceptually relate to what they affect.

• Scroll up → content moves up (natural mapping)
• Volume slider increases left-to-right
• A "Next" button is on the right; "Back" is on the left

❌ A brightness control labeled only with an icon that looks like contrast ✅ A slider labeled "Brightness" that increases in the direction of "more light"

Consistency Similar actions should work similarly throughout the product. Users build mental models from patterns — breaking them causes errors and confusion.

• Internal consistency: same component behaves the same way everywhere
• External consistency: aligns with platform conventions users already know
• Consistency across breakpoints and platforms

❌ Swipe-to-dismiss works in one list but not another ✅ Every destructive action uses the same confirmation pattern

Affordance UI elements should look like they behave. The appearance of a component should signal how to interact with it.

• Buttons look pressable
• Draggable elements have visible drag handles or respond to hover with a cursor change
• Tappable items have sufficient size and visual weight

❌ Flat text that is actually a link but looks identical to static body text ✅ Links are underlined or use a distinct color that is never applied to non-interactive text

Tognazzini's 19 Principles

The 19 principles cover the broader system of human-computer interaction. These are applied principles for practitioners.

Anticipation Bring information and tools to users before they need to search for them. Design ahead of the user's next step.

• Surface related actions contextually
• Pre-fill known data (shipping address from account)
• Warn before a destructive point in a flow

Autonomy Users need to feel in control. The system should operate within constraints the user understands and can override.

• Allow customization of defaults
• Never take irreversible action without explicit confirmation
• Show system state transparently so users know what is happening

Consistency Maintain consistency at four levels: within the product, across the platform, across industry conventions, and with user expectations. When in doubt, consistency with user expectations matters most.

Defaults Defaults should represent the best choice for most users in most situations. Make them easy to override, clearly labeled, and meaningful — not just the safest technical choice.

• Smart defaults reduce friction for common cases
• Default selections should be clearly indicated
• Avoid jargon in default labels

Discoverability If users cannot find a feature, it does not exist for them. Controls should be visible and accessible without requiring prior knowledge.

• Navigation should expose primary paths without instruction
• Features should be discoverable through exploration, not manuals
• Progressive disclosure for advanced features, not hidden features

Efficiency of the User Optimize for the user's time, not the system's. Common tasks should be fast. Expert users should have shortcuts. The most-used path should be the shortest path.

• Keyboard shortcuts for frequent actions
• Bulk actions for repeat operations
• Single-click for primary actions (not multi-step confirmation for common tasks)

Explorable Interfaces Users should be able to explore without fear. Reversible actions allow experimentation.

• Undo for all destructive actions
• Preview before committing (image crop, document format)
• Breadcrumbs and clear back navigation

Fitts's Law Time to acquire a target = f(distance, size). Larger targets and shorter distances reduce interaction time and error.

• Touch targets: minimum 44×44px (iOS/Android), 48×48px (Material)
• Mouse targets: minimum 32×32px
• Primary CTAs should be the large