UX & Interaction Review
Combined review of usability and interaction design. Evaluates whether an interface works mechanically (state coverage, feedback, timing, error recovery) and whether users can accomplish their goals efficiently (heuristics, flow, progressive disclosure).
This skill merges the "how does it work?" axis: heuristics, state coverage, feedback patterns, keyboard behavior, timing, animation, and error handling.
When to Use
- Reviewing new or existing components before release
- Evaluating multi-state interactions (modals, popovers, wizards, dashboards)
- Auditing error/empty/loading/success state handling
- Assessing feedback timing and animation choreography
- Checking keyboard behavior and escape hatches
- PR reviews that touch interactive code
- Design system component reviews
Do NOT use for purely visual/aesthetic concerns (typography, color palettes, spacing rhythm) or for mapping the user's emotional journey across sessions. Use design-journey-review for those.
Quick Reference
| Task |
Load reference |
| State patterns and micro-interaction specs |
skills/ux-interaction-review/references/state-and-interaction-patterns.md |
Workflow
Step 1: Gather Context
- What is the user trying to accomplish?
- What component/flow is under review? What states can it be in?
- Who are the users (expert vs. novice)? Single-user tool vs. public-facing?
- What are the success criteria?
Step 2: Heuristic Scan (Nielsen's 10)
Evaluate against each heuristic. Score Good / Fair / Poor:
| Heuristic |
Check |
| Visibility of system status |
Does the user always know what's happening? |
| Match with real world |
Does it use familiar language and concepts? |
| User control and freedom |
Can users undo, go back, escape? |
| Consistency and standards |
Does it follow platform conventions? |
| Error prevention |
Are mistakes prevented before they happen? |
| Recognition over recall |
Is information visible rather than memorized? |
| Flexibility and efficiency |
Are there shortcuts for expert users? |
| Aesthetic and minimalist design |
Is every element necessary? |
| Error recovery |
Are error messages helpful and actionable? |
| Help and documentation |
Is guidance available when needed? |
Step 3: Interaction Map
For every interactive element, document:
| Element |
Trigger |
Feedback |
States |
Dismiss/Escape |
| [name] |
click/hover/focus |
what changes |
all possible states |
how to exit |
Step 4: State Coverage Audit
Check each state is handled:
| State |
Handled? |
Notes |
| Loading |
|
|
| Empty (first use) |
|
|
| Empty (no results) |
|
|
| Partial data |
|
|
| Full / normal |
|
|
| Error (network) |
|
|
| Error (validation) |
|
|
| Error (permissions) |
|
|
| Success |
|
|
| Stale / outdated |
|
|
| Offline |
|
|
| Disabled |
|
|
Step 5: Feedback & Timing Assessment
For each interaction, evaluate:
- Latency class: instant (<100ms), fast (100-300ms), noticeable (300ms-1s), slow (>1s)
- Feedback timing: does the user know their action worked immediately?
- Animation duration: appropriate for the action? (micro: 80-150ms, layout shift: 200-300ms, page transition: 300-400ms)
- Progressive disclosure: is complexity revealed only when needed?
- Escape hatches: can the user dismiss/undo/cancel from any state?
| Element |
Duration |
Easing |
Assessment |
| [name] |
Nms |
ease-X |
too fast / good / too slow |
Step 6: Error Recovery & Edge Cases
- What happens on clipboard failure (especially file:// protocol)?
- What happens on rapid double-click?
- What happens if the data is stale?
- What happens if the user navigates away mid-action?
- Are destructive actions reversible?
Step 7: Prioritize Findings
| Priority |
Criteria |
Action |
| Critical |
Blocks usability, user cannot complete task |
Must fix |
| High |
Significantly degrades experience or loses data |
Fix this sprint |
| Medium |
Noticeable friction, workaround exists |
Next iteration |
| Enhancement |
Improves delight, polish |
Backlog |
Step 8: Produce Report
## UX & Interaction Review: [Component/Flow]
### Summary
[2-3 sentences: overall assessment, biggest concern, best strength]
### Heuristic Scores
[Table with Good/Fair/Poor per heuristic]
### Interaction Map
[Table: element, trigger, feedback, states, dismiss]
### State Coverage
[Table: state, handled yes/no, notes]
### Timing & Feedback
[Table: element, duration, easing, assessment]
### Findings by Priority
#### Critical
- [ ] Finding (impact, recommendation)
#### High
- [ ] Finding (impact, recommendation)
#### Medium / Enhancement
- [ ] Finding (impact, recommendation)
### Patterns to Preserve
[What's working well that should NOT be changed]
Principles
- State coverage is non-negotiable. Every UI element exists in multiple states. If you can't enumerate them, the review isn't done.
- Feedback must be immediate. If the user clicks and nothing visibly changes for >100ms, that's a bug.
- Escape hatches everywhere. Every popup, modal, panel, and expanded state must be dismissible via Escape, outside-click, or an explicit close action.
- Debounce destructive paths. Copy buttons, delete buttons, submit buttons should all guard against rapid double-invocation.
- Respect
prefers-reduced-motion. All non-essential animations should be wrapped in a motion media query.
- Progressive disclosure over density. Don't show everything at once. Reveal on interaction, not on load.
- Test with real data. Placeholder content hides information architecture problems. Empty states hide missing error handling.
1---2name: ux-interaction-review3description: Combined UX and interaction design review: usability heuristics, state coverage, feedback patterns, timing, keyboard behavior, error recovery, and progressive disclosure. Use when reviewing how an interface works mechanically and whether interactions are well-designed for use.4---5
6# UX & Interaction Review
7
8Combined review of usability and interaction design. Evaluates whether an interface works mechanically (state coverage, feedback, timing, error recovery) and whether users can accomplish their goals efficiently (heuristics, flow, progressive disclosure).
9
10This skill merges the "how does it work?" axis: heuristics, state coverage, feedback patterns, keyboard behavior, timing, animation, and error handling.
11
12## When to Use
13
14- Reviewing new or existing components before release
15- Evaluating multi-state interactions (modals, popovers, wizards, dashboards)
16- Auditing error/empty/loading/success state handling
17- Assessing feedback timing and animation choreography
18- Checking keyboard behavior and escape hatches
19- PR reviews that touch interactive code
20- Design system component reviews
21
22Do NOT use for purely visual/aesthetic concerns (typography, color palettes, spacing rhythm) or for mapping the user's emotional journey across sessions. Use `design-journey-review` for those.
23
24## Quick Reference
25
26| Task | Load reference |
27| --- | --- |
28| State patterns and micro-interaction specs | `skills/ux-interaction-review/references/state-and-interaction-patterns.md` |
29
30## Workflow
31
32### Step 1: Gather Context
33
341. What is the user trying to accomplish?
352. What component/flow is under review? What states can it be in?
363. Who are the users (expert vs. novice)? Single-user tool vs. public-facing?
374. What are the success criteria?
38
39### Step 2: Heuristic Scan (Nielsen's 10)
40
41Evaluate against each heuristic. Score Good / Fair / Poor:
42
43| Heuristic | Check |
44|-----------|-------|
45| Visibility of system status | Does the user always know what's happening? |
46| Match with real world | Does it use familiar language and concepts? |
47| User control and freedom | Can users undo, go back, escape? |
48| Consistency and standards | Does it follow platform conventions? |
49| Error prevention | Are mistakes prevented before they happen? |
50| Recognition over recall | Is information visible rather than memorized? |
51| Flexibility and efficiency | Are there shortcuts for expert users? |
52| Aesthetic and minimalist design | Is every element necessary? |
53| Error recovery | Are error messages helpful and actionable? |
54| Help and documentation | Is guidance available when needed? |
55
56### Step 3: Interaction Map
57
58For every interactive element, document:
59
60| Element | Trigger | Feedback | States | Dismiss/Escape |
61|---------|---------|----------|--------|----------------|
62| [name] | click/hover/focus | what changes | all possible states | how to exit |
63
64### Step 4: State Coverage Audit
65
66Check each state is handled:
67
68| State | Handled? | Notes |
69|-------|----------|-------|
70| Loading | | |
71| Empty (first use) | | |
72| Empty (no results) | | |
73| Partial data | | |
74| Full / normal | | |
75| Error (network) | | |
76| Error (validation) | | |
77| Error (permissions) | | |
78| Success | | |
79| Stale / outdated | | |
80| Offline | | |
81| Disabled | | |
82
83### Step 5: Feedback & Timing Assessment
84
85For each interaction, evaluate:
86
87- **Latency class**: instant (<100ms), fast (100-300ms), noticeable (300ms-1s), slow (>1s)
88- **Feedback timing**: does the user know their action worked immediately?
89- **Animation duration**: appropriate for the action? (micro: 80-150ms, layout shift: 200-300ms, page transition: 300-400ms)
90- **Progressive disclosure**: is complexity revealed only when needed?
91- **Escape hatches**: can the user dismiss/undo/cancel from any state?
92
93| Element | Duration | Easing | Assessment |
94|---------|----------|--------|------------|
95| [name] | Nms | ease-X | too fast / good / too slow |
96
97### Step 6: Error Recovery & Edge Cases
98
99- What happens on clipboard failure (especially file:// protocol)?
100- What happens on rapid double-click?
101- What happens if the data is stale?
102- What happens if the user navigates away mid-action?
103- Are destructive actions reversible?
104
105### Step 7: Prioritize Findings
106
107| Priority | Criteria | Action |
108|----------|----------|--------|
109| **Critical** | Blocks usability, user cannot complete task | Must fix |
110| **High** | Significantly degrades experience or loses data | Fix this sprint |
111| **Medium** | Noticeable friction, workaround exists | Next iteration |
112| **Enhancement** | Improves delight, polish | Backlog |
113
114### Step 8: Produce Report
115
116```markdown
117## UX & Interaction Review: [Component/Flow]
118
119### Summary
120[2-3 sentences: overall assessment, biggest concern, best strength]
121
122### Heuristic Scores
123[Table with Good/Fair/Poor per heuristic]
124
125### Interaction Map
126[Table: element, trigger, feedback, states, dismiss]
127
128### State Coverage
129[Table: state, handled yes/no, notes]
130
131### Timing & Feedback
132[Table: element, duration, easing, assessment]
133
134### Findings by Priority
135
136#### Critical
137- [ ] Finding (impact, recommendation)
138
139#### High
140- [ ] Finding (impact, recommendation)
141
142#### Medium / Enhancement
143- [ ] Finding (impact, recommendation)
144
145### Patterns to Preserve
146[What's working well that should NOT be changed]
147```
148
149## Principles
150
151- **State coverage is non-negotiable.** Every UI element exists in multiple states. If you can't enumerate them, the review isn't done.
152- **Feedback must be immediate.** If the user clicks and nothing visibly changes for >100ms, that's a bug.
153- **Escape hatches everywhere.** Every popup, modal, panel, and expanded state must be dismissible via Escape, outside-click, or an explicit close action.
154- **Debounce destructive paths.** Copy buttons, delete buttons, submit buttons should all guard against rapid double-invocation.
155- **Respect `prefers-reduced-motion`.** All non-essential animations should be wrapped in a motion media query.
156- **Progressive disclosure over density.** Don't show everything at once. Reveal on interaction, not on load.
157- **Test with real data.** Placeholder content hides information architecture problems. Empty states hide missing error handling.
nickcrew