review-ux-uiReview user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, re…
Independent GitHub snapshot · Automated classification · Original documentation governs
Judge UX and UI for usability, accessibility, effectiveness.
Rate interface against each heuristic.
| # | Heuristic | Key Question | Rating |
|---|---|---|---|
| 1 | Visibility of system status | Does the system always inform users about what is happening? | |
| 2 | Match between system and real world | Does the system use familiar language and concepts? | |
| 3 | User control and freedom | Can users easily undo, redo, or exit unwanted states? | |
| 4 | Consistency and standards | Do similar elements behave the same way throughout? | |
| 5 | Error prevention | Does the design prevent errors before they occur? | |
| 6 | Recognition rather than recall | Are options, actions, and information visible or easily retrievable? | |
| 7 | Flexibility and efficiency of use | Are there shortcuts for experienced users without confusing novices? | |
| 8 | Aesthetic and minimalist design | Does every element serve a purpose? Is there unnecessary clutter? | |
| 9 | Help users recognize, diagnose, and recover from errors | Are error messages clear, specific, and constructive? | |
| 10 | Help and documentation | Is help available and easy to find when needed? |
Rate severity per violation.
| Severity | Description |
|---|---|
| 0 | No problem |
| 1 | Cosmetic — fix if time |
| 2 | Minor — low priority |
| 3 | Major — important fix |
| 4 | Catastrophic — must fix before release |
## Heuristic Evaluation Findings
| # | Heuristic | Severity | Finding | Location |
|---|-----------|----------|---------|----------|
| 1 | System status | 3 | No loading indicator during data fetch — users click repeatedly | Dashboard page |
| 3 | User control | 2 | No undo for item deletion — only a confirmation dialog | Item list |
| 5 | Error prevention | 3 | Date field accepts invalid dates (Feb 30) | Booking form |
| 9 | Error recovery | 4 | Form submission error clears all fields | Registration |
Got: All 10 heuristics rated with findings and severity.
If fail: Time short? Focus on heuristics 1, 3, 5, 9 — biggest impact.
alt="")lang attr set on <html>Got: WCAG 2.1 AA criteria checked pass/fail per criterion.
If fail: Use auto tools (axe-core, Lighthouse) for first scan, then manual for human-judgment criteria.
With Tab, Shift+Tab, Enter, Space, Arrow, Escape only.
## Keyboard Navigation Audit
| Task | Completable? | Issues |
|------|-------------|--------|
| Navigate to main content | Yes — skip link works | None |
| Open dropdown menu | Yes | Arrow keys don't work within menu |
| Submit a form | Yes | Tab order skips the submit button |
| Close a modal | No | Escape doesn't close, no visible close button in tab order |
| Use date picker | No | Custom date picker not keyboard accessible |
Test with NVDA (Win), VoiceOver (mac/iOS), TalkBack (Android).
## Screen Reader Audit
| Element | Announced As | Expected | Issue |
|---------|-------------|----------|-------|
| Logo link | "link, image" | "Home, link" | Missing alt text on logo |
| Search input | "edit, search" | "Search products, edit" | Missing label association |
| Nav menu | "navigation, main" | Correct | None |
| Error message | (not announced) | "Error: email is required" | Missing live region |
| Loading spinner | (not announced) | "Loading, please wait" | Missing aria-live or role="status" |
Got: Full task flows tested with keyboard and screen reader.
If fail: No screen reader? Inspect ARIA attrs, semantic HTML as proxy.
Map and judge key flows.
## User Flow: Complete a Purchase
### Steps
1. Browse products → 2. View product → 3. Add to cart → 4. View cart →
5. Enter shipping → 6. Enter payment → 7. Review order → 8. Confirm
### Assessment
| Step | Friction | Severity | Notes |
|------|---------|----------|-------|
| 1→2 | Low | - | Clear product cards |
| 2→3 | Medium | 2 | "Add to cart" button below the fold on mobile |
| 3→4 | Low | - | Cart icon updates with count |
| 4→5 | High | 3 | Must create account — no guest checkout |
| 5→6 | Low | - | Address autocomplete works well |
| 6→7 | Medium | 2 | Card number field doesn't auto-format |
| 7→8 | Low | - | Clear order summary |
### Flow Efficiency
- **Steps**: 8 (acceptable for e-commerce)
- **Required fields**: 14 (could reduce with address autocomplete + saved payment)
- **Decision points**: 2 (size selection, shipping method)
- **Potential drop-off points**: Step 4→5 (forced account creation)
Got: Critical flows mapped with friction points, ratings.
If fail: No analytics? Judge flows by task complexity, step count.
Got: Cognitive load assessed with overload/underload areas named.
If fail: Hard to judge objective? Use "squint test" — squint at screen, check structure and hierarchy still apparent.
For each form.
autocomplete attrs set for standard fieldsGot: Each form checked against list with issues documented.
If fail: Many forms? Prioritize highest-traffic (registration, checkout, contact).
## UX/UI Review Report
### Executive Summary
[2-3 sentences: overall usability, most critical issues, strongest aspects]
### Heuristic Evaluation Summary
| Heuristic | Severity | Key Finding |
|-----------|----------|-------------|
[Summary table from Step 1]
### Accessibility Compliance
- **Target**: WCAG 2.1 AA
- **Status**: [X of Y criteria pass]
- **Critical failures**: [List]
### User Flow Analysis
[Key friction points with severity and recommendations]
### Top 5 Improvements (Prioritised)
1. **[Issue]** — Severity: [N] — [Specific recommendation]
2. ...
### What Works Well
1. [Specific positive observation]
2. ...
Got: Review gives prioritized, actionable recs with severity.
If fail: Too many issues? Split into "must fix" (severity 3-4) and "should fix" (1-2).
review-web-design — visual review (layout, typography, color)scaffold-nextjs-app — Next.js scaffoldingsetup-tailwind-typescript — Tailwind CSS design system