Reviewing UX Design

Given a screen (image, Figma link, or live URL), run this evaluation:

1. Identify the screen's primary user goal (e.g., "complete checkout," "find a product").
2. Score it against the 10 usability heuristics + 5 visual design principles (see below).
3. Output a report: overall score, top 3 strengths, top 5 issues ranked by severity, and concrete fixes.

Don't just say "improve contrast" — say "Body text (#999 on #FFF) fails WCAG AA at 2.8:1; change to #595959 or darker for 4.5:1."

Progress:
- [ ] Step 1: Clarify context (user goal, target device, user type)
- [ ] Step 2: Evaluate against usability heuristics
- [ ] Step 3: Evaluate against visual design principles
- [ ] Step 4: Check accessibility basics
- [ ] Step 5: Rank issues by severity
- [ ] Step 6: Write suggestions with rationale
- [ ] Step 7: Summarize into a scannable report

Step 1: Clarify Context

Before judging, establish:

• What is the user trying to do on this screen?
• Who is the user (novice, expert, accessibility needs)?
• What device/context (mobile, desktop, in-hand, distracted)?

If unstated, infer from the design and state the assumption explicitly.

Step 2: Usability Heuristics (Nielsen's 10, adapted)

Score each 0–2 (0 = violated, 1 = partial, 2 = solid):

1. Visibility of system status — Is state (loading, errors, progress) clear?
2. Match with real world — Familiar language, icons, mental models?
3. User control & freedom — Can users undo, cancel, go back easily?
4. Consistency & standards — Same patterns for same actions across the app?
5. Error prevention — Are destructive/irreversible actions guarded (confirm, disable, constrain input)?
6. Recognition over recall — Are options visible, not memorized?
7. Flexibility & efficiency — Shortcuts/defaults for experts without hurting novices?
8. Aesthetic & minimalist design — Is every element earning its place?
9. Error recovery — Are error messages specific, in plain language, with a fix?
10. Help & documentation — Is help available without derailing the flow?

Step 3: Visual Design Principles

Score each 0–2:

1. Visual hierarchy — Does size/weight/color guide the eye to the most important action first?
2. Alignment & grid — Are elements aligned to a consistent grid, no arbitrary offsets?
3. Spacing & grouping (proximity) — Related items grouped; unrelated items separated with whitespace?
4. Typography — Max 2–3 font sizes/weights per screen; readable line-length (45–75 chars) and line-height (1.4–1.6)?
5. Color & contrast — Consistent palette, meaningful use of color (not decorative-only), sufficient contrast?

Step 4: Accessibility Basics

• Text contrast ≥ 4.5:1 (normal), ≥ 3:1 (large text/UI components)
• Tap targets ≥ 44x44px
• Color is not the sole indicator of meaning (e.g., error state also has icon/text)
• Focus states visible for keyboard nav
• Form fields have visible labels (not placeholder-only)

Step 5: Rank Issues by Severity

Use this scale:

• Critical — Blocks task completion or violates accessibility compliance
• Major — Causes confusion, hesitation, or errors, but task is completable
• Minor — Polish issue, doesn't impede the user

Step 6: Suggestions

For every issue, give: What's wrong → Why it matters → Concrete fix. Reference the specific heuristic/principle violated.

Step 7: Report Format

Markdown
undefined

Example 1: Input: Checkout screen with a red "Delete cart" button same size/color as "Place order" button, no confirmation dialog.

Output:

[Critical] Destructive action has no confirmation
- What: "Delete cart" is one tap, no undo or confirm step
- Why it matters: Violates Error Prevention; users can lose their cart instantly
- Fix: Add a confirmation modal ("Remove all items?") or move action behind a secondary menu
- Principle violated: Error Prevention (Heuristic #5)

[Major] Primary and destructive actions compete visually
- What: Both buttons are same size/color, "Place order" has no visual priority
- Why it matters: Violates Visual Hierarchy; user's eye isn't guided to the intended primary action
- Fix: Make "Place order" filled/high-contrast; make "Delete cart" a low-emphasis text link
- Principle violated: Visual Hierarchy

Example 2: Input: Settings form where required fields are only marked by placeholder text that disappears on focus.

Output:

[Critical] Labels disappear on input, causing users to forget field purpose
- What: Placeholder-as-label pattern; no persistent label
- Why it matters: Fails Recognition over Recall and accessibility label requirements
- Fix: Add persistent labels above or floating labels that shrink but remain visible
- Principle violated: Recognition Over Recall (Heuristic #6), Accessibility