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.
Design interfaces that respect human working memory limits by analyzing and optimizing intrinsic, extraneous, and germane cognitive load. Use when designing complex forms, onboarding flows, or information architecture to reduce errors and abandonment.
/plugin marketplace add flpbalada/thinking-toolkit/plugin install cognitive-load@thinking-toolkitThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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.
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.
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 │ │ │
└─────────────────┴─────────────────┴─────────────────────────────┘
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:
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:
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:
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
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] |
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
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 |
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
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).
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.
| 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 |
| 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 |
| 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 |
| 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? |
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
This skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.