Skip to content
Psychology Medium #cognitive-load#learning

Cognitive Load Theory

Intrinsic, extraneous, germane load - the three buckets that fill working memory.

A free, animated cognitive load theory you can read here or embed on any website, from Scrollchart.

Cognitive Load Theory

Cognitive Load Theory (Sweller 1988)Working memory capacity is finite: intrinsic + extraneous + germane load must not exceed itSweller 1988: reducing extraneous load by > 30% improves transfer test scores by 1.0-1.5 SD in controlled studies

Available in: Português日本語

Three-section donut: intrinsic (task complexity), extraneous (poor design), germane (learning effort). Total capped at working-memory capacity.

Good for

  • Instructional design and e-learning articles explaining why split-attention layouts reduce retention
  • UX writing and interface-design posts arguing for progressive disclosure to reduce extraneous load
  • Education psychology explainers on why worked examples outperform problem-solving for novices

Source & accuracy

This cognitive load theory is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Three types of load competing for working memory

Intrinsic load is the difficulty inherent in the task itself: learning calculus is intrinsically harder than learning vocabulary because it demands more mental juggling. Extraneous load is the friction imposed by how information is presented: a confusing diagram adds load; a clear one reduces it. Germane load is the mental effort spent on understanding and consolidating the material, which is constructive learning.

These three types all draw from the same limited working memory capacity (roughly 4-7 chunks). A high-intrinsic task leaves little room for extraneous load; if the presentation is also confusing, comprehension fails. The same material presented clearly frees capacity for germane load, supporting learning.

Practical implications for teaching and design

Effective instruction minimizes extraneous load by removing visual clutter, simplifying language, and using multimedia that complements rather than duplicates text. For inherently complex material, breaking it into smaller, sequential lessons reduces intrinsic load by letting learners consolidate each piece before adding the next.

The key is balancing load against the learner's prior knowledge. Novices cannot handle the same load as experts; a complex diagram that experts parse instantly overwhelms someone new to the field. Scaffolding reduces intrinsic load by starting simple and progressively adding elements as understanding builds, optimizing the working memory budget for learning.

Embed this diagram

Add this animated cognitive load theory to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated cognitive load theory for any website.
Who uses it
Psychology blogs.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="cognitive-load-theory" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Cognitive Load Theory" for my website?
Scrollchart provides "Cognitive Load Theory" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a cognitive load theory in WordPress or a static site?
Paste the HTML snippet from the Scrollchart diagram page into your WordPress post (in HTML/code view), your Webflow embed block, or directly into a static HTML file. No plugin is needed. The diagram loads from scrollchart.com and paints in as the reader scrolls.