UX Review
Evaluate UI implementation against Nielsen's 10 usability heuristics, mapped to concrete implementation checks.
Cross-reference: frontend/knowledge-component-design for component composition and state management patterns.
When to Use
- Before merging user-facing UI changes
- When building new flows, forms, or interactions
- When redesigning existing features
- During usability review before launch
Severity Levels
| Level |
Meaning |
| CRITICAL |
Users will be blocked, lose data, or abandon the flow — fix before merge |
| WARNING |
Users will be confused or frustrated — fix soon |
| SUGGESTION |
Polish that improves experience — consider for next iteration |
Review Checklist by Nielsen's Heuristics
H1: Visibility of System Status
Users should always know what's happening.
| Check |
Severity if violated |
| Loading states shown for async operations (spinners, skeletons, progress bars) |
CRITICAL |
| Progress indication for multi-step processes |
WARNING |
| Success feedback after completing actions (save, submit, delete) |
WARNING |
| Real-time validation feedback on form inputs |
WARNING |
| Network/connection status shown when relevant |
SUGGESTION |
| Active state indicated on navigation (current page/tab highlighted) |
WARNING |
H2: Match Between System and Real World
Use language and concepts familiar to users.
| Check |
Severity if violated |
| Labels and copy use user-facing language, not developer jargon |
WARNING |
| Icons are conventional and unambiguous |
WARNING |
| Date/time/number formats match user locale expectations |
WARNING |
| Workflow order matches user's mental model |
WARNING |
H3: User Control and Freedom
Users need clear exits and undo.
| Check |
Severity if violated |
| Cancel/back available at every step of multi-step flows |
CRITICAL |
| Destructive actions require confirmation |
CRITICAL |
| Undo available for reversible actions (delete, archive) |
WARNING |
| Modals can be dismissed (close button, Escape key, backdrop click) |
WARNING |
| Form data preserved when navigating back |
WARNING |
| No dead ends (every state has a clear next action) |
CRITICAL |
H4: Consistency and Standards
Same action, same result, everywhere.
| Check |
Severity if violated |
| Visual style consistent (spacing, typography, color) across views |
WARNING |
| Interaction patterns consistent (save behavior, delete flow) |
WARNING |
| Terminology consistent (don't mix "delete" and "remove" for same action) |
WARNING |
| Button placement consistent (primary action always in same position) |
WARNING |
| Platform conventions followed (form submission, navigation patterns) |
SUGGESTION |
H5: Error Prevention
Prevent errors before they happen.
| Check |
Severity if violated |
| Input constraints enforced in UI (max length, numeric-only, date pickers) |
WARNING |
| Dangerous actions are visually distinct (red for delete, confirmation required) |
WARNING |
| Sensible defaults pre-filled where possible |
SUGGESTION |
| Inline validation catches errors before submission |
WARNING |
| Disabled states with tooltips explaining why (not just grey buttons) |
SUGGESTION |
H6: Recognition Rather Than Recall
Show options, don't force users to remember.
| Check |
Severity if violated |
| Recently used items / search suggestions available |
SUGGESTION |
| Labels visible on form fields (not just placeholders that disappear) |
WARNING |
| Context preserved across navigation (filters, selections, scroll position) |
WARNING |
| Help text or examples shown where input format isn't obvious |
WARNING |
H7: Flexibility and Efficiency of Use
Support both novice and expert users.
| Check |
Severity if violated |
| Keyboard shortcuts for frequent actions |
SUGGESTION |
| Bulk operations available for lists (select all, batch delete) |
SUGGESTION |
| Search/filter for long lists and datasets |
WARNING |
| Responsive layout works on mobile and desktop |
WARNING |
H8: Aesthetic and Minimalist Design
Show only what's needed.
| Check |
Severity if violated |
| Information hierarchy is clear (headings, grouping, whitespace) |
WARNING |
| No visual clutter (excessive labels, borders, icons) |
SUGGESTION |
| Primary action visually dominant, secondary actions subdued |
WARNING |
| Content is scannable (short paragraphs, bullet points, tables) |
SUGGESTION |
H9: Help Users Recognize, Diagnose, and Recover from Errors
Error messages should be helpful.
| Check |
Severity if violated |
| Error messages explain what went wrong in plain language |
CRITICAL |
| Error messages suggest how to fix the problem |
WARNING |
| Errors are shown in context (next to the field, not just a banner) |
WARNING |
| Form errors don't clear user input |
CRITICAL |
| Server errors show a friendly fallback, not raw stack traces |
CRITICAL |
| Error states provide a clear recovery path (retry, go back, contact support) |
WARNING |
H10: Help and Documentation
Provide help where users need it.
| Check |
Severity if violated |
| Complex features have contextual help (tooltips, info icons) |
SUGGESTION |
| Onboarding for first-time users of complex flows |
SUGGESTION |
| Empty states include guidance on how to get started |
WARNING |
Common State Gaps
Every view should handle these states:
| State |
Required |
Common miss |
| Loading |
Skeleton or spinner |
Just showing nothing |
| Empty |
Helpful message + CTA |
Blank white space |
| Error |
Message + retry action |
Generic "Something went wrong" |
| Partial |
Graceful degradation |
All-or-nothing rendering |
| Success |
Confirmation feedback |
Silent completion |
| Offline |
Saved state or warning |
Broken UI |
Output Format
## UX Review: [Feature/Flow Name]
**Scope**: [Screens, flows, components reviewed]
**Overall**: [PASS | PASS WITH WARNINGS | FAIL]
### Findings by Heuristic
#### H9: Error Recovery
##### [CRITICAL] Form clears input on validation error
**Location**: `src/components/SignupForm.tsx`
**Issue**: Submitting with invalid email clears all fields
**Impact**: Users lose all entered data and must re-type everything
**Fix**: Preserve form state, show inline error on the email field only
#### H1: System Status
##### [WARNING] No loading state on dashboard
**Location**: `src/pages/Dashboard.tsx`
**Issue**: Dashboard shows blank space while data loads (~2s)
**Fix**: Add skeleton components matching dashboard layout
...
### Summary
| Heuristic | Critical | Warning | Suggestion |
|-----------|----------|---------|------------|
| H1: Visibility | 0 | 1 | 0 |
| H3: Control/Freedom | 1 | 0 | 0 |
| H9: Error Recovery | 1 | 1 | 0 |
| ... | ... | ... | ... |
| **Total** | **N** | **N** | **N** |
### State Coverage
| View | Loading | Empty | Error | Success |
|------|---------|-------|-------|---------|
| Dashboard | ⚠ missing | ✓ | ⚠ generic | ✓ |
| User list | ✓ | ⚠ missing | ✓ | ✓ |
### Recommendations
1. <Prioritized by user impact>
2. ...
1---2name: review-ux3description: Evaluate user experience against Nielsen's heuristics. Covers user flows, error states, loading states, empty states, feedback, consistency, and information hierarchy.4---56# UX Review78Evaluate UI implementation against Nielsen's 10 usability heuristics, mapped to concrete implementation checks.910**Cross-reference**: `frontend/knowledge-component-design` for component composition and state management patterns.1112## When to Use1314- Before merging user-facing UI changes15- When building new flows, forms, or interactions16- When redesigning existing features17- During usability review before launch1819## Severity Levels2021| Level | Meaning |22|-------|---------|23| **CRITICAL** | Users will be blocked, lose data, or abandon the flow — fix before merge |24| **WARNING** | Users will be confused or frustrated — fix soon |25| **SUGGESTION** | Polish that improves experience — consider for next iteration |2627## Review Checklist by Nielsen's Heuristics2829### H1: Visibility of System Status3031_Users should always know what's happening._3233| Check | Severity if violated |34|-------|---------------------|35| Loading states shown for async operations (spinners, skeletons, progress bars) | CRITICAL |36| Progress indication for multi-step processes | WARNING |37| Success feedback after completing actions (save, submit, delete) | WARNING |38| Real-time validation feedback on form inputs | WARNING |39| Network/connection status shown when relevant | SUGGESTION |40| Active state indicated on navigation (current page/tab highlighted) | WARNING |4142### H2: Match Between System and Real World4344_Use language and concepts familiar to users._4546| Check | Severity if violated |47|-------|---------------------|48| Labels and copy use user-facing language, not developer jargon | WARNING |49| Icons are conventional and unambiguous | WARNING |50| Date/time/number formats match user locale expectations | WARNING |51| Workflow order matches user's mental model | WARNING |5253### H3: User Control and Freedom5455_Users need clear exits and undo._5657| Check | Severity if violated |58|-------|---------------------|59| Cancel/back available at every step of multi-step flows | CRITICAL |60| Destructive actions require confirmation | CRITICAL |61| Undo available for reversible actions (delete, archive) | WARNING |62| Modals can be dismissed (close button, Escape key, backdrop click) | WARNING |63| Form data preserved when navigating back | WARNING |64| No dead ends (every state has a clear next action) | CRITICAL |6566### H4: Consistency and Standards6768_Same action, same result, everywhere._6970| Check | Severity if violated |71|-------|---------------------|72| Visual style consistent (spacing, typography, color) across views | WARNING |73| Interaction patterns consistent (save behavior, delete flow) | WARNING |74| Terminology consistent (don't mix "delete" and "remove" for same action) | WARNING |75| Button placement consistent (primary action always in same position) | WARNING |76| Platform conventions followed (form submission, navigation patterns) | SUGGESTION |7778### H5: Error Prevention7980_Prevent errors before they happen._8182| Check | Severity if violated |83|-------|---------------------|84| Input constraints enforced in UI (max length, numeric-only, date pickers) | WARNING |85| Dangerous actions are visually distinct (red for delete, confirmation required) | WARNING |86| Sensible defaults pre-filled where possible | SUGGESTION |87| Inline validation catches errors before submission | WARNING |88| Disabled states with tooltips explaining why (not just grey buttons) | SUGGESTION |8990### H6: Recognition Rather Than Recall9192_Show options, don't force users to remember._9394| Check | Severity if violated |95|-------|---------------------|96| Recently used items / search suggestions available | SUGGESTION |97| Labels visible on form fields (not just placeholders that disappear) | WARNING |98| Context preserved across navigation (filters, selections, scroll position) | WARNING |99| Help text or examples shown where input format isn't obvious | WARNING |100101### H7: Flexibility and Efficiency of Use102103_Support both novice and expert users._104105| Check | Severity if violated |106|-------|---------------------|107| Keyboard shortcuts for frequent actions | SUGGESTION |108| Bulk operations available for lists (select all, batch delete) | SUGGESTION |109| Search/filter for long lists and datasets | WARNING |110| Responsive layout works on mobile and desktop | WARNING |111112### H8: Aesthetic and Minimalist Design113114_Show only what's needed._115116| Check | Severity if violated |117|-------|---------------------|118| Information hierarchy is clear (headings, grouping, whitespace) | WARNING |119| No visual clutter (excessive labels, borders, icons) | SUGGESTION |120| Primary action visually dominant, secondary actions subdued | WARNING |121| Content is scannable (short paragraphs, bullet points, tables) | SUGGESTION |122123### H9: Help Users Recognize, Diagnose, and Recover from Errors124125_Error messages should be helpful._126127| Check | Severity if violated |128|-------|---------------------|129| Error messages explain what went wrong in plain language | CRITICAL |130| Error messages suggest how to fix the problem | WARNING |131| Errors are shown in context (next to the field, not just a banner) | WARNING |132| Form errors don't clear user input | CRITICAL |133| Server errors show a friendly fallback, not raw stack traces | CRITICAL |134| Error states provide a clear recovery path (retry, go back, contact support) | WARNING |135136### H10: Help and Documentation137138_Provide help where users need it._139140| Check | Severity if violated |141|-------|---------------------|142| Complex features have contextual help (tooltips, info icons) | SUGGESTION |143| Onboarding for first-time users of complex flows | SUGGESTION |144| Empty states include guidance on how to get started | WARNING |145146## Common State Gaps147148Every view should handle these states:149150| State | Required | Common miss |151|-------|----------|-------------|152| **Loading** | Skeleton or spinner | Just showing nothing |153| **Empty** | Helpful message + CTA | Blank white space |154| **Error** | Message + retry action | Generic "Something went wrong" |155| **Partial** | Graceful degradation | All-or-nothing rendering |156| **Success** | Confirmation feedback | Silent completion |157| **Offline** | Saved state or warning | Broken UI |158159## Output Format160161```markdown162## UX Review: [Feature/Flow Name]163164**Scope**: [Screens, flows, components reviewed]165**Overall**: [PASS | PASS WITH WARNINGS | FAIL]166167### Findings by Heuristic168169#### H9: Error Recovery170##### [CRITICAL] Form clears input on validation error171**Location**: `src/components/SignupForm.tsx`172**Issue**: Submitting with invalid email clears all fields173**Impact**: Users lose all entered data and must re-type everything174**Fix**: Preserve form state, show inline error on the email field only175176#### H1: System Status177##### [WARNING] No loading state on dashboard178**Location**: `src/pages/Dashboard.tsx`179**Issue**: Dashboard shows blank space while data loads (~2s)180**Fix**: Add skeleton components matching dashboard layout181182...183184### Summary185| Heuristic | Critical | Warning | Suggestion |186|-----------|----------|---------|------------|187| H1: Visibility | 0 | 1 | 0 |188| H3: Control/Freedom | 1 | 0 | 0 |189| H9: Error Recovery | 1 | 1 | 0 |190| ... | ... | ... | ... |191| **Total** | **N** | **N** | **N** |192193### State Coverage194| View | Loading | Empty | Error | Success |195|------|---------|-------|-------|---------|196| Dashboard | ⚠ missing | ✓ | ⚠ generic | ✓ |197| User list | ✓ | ⚠ missing | ✓ | ✓ |198199### Recommendations2001. <Prioritized by user impact>2012. ...202```
DeanKelly751