Chris-Maskey/cognitive-load

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

• Cognitive Load Theory - John Sweller
• Don't Make Me Think - Steve Krug
• Laws of UX
• Nielsen Norman Group - Cognitive Load