Skip to content

[Term Entry] Add Cognitive Load #6638

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 28, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions content/uiux/concepts/cognitive-load/cognitive-load.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
---
Title: 'Cognitive Load'
Description: 'Cognitive load refers to the amount of mental effort required for a user to process information and complete a task.'
Subjects:
- 'Web Design'
- 'Web Development'
Tags:
- 'UI'
- 'UX'
CatalogContent:
- 'intro-to-ui-ux'
- 'paths/front-end-engineer-career-path'
---

**Cognitive load** is a term used to indicate the total amount of mental effort a user must exert to understand, process, and act on information in an interface. In UX design, the goal is not to eliminate cognitive load entirely, but more so, manage it carefully so users can focus on achieving their goals without confusion or fatigue.

Too much cognitive load can overwhelm users, slow down task performance, and lead to errors or abandonment, especially on complex forms, navigation-heavy sites, or unfamiliar workflows.

## Where Cognitive Load Appears in UX

Designers need to be aware of cognitive load during:

- **First-time user onboarding**: New users have no mental model of the interface, so every piece of information adds to their processing burden.
- **Multi-step tasks or forms**: If users must remember information from previous steps or interpret unclear labels, cognitive load increases.
- **Unfamiliar or domain-specific language**: Industry jargon, acronyms, or overly technical terms create unnecessary thinking overhead.
- **Crowded or unprioritized layouts**: When everything competes for attention, users struggle to know what matters most.
- **Inconsistent patterns**: Inconsistencies in layout, labeling, or behavior force users to relearn interactions repeatedly.

## Types of Cognitive Load

There are three types of cognitive load relevant to UX:

- **Intrinsic load**: This is related to the complexity of the task itself. For example, booking a multi-stop international flight has naturally higher cognitive demand than reading a blog post.
- **Extraneous load**: Caused by poor interface design or unnecessary friction. For example, asking users to input data already available in their profile.
- **Germane load**: The mental effort directed toward learning and integrating new knowledge. This can be productive if well-supported by design.

> **Note:** Good UX minimizes extraneous load, manages intrinsic load, and supports germane load through clarity and guidance.

## Techniques to Reduce Cognitive Load

- **Prioritize and group content visually**: Use white space, alignment, and hierarchy to help users scan and understand faster.
- **Simplify language and reduce jargon**: Speak in the user's language, not the organization's internal terminology.
- **Progressively disclose complexity**: Show users only what they need at the moment. Reveal advanced options or extra information only when needed.
- **Use consistent design patterns**: When users recognize interaction models from past experiences, they don't need to relearn basic behaviors.
- **Chunk information**: Break content into digestible pieces. Long paragraphs or dense instructions increase load.
- **Provide immediate feedback and guidance**: Error messages, inline help, and visual confirmations all reduce uncertainty.