Skip to content

Cognitive Load Visualizer MicroSim

Run the Cognitive Load MicroSim Full Screen
Edit on P5.js

Overview

Cognitive Load Theory explains how our working memory has limited capacity and how different types of mental effort affect learning. This interactive MicroSim helps you explore the three types of cognitive load and understand how instructional design choices impact learning effectiveness.

Learning Objectives

After using this MicroSim, you will be able to:

  • Identify the three types of cognitive load (intrinsic, extraneous, and germane)
  • Explain how each type of load affects learning
  • Recognize when total cognitive load exceeds working memory capacity
  • Apply cognitive load principles to improve instructional design
  • Evaluate design choices based on their cognitive load impact

The Three Types of Cognitive Load

Intrinsic Load (Yellow)

The inherent difficulty of the content being learned. This depends on:

  • Complexity of the material
  • Number of interconnected elements
  • Learner's prior knowledge

Example: Learning calculus has higher intrinsic load than basic arithmetic.

Designer Control: Limited - but can be managed through prerequisites and chunking

Extraneous Load (Red)

Mental effort wasted on poor instructional design. Caused by:

  • Cluttered layouts
  • Confusing navigation
  • Irrelevant information
  • Split attention between sources

Example: A diagram with labels far from the elements they describe.

Designer Control: High - this is what good instructional design minimizes!

Germane Load (Green)

Mental effort devoted to learning processes. Includes:

  • Schema construction
  • Making connections
  • Deep processing
  • Meaningful practice

Example: Comparing and contrasting two concepts to build understanding.

Designer Control: High - good design maximizes this productive load

Interactive Features

Three Load Sliders: Adjust the amount of each type of cognitive load independently

Working Memory Visualization: Watch the "brain" fill up as total load increases

Load Bars: See the relative contributions of each load type

Real-time Feedback: Get immediate guidance on whether the current load is optimal

Example Buttons: - Good Design Example - Shows optimal balance with low extraneous load - Bad Design Example - Shows cognitive overload with high extraneous load

Visual Indicators: - Blue fill = Manageable load - Orange fill = Near capacity - Red fill = Cognitive overload!

How to Use

Exploration Mode

  1. Start by adjusting each slider independently
  2. Notice how the working memory visualization changes
  3. Watch for the feedback messages at different total loads
  4. Try to create a balanced load profile

Compare Examples

  1. Click "Good Design Example" to see an optimal configuration
  2. Low extraneous load (clean design)
  3. Moderate intrinsic load (appropriate difficulty)

  4. Good germane load (supports learning)

  5. Click "Bad Design Example" to see cognitive overload

  6. High extraneous load (poor design)
  7. High intrinsic load (too complex)
  8. Low germane load (doesn't support learning)
  9. Total exceeds 100% capacity!

Design Practice

  1. Think of a learning material you're designing
  2. Estimate its intrinsic load (content difficulty)
  3. Assess potential extraneous load (design quality)
  4. Plan for germane load (learning support)
  5. Ensure total stays under 100%

Understanding the Visualization

Working Memory Capacity

The "brain" represents working memory with a 100% capacity limit. When total load exceeds this:

  • Learning effectiveness drops dramatically
  • Information may not be processed
  • Learners become frustrated and overwhelmed

The Goal

Effective instructional design aims to:

  1. Minimize extraneous load - Remove unnecessary complexity
  2. Manage intrinsic load - Chunk content appropriately
  3. Optimize germane load - Support meaningful learning
  4. Keep total under capacity - Enable successful processing

MicroSim

Key Principles

1. Extraneous Load is the Designer's Responsibility

Poor design choices directly waste limited cognitive resources:

  • Unclear instructions
  • Decorative but irrelevant graphics
  • Small fonts requiring extra effort to read
  • Split attention between multiple sources

Action: Ruthlessly eliminate extraneous load through clean, focused design.

2. Intrinsic Load Can Be Managed

While you can't change content difficulty, you can:

  • Ensure prerequisites are met
  • Break complex topics into smaller chunks
  • Use worked examples to reduce initial load
  • Build from simple to complex

Action: Structure content to match learner capacity.

3. Germane Load is Productive

Not all cognitive load is bad! Germane load includes:

  • Actively processing new information
  • Connecting to prior knowledge
  • Practicing retrieval
  • Building mental models

Action: Design activities that promote deep processing.

Discussion Questions

  1. Analysis: Think of a textbook or course you found confusing. What type of cognitive load was the main problem?

  2. Application: How would you redesign a cluttered slide presentation to reduce extraneous load?

  3. Evaluation: A student says "This is too hard!" Are they experiencing high intrinsic load or high extraneous load? How can you tell?

  4. Synthesis: Design a learning activity that minimizes extraneous load while maximizing germane load.

  5. Transfer: How do MicroSims themselves help manage cognitive load compared to static text?

Practical Applications

For Textbook Design

  • Use consistent layouts (reduce extraneous load)
  • Integrate text with diagrams (avoid split attention)
  • Provide worked examples (manage intrinsic load)
  • Include practice problems (increase germane load)

For MicroSim Creation

  • Keep interfaces simple and intuitive
  • Focus on one concept at a time
  • Provide clear instructions
  • Enable immediate feedback

For Multimedia Learning

  • Avoid redundant text and narration
  • Place labels near diagram elements
  • Remove decorative elements
  • Provide meaningful interactivity

Common Design Mistakes

❌ Overload: Trying to teach too much at once (high intrinsic load)

❌ Clutter: Unnecessary decorations and information (high extraneous load)

❌ Passive: No opportunities for active processing (low germane load)

❌ Complexity: Confusing navigation or instructions (high extraneous load)

✓ Instead: Simple, focused, interactive, and supportive design

Reflection

Consider your own experiences as a learner:

  • When have you felt cognitively overwhelmed?
  • What design choices contributed to the overload?
  • How could better design have helped?
  • What strategies do you use when facing high cognitive load?
  • Multimedia Learning Principles - Applying cognitive load theory to media
  • Chunking Strategies - Breaking content into manageable pieces
  • Scaffolding - Providing support to manage load
  • Working Memory - Understanding the underlying capacity limits

References

  • Sweller, J., Ayres, P., & Kalyuga, S. (2011). Cognitive Load Theory. Springer.
  • Mayer, R. E. (2021). Multimedia Learning (3rd ed.). Cambridge University Press.
  • van Merriënboer, J. J. G., & Sweller, J. (2005). Cognitive load theory and complex learning. Educational Psychology Review, 17(2), 147-177.

Try This Challenge

Can you create a configuration where:

  1. Total load is exactly at 100% capacity?
  2. Germane load is the highest component?
  3. Extraneous load is zero?
  4. All three loads are equal?

Use the sliders to experiment and discover how different configurations feel!

Credits

This MicroSim was created to support the Intelligent Textbooks project and demonstrate cognitive load theory interactively. The visualization helps make abstract cognitive science concepts concrete and explorable.