tommygeoco_ui-audit/references/22-patterns-cognitive-load.md

# Patterns: Cognitive Load

Patterns for reducing mental effort and preventing user overwhelm.

---

## What is Cognitive Load?

The mental effort required to process information and make decisions. Working memory is limited. Exceed it, and users struggle.

**Three types:**
1. **Intrinsic** — Complexity of the task itself
2. **Extraneous** — Complexity from poor design
3. **Germane** — Effort spent learning (good complexity)

**Goal:** Minimize extraneous load. Respect intrinsic load. Enable germane load.

---

## Pagination & Infinite Scroll

**What:** Breaking large content sets into manageable chunks.

### Cognitive Load Impact

- **Pagination** — Clear mental boundaries, sense of progress
- **Infinite scroll** — No landmarks, can feel endless
- **Load more** — User-controlled expansion

### When to Use Each

| Pattern | Best For |
|---------|----------|
| **Pagination** | Search results, data tables, e-commerce, SEO-critical pages |
| **Infinite scroll** | Social feeds, discovery browsing, image galleries |
| **Load more** | Balanced approach, when users may want more but need control |

### Implementation Guidelines

**Pagination:**
- 10-50 items per page
- Show total count
- Deep linking support
- Consider "jump to page" for large sets

**Infinite Scroll:**
- Clear loading indicator
- "Back to top" button
- Preserve scroll position on return
- Consider footer accessibility

**Load More:**
- Show count loaded vs. total
- Consistent batch size
- Clear button placement

---

## Steppers & Wizards

**What:** Breaking complex processes into sequential steps.

### Benefits

- **Reduced load** — One step at a time
- **Progress visibility** — Know where you are
- **Confidence** — Clear path to completion
- **Error isolation** — Fix issues step by step

### Psychological Principles

- **Chunking** — Break complexity into parts
- **Goal gradient** — Motivation increases near completion
- **Zeigarnik effect** — Incomplete tasks create engagement

### Implementation Guidelines

**DO:**
- Show all steps upfront (numbered or named)
- Indicate current step clearly
- Allow back navigation (within reason)
- Validate before proceeding
- Save progress (in case of abandonment)
- Show summary/review before final submission

**DON'T:**
- Use for < 3 logical steps (overkill)
- Use for > 7 steps (too daunting)
- Hide step count (anxiety-inducing)
- Require linear completion if not necessary
- Lose user data if they navigate away

### Step Design

| Element | Guideline |
|---------|-----------|
| Step count | 3-7 steps ideal |
| Step names | Action-oriented ("Review" not "Step 3") |
| Progress | Visual indicator (bar, dots, numbers) |
| Validation | Per-step before allowing next |
| Summary | Final review before commit |

---

## Minimalist Navigation

**What:** Reducing navigation options to essential items.

### Benefits

- **Reduced decisions** — Fewer choices = easier choices
- **Faster scanning** — Find items quickly
- **Focus** — Attention on primary actions
- **Cleaner interface** — Less visual noise

### Psychological Principles

- **Hick's Law** — More options = longer decision time
- **Paradox of choice** — Too many options = worse decisions
- **Filtering** — Less to filter through

### Implementation Guidelines

**Primary Navigation:**
- 5-7 items maximum
- Most important items visible
- Group secondary items in "More" or submenus
- Use icons + labels (not just icons)

**Strategies:**
- Priority+ navigation (show what fits, collapse rest)
- Hamburger menu (hide until needed)
- Mega menus (for large sites, used carefully)
- Command palette (power users)

**DON'T:**
- Hide everything behind hamburger on desktop
- Use icons without labels for unfamiliar actions
- Create deep navigation hierarchies
- Change navigation per page without reason

---

## Chunked Lists

**What:** Breaking long lists into visually grouped sections.

### Benefits

- **Scannable** — Headers enable skipping
- **Findable** — Alphabetical, categorical, or chronological grouping
- **Memorable** — Sections aid recall
- **Manageable** — Each section is digestible

### Psychological Principles

- **Chunking** — Groups easier than flat lists
- **Law of Proximity** — Grouped items relate
- **Serial position** — Section headers become anchors

### Implementation Guidelines

**DO:**
- Clear section headers
- Consistent grouping logic
- Sticky headers during scroll (for long sections)
- Empty states per section if needed
- Consider collapsible sections

**DON'T:**
- Create too many sections (defeats purpose)
- Use inconsistent grouping logic
- Make headers look like list items
- Group unrelated items

### Grouping Strategies

| Strategy | Use When |
|----------|----------|
| Alphabetical | Long known lists (contacts, countries) |
| Categorical | Distinct types exist |
| Chronological | Time-based relevance |
| Frequency | Most-used items first |
| Custom | User-defined groups |

---

## Simplified Forms

**What:** Forms designed to minimize cognitive effort.

### Strategies

1. **Reduce fields** — Only ask what's necessary
2. **Smart defaults** — Pre-fill when possible
3. **Progressive disclosure** — Show fields as needed
4. **Inline validation** — Feedback as you go
5. **Logical grouping** — Related fields together

### Implementation Guidelines

**Reduce Fields:**
- Audit every field: "Do we *need* this?"
- Make optional fields truly optional
- Consider progressive profiling (ask over time)
- Derive what you can (city from zip, etc.)

**Smart Defaults:**
- Geo-location for country
- Today's date for date fields
- Most common option pre-selected
- Remember user's previous choices

**Progressive Disclosure:**
- Show advanced fields only when needed
- "Add more details" expand pattern
- Conditional fields based on previous answers

**Inline Validation:**
- Validate on blur (not on every keystroke)
- Clear, specific error messages
- Success indicators for valid fields
- Don't prevent typing valid values

**Field Layout:**
- Single column preferred (easier scanning)
- Labels above fields (faster)
- Consistent field widths
- Adequate spacing between fields

---

## Cognitive Load Reduction Principles

### 1. Eliminate Non-Essential Elements

- Remove purely decorative content
- Hide rarely-used options
- Simplify language
- Reduce color/visual noise

### 2. Leverage Recognition

- Show options, don't require recall
- Use familiar patterns
- Provide examples
- Use icons + labels

### 3. Offload to the System

- Auto-save
- Auto-fill
- Smart suggestions
- Error prevention

### 4. Support Scanning

- Clear headings
- Bullet points
- Visual hierarchy
- Whitespace

### 5. Reduce Decisions

- Smart defaults
- Recommendations
- Limited choices
- Clear primary action

---

## Cognitive Load Audit

| Check | Impact |
|-------|--------|
| ☐ Navigation items < 7 | Decision fatigue |
| ☐ Form fields minimized | Input effort |
| ☐ Smart defaults used | Decision effort |
| ☐ Content chunked | Processing load |
| ☐ Clear visual hierarchy | Scanning effort |
| ☐ Recognition over recall | Memory load |
| ☐ Progressive disclosure used | Initial overwhelm |
| ☐ Consistent patterns | Learning load |