interaction-design — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited interaction-design (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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.
Tell Claude what you need. Examples:
Interaction design operates across five materials. Every interaction is composed of some combination of these dimensions.
| Dimension | What It Is | Design Questions |
|---|---|---|
| Words | Labels, instructions, microcopy, error messages, button text | Is the language clear and action-oriented? Does it set accurate expectations? |
| Visual representations | Icons, images, typography, color, data visualizations | Does the visual communicate the interaction affordance clearly? |
| Physical objects/space | Device type, screen size, input modality (touch/mouse/voice/keyboard), physical environment | Is the interaction designed for the right input modality and context of use? |
| Time | Duration of transitions, animation timing, response latency, sequences | Does timing feel responsive and purposeful? Does it communicate state change? |
| Behaviour | System responses to user actions — what the product does, how it reacts | Does the system behaviour match the user's mental model and stated intent? |
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.
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.
❌ 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.
❌ 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.
❌ 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.
❌ 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.
❌ 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.
❌ 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
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.
Autonomy Users need to feel in control. The system should operate within constraints the user understands and can override.
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.
Discoverability If users cannot find a feature, it does not exist for them. Controls should be visible and accessible without requiring prior knowledge.
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.
Explorable Interfaces Users should be able to explore without fear. Reversible actions allow experimentation.
Fitts's Law Time to acquire a target = f(distance, size). Larger targets and shorter distances reduce interaction time and error.
Latency Reduction Respond to input within 100ms. If processing takes longer, acknowledge the action immediately and show progress.
Learnability Interfaces should be learnable over time, not just usable on first contact. Expert usage should be faster than novice usage.
Metaphors Use metaphors that accurately convey what a system does. Abandon them when they constrain or mislead.
Protect the User's Work Never destroy data due to interface errors or unexpected user behavior. Auto-save continuously, provide undo, and confirm before overwriting.
Readability Text must be legible for your full user population, not just ideal conditions.
Simplicity Simple is not the same as minimal. Simplicity means reducing unnecessary complexity while preserving all functionality users need.
State Track where users are and what they have done. Restore state across sessions.
Visible Navigation Users should always know where they are, where they can go, and how to get back.
Aesthetics Visual design affects perceived usability. A polished interface is trusted more.
Color Color communicates meaning. Design for users who cannot rely on color alone.
Human-Interface Objects Interactive objects should behave consistently regardless of where they appear. A button is a button. A link is a link.
NNGroup identifies eight interaction qualities that shape how users perceive the product — and by extension, the brand behind it.
| Attribute | Definition | Design Implication |
|---|---|---|
| Responsiveness | Speed of element reaction to input | Every action needs acknowledgment within 100ms |
| Direct manipulation | Whether users interact with objects themselves or through intermediaries | Drag-and-drop vs. menus; direct editing vs. form dialogs |
| Precision | Granularity of user control | Slider with fine control vs. coarse steps |
| Pliability | Ease of effecting change | How much effort does it take to change something? |
| Continuous vs. discrete | Smooth vs. stepped transitions | Volume slider vs. volume buttons |
| Clear labels/feedback | How well the system communicates available actions and consequences | Tooltips, labels, ARIA, helper text |
| Expected behavior | Alignment with user mental models | Does it do what it looks like it does? |
| Consistency | Conformity to established patterns | Same component → same behavior, always |
| Threshold | Time | User Perception | Design Response |
|---|---|---|---|
| Instantaneous | ≤ 0.1s | Feels direct, no delay perceived | Visual state change only (button active state) |
| Flow maintained | 0.1s – 1.0s | User notices delay but stays focused | Spinner or skeleton screen |
| Attention limit | 1s – 10s | User disengages; must retain focus consciously | Progress indicator with estimated time |
| Abandonment risk | > 10s | Users leave, especially on web | Background processing + notification on complete |
Visual feedback — the default. Every interaction should have a visual state change.
Motion feedback — communicates that change is happening and in what direction.
Haptic feedback — for native mobile. Use sparingly and for meaningful confirmation.
Audio feedback — contextual. Avoid for routine actions.
Skeleton screens — show layout structure while content loads. Better than spinners for page-level content because they reduce perceived wait time and prevent layout shift.
Optimistic UI — apply the result of an action immediately in the UI before server confirmation. Roll back on failure. Best for high-confidence actions (like, follow, upvote).
Progress indicators — use for actions over 1 second where the user is waiting. Show percentage when deterministic; use animated indicator when indeterminate.
Instant transitions — avoid animating page-level transitions faster than 150ms or slower than 400ms. The sweet spot is 200–300ms.
→ See [reference/response-time.md](reference/response-time.md) for full implementation patterns.
Every interactive component needs a complete state set. Missing states cause visual regressions, accessibility failures, and inconsistent behavior.
| State | When It Applies | Design Requirements |
|---|---|---|
| Default | Initial, uninteracted state | Clear affordance of interactivity |
| Hover | Cursor/pointer over element (desktop) | Subtle visual change; avoid large layout shifts |
| Focus | Keyboard or programmatic focus | Must be visible (WCAG 2.4.7); never remove outline without replacement |
| Active / Pressed | Element currently being clicked/tapped | Depressed or highlighted to confirm receipt of input |
| Loading | Action in progress | Disable further input; show progress |
| Disabled | Action not currently available | Reduced opacity or style; no hover state; cursor: not-allowed |
| Error | Validation failure or system error | Red color + icon + text; never color-only |
| Success | Action completed successfully | Positive confirmation; transient for routine actions |
| Empty | No content to display | Never a blank screen; provide context and a next action |
| Skeleton | Content loading for first time | Match the layout of the content that will appear |
State design checklist:
A flow is the path a user takes through a product to accomplish a goal. Good flows have a clear entry point, a happy path, branching for edge cases, and error recovery.
Flow anatomy:
Entry point → [Trigger] → Interaction sequence → [Decision] → Outcome
↓
Error path → Recovery → ResumeFlow design questions:
Multi-step flow principles:
Animation serves one purpose in IxD: communication. It communicates state change, spatial relationships, and system feedback. Avoid animation for decoration.
When to animate:
When NOT to animate:
Duration guide:
| Interaction Type | Duration | Easing |
|---|---|---|
| Micro-interactions (button state, toggle) | 100–150ms | ease-out |
| Small component transitions (dropdown, tooltip) | 150–200ms | ease-out |
| Medium component transitions (modal, panel) | 200–300ms | ease-in-out |
| Full page transitions | 250–400ms | ease-in-out |
| Loading animations | Loop at 1–2s | linear |
Easing:
ease-out — starts fast, ends slow. Use for elements entering the screen.ease-in — starts slow, ends fast. Use for elements leaving the screen.ease-in-out — smooth through the transition. Use for repositioning.linear — constant speed. Use for loading spinners and progress bars.Affordance — the actual capability of an element (a button can be pressed).
Perceived affordance — what the element looks like it can do. This is what matters.
Signifier — a signal that communicates how to interact (a drag handle, an underline, a placeholder in a text field).
Design for perceived affordance, not just actual affordance:
Anti-affordances — signals that something cannot be done (a disabled button, a greyed text field). These are as important as affordances — they prevent error attempts.
A mental model is the user's internal representation of how a system works. Good interaction design aligns system behavior with the user's existing mental model.
When to align with mental models:
When mental models conflict: If a new interaction pattern breaks an established mental model, you must:
❌ Changing the meaning of a swipe gesture without warning ✅ Adding a tooltip on first use: "Swipe left to archive (previously: delete)"
Micro-interactions are the small, contained interactions that handle a single use case. They are the fabric of an interface — not headline features, but what makes a product feel polished and intentional.
The micro-interaction framework:
Trigger → Rules → Feedback → Loops & ModesWhat initiates the micro-interaction? User-initiated triggers are explicit (a button click, a swipe). System triggers are automatic (a notification arrives, a download completes).
What happens when the trigger fires? Rules define the behavior:
How does the user know the rules are executing?
Does the micro-interaction repeat? Does it change behavior based on history?
Button states: Trigger: click → Rule: submit form → Feedback: button text changes to "Saving...", spinner appears → Loop: resolves to "Saved" or "Error"
Inline form validation: Trigger: blur (leave field) → Rule: validate format → Feedback: green checkmark or red error message inline → Loop: re-validates on change
Toggle: Trigger: tap → Rule: flip boolean → Feedback: thumb slides, color shifts, label updates → Mode: on / off
Pull-to-refresh: Trigger: pull past threshold → Rule: fetch new data → Feedback: spinner, "Refreshing...", then content updates → Loop: available again after completion
Like / reaction: Trigger: tap → Rule: toggle liked state → Feedback: icon fills with color, count increments (optimistic UI) → Mode: liked / not liked
Your IxD work spans the full product — flows, states, feedback, and transitions.
Your IxD focus is on task flows, information architecture, and error recovery.
Your IxD focus is component states, motion design, and interaction fidelity.
Your IxD work extends beyond screens to cross-channel touchpoints and staff-facing systems.
As a dedicated IxD role, your ownership covers the full behavior layer.
Use this checklist when reviewing designs before handoff or release.
prefers-reduced-motion is respected❌ Clickable text that looks identical to non-clickable text ❌ Draggable items with no visual signal ❌ Buttons that look like flat text ✅ Establish a clear, consistent visual language for interactivity. Interactive = looks interactive. Non-interactive = looks static.
❌ Components with only a default design — no error, empty, loading, or focus states ❌ Handoffs that show the happy path only ✅ Design all 10 states before handing off any component.
❌ Form that validates only on submit, after the user has filled in five fields ❌ Destructive action with no immediate feedback ✅ Validate inline on blur. Acknowledge every action within 100ms.
❌ A 600ms modal entrance animation that the user must wait through before interacting ❌ Animated transitions that run on every navigation, adding time to every action ✅ Keep entrances at 200–300ms. Never animate the user into waiting.
❌ An error message with only "Something went wrong" — no action, no retry ❌ A form that clears all fields on validation failure ✅ Every error state must say: what happened + why + what to do next. Preserve user input.
❌ A swipe gesture that behaves differently than the user expects from their platform ❌ A "Back" button that resets state instead of navigating back ✅ Align with platform conventions. When you must deviate, signal it explicitly.
❌ A greyed-out button with no tooltip or context explaining why it is disabled ✅ Disabled states should communicate the condition for enablement: "Available after selecting a date."
❌ The same component behaves differently on different screens ❌ Modals confirm on the left on some screens, the right on others ✅ Interaction patterns are system decisions, not per-screen decisions. Document and enforce them.
When this skill is active, Claude will adapt output to what you need:
A full behavior spec for a component or flow:
A structured table of all states for a component with:
A structured text representation of a flow:
Evaluation of existing interactions against principles:
Animation specification:
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.