Loading source
Pulling the file list, source metadata, and syntax-aware rendering for this listing.
Source from repo
One-time setup that gathers your project's design context and saves it to CLAUDE.md for future sessions.
Files
Skill
Size
Entrypoint
Format
Open file
Syntax-highlighted preview of this file as included in the skill package.
reference/cognitive-load.md
1# Cognitive Load Assessment23Cognitive 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.45---67## Three Types of Cognitive Load89### Intrinsic Load: The Task Itself10Complexity inherent to what the user is trying to do. You can't eliminate this, but you can structure it.1112**Manage it by**:13- Breaking complex tasks into discrete steps14- Providing scaffolding (templates, defaults, examples)15- Progressive disclosure: show what's needed now, hide the rest16- Grouping related decisions together1718### Extraneous Load: Bad Design19Mental effort caused by poor design choices. **Eliminate this ruthlessly.** It's pure waste.2021**Common sources**:22- Confusing navigation that requires mental mapping23- Unclear labels that force users to guess meaning24- Visual clutter competing for attention25- Inconsistent patterns that prevent learning26- Unnecessary steps between user intent and result2728### Germane Load: Learning Effort29Mental effort spent building understanding. This is *good* cognitive load; it leads to mastery.3031**Support it by**:32- Progressive disclosure that reveals complexity gradually33- Consistent patterns that reward learning34- Feedback that confirms correct understanding35- Onboarding that teaches through action, not walls of text3637---3839## Cognitive Load Checklist4041Evaluate the interface against these 8 items:4243- [ ] **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?5152**Scoring**: Count the failed items. 0–1 failures = low cognitive load (good). 2–3 = moderate (address soon). 4+ = high cognitive load (critical fix needed).5354---5556## The Working Memory Rule5758**Humans can hold ≤4 items in working memory at once** (Miller's Law revised by Cowan, 2001).5960At 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, manageable62- **5–7 items**: Pushing the boundary; consider grouping or progressive disclosure63- **8+ items**: Overloaded; users will skip, misclick, or abandon6465**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 break68- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu69- Dashboard widgets: ≤4 key metrics visible without scrolling70- Pricing tiers: ≤3 options (more causes analysis paralysis)7172---7374## Common Cognitive Load Violations7576### 1. The Wall of Options77**Problem**: Presenting 10+ choices at once with no hierarchy.78**Fix**: Group into categories, highlight recommended, use progressive disclosure.7980### 2. The Memory Bridge81**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.8384### 3. The Hidden Navigation85**Problem**: User must build a mental map of where things are.86**Fix**: Always show current location (breadcrumbs, active states, progress indicators).8788### 4. The Jargon Barrier89**Problem**: Technical or domain language forces translation effort.90**Fix**: Use plain language. If domain terms are unavoidable, define them inline.9192### 5. The Visual Noise Floor93**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.9596### 6. The Inconsistent Pattern97**Problem**: Similar actions work differently in different places.98**Fix**: Standardize interaction patterns. Same type of action = same type of UI.99100### 7. The Multi-Task Demand101**Problem**: Interface requires processing multiple simultaneous inputs (reading + deciding + navigating).102**Fix**: Sequence the steps. Let the user do one thing at a time.103104### 8. The Context Switch105**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.107