cognitive-load
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseCognitive Load - Designing for Human Memory
Cognitive Load - 基于人类记忆的设计
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.
由John Sweller提出的Cognitive Load Theory（CLT）为设计契合人类工作记忆局限的体验提供了框架。理解三种认知负荷类型有助于打造轻松直观的界面。
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.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 │ │ │
└─────────────────┴─────────────────┴─────────────────────────────┘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
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
定义： 任务本身固有的难度。
| 特征 | 示例 |
|---|---|
| 由任务复杂度决定 | 报税 vs. 发送邮件 |
| 因用户专业度而异 | 专家觉得简单，新手感到吃力 |
| 无法消除 | 只能通过设计进行管理 |
设计策略：
- 将复杂任务拆分为更小步骤
- 采用渐进式披露
- 依托现有心智模型
- 为不同专业度用户提供不同路径
2. Extraneous Load
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 hierarchyDesign strategies:
- Eliminate decorative elements without purpose
- Use consistent design patterns
- Apply strong visual hierarchy
- Remove redundant information
定义： 不良设计带来的不必要心智消耗。
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设计策略：
- 移除无意义的装饰元素
- 使用统一的设计模式
- 构建清晰的视觉层级
- 删除冗余信息
3. Germane Load
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
步骤1：任务映射
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]
└── CompletionTask 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]
└── CompletionStep 2: Identify Load Sources
步骤2：识别负荷来源
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] |
针对每个步骤，对认知需求进行分类：
| 步骤 | 内在负荷 | 外在负荷 | 关联负荷 |
|---|---|---|---|
| 1 | [任务复杂度] | [设计问题] | [学习价值] |
| 2 | [任务复杂度] | [设计问题] | [学习价值] |
| 3 | [任务复杂度] | [设计问题] | [学习价值] |
Step 3: Design Interventions
步骤3：设计干预方案
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 knowledgeIntervention 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 knowledgeOutput Template
输出模板
After completing analysis, document as:
markdown
undefined完成分析后，按以下格式记录：
markdown
undefinedCognitive Load Analysis
Cognitive Load Analysis
Feature/Flow: [Name]
Date: [Date]
Feature/Flow: [Name]
Date: [Date]
Task Map
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 |
| 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
Load Issues Identified
Intrinsic Load Problems
Intrinsic Load Problems
Extraneous Load Problems
Extraneous Load Problems
Recommendations
Recommendations
| Priority | Change | Expected Impact |
|---|---|---|
| High | [Specific change] | [Reduces X load by Y] |
| Medium | [Specific change] | [Reduces X load by Y] |
| Priority | Change | Expected Impact |
|---|---|---|
| High | [Specific change] | [Reduces X load by Y] |
| Medium | [Specific change] | [Reduces X load by Y] |
Success Metrics
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 |
undefined| Metric | Current | Target |
|---|---|---|
| Task completion rate | X% | Y% |
| Time to complete | X min | Y min |
| Error rate | X% | Y% |
| User satisfaction | X | Y |
undefinedReal-World Examples
真实案例
Google Search
Google搜索
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 competitorsLoad 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 competitorsSlack Progressive Disclosure
Slack渐进式披露
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).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
Apple iOS一致性设计
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.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 |
| 策略 | 实现方式 |
|---|---|
| 任务拆分 | 每屏最多3-5个步骤 |
| 心智模型对齐 | 使用熟悉的隐喻 |
| 智能默认 | 预选择常用选项 |
| 上下文帮助 | 按需展示信息 |
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? |
| 方法 | 结合用途 |
|---|---|
| Cognitive Fluency | 流畅性是降低外在负荷的一种方式 |
| Hick's Law | 选项越少，负荷越低 |
| Progressive Disclosure | 随时间管理内在负荷 |
| Graph Thinking | 映射系统内的负荷关系 |
| Five Whys | 探究用户为何受挫/放弃？ |
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 timeCOGNITIVE 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