# Main Checklist β€” Design Critique This is the atom-level rubric for Mode A. Each atom has a stable ID, evidence requirement, and supporting framework. Record each applicable atom as `pass`, `severity 1-4`, or `not evaluated`. Apply the global severity calibration in `../SKILL.md`; practitioner guidance is a diagnostic prompt, not a universal requirement. Legend: πŸ–Ό `image-visible` Β· 🧩 `needs-html` Β· β–Ά `needs-runtime` Β· πŸ”€ `needs-flow` Β· ⇄ `needs-state-pair` (two states of the **same** view β€” before/after an action) ## Evaluation rules - Observable evidence is required for every issue. - A concern estimated from pixels is not a measured standards failure. - Do not enforce a grid, type scale, target size, or component rule unless it is a relevant platform guideline or a supplied Mode B requirement. - Consolidate one root cause into one finding; cite multiple atoms/frameworks as supporting badges without adding duplicate penalties. - Do not penalize unprovided screens or states. --- ## 1. Visual design & hierarchy ### Typography - **V01 πŸ–Ό Type hierarchy coherence** β€” Text treatments create a stable title/body/metadata hierarchy without unnecessary near-duplicates. Do not require a fixed number of sizes. *[Refactoring UI: hierarchy; Gestalt: similarity]* - **V02 πŸ–Ό Emphasis channels** β€” Size, weight, color, and spacing reinforce rather than contradict the intended reading order. *[Refactoring UI: hierarchy]* - **V03 πŸ–Ό Text measure** β€” Paragraph-length prose has a readable line length; roughly 45-90 characters is a diagnostic range, not a universal rule for tables, labels, or dense tools. *[Practical typography]* - **V04 πŸ–Ό Line height and density** β€” Leading supports the typeface, size, and content density; flag demonstrated reading friction rather than enforcing one ratio. *[Practical typography]* - **V05 πŸ–Ό Typographic consistency** β€” Type families and styles have distinguishable roles and repeated roles use consistent treatment. *[Refactoring UI; Gestalt: similarity]* ### Spacing, grouping, and layout - **V06 πŸ–Ό Spacing rhythm** β€” Repeated relationships use a coherent spacing rhythm. An 8-point or 4-point grid is supporting vocabulary, not a Mode A requirement. *[Spacing-system practice]* - **V07 πŸ–Ό Alignment** β€” Related elements share meaningful axes; exceptions appear intentional. *[Gestalt: continuity]* - **V08 πŸ–Ό Grouping** β€” Proximity and common regions match logical relationships; unrelated items are not accidentally grouped. *[Gestalt: proximity, common region]* - **V09 πŸ–Ό Focal hierarchy** β€” Visual weight leads attention toward the primary information or action for the stated task. *[Gestalt: figure/ground]* ### Color and surface language - **V10 πŸ–Ό Color roles** β€” Repeated semantic roles use color consistently; flag role confusion, not palette size by itself. *[Refactoring UI: color roles]* - **V11 πŸ–Ό Purposeful emphasis** β€” Accent and contrast support the intended hierarchy instead of creating competing focal points. *[Refactoring UI: hierarchy]* - **V12 πŸ–Ό Repeated component appearance** β€” Equivalent controls and containers look equivalent unless their state or priority differs. *[Nielsen #4; Gestalt: similarity]* - **V13 πŸ–Ό Shape, border, and elevation language** β€” Radius, border, and elevation differences communicate a role or state rather than appearing accidental. *[Visual-system practice]* ### Content legibility & detail-on-demand - **V14 πŸ–Ό Critical-content legibility & detail-on-demand** β€” Content the user must read to act β€” above all the primary artifact, image, or media the screen is built around β€” is presented at a legible size. Detail-carrying images/media offer zoom or a larger view (lightbox); primary evidence is never shrunk into an unreadable thumbnail while usable space sits empty. Follow "overview β†’ zoom β†’ details-on-demand." Rate up to **3** when illegible content blocks comprehension of the core task. *[Shneiderman: visual information-seeking mantra; WCAG: legibility/resize; Aesthetic-Usability]* Apply Gestaltβ€”proximity, similarity, common region, continuity, closure, and figure/groundβ€”as supporting explanations across these atoms, not as a separate score. --- ## 2. Usability & interaction ### Assessable from a static frame - **U01 πŸ–Ό Consistency and standards** β€” Controls use recognizable patterns and equivalent actions are presented consistently. *[Nielsen #4]* - **U02 πŸ–Ό Match to users' language** β€” Labels, icons, and concepts fit the evaluation brief rather than exposing unexplained system terminology. *[Nielsen #2]* - **U03 πŸ–Ό Recognition over recall** β€” Necessary options, context, and signifiers are available at the point of use. *[Nielsen #6]* - **U04 πŸ–Ό Relevant minimalism** β€” Nonessential elements visibly compete with the stated task. Minimalism is not an aesthetic preference or a demand to remove useful information. *[Nielsen #8]* - **U05 πŸ–Ό Affordances and signifiers** β€” Interactive elements look actionable and their likely action is understandable. *[Norman: affordances and signifiers]* - **U06 πŸ–Ό Mapping** β€” Control placement and labels make their affected object or outcome clear. *[Norman: mapping]* ### Designer-facing lenses - **U07 πŸ–Ό Choice complexity** β€” Simultaneous choices create evidenced decision friction; count is contextual and grouping can reduce complexity. *[Hick's Law]* - **U08 πŸ–Ό/β–Ά Target acquisition** β€” Target size and placement appear usable for the stated platform. Exact Fitts analysis requires target dimensions, a task, and a starting point; a screenshot supports only a concern. *[Fitts's Law]* - **U09 πŸ–Ό Cognitive load and chunking** β€” Dense information lacks meaningful grouping or external memory support. Do not use β€œ7Β±2” as a maximum number of UI items. *[Miller; cognitive load]* - **U10 πŸ–Ό Convention fit** β€” A nonstandard pattern creates a learning cost without a visible benefit. *[Jakob's Law]* ### Runtime or flow evidence required - **U11 β–Ά/πŸ”€ System status and feedback** β€” Actions expose progress, completion, and current state. *[Nielsen #1; Norman: feedback]* - **U12 β–Ά/πŸ”€ User control and reversibility** β€” Users can leave, cancel, undo, or safely recover where the supplied task requires it. *[Nielsen #3]* - **U13 β–Ά/πŸ”€ Error prevention and recovery** β€” Constraints prevent likely errors and recovery explains the next step. *[Nielsen #5 and #9]* - **U19 β–Ά/πŸ”€ Destructive actions & data loss** β€” An action that destroys or loses something asks first, or can be taken back. Look for: delete / remove / revoke / cancel-subscription with **no confirmation and no undo**; a confirmation that doesn't say *what* will be lost or that it is permanent; **entered data lost** on back, refresh, timeout, or navigating away mid-form; bulk actions that hit more than the selection implies; the destructive button styled and placed exactly like the safe one beside it. Rate this by what is lost and whether it can be recovered β€” an unconfirmed permanent delete is the textbook **Catastrophe (4)**, not a Minor. If the flow wasn't supplied, do not assume the confirmation is missing β€” say you couldn't see it. *[Nielsen #5 error prevention; Nielsen #3 user control; NN/g destructive-action guidance]* - **U20 πŸ–Ό/β–Ά Help & documentation at the point of confusion** β€” When something is genuinely hard to understand, help is reachable *where the difficulty is*, not only in a separate manual: inline hints on unfamiliar fields, a "what's this?" next to a consequential choice, an example of the expected format, searchable docs one click away. Nielsen's tenth heuristic β€” and the one most often skipped. Judge it only where confusion is plausible for the stated user; a self-evident screen needs no help and cluttering it would be worse. *[Nielsen #10 help and documentation]* - **U14 πŸ”€ Ending quality** β€” The supplied flow's consequential moments and ending provide clear closure appropriate to the task. *[Peak-end rule; Shneiderman: closure]* - **U15 β–Ά/πŸ”€ Flexibility and efficiency** β€” Repeated expert tasks have appropriate accelerators without obscuring the default path. *[Nielsen #7]* ### State quality (only when the state is shown) - **U16 πŸ–Ό Empty / first-run state quality** β€” When a blank, empty, or first-run state is shown, it orients the user (what this is), previews the value or output, offers a low-effort way to start (a sample/demo or a clear primary action), and uses the space purposefully β€” rather than a mostly-empty "nothing here yet" screen. A first-run screen is a prime onboarding moment. *[NN/g empty states; "blank slate" onboarding; Aesthetic-Usability]* Critique error, loading, and success/"all-clear" states' quality here too when they are shown (helpful, recoverable, clear feedback that uses the space well). Never report the absence of states that were not supplied. **Judge what the state is FOR, not how its disabled parts look.** On a first-run or empty screen the primary action is often disabled and therefore muted, fields are blank, and counts read zero. That is the state working correctly β€” it is not a hierarchy, contrast, or affordance defect. Critique whether the state orients and starts the user (above); do not file findings about the visual weight of controls that are simply switched off. If you need to judge the active styling, say you'd need the filled/enabled state. ### Across a state change (needs two states of the same view) A state pair is the **same view before and after an action** β€” empty vs filled, collapsed vs expanded, idle vs loading. This is a different axis from a flow (πŸ”€), which compares *different* screens in a journey. Never guess at these from a single frame. - **U17 ⇄/β–Ά State-change continuity** β€” When a view changes state, things that exist in both states stay put. Elements that persist keep their position, size, and alignment; what changed should read as one local change, not a new page. Flag when the whole layout re-flows, the primary action moves or changes alignment, or persistent framing (heading, explanation, divider) silently disappears β€” because the user then can't tell what their action actually did, and a control they had already aimed at is no longer under the cursor. Judge by **how far persistent elements move**, whether the **primary action** is one of them, and whether the real change is **buried** by everything else moving. Legitimate exceptions: a deliberate full-view change (navigating somewhere new), or a first-runβ†’working transition that is announced and animated. Note: "layout shift" (CLS) is useful vocabulary, but a shift right after user input is **excluded** from the CLS metric β€” so report this as a usability problem, never as a Core Web Vitals failure. *[Change blindness (Rensink, O'Regan & Clark); Norman: gulf of evaluation; Gestalt: common fate, continuity; Fitts's Law β€” moving target; Nielsen #4]* - **U18 ⇄/β–Ά Motion, transition & response timing** β€” Motion explains the change instead of decorating it: the transition connects what became what, its length suits the distance and importance, and it never delays the user's next action. Timing: feedback within ~0.1s reads as instant, keeping a step under ~1s preserves flow, and anything past ~1s needs visible progress (with the ~0.4s Doherty threshold as the target for interactive work). **Accessibility is assertive here:** non-essential motion must honour `prefers-reduced-motion`, and anything moving, blinking, or auto-playing for more than 5 seconds needs a way to pause, stop, or hide it. Requires runtime, a recording, or at minimum a state pair β€” **never infer motion or speed from a static screenshot**; say you couldn't see it instead. *[WCAG 2.2 SC 2.3.3 Animation from Interactions; SC 2.2.2 Pause, Stop, Hide; Doherty threshold; Nielsen response-time limits (0.1s / 1s / 10s); Material: container transform]* --- ## 3. Accessibility β€” evidence-bounded checks - **A01 πŸ–Ό/🧩 Text contrast** β€” From an image, report only a likely contrast concern. With declared colors or computed styles, calculate WCAG 2.2 contrast for SC 1.4.3. APCA may be reported as a separate supplemental computation; it is not a visual estimate and not the WCAG 2.2 AA test. *[WCAG 2.2 SC 1.4.3; APCA supplemental]* - **A02 πŸ–Ό/🧩 Non-text contrast** β€” Evaluate essential control boundaries, states, and graphics; exact conformance requires colors/computed styles. *[WCAG 2.2 SC 1.4.11]* - **A03 πŸ–Ό Text legibility** β€” Flag evidenced difficulty caused by size, weight, typeface, or rendering. WCAG does not define a universal 16px minimum. *[Inclusive typography practice]* - **A04 β–Ά Resize and reflow** β€” Test text resizing and responsive reflow at runtime; do not infer conformance from source or one screenshot. *[WCAG 2.2 SC 1.4.4 and 1.4.10]* - **A05 πŸ–Ό/β–Ά Target size** β€” A screenshot can show a likely concern only when viewport/scale is known. Runtime measurement can test WCAG 2.2 SC 2.5.8's 24Γ—24 CSS-pixel minimum and its exceptions. Apple 44Γ—44 **points** is separate platform guidance, not a WCAG AA requirement. *[WCAG 2.2 SC 2.5.8; Apple HIG where applicable]* - **A06 πŸ–Ό Color as the only cue** β€” Status, selection, required fields, or links rely on color without another visible cue. *[WCAG 2.2 SC 1.4.1]* - **A07 πŸ–Ό Color-vision robustness** β€” Use an actual deutan/protan/tritan simulation when available. Without simulation or source colors, report only a concern about confusable color pairs. *[Inclusive color practice]* - **A08 β–Ά Focus visibility** β€” Exercise keyboard focus at runtime and inspect indicator visibility; HTML source alone cannot pass this check. *[WCAG 2.2 SC 2.4.7 and 2.4.11]* - **A09 β–Ά Keyboard operation and focus order** β€” Exercise controls and navigation at runtime. *[WCAG 2.2 SC 2.1.1 and 2.4.3]* - **A10 🧩 Accessible name, role, value, and alternatives** β€” Inspect the rendered accessibility tree/DOM, not appearance alone. *[WCAG 2.2 SC 4.1.2 and 1.1.1; ARIA APG]* Accessibility findings describe evidenced barriers. The report is not an accessibility audit or certification unless the required technical and manual testing has actually been completed. --- ## 4. Content & language - **C01 πŸ–Ό Label clarity** β€” Buttons, links, fields, and headings communicate their purpose in the task context. *[Content Design: clear]* - **C02 πŸ–Ό Plain language** β€” Unexplained jargon or internal terminology creates a comprehension barrier for the stated users. *[Content Design; plain-language guidance]* - **C03 πŸ–Ό Terminology consistency** β€” The same concept is named consistently within the supplied artifact or flow. *[Content Design: consistent; Nielsen #4]* - **C04 πŸ–Ό Scannability** β€” Paragraph content or instruction blocks lack structure needed for the stated task. Do not demand headings for short, already-scannable copy. *[Content Design]* - **C05 πŸ–Ό/πŸ”€ Recovery copy** β€” When an error is supplied, it explains what happened and the next useful action without blame. *[Content Design: useful; Nielsen #9]* - **C06 🧩 Readability computation** β€” Use Flesch or similar only for enough sentence-based prose to make the result meaningful; never apply it to labels, fragments, or as the sole basis for severity. *[Readability analysis]* Do not report subjective tone preferences, generic β€œmake it shorter” advice, or copyediting that does not improve comprehension, trust, or task success. --- ## Mode B β€” Conformance with supplied references Evaluate literal assertions from supplied tokens, design systems, specifications, and project conventions: - **Token compliance (L1)** β€” color, spacing, typography, and shape values - **Component correctness (L1)** β€” component, variant, state, prop, and composition usage - **Layout correctness (L2)** β€” required elements and spatial relationships - **Convention adherence (L1/L2)** β€” documented project-specific patterns - **Flows (L2)** β€” supplied steps, branches, and outcomes - **Other assertions** β€” motion, visualization, density, and responsive behavior Use `conforms`, `deviates`, or `not verifiable` and quote the exact reference assertion. These results are separate from Mode A severity scoring unless a deviation also creates an independently evidenced usability issue.