Richie
cb57bc3042
Selective integration from pbakaus/impeccable (Apache 2.0): Reference material (docs/reference/impeccable/): - 7 design guides: typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing - 3 critique references: cognitive-load, heuristics-scoring, personas - 4 skill references for internal use: audit, critique, polish, frontend-design (anti-patterns list) New skills: - /audit — technical quality scoring (0-20) across 5 dimensions: accessibility, performance, theming, responsive, design quality - /critique — UX design review using Nielsen's 10 heuristics (0-40), adapted for FA's sensitive audience context Updated skills: - /review-component — added interactive states checklist and design anti-patterns checklist (8 checks each) - /preflight — added visual QA spot-check section (transitions, focus-visible, touch targets, spacing consistency) No code changes — all existing components, tokens, and theme untouched. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
107 lines
4.7 KiB
Markdown
107 lines
4.7 KiB
Markdown
# Cognitive Load Assessment
|
||
|
||
Cognitive load is the total mental effort required to use an interface. Overloaded users make mistakes, get frustrated, and leave. This reference helps identify and fix cognitive overload.
|
||
|
||
---
|
||
|
||
## Three Types of Cognitive Load
|
||
|
||
### Intrinsic Load — The Task Itself
|
||
Complexity inherent to what the user is trying to do. You can't eliminate this, but you can structure it.
|
||
|
||
**Manage it by**:
|
||
- Breaking complex tasks into discrete steps
|
||
- Providing scaffolding (templates, defaults, examples)
|
||
- Progressive disclosure — show what's needed now, hide the rest
|
||
- Grouping related decisions together
|
||
|
||
### Extraneous Load — Bad Design
|
||
Mental effort caused by poor design choices. **Eliminate this ruthlessly** — it's pure waste.
|
||
|
||
**Common sources**:
|
||
- Confusing navigation that requires mental mapping
|
||
- Unclear labels that force users to guess meaning
|
||
- Visual clutter competing for attention
|
||
- Inconsistent patterns that prevent learning
|
||
- Unnecessary steps between user intent and result
|
||
|
||
### Germane Load — Learning Effort
|
||
Mental effort spent building understanding. This is *good* cognitive load — it leads to mastery.
|
||
|
||
**Support it by**:
|
||
- Progressive disclosure that reveals complexity gradually
|
||
- Consistent patterns that reward learning
|
||
- Feedback that confirms correct understanding
|
||
- Onboarding that teaches through action, not walls of text
|
||
|
||
---
|
||
|
||
## Cognitive Load Checklist
|
||
|
||
Evaluate the interface against these 8 items:
|
||
|
||
- [ ] **Single focus**: Can the user complete their primary task without distraction from competing elements?
|
||
- [ ] **Chunking**: Is information presented in digestible groups (≤4 items per group)?
|
||
- [ ] **Grouping**: Are related items visually grouped together (proximity, borders, shared background)?
|
||
- [ ] **Visual hierarchy**: Is it immediately clear what's most important on the screen?
|
||
- [ ] **One thing at a time**: Can the user focus on a single decision before moving to the next?
|
||
- [ ] **Minimal choices**: Are decisions simplified (≤4 visible options at any decision point)?
|
||
- [ ] **Working memory**: Does the user need to remember information from a previous screen to act on the current one?
|
||
- [ ] **Progressive disclosure**: Is complexity revealed only when the user needs it?
|
||
|
||
**Scoring**: Count the failed items. 0–1 failures = low cognitive load (good). 2–3 = moderate (address soon). 4+ = high cognitive load (critical fix needed).
|
||
|
||
---
|
||
|
||
## The Working Memory Rule
|
||
|
||
**Humans can hold ≤4 items in working memory at once** (Miller's Law revised by Cowan, 2001).
|
||
|
||
At any decision point, count the number of distinct options, actions, or pieces of information a user must simultaneously consider:
|
||
- **≤4 items**: Within working memory limits — manageable
|
||
- **5–7 items**: Pushing the boundary — consider grouping or progressive disclosure
|
||
- **8+ items**: Overloaded — users will skip, misclick, or abandon
|
||
|
||
**Practical applications**:
|
||
- Navigation menus: ≤5 top-level items (group the rest under clear categories)
|
||
- Form sections: ≤4 fields visible per group before a visual break
|
||
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
|
||
- Dashboard widgets: ≤4 key metrics visible without scrolling
|
||
- Pricing tiers: ≤3 options (more causes analysis paralysis)
|
||
|
||
---
|
||
|
||
## Common Cognitive Load Violations
|
||
|
||
### 1. The Wall of Options
|
||
**Problem**: Presenting 10+ choices at once with no hierarchy.
|
||
**Fix**: Group into categories, highlight recommended, use progressive disclosure.
|
||
|
||
### 2. The Memory Bridge
|
||
**Problem**: User must remember info from step 1 to complete step 3.
|
||
**Fix**: Keep relevant context visible, or repeat it where it's needed.
|
||
|
||
### 3. The Hidden Navigation
|
||
**Problem**: User must build a mental map of where things are.
|
||
**Fix**: Always show current location (breadcrumbs, active states, progress indicators).
|
||
|
||
### 4. The Jargon Barrier
|
||
**Problem**: Technical or domain language forces translation effort.
|
||
**Fix**: Use plain language. If domain terms are unavoidable, define them inline.
|
||
|
||
### 5. The Visual Noise Floor
|
||
**Problem**: Every element has the same visual weight — nothing stands out.
|
||
**Fix**: Establish clear hierarchy: one primary element, 2–3 secondary, everything else muted.
|
||
|
||
### 6. The Inconsistent Pattern
|
||
**Problem**: Similar actions work differently in different places.
|
||
**Fix**: Standardize interaction patterns. Same type of action = same type of UI.
|
||
|
||
### 7. The Multi-Task Demand
|
||
**Problem**: Interface requires processing multiple simultaneous inputs (reading + deciding + navigating).
|
||
**Fix**: Sequence the steps. Let the user do one thing at a time.
|
||
|
||
### 8. The Context Switch
|
||
**Problem**: User must jump between screens/tabs/modals to gather info for a single decision.
|
||
**Fix**: Co-locate the information needed for each decision. Reduce back-and-forth.
|