qa-aman Overview
Based on "The Design of Everyday Things" by Don Norman. Norman's framework: good design makes the right action obvious and the wrong action difficult. Bad design forces users to think when they should act. A critique is not about aesthetics - it's about whether the design communicates correctly: what can I do here, how do I do it, and did it work?
Norman's three key concepts:
- Affordances - what actions does the design suggest are possible?
- Signifiers - what cues communicate where and how to act?
- Feedback - does the system communicate the result of every action?
Workflow
Step 1: Define the user goal
Before critiquing, state: what is the user trying to accomplish on this screen? Critiques without a user goal produce aesthetic feedback, not usability feedback.
Step 2: Check affordances and signifiers
Walk through every interactive element:
- Is it obvious this is clickable/tappable/draggable?
- Does the visual design suggest the correct interaction?
- Are buttons distinguishable from static content?
- Does the hierarchy direct attention to the primary action?
Norman: "If it requires a label, the design has failed."
Step 3: Check feedback
For every action a user can take:
- Is there immediate visual feedback that the action registered?
- Are loading states communicated?
- Are success and error states clearly differentiated?
- Does error feedback tell the user what to do next, not just what went wrong?
Step 4: Apply Nielsen's 10 Heuristics
Scan the design against each heuristic:
- Visibility of system status - does the user always know what's happening?
- Match with real world - does language and metaphor match user expectations?
- User control and freedom - can users undo, escape, or cancel?
- Consistency and standards - does it follow platform conventions?
- Error prevention - does the design prevent mistakes before they happen?
- Recognition over recall - are options visible, not memorized?
- Flexibility and efficiency - does it serve both novice and expert users?
- Aesthetic and minimalist design - is every element earning its place?
- Help users recognize, diagnose, recover from errors - are errors human-readable?
- Help and documentation - is help available when needed?
Step 5: Check accessibility
- Color contrast ratio >= 4.5:1 for normal text, 3:1 for large text (WCAG AA)
- Interactive targets >= 44x44px (mobile), >= 24x24px (desktop)
- No information conveyed by color alone
- Focus states visible for keyboard navigation
Step 6: Write the critique
Structure as:
- Works well - what the design gets right (always include this)
- Critical issues - prevents task completion, must fix
- Usability issues - adds friction, should fix
- Polish - optional improvements
For each issue: describe the problem, explain the impact, suggest a solution.
Anti-Patterns
1. Aesthetic critique instead of usability critique Bad: "The blue is too dark. I'd try a lighter shade." Good: "The CTA button doesn't have enough contrast against the background. Users with low vision may not see it as actionable. Test with contrast ratio >= 4.5:1."
2. Critique without knowing the user goal Bad: Generic feedback about layout without understanding what the user is trying to do. Good: "Given that the primary goal is checkout completion, the payment form should be the dominant element. Currently the promotional banner competes with it."
3. No positive feedback Bad: Only problems listed. Good: Name what's working. It tells the designer what to preserve and builds trust in the critique.
4. Solutions without problems Bad: "Make the button bigger." Good: "The CTA is competing with 3 other buttons of equal weight. Users don't know where to look first. Establish a clear visual hierarchy."
Quality Checklist
- User goal stated before critique begins
- Affordances and signifiers reviewed for every interactive element
- Feedback reviewed for every user action
- Nielsen's 10 heuristics scanned (at least the relevant ones)
- Accessibility: contrast, touch targets, color-as-information
- Critique has positive feedback section
- Issues classified: critical / usability / polish
- Every issue paired with a suggested direction (not just a problem)