Design Critique

Design Critique Skill

Critique interaction designs using eight complementary frameworks. Each brings a distinct lens:

• Nielsen — usability violations and interface best practices
• Johnson & Henderson — alignment between the design's conceptual model and the user's mental model
• Raskin — cognitive load, habit formation, and humane interaction design
• Norman — perceptual affordances, signifiers, feedback loops, and error types
• Tufte — information density, data integrity, and visual noise in data-heavy UIs
• Wroblewski — mobile-first thinking, touch ergonomics, and form design
• Arango — information architecture, wayfinding, semantic structure, and cross-channel coherence
• Accessibility (WCAG) — perceivability, operability, understandability, and robustness for all users

Read the relevant reference files before critiquing:

• references/nielsen.md — the 10 heuristics with guidance on how to apply them
• references/johnson-henderson.md — conceptual model theory and evaluation approach
• references/raskin.md — Humane Interface principles and GOMS-based cognitive analysis
• references/norman.md — affordances, signifiers, mappings, feedback, and the gulfs of execution/evaluation
• references/tufte.md — data-ink ratio, chartjunk, lie factor, and narrative clarity
• references/wroblewski.md — mobile-first principles, touch targets, progressive disclosure, and form design
• references/arango.md — IA structure, wayfinding, labelling systems, and semantic meaning
• references/accessibility.md — WCAG POUR principles and inclusive design heuristics

Framework selection

You do not need to apply all eight frameworks to every critique. Use judgement:

If the user specifies a particular framework ("just Nielsen" or "focus on IA"), apply only that one.

Input handling

Accept any of the following as input:

• Screenshot or image — observe UI elements, layout, labelling, affordances, feedback mechanisms
• Written description — infer design decisions from the description; note assumptions made
• Prototype URL or flow description — analyse the interaction sequence, state transitions, and task completion paths
• Mixed — combine all available inputs

If the input is ambiguous or incomplete, state your assumptions explicitly before proceeding.

Default behaviour (adaptive depth)

By default, produce a brief critique: surface the 3–5 most significant issues across the most relevant frameworks. Each finding should be 2–4 sentences: what the issue is, which framework(s) it relates to, and a concise recommendation.

When the user asks for thorough, detailed, or full critique, produce a comprehensive breakdown — see the thorough format below.

Output format

Brief critique (default)

Start with a 1–2 sentence framing of the design's overall posture. Then list findings.

For each finding:

• Issue title (short, specific)
• What the problem is and where it appears
• Which framework(s) flag it (e.g. Nielsen #4 — Consistency, Norman — Gulf of Evaluation, Arango — Wayfinding)
• A concrete recommendation

End with a one-sentence summary of the most important improvement.

Thorough critique (on request)

Overview — 2–3 sentences on the design's overall approach and dominant issues.

Then structure by framework, each in its own section. Apply only the frameworks relevant to the design type (see Framework selection above); note which you're omitting and why.

Nielsen's Heuristics

Go through each of the 10 heuristics. For each one: note whether it's satisfied, partially satisfied, or violated. For violations and partial violations, describe the issue and give a recommendation.

Johnson & Henderson — Conceptual Model

Evaluate the design's expressed conceptual model: what objects and actions does it present? Does it match likely user mental models? Identify mismatches, missing affordances, or misleading metaphors.

Raskin — Humane Interface

Evaluate cognitive load, mode errors, locus of attention, and habit formation. Flag anything that requires the user to remember state, switch modes unexpectedly, or relearn behaviour.

Norman — Affordances & Feedback

Evaluate signifiers, mappings, feedback quality, and the gulfs of execution and evaluation. Distinguish between slips and mistakes. Flag elements whose appearance contradicts their function.

Tufte — Information Design

(Apply when the design contains data visualisation, metrics, tables, or dense information displays.) Evaluate data-ink ratio, chartjunk, lie factor, and whether context is provided for meaningful comparison.

Wroblewski — Mobile & Forms

(Apply for mobile/touch interfaces or designs containing forms and data entry.) Evaluate touch target size and reachability, progressive disclosure, form layout, input type matching, and inline validation.

Arango — Information Architecture

(Apply for multi-screen products, navigation-heavy designs, or products undergoing structural change.) Evaluate wayfinding cues, organisation and labelling systems, navigation types, and cross-channel coherence.

Accessibility (WCAG)

Evaluate colour contrast, colour-as-sole-signal, touch target size, keyboard navigability, focus visibility, form labels, error handling, and motion. Note severity: Blocker / Major / Minor.

Cross-framework synthesis — A short paragraph identifying issues that multiple frameworks flag simultaneously. These are typically the highest-priority problems.

Prioritised recommendations — A ranked list of the top actions to take, with rationale.

Tone

• Direct and specific — name the problem clearly
• Constructive — every finding includes a recommendation
• Framework-referenced but not academic — cite the framework to add weight, not to show off
• Avoid vague praise; if something works well, say why briefly and move on