cognitive-load.md

  1# Cognitive Load Assessment
  2
  3Cognitive 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.
  4
  5---
  6
  7## Three Types of Cognitive Load
  8
  9### Intrinsic Load — The Task Itself
 10Complexity inherent to what the user is trying to do. You can't eliminate this, but you can structure it.
 11
 12**Manage it by**:
 13- Breaking complex tasks into discrete steps
 14- Providing scaffolding (templates, defaults, examples)
 15- Progressive disclosure — show what's needed now, hide the rest
 16- Grouping related decisions together
 17
 18### Extraneous Load — Bad Design
 19Mental effort caused by poor design choices. **Eliminate this ruthlessly** — it's pure waste.
 20
 21**Common sources**:
 22- Confusing navigation that requires mental mapping
 23- Unclear labels that force users to guess meaning
 24- Visual clutter competing for attention
 25- Inconsistent patterns that prevent learning
 26- Unnecessary steps between user intent and result
 27
 28### Germane Load — Learning Effort
 29Mental effort spent building understanding. This is *good* cognitive load — it leads to mastery.
 30
 31**Support it by**:
 32- Progressive disclosure that reveals complexity gradually
 33- Consistent patterns that reward learning
 34- Feedback that confirms correct understanding
 35- Onboarding that teaches through action, not walls of text
 36
 37---
 38
 39## Cognitive Load Checklist
 40
 41Evaluate the interface against these 8 items:
 42
 43- [ ] **Single focus**: Can the user complete their primary task without distraction from competing elements?
 44- [ ] **Chunking**: Is information presented in digestible groups (≤4 items per group)?
 45- [ ] **Grouping**: Are related items visually grouped together (proximity, borders, shared background)?
 46- [ ] **Visual hierarchy**: Is it immediately clear what's most important on the screen?
 47- [ ] **One thing at a time**: Can the user focus on a single decision before moving to the next?
 48- [ ] **Minimal choices**: Are decisions simplified (≤4 visible options at any decision point)?
 49- [ ] **Working memory**: Does the user need to remember information from a previous screen to act on the current one?
 50- [ ] **Progressive disclosure**: Is complexity revealed only when the user needs it?
 51
 52**Scoring**: Count the failed items. 0–1 failures = low cognitive load (good). 2–3 = moderate (address soon). 4+ = high cognitive load (critical fix needed).
 53
 54---
 55
 56## The Working Memory Rule
 57
 58**Humans can hold ≤4 items in working memory at once** (Miller's Law revised by Cowan, 2001).
 59
 60At any decision point, count the number of distinct options, actions, or pieces of information a user must simultaneously consider:
 61- **≤4 items**: Within working memory limits — manageable
 62- **5–7 items**: Pushing the boundary — consider grouping or progressive disclosure
 63- **8+ items**: Overloaded — users will skip, misclick, or abandon
 64
 65**Practical applications**:
 66- Navigation menus: ≤5 top-level items (group the rest under clear categories)
 67- Form sections: ≤4 fields visible per group before a visual break
 68- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
 69- Dashboard widgets: ≤4 key metrics visible without scrolling
 70- Pricing tiers: ≤3 options (more causes analysis paralysis)
 71
 72---
 73
 74## Common Cognitive Load Violations
 75
 76### 1. The Wall of Options
 77**Problem**: Presenting 10+ choices at once with no hierarchy.
 78**Fix**: Group into categories, highlight recommended, use progressive disclosure.
 79
 80### 2. The Memory Bridge
 81**Problem**: User must remember info from step 1 to complete step 3.
 82**Fix**: Keep relevant context visible, or repeat it where it's needed.
 83
 84### 3. The Hidden Navigation
 85**Problem**: User must build a mental map of where things are.
 86**Fix**: Always show current location (breadcrumbs, active states, progress indicators).
 87
 88### 4. The Jargon Barrier
 89**Problem**: Technical or domain language forces translation effort.
 90**Fix**: Use plain language. If domain terms are unavoidable, define them inline.
 91
 92### 5. The Visual Noise Floor
 93**Problem**: Every element has the same visual weight — nothing stands out.
 94**Fix**: Establish clear hierarchy: one primary element, 2–3 secondary, everything else muted.
 95
 96### 6. The Inconsistent Pattern
 97**Problem**: Similar actions work differently in different places.
 98**Fix**: Standardize interaction patterns. Same type of action = same type of UI.
 99
100### 7. The Multi-Task Demand
101**Problem**: Interface requires processing multiple simultaneous inputs (reading + deciding + navigating).
102**Fix**: Sequence the steps. Let the user do one thing at a time.
103
104### 8. The Context Switch
105**Problem**: User must jump between screens/tabs/modals to gather info for a single decision.
106**Fix**: Co-locate the information needed for each decision. Reduce back-and-forth.