cognitive-load

• Designing complex forms or workflows
• Creating onboarding experiences
• Simplifying feature-rich interfaces
• Improving task completion rates
• Planning information architecture
• Reviewing designs for usability

```

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

└─────────────────┴─────────────────┴─────────────────────────────┘

```

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

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

```

After completing analysis, document as:

```markdown

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 |

```

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.

```

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 |

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)

| 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

```

• [Cognitive Load Theory - John Sweller](https://www.instructionaldesign.org/theories/cognitive-load/)
• [Don't Make Me Think - Steve Krug](https://sensible.com/dont-make-me-think/)
• [Laws of UX](https://lawsofux.com/)
• [Nielsen Norman Group - Cognitive Load](https://www.nngroup.com/articles/minimize-cognitive-load/)