| name | cognitive-load |
| description | Design experiences that optimize mental resources using Cognitive Load Theory. Use when designing interfaces, creating onboarding flows, planning information architecture, or improving task completion rates. |
Cognitive Load - Designing for Human Memory
Cognitive Load Theory (CLT), developed by John Sweller, provides a framework for
designing experiences that work with human working memory limitations.
Understanding the three types of cognitive load helps create interfaces that
feel effortless and intuitive.
When to Use This Skill
- Designing complex forms or workflows
- Creating onboarding experiences
- Simplifying feature-rich interfaces
- Improving task completion rates
- Planning information architecture
- Reviewing designs for usability
Working Memory Limitations
Human Processing Capacity:
┌─────────────────────────────────────────────────────┐
│ WORKING MEMORY │
│ │
│ Capacity: 7 ± 2 items simultaneously │
│ Duration: ~20 seconds without rehearsal │
│ Processing: Serial, not parallel │
│ │
│ When exceeded → Errors, frustration, abandonment │
└─────────────────────────────────────────────────────┘
Design goal: Stay WITHIN capacity limits.
Three Types of Cognitive Load
Total Cognitive Load = Intrinsic + Extraneous + Germane
┌─────────────────────────────────────────────────────────────────┐
│ WORKING MEMORY CAPACITY │
├─────────────────┬─────────────────┬─────────────────────────────┤
│ INTRINSIC │ EXTRANEOUS │ GERMANE │
│ │ │ │
│ Task │ Bad design │ Learning & │
│ complexity │ noise │ schema building │
│ │ │ │
│ Can't reduce │ ELIMINATE │ MAXIMIZE │
│ without │ THIS │ THIS │
│ changing task │ │ │
└─────────────────┴─────────────────┴─────────────────────────────┘
1. Intrinsic Load
What it is: The inherent difficulty of the task itself.
| Characteristic | Example |
|---|
| Determined by task complexity | Filing taxes vs. sending email |
| Varies by user expertise | Expert finds it easy, novice struggles |
| Cannot be eliminated | Only managed through design |
Design strategies:
- Break complex tasks into smaller steps
- Provide progressive disclosure
- Build on existing mental models
- Offer different paths for different expertise levels
2. Extraneous Load
What it is: Unnecessary mental effort from poor design.
Common Sources of Extraneous Load:
Visual:
├── Cluttered layouts
├── Poor typography
├── Inconsistent patterns
└── Distracting animations
Interaction:
├── Unclear navigation
├── Unexpected behaviors
├── Too many options
└── Hidden functionality
Content:
├── Jargon and complexity
├── Redundant information
├── Missing context
└── Poor information hierarchy
Design strategies:
- Eliminate decorative elements without purpose
- Use consistent design patterns
- Apply strong visual hierarchy
- Remove redundant information
3. Germane Load
What it is: Productive mental effort that builds understanding.
| Benefit | Example |
|---|
| Builds mental models | User learns system behavior |
| Enables efficiency | Experienced user works faster |
| Creates transferable knowledge | Skills apply to similar tasks |
Design strategies:
- Provide clear feedback on actions
- Create learnable, consistent patterns
- Design onboarding that builds foundations
- Use progressive enhancement for power features
Load Analysis Framework
Step 1: Map the Task
Task Decomposition:
[Main Task]
├── Step 1: [Action] → Load type: [I/E/G]
│ └── Decisions required: [count]
├── Step 2: [Action] → Load type: [I/E/G]
│ └── Decisions required: [count]
├── Step 3: [Action] → Load type: [I/E/G]
│ └── Decisions required: [count]
└── Completion
Step 2: Identify Load Sources
For each step, categorize the cognitive demands:
| Step | Intrinsic Load | Extraneous Load | Germane Load |
|---|
| 1 | [Task complexity] | [Design issues] | [Learning value] |
| 2 | [Task complexity] | [Design issues] | [Learning value] |
| 3 | [Task complexity] | [Design issues] | [Learning value] |
Step 3: Design Interventions
Intervention Strategy:
High Intrinsic Load?
├── YES → Break into smaller steps
├── YES → Add progressive disclosure
├── YES → Provide scaffolding/help
└── YES → Offer simplified path
High Extraneous Load?
├── YES → Remove unnecessary elements
├── YES → Improve visual hierarchy
├── YES → Simplify navigation
└── YES → Fix inconsistent patterns
Low Germane Load?
├── YES → Add meaningful feedback
├── YES → Create learnable patterns
├── YES → Design for skill building
└── YES → Connect to existing knowledge
Output Template
After completing analysis, document as:
## Cognitive Load Analysis
**Feature/Flow:** [Name]
**Date:** [Date]
### Task Map
| Step | Description | Intrinsic | Extraneous | Germane |
| ---- | ----------- | ------------ | ------------ | ------------ |
| 1 | [Step] | High/Med/Low | High/Med/Low | High/Med/Low |
| 2 | [Step] | High/Med/Low | High/Med/Low | High/Med/Low |
### Load Issues Identified
#### Intrinsic Load Problems
- [Issue]: [Location]
- [Issue]: [Location]
#### Extraneous Load Problems
- [Issue]: [Location]
- [Issue]: [Location]
### Recommendations
| Priority | Change | Expected Impact |
| -------- | ----------------- | --------------------- |
| High | [Specific change] | [Reduces X load by Y] |
| Medium | [Specific change] | [Reduces X load by Y] |
### Success Metrics
| Metric | Current | Target |
| -------------------- | ------- | ------ |
| Task completion rate | X% | Y% |
| Time to complete | X min | Y min |
| Error rate | X% | Y% |
| User satisfaction | X | Y |
Real-World Examples
Google Search
Load Optimization:
Intrinsic: Minimal - just type what you want
Extraneous: Near zero - white space + search box
Germane: Focus on learning query refinement
Result: 2-3x faster searches than competitors
Slack Progressive Disclosure
New User Experience:
├── Basic: Messaging interface only
├── Intermediate: Threading, channels
├── Advanced: Integrations, workflows
└── Enterprise: Admin controls
Each level builds on previous knowledge (germane load)
without overwhelming new users (extraneous load).
Apple iOS Consistency
System-wide Patterns:
Gestures:
├── Swipe from left = back (everywhere)
├── Pull down = refresh (everywhere)
├── Long press = more options (everywhere)
└── Pinch = zoom (everywhere)
Consistency eliminates extraneous load.
Users learn once, apply everywhere.
Design Strategies by Load Type
Reducing Intrinsic Load
| Strategy | Implementation |
|---|
| Task chunking | Max 3-5 items per screen |
| Mental model alignment | Use familiar metaphors |
| Smart defaults | Pre-select common choices |
| Contextual help | Show info when needed |
Eliminating Extraneous Load
| Strategy | Implementation |
|---|
| Visual hierarchy | Size, color, position guide attention |
| Consistent patterns | Same action = same interaction |
| Content prioritization | Most important info first |
| Distraction removal | No unnecessary animations/elements |
Optimizing Germane Load
| Strategy | Implementation |
|---|
| Clear feedback | Show results of every action |
| Pattern consistency | Create learnable behaviors |
| Progressive enhancement | Reveal features as expertise grows |
| Knowledge transfer | Design transferable skills |
Measurement Approaches
Quantitative
- Task completion time
- Error rate and recovery time
- Number of help requests
- Tab/window switches during task
- Abandonment points
Qualitative
- Think-aloud testing (confusion points)
- Cognitive walkthroughs (step-by-step effort)
- Post-task interviews (perceived difficulty)
- Eye tracking (scanning patterns)
Integration with Other Methods
| Method | Combined Use |
|---|
| Cognitive Fluency | Fluency is one way to reduce extraneous load |
| Hick's Law | Fewer choices = lower load |
| Progressive Disclosure | Manage intrinsic load over time |
| Graph Thinking | Map load relationships across system |
| Five Whys | Why are users struggling/abandoning? |
Quick Reference
COGNITIVE LOAD CHECKLIST
Intrinsic Load Management:
□ Tasks broken into 3-5 step chunks
□ Progressive disclosure for complexity
□ Different paths for different expertise
□ Builds on familiar concepts
Extraneous Load Elimination:
□ Clear visual hierarchy
□ Consistent interaction patterns
□ No unnecessary decorative elements
□ Logical information architecture
Germane Load Optimization:
□ Clear feedback on all actions
□ Patterns that transfer across features
□ Onboarding builds mental models
□ Advanced features reward learning
Testing:
□ Task completion measured
□ Error rates tracked
□ User confusion points identified
□ Learning curve improving over time
Resources
