# Cognitive Foundations

This resource explains the core cognitive psychology principles underlying effective visual design.

**Foundation for:** All other paths in this skill

---

## Why Learn Cognitive Foundations

### WHY This Matters

Understanding how humans perceive, attend, remember, and process information enables you to:
- **Predict user behavior:** Know what users will notice, understand, and remember
- **Design with confidence:** Ground decisions in research, not guesswork
- **Diagnose problems:** Identify why designs fail cognitively
- **Advocate effectively:** Explain design rationale with scientific backing

**Mental model:** Like a doctor needs anatomy to diagnose illness, designers need cognitive psychology to diagnose interface problems.

**Research foundation:** Tufte (data visualization), Norman (interaction design), Ware (visual perception), Cleveland & McGill (graphical perception), Miller/Cowan (working memory), Gestalt psychology (perceptual grouping), Mayer (multimedia learning).

Without cognitive foundations: design by intuition alone, inconsistent decisions, inability to explain why designs work or fail.

---

## What You'll Learn

### Core Cognitive Concepts

This section covers 5 foundational areas:
1. **Perception & Attention** - What users notice first, visual search, preattentive processing
2. **Memory & Cognition** - Working memory limits, chunking, cognitive load
3. **Gestalt & Grouping** - Automatic perceptual organization patterns
4. **Visual Encoding** - Hierarchy of perceptual accuracy for different chart types
5. **Mental Models & Mapping** - How prior experience shapes expectations

---

## Why Perception & Attention

### WHY This Matters

**Core insight:** Attention is limited and selective like a spotlight - you can only focus on one thing at high resolution while periphery remains blurry.

**Implications:**
- Visual design controls where attention goes
- Competing elements dilute attention
- Critical information must be made salient
- Users scan, they don't read everything thoroughly

**Mental model:** Human vision is like a camera with a tiny high-resolution center (fovea covers ~1-2° of visual field) and low-resolution periphery. We rapidly move attention spotlight to important areas.

---

### WHAT to Know

#### Preattentive Processing

**Definition:** Detection of basic visual features in under 500ms before conscious attention.

**Preattentive Features:**
- **Color:** A single red item among gray pops out instantly
- **Form:** Unique shapes stand out (circle among squares)
- **Motion:** Moving elements grab attention automatically
- **Position:** Spatial outliers noticed quickly
- **Size:** Largest/smallest items detected fast

**Application Rule:**
```
Use preattentive features sparingly for 1-3 critical elements only.
Too many salient elements = visual noise = nothing stands out.
```

**Example:** Dashboard alert in red among gray metrics → immediate attention

**Anti-pattern:** Everything in bright colors → overwhelm, nothing prioritized

---

#### Visual Search

**Definition:** After preattentive pop-out, users engage in serial visual search - scanning one area at a time with high acuity.

**Predictable Patterns:**
- **F-pattern:** Text-heavy content (read top-left to top-right, then down left side, short horizontal scan middle)
- **Z-pattern:** Visual-heavy content (top-left to top-right, diagonal to bottom-left, then bottom-right)
- **Gutenberg Diagram:** Primary optical area top-left, terminal area bottom-right

**Application Rule:**
```
Position most important elements along scanning path:
- Top-left for primary content (both patterns start here)
- Top-right for secondary actions
- Bottom-right for terminal actions (next/submit)
```

**Example:** Dashboard KPIs top-left, details below, "Export" button bottom-right

---

#### Attention Spotlight Trade-offs

**Attention is zero-sum:** Effort spent on decorations is unavailable for data comprehension.

**Rule:** Maximize attention on task-relevant elements, minimize on decorative elements.

**Squint Test:** Blur design (squint or Gaussian blur) - can you still identify what's important? If hierarchy disappears when blurred, it's too subtle.

---

## Why Memory & Cognition

### WHY This Matters

**Core insight:** Working memory can hold only ~4±1 meaningful chunks of information, and items fade within seconds unless rehearsed.

**Implications:**
- Interfaces must be designed to fit memory limits
- Information must be chunked into groups
- State should be externalized to interface, not user's memory
- Recognition is vastly easier than recall

**Mental model:** Working memory is like juggling - you can keep 3-5 balls in the air, but adding more causes you to drop them all.

**Updated understanding:** Miller (1956) proposed 7±2 chunks, but Cowan (2001) showed actual capacity is 4±1 for most people.

---

### WHAT to Know

#### Working Memory Capacity

**Definition:** "Mental scratchpad" holding active information temporarily (seconds) before transfer to long-term memory or loss.

**Capacity:** **4±1 chunks** for most people

**Chunk:** Meaningful unit of information
- Expert: "555-123-4567" = 1 chunk (phone number)
- Novice: "555-123-4567" = 10 chunks (each digit separate)

**Application Rule:**
```
Design within 4±1 constraint:
- Navigation: ≤7 top-level categories
- Forms: 4-6 fields per screen without wizard
- Dashboards: Group metrics into 3-5 categories
- Choices: Limit concurrent options to ≤7
```

**Example:** Registration wizard with 4 steps (personal info, account, preferences, review) vs single 30-field page

**Why it works:** Each step fits in working memory; progress indicator externalizes "where am I"

---

#### Cognitive Load Types

**Intrinsic Load:** Inherent complexity of the task itself (can't change)

**Extraneous Load:** Mental effort from poor design - confusing interfaces, unclear icons, missing context
→ **MINIMIZE THIS**

**Germane Load:** Meaningful mental effort contributing to learning or understanding
→ **Support this, don't eliminate**

**Application Rule:**
```
Reduce extraneous load to free capacity for germane load:
- Remove decorative elements (chartjunk)
- Simplify workflows (fewer steps, fewer choices)
- Provide memory aids (breadcrumbs, visible state, tooltips)
- Use familiar patterns (standard UI conventions)
```

**Example:** E-learning slide with audio narration + diagram (germane load) vs text + diagram + background music (extraneous load from competing visual text and irrelevant music)

---

#### Recognition vs. Recall

**Recall:** Retrieve from memory without cues (hard, error-prone, slow)
- "What was the error code?"
- "Which menu has the export function?"

**Recognition:** Identify among presented options (easy, fast, accurate)
- Error message shown in context
- Menu items visible

**Application Rule:**
```
Design for recognition over recall:
- Show available options (dropdown) vs requiring typed command
- Display current filters as visible chips vs requiring memory
- Provide breadcrumbs vs expecting user to remember navigation path
- Use icons WITH labels vs icons alone
```

**Example:** File menu with visible "Save" option vs command-line requiring user to remember "save" command

---

#### Chunking Strategy

**Definition:** Grouping related information into single meaningful units to overcome working memory limits.

**Application Patterns:**
- **Lists:** Break into categories (❌ 20 ungrouped nav items → ✓ 5 categories × 4 items)
- **Forms:** Group fields (❌ 30 sequential fields → ✓ 4-step wizard with grouped fields)
- **Phone numbers:** Use conventional chunking (555-123-4567 = 3 chunks vs 5551234567 = 10 chunks)
- **Dashboards:** Group metrics by category (Traffic panel, Conversion panel, Error panel)

---

## Why Gestalt & Grouping

### WHY This Matters

**Core insight:** The brain automatically organizes visual elements based on proximity, similarity, continuity, and other principles - this happens preconsciously before you think about it.

**Implications:**
- Layout directly creates perceived meaning
- Whitespace is not "empty" - it shows separation
- Consistent styling shows relationships
- Alignment implies connection

**Mental model:** Gestalt principles are like visual grammar - rules the brain applies automatically to make sense of what it sees.

**Historical note:** Gestalt psychology (1910s-1920s) discovered these principles, and they remain validated by modern neuroscience.

---

### WHAT to Know

#### Proximity

**Principle:** Items close together are perceived as belonging to the same group.

**Application Rule:**
```
Use spatial grouping to show relationships:
- Related form fields adjacent with minimal spacing
- Unrelated groups separated by whitespace
- Label next to corresponding graphic (not across page)
```

**Example:** Dashboard with 3 panels (traffic, conversions, errors) separated by whitespace → automatically perceived as 3 distinct groups

**Anti-pattern:** Even spacing everywhere → no perceived structure

---

#### Similarity

**Principle:** Elements that look similar (shape, color, size, style) are seen as related or part of a pattern.

**Application Rule:**
```
Use consistent styling for related elements:
- All primary CTAs same color/style
- All error messages same red + icon treatment
- All headings same font/size per level
```

**Example:** All "delete" actions red across interface → users learn "red = destructive action"

**Anti-pattern:** Inconsistent button styles → users can't predict function from appearance

---

#### Continuity

**Principle:** Elements arranged on a line or curve are perceived as more related than elements not aligned.

**Application Rule:**
```
Use alignment to show structure:
- Left-align related items (form fields, list items)
- Grid layouts imply equal status
- Flowing lines guide eye through narrative
```

**Example:** Infographic with visual flow from top to bottom, numbered steps along continuous path

**Anti-pattern:** Haphazard placement → no clear reading order

---

#### Closure

**Principle:** Mind perceives complete figures even when parts are missing, filling gaps mentally.

**Application Rule:**
```
Leverage closure for simplified designs:
- Dotted lines imply connection without solid line visual weight
- Incomplete circles/shapes still recognized (reduce ink)
- Implied boundaries via alignment without explicit borders
```

**Example:** Dashboard cards separated by whitespace only (no borders) → still perceived as distinct containers

---

#### Figure-Ground Segregation

**Principle:** We instinctively separate scene into "figure" (foreground object of focus) and "ground" (background).

**Application Rule:**
```
Ensure clear figure-ground distinction:
- Modal dialogs: dim background, brighten foreground
- Highlighted content: stronger contrast than surroundings
- Active state: clearly differentiated from inactive
```

**Example:** Popup form with darkened background overlay → form is clearly the figure

**Anti-pattern:** Insufficient contrast → users can't distinguish what's active

---

## Why Visual Encoding Hierarchy

### WHY This Matters

**Core insight:** Not all visual encodings are equally effective for human perception - some enable precise comparisons, others make them nearly impossible.

**Cleveland & McGill's Hierarchy (most to least accurate):**
1. Position along common scale (bar chart)
2. Position along non-aligned scales
3. Length
4. Angle/slope
5. Area
6. Volume
7. Color hue (categorical only)
8. Color saturation

**Implications:**
- Chart type choice directly determines user accuracy
- Bar charts enable 5-10x more precise comparison than pie charts
- Color hue has no inherent ordering (don't use for quantities)

**Mental model:** Human visual system is like a measurement tool - some encodings are precision instruments (position), others are crude estimates (area).

---

### WHAT to Know

#### Task-Encoding Matching

**Match encoding to user task:**
- **Compare values:** Bar chart (position/length 5-10x more accurate than pie angle/area)
- **See trend:** Line chart (continuous line shows temporal progression, slope changes visible)
- **Understand distribution:** Histogram/box plot (shape visible, outliers apparent)
- **Part-to-whole:** Stacked bar/treemap (avoid pie >5 slices - angles hard to judge)
- **Find outliers/clusters:** Scatterplot (2D position enables pattern detection)

---

#### Color Encoding Rules

- **Categorical:** Distinct hues (red, blue, green). Limit 5-7 categories. Hue lacks ordering.
- **Quantitative:** Lightness gradient (light→dark). Avoid rainbow (misleading peaks). Darkness = more.
- **Diverging:** Two-hue gradient through neutral (blue←gray→orange). Shows direction/magnitude.
- **Accessible:** Redundant coding (color + icon + label). 8% males colorblind.

---

#### Perceptually Uniform Colormaps

**Problem:** Rainbow spectrum has non-uniform perceptual steps - equal data differences don't produce equal perceived color differences. Can hide or exaggerate patterns.

**Solution:** Use perceptually uniform colormaps:
- **Viridis** (yellow→green→blue)
- **Magma** (purple→red→yellow)
- **Plasma** (purple→orange→yellow)

**Why:** Equal data steps = equal perceived color steps = honest representation

**Application:** Any heatmap, choropleth map, or continuous quantitative color scale

---

## Why Mental Models & Mapping

### WHY This Matters

**Core insight:** Users approach interfaces with preconceived notions (mental models) from past experiences. Designs that violate these models require re-learning and cause confusion.

**Implications:**
- Familiarity reduces cognitive load (System 1 processing)
- Deviation from standards forces conscious thought (System 2 processing)
- Consistent patterns become automatic
- Natural mappings feel intuitive

**Mental model:** Like driving a car - once you've learned, you don't consciously think about pedals. New car with reversed pedals would be dangerous because it violates your mental model.

---

### WHAT to Know

#### Mental Models (User Expectations)

**Definition:** Internal representations of how things work based on prior experience and analogy.

**Sources:**
- **Platform conventions:** iOS vs Android interaction patterns
- **Cultural patterns:** Left-to-right reading in Western contexts
- **Physical world:** Skeuomorphic metaphors (trash can for delete)
- **Other applications:** "Most apps work this way" (Jakob's Law)

**Application Rule:**
```
Use standard UI patterns to leverage existing mental models:
- Hamburger menu for navigation (mobile)
- Magnifying glass for search
- Shopping cart for e-commerce
- Standard keyboard shortcuts (Ctrl+C/V)
```

**When to deviate:** Only when standard pattern demonstrably fails for your use case AND you provide clear onboarding

**Example:** File system trash can - users understand "throw away to delete" from physical world metaphor

---

#### Affordances & Signifiers

**Affordance:** Properties suggesting how to interact (button affords clicking, slider affords dragging)

**Signifier:** Visual cues indicating affordance (button looks raised/has shadow to signal "press me")

**Application Rule:**
```
Design controls to signal their function:
- Buttons: raised appearance, hover state, cursor change
- Text inputs: rectangular field with border, cursor appears on click
- Sliders: handle that looks draggable
- Links: underlined or colored text, cursor changes to pointer
```

**Example:** Flat button vs raised button - raised appearance signals "I'm interactive" without user experimentation

**Anti-pattern:** Everything looks flat and identical → user must experiment to discover what's clickable

---

#### Natural Mapping

**Definition:** Relationship between controls and effects that mirrors spatial/conceptual relationships in intuitive way.

**Application Patterns:**
- **Spatial:** Stove knob layout mirrors burner layout (front-left knob → front-left burner)
- **Directional:** Volume up = move up, zoom in = pinch outward, scroll down = swipe up (matches physical)
- **Conceptual:** Green = go/good/success, Red = stop/bad/error (culturally learned, widely understood)

**Rule:** Align control layout/direction with effect for instant comprehension

---

## Application: Putting Foundations Together

### Dashboard Design Example

**Problem:** 20 equal-weight metrics → cognitive overload

**Applied Principles:**
- **Attention:** 3-4 primary KPIs top-left (large), smaller secondary below, red for violations only
- **Memory:** Group into 3-4 panels (Traffic, Conversions, Errors) = fits 4±1 chunks
- **Gestalt:** Proximity (related metrics within panel), similarity (consistent colors), whitespace (panel separation)
- **Encoding:** Bar charts (comparisons), line charts (trends), avoid pies (poor angle perception)
- **Mental Models:** Standard chart types, conventional axes (time left-to-right), familiar icons + labels

**Result:** 5-second comprehension vs 60-second confusion

---

### Form Wizard Example

**Problem:** 30-field form → 60% abandonment

**Applied Principles:**
- **Attention:** 4 steps revealed gradually, current step prominent
- **Memory:** 4-6 fields per step (fits 4±1 capacity), progress indicator visible (externalizes state)
- **Gestalt:** Related fields grouped (name, address), whitespace between groups
- **Recognition over Recall:** Show step names ("Personal Info" → "Account" → "Preferences" → "Review"), display entered info in review, enable back navigation
- **Natural Mapping:** Linear flow left-to-right/top-to-bottom, "Next" button bottom-right consistently

**Result:** 75% completion, faster task time