> ## Documentation Index
> Fetch the complete documentation index at: https://patterns.heurilens.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cognitive Load

> A measurable UX pattern where users slow down, hesitate, or abandon tasks because the interface demands too much thinking at once.

## Cognitive Load as a UX failure pattern

A **Cognitive Load Spike** happens when users must process too many decisions, signals, or chunks of information at the same time.

This is not about “complex products.”\
It is about **momentary overload** — the user’s brain cannot confidently decide what to do next.

<Note>
  Cognitive load is measurable because overload produces predictable user behavior: hesitation, backtracking, repeated scanning, and delayed action.
</Note>

## What typically triggers cognitive load

Common triggers include:

* too many options presented without grouping
* dense UI blocks (cards, tables, text) competing for attention
* unclear labels that require interpretation
* multiple CTAs with similar weight
* mixed intent within the same section (learn + compare + buy at once)

<Frame>
  <img src="https://mintcdn.com/heurilens/gl-jdYlebDR0ByAq/images/cognitive-load.png?fit=max&auto=format&n=gl-jdYlebDR0ByAq&q=85&s=322a1f897d17a75165abf26b21fd1e43" alt="A measurable UX pattern where users slow down, hesitate, or abandon tasks because the interface demands too much thinking at once." className="rounded-xl" noZoom={true} width="1200" height="442" data-path="images/cognitive-load.png" />
</Frame>

## Observable user behavior signals

You’ll often see:

* users pausing without interacting
* repeated back-and-forth scanning
* abandoned tasks mid-flow
* clicks on “secondary” items while trying to understand “primary” ones
* delayed completion even when the flow is short

> When users think too much, they move less.

## Product-level signals Heurilens looks for

Heurilens flags cognitive load when sections contain:

* multiple competing decision points in one viewport
* weak grouping (spacing does not form “chunks”)
* similar-looking elements with different meanings
* instructions that appear after the user needs them
* mixed hierarchy (headings and body text visually similar)

## How Heurilens detects this pattern

<CardGroup cols={2}>
  <Card title="Decision density" icon="diagram-project">
    Counts and classifies decision points (CTAs, links, toggles, selectable items) within a section.
  </Card>

  <Card title="Chunking quality" icon="layer-group">
    Evaluates spacing, grouping, and hierarchy to determine whether content forms scannable units.
  </Card>

  <Card title="Instruction timing" icon="clock">
    Checks whether guidance appears before the decision moment or after confusion begins.
  </Card>

  <Card title="Meaning ambiguity" icon="circle-question">
    Detects labels and UI patterns that require interpretation rather than recognition.
  </Card>
</CardGroup>

## Real-world examples (what this looks like on websites)

<AccordionGroup>
  <Accordion title="Example 1 — Pricing pages with too many choices" icon="tags">
    Typical signals:

    * 3+ plans, each with long feature lists
    * multiple “Best value” labels
    * add-ons mixed into the same table

    What users do:

    * compare without deciding
    * scroll repeatedly between plans and FAQ
    * postpone purchase “to decide later”
  </Accordion>

  <Accordion title="Example 2 — Feature pages that mix intent" icon="wand-magic-sparkles">
    Typical signals:

    * hero tries to explain, sell, and educate at once
    * multiple CTAs (Book demo, Try free, Watch video) with similar weight
    * too many product screenshots stacked

    What users do:

    * scroll quickly without reading
    * miss the primary action
    * click random items to “figure it out”
  </Accordion>

  <Accordion title="Example 3 — Forms that ask too much too early" icon="clipboard-list">
    Typical signals:

    * long form with unclear field purpose
    * too many required fields
    * helper text hidden or missing

    What users do:

    * abandon halfway
    * input errors increase
    * submit hesitation grows
  </Accordion>
</AccordionGroup>

## Example output from Heurilens

<Card title="Cognitive Load Spike Detected" icon="triangle-exclamation">
  This section contains multiple competing decision points without clear grouping.

  Users are required to compare, interpret, and choose within a single viewport,
  increasing hesitation and delaying task progression.
</Card>

## Example fix direction generated by Heurilens

Instead of prescribing a single “UI rule,” Heurilens suggests **load-reducing patterns**:

* reduce decisions per viewport (progressive disclosure)
* group related choices into clear chunks
* elevate the primary action and demote alternatives
* move explanations before the decision moment
* convert comparisons into guided selection (recommended defaults)

<Tip>
  Fix directions are designed to reduce processing effort first — visual polish comes after clarity.
</Tip>

## Why this pattern matters

Cognitive load spikes do not always reduce traffic.\
They reduce **conversion efficiency**.

Users still move through the page — but slower, less confidently, and with more drop-off at decision points.

## Related patterns

<CardGroup cols={2}>
  <Card title="Visual Hierarchy" icon="layer-group" href="/modules/core-ux/visual-hierarchy">
    When attention priorities are unclear, cognitive load increases.
  </Card>

  <Card title="Readability" icon="book-open" href="/modules/core-ux/readability">
    Dense content and weak structure amplify mental effort.
  </Card>

  <Card title="First Impression Breakdown" icon="sparkles" href="/modules/core-ux/first-impression">
    Early confusion often begins as cognitive overload in the initial viewport.
  </Card>

  <Card title="Forms CRO" icon="clipboard-list" href="/modules/trust-conversion/forms-cro">
    Forms are high-risk surfaces where cognitive load becomes abandonment.
  </Card>
</CardGroup>

<Card title="See cognitive load spikes on your product" icon="sparkles" href="https://heurilens.com/auth/signup">
  Run an analysis and see where your interface demands too much thinking at once.
</Card>
