17 KiB
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:
- Perception & Attention - What users notice first, visual search, preattentive processing
- Memory & Cognition - Working memory limits, chunking, cognitive load
- Gestalt & Grouping - Automatic perceptual organization patterns
- Visual Encoding - Hierarchy of perceptual accuracy for different chart types
- 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):
- Position along common scale (bar chart)
- Position along non-aligned scales
- Length
- Angle/slope
- Area
- Volume
- Color hue (categorical only)
- 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