Cognitive Load Visualizer

A Chrome extension that estimates cognitive load in real time by analyzing webpage structure and visual complexity.

Overview

Cognitive Load Visualizer is a browser-based tool designed to approximate users’ cognitive load while interacting with webpages. Grounded in principles from cognitive science and human–computer interaction, the extension analyzes structural and visual features of webpages and computes a real-time cognitive load score directly in the browser.

The goal of this project is to explore whether cognitive load—traditionally measured through user studies and surveys—can be estimated automatically from measurable webpage characteristics during everyday browsing.

This project was developed as a Self-Directed Term Project for CS 6795 (Cognitive Science) at Georgia Institute of Technology.

Cognitive Science Foundation

The tool is informed by several core cognitive science principles:

• Cognitive Load Theory (CLT)
  Differentiates intrinsic, extraneous, and split-attention load.
• Working Memory Constraints
  Humans have limited capacity to process simultaneous information.
• Visual Search Theory
  Increased distractor density raises attentional demand.
• Split-Attention Effect
  Fragmented layouts increase mental effort due to attention switching.

These theories guided both the selection of inputs and the scoring model.

How It Works

The extension analyzes the currently visible portion of a webpage and computes a composite cognitive load score based on three measurable features:

1. DOM Depth (Intrinsic Load)
   Approximates structural complexity of the content.

2. Interactive Element Density (Extraneous Load)
   Counts visible buttons, links, icons, and form controls that compete for attention.

3. Layout Fragmentation (Split-Attention Load)
   Estimates how many distinct visual regions are visible at once.

Each metric is normalized and combined into a weighted score:

• 25% DOM depth
• 45% interactive density
• 30% layout fragmentation

The tool updates dynamically as the user scrolls, reflecting how cognitive load changes over time.

Features

• Real-time cognitive load scoring
• Dynamic updates during scrolling
• Popup UI showing metrics, score, URL, and timestamps
• Heatmap overlay highlighting high-load areas
• Runs entirely locally in the browser (no data collection or servers)

Installation (Developer Mode)

1. Clone this repository:

   git clone git@github.com:thinktankllc/cogload-extension.git

2. Open Chrome and go to chrome://extensions
3. Enable Developer mode
4. Click Load unpacked
5. Select the project folder

Chrome Web Store

The extension is publicly available on the Chrome Web Store: https://chromewebstore.google.com/detail/cognitive-load-visualizer/mphbnmimnncdomofhjdobpfeealdcend

Limitations & Future Work

• Layout-region detection currently does not always distinguish complex multi-section pages accurately.
• Heatmap visualization operates at the viewport level rather than individual layout regions.

Planned improvements include:

• More robust layout-region detection
• Region-level cognitive load visualization
• Reading complexity analysis
• Adaptive interfaces that respond to estimated cognitive load

References

• Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science.
• Paas, F., & Renkl, A. (2003). Cognitive Load Theory and instructional design. Educational Psychologist.
• Wolfe, J. M. (1994). Guided Search 2.0. Psychonomic Bulletin & Review.
• Baddeley, A. (2003). Working memory: Looking back and looking forward. Nature Reviews Neuroscience.