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.

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.

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 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

Eliminating Extraneous Load

Optimizing Germane Load

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

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