# Design Critique > Critique UI and interaction designs using eight complementary frameworks: Nielsen's 10 Usability Heuristics, Johnson & Henderson's Conceptual Model theory, Jef Raskin's Humane Interface principles, Don Norman's affordance and feedback model, Edward Tufte's information design principles, Luke Wroblewski's mobile-first and form design research, Jorge Arango's Information Architecture and semantic structure lens, and WCAG-based accessibility heuristics. Use this skill whenever the user asks to critique, review, evaluate, or analyse a design — whether provided as a screenshot, image, written description, prototype URL, or user flow. Also trigger for questions like "what's wrong with this UI?", "how does this design hold up?", "review this flow", "give me design feedback", or "is this accessible?". Works for any design context: mobile, web, dashboard, form, onboarding, data visualisation, navigation, or multi-surface product. - Skill: `matt-wilkinson-za/design-critique` (Agent Skill, multi-file: 9 files) - Install (CLI): `npx skillmds@latest add matt-wilkinson-za/design-critique` - Raw SKILL.md: https://api.skillmd.com/api/skills/matt-wilkinson-za/design-critique/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: matt-wilkinson-za (https://skillmd.com/u/matt-wilkinson-za) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/matt-wilkinson-za/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: | Design type | Most relevant frameworks | |---|---| | Mobile app / touch UI | Nielsen, Raskin, Norman, Wroblewski, Accessibility | | Data dashboard / reports | Tufte, Nielsen, Norman, Accessibility | | Multi-screen product / navigation | Arango, Nielsen, Johnson & Henderson, Norman | | Form or data entry flow | Wroblewski, Raskin, Nielsen, Accessibility | | Onboarding or first-use flow | Johnson & Henderson, Norman, Nielsen, Wroblewski | | Component / micro-interaction | Norman, Raskin, Nielsen, Accessibility | | Full product review | All eight | 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