Initial commit

skills/cognitive-design/resources/cognitive-fallacies.md

@@ -0,0 +1,488 @@
+# Cognitive Fallacies & Visual Misleads
+
+This resource covers common design failures that confuse or mislead users - what NOT to do and how to avoid cognitive pitfalls.
+
+**Covered topics:**
+1. Chartjunk and data-ink ratio violations
+2. Misleading visualizations (truncated axes, 3D distortion)
+3. Cognitive biases in interpretation
+4. Data integrity violations
+5. Integrity principles and solutions
+
+---
+
+## Why Avoid Cognitive Fallacies
+
+### WHY This Matters
+
+**Core insight:** Common visualization mistakes aren't just aesthetic failures - they cause systematic cognitive misinterpretation and damage trust.
+
+**Problems caused by fallacies:**
+- **Chartjunk:** Consumes working memory without conveying data
+- **Truncated axes:** Exaggerates differences, misleads comparison
+- **3D effects:** Distorts perception through volume illusions
+- **Cherry-picking:** Misleads by omitting contradictory context
+- **Spurious correlations:** Implies false causation
+
+**Why designers commit fallacies:**
+- Aesthetic appeal prioritized over clarity
+- Unaware of cognitive impacts
+- Intentional manipulation (sometimes)
+- Following bad examples
+
+**Ethical obligation:** Visualizations are persuasive - designers have responsibility to communicate honestly.
+
+---
+
+## What You'll Learn
+
+**Five categories of failures:**
+
+1. **Visual Noise:** Chartjunk, low data-ink ratio, clutter
+2. **Perceptual Distortions:** 3D effects, volume illusions, inappropriate chart types
+3. **Cognitive Biases:** Confirmation bias, anchoring, framing effects
+4. **Data Integrity Violations:** Truncated axes, cherry-picking, non-uniform scales
+5. **Misleading Correlations:** Spurious correlations, false causation
+
+---
+
+## Why Chartjunk Impairs Comprehension
+
+### WHY This Matters
+
+**Definition:** Gratuitous visual decorations that obscure data without adding information (Tufte).
+
+**Cognitive mechanism:**
+- Working memory limited to 4±1 chunks
+- Every visual element consumes attentional resources
+- Decorative elements compete with data for attention
+- Resources spent on decoration unavailable for comprehension
+
+**Result:** Slower comprehension, higher cognitive load, missed insights
+
+---
+
+### WHAT to Avoid
+
+#### Common Chartjunk
+
+**Avoid:** Heavy backgrounds (gradients/textures), excessive gridlines, 3D effects for decoration, decorative icons replacing data, ornamental elements (borders/fancy fonts)
+**Why problematic:** Reduces contrast, creates visual noise, distorts perception, competes with data
+**Solution:** White/light background, minimal gray gridlines, flat 2D design, simple bars, minimal decoration
+
+---
+
+#### Data-Ink Ratio
+
+**Tufte's principle:** Maximize proportion of ink showing data, minimize non-data ink
+
+**Application:**
+```
+Audit every element: "Does this convey data or improve comprehension?"
+If NO → remove it
+If YES → keep it minimal
+```
+
+**Example optimization:**
+```
+Before:
+- Heavy gridlines: 30% ink
+- 3D effects: 20% ink
+- Decorative borders: 10% ink
+- Actual data: 40% ink
+Data-ink ratio: 40%
+
+After:
+- Minimal axis: 5% ink
+- Simple bars: 95% ink
+Data-ink ratio: 95%
+
+Result: Faster comprehension, clearer message
+```
+
+---
+
+## Why Truncated Axes Mislead
+
+### WHY This Matters
+
+**Definition:** Axes that don't start at zero, cutting off the baseline
+
+**Cognitive issue:** Viewers assume bar length is proportional to value - truncation breaks this assumption
+
+**Effect:** Small absolute differences appear dramatically large
+
+---
+
+### WHAT to Avoid
+
+#### Truncated Bar Charts
+
+**Problem example:**
+```
+Sales comparison:
+Company A: $80M (bar shows from $70M)
+Company B: $85M (bar shows from $70M)
+
+Visual: Company B's bar looks 5x larger than A
+Reality: Only 6.25% difference ($5M on $80M base)
+
+Mislead mechanism: Truncated y-axis starting at $70M instead of $0M
+```
+
+**Solutions:**
+```
+Option 1: Start y-axis at zero (honest proportional representation)
+Option 2: Use line chart instead (focuses on change, zero baseline less critical)
+Option 3: If truncating necessary, add clear axis break symbol and annotation
+Option 4: Show absolute numbers directly on bars to provide context
+```
+
+---
+
+#### When Truncation is Acceptable
+
+**Line charts:**
+```
+✓ Showing stock price changes over time
+✓ Temperature trends
+✓ Focus is on pattern/trend, not absolute magnitude comparison
+
+Requirement: Still note scale clearly, provide context
+```
+
+**Small multiples with consistent truncation:**
+```
+✓ Comparing trend patterns across categories
+✓ All charts use same y-axis range (fair comparison)
+✓ Clearly labeled
+
+Purpose: See shape differences, not magnitude
+```
+
+---
+
+## Why 3D Effects Distort
+
+### WHY This Matters
+
+**Cognitive issue:** Human visual system estimates 3D volumes and angles imprecisely
+
+**Mechanisms:**
+- **Perspective foreshortening:** Elements at front appear larger than identical elements at back
+- **Volume scaling:** Doubling height and width octuples volume, but may be perceived linearly
+- **Angle distortion:** 3D pie slices at different positions appear different sizes even when equal
+
+---
+
+### WHAT to Avoid
+
+#### 3D Bar Charts
+
+**Problem:**
+```
+3D bars with depth dimension:
+- Harder to judge bar height (top surface not aligned with axis)
+- Perspective makes back bars look smaller
+- Depth adds no information, only distortion
+
+Solution: Use simple 2D bars
+```
+
+---
+
+#### 3D Pie Charts
+
+**Problem:**
+```
+3D pie with perspective:
+- Slices at front appear larger than equal slices at back
+- Angles further distorted by tilt
+- Already-poor angle perception made worse
+
+Solution: If pie necessary, use flat 2D; better yet, use bar chart
+```
+
+---
+
+#### Volume Illusions
+
+**Problem:**
+```
+Scaling icons in multiple dimensions:
+Person icon twice as tall to represent 2x data
+Visual result: 4x area (height × width)
+Viewer perception: May see as 2x, 4x, or even 8x (volume)
+
+Solution: Scale only one dimension (height), or use simple bars
+```
+
+---
+
+## Why Cognitive Biases Affect Interpretation
+
+### WHY This Matters
+
+**Core insight:** Viewers bring cognitive biases to data interpretation - design can either reinforce or mitigate these biases.
+
+**Key biases:**
+- **Confirmation bias:** See what confirms existing beliefs
+- **Anchoring:** First number sets benchmark for all subsequent
+- **Framing effects:** How data is presented influences emotional response
+
+**Designer responsibility:** Present data neutrally, provide full context, enable exploration
+
+---
+
+### WHAT to Avoid
+
+#### Reinforcing Confirmation Bias
+
+**Problem:**
+```
+Dashboard highlighting data supporting desired conclusion
+- Only positive metrics prominent
+- Contradictory data hidden or small
+- Selective time periods
+
+Result: Viewers who want to believe conclusion find easy support
+```
+
+**Solutions:**
+```
+✓ Present full context, not cherry-picked subset
+✓ Enable filtering/exploration (users can challenge assumptions)
+✓ Show multiple viewpoints or comparisons
+✓ Note data limitations and contradictions
+```
+
+---
+
+#### Anchoring Effects
+
+**Problem:**
+```
+Leading with dramatic statistic:
+"Sales increased 500%!" (from $10k to $50k, absolute small)
+Then: "Annual revenue $2M" (anchored to 500%, seems disappointing)
+
+First number anchors perception of all subsequent numbers
+```
+
+**Solutions:**
+```
+✓ Provide baseline context upfront
+✓ Show absolute and relative numbers together
+✓ Be mindful of what's shown first in presentations
+✓ Use neutral sorting (alphabetical, not "best first")
+```
+
+---
+
+#### Framing Effects
+
+**Problem:**
+```
+Same data, different frames:
+"10% unemployment" vs "90% employed"
+"1 in 10 fail" vs "90% success rate"
+"50 new cases today" vs "Cumulative 5,000 cases"
+
+Same numbers, different emotional impact
+```
+
+**Solutions:**
+```
+✓ Acknowledge framing choice
+✓ Provide multiple views (daily AND cumulative)
+✓ Show absolute AND relative (percentages + actual numbers)
+✓ Consider audience and choose frame ethically
+```
+
+**Note:** Framing isn't inherently wrong, but it's powerful - use responsibly
+
+---
+
+## Why Data Integrity Violations Damage Trust
+
+### WHY This Matters
+
+**Tufte's Graphical Integrity:** Visual representation should be proportional to numerical quantities
+
+**Components:**
+- Honest axes (zero baseline or marked truncation)
+- Fair comparisons (same scale)
+- Complete context (full time period, baselines)
+- Clear labeling (sources, methodology)
+
+**Why it matters:** Trust is fragile - one misleading visualization damages credibility long-term
+
+---
+
+### WHAT to Avoid
+
+#### Cherry-Picking Time Periods
+
+**Problem:**
+```
+"Revenue grew 30% in Q4!"
+...omitting that it declined 40% over full year
+
+Mislead mechanism: Showing only favorable subset
+```
+
+**Solutions:**
+```
+✓ Show full relevant time period
+✓ If focusing on segment, show it IN CONTEXT of whole
+✓ Note data selection criteria ("Q4 only shown because...")
+✓ Provide historical comparison (vs same quarter previous year)
+```
+
+---
+
+#### Non-Uniform Scales
+
+**Problem:**
+```
+X-axis intervals:
+0, 10, 20, 50, 100 (not uniform increments)
+
+Effect: Trend appears to accelerate or decelerate artificially
+```
+
+**Solutions:**
+```
+✓ Use uniform scale intervals
+✓ If log scale needed, clearly label as such
+✓ If breaks necessary, mark with axis break symbol
+```
+
+---
+
+#### Missing Context
+
+**Problem:**
+```
+"50% increase!" without denominator
+50% of what? 2 to 3? 1000 to 1500?
+
+"Highest level in 6 months!" without historical context
+What was level 7 months ago? 1 year ago? Historical average?
+```
+
+**Solutions:**
+```
+✓ Show absolute numbers + percentages
+✓ Provide historical context (historical average, benchmarks)
+✓ Include comparison baselines (previous period, peer comparison)
+✓ Note sample size and data source
+```
+
+---
+
+## Why Spurious Correlations Mislead
+
+### WHY This Matters
+
+**Definition:** Statistical relationship between variables with no causal connection
+
+**Classic example:** Ice cream sales vs shark attacks (both increase in summer, no causal link)
+
+**Cognitive bias:** Correlation looks like causation when visualized together
+
+**Designer responsibility:** Clarify when relationships are correlational vs causal
+
+---
+
+### WHAT to Avoid
+
+#### Dual-Axis Manipulation
+
+**Problem:**
+```
+Dual-axis chart with independent scales:
+Left axis: Metric A (scaled 0-100)
+Right axis: Metric B (scaled 0-10)
+
+By adjusting scales, can make ANY two metrics appear correlated
+Viewer sees: Lines moving together, assumes relationship
+Reality: Scales manipulated to create visual similarity
+```
+
+**Solutions:**
+```
+✓ Use dual-axis only when relationship is justified (not arbitrary)
+✓ Clearly label both axes
+✓ Explain WHY two metrics are shown together
+✓ Consider separate charts if relationship unclear
+```
+
+---
+
+#### Implying Causation
+
+**Problem:**
+```
+Chart showing two rising trends:
+"Social media usage and depression rates both rising"
+
+Visual implication: One causes the other
+Reality: Could be correlation only, common cause, or coincidence
+```
+
+**Solutions:**
+```
+✓ Explicitly state "correlation, not proven causation"
+✓ Note other possible explanations
+✓ If causal claim, cite research supporting it
+✓ Provide mechanism explanation if causal
+```
+
+---
+
+## Integrity Principles
+
+### What to Apply
+
+**Honest Axes:**
+```
+✓ Start bars at zero or clearly mark truncation
+✓ Use uniform scale intervals
+✓ Label clearly with units
+✓ If log scale, label as such
+```
+
+**Fair Comparisons:**
+```
+✓ Use same scale for items being compared
+✓ Don't manipulate dual-axis to force visual correlation
+✓ Show data for same time periods
+✓ Include all relevant data points (not selective)
+```
+
+**Complete Context:**
+```
+✓ Show full time period or note selection
+✓ Include baselines (previous year, average, benchmark)
+✓ Provide denominator for percentages
+✓ Note when data is projected/estimated vs actual
+```
+
+**Accurate Encoding:**
+```
+✓ Match visual scaling to data scaling
+✓ Avoid volume illusions (icon sizing)
+✓ Use 2D representations for accuracy
+✓ Ensure color encoding matches meaning (red=negative convention)
+```
+
+**Transparency:**
+```
+✓ Note data sources
+✓ Mention sample sizes
+✓ State selection criteria if data is subset
+✓ Acknowledge limitations
+✓ Provide access to full dataset when possible
+```
+

skills/cognitive-design/resources/cognitive-foundations.md

@@ -0,0 +1,490 @@
+# 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

skills/cognitive-design/resources/data-visualization.md

@@ -0,0 +1,497 @@
+# Data Visualization
+
+This resource provides cognitive design principles specifically for charts, dashboards, and data-driven presentations.
+
+**Covered topics:**
+1. Chart selection via task-encoding alignment
+2. Dashboard hierarchy and grouping
+3. Progressive disclosure for interactive exploration
+4. Narrative data visualization
+
+---
+
+## Why Data Visualization Needs Cognitive Design
+
+### WHY This Matters
+
+**Core insight:** Data visualization is cognitive communication - the goal is insight transfer from data to human understanding. Success requires matching visual encodings to human perceptual strengths.
+
+**Common problems:**
+- Wrong chart type chosen (pie when bar would be clearer)
+- Dashboards overwhelming users with too many metrics
+- Interactive tools causing anxiety (users fear getting lost)
+- Data stories lacking clear narrative guidance
+
+**How cognitive principles help:**
+- Choose encodings that exploit perceptual accuracy (Cleveland & McGill hierarchy)
+- Design dashboards within working memory limits (chunking, hierarchy)
+- Structure exploration to reduce cognitive load (progressive disclosure, visible state)
+- Guide interpretation through annotations and narrative flow
+
+**Mental model:** Data visualization is a translation problem - translating abstract data into visual form that human perception can process efficiently.
+
+---
+
+## What You'll Learn
+
+**Four key areas:**
+
+1. **Chart Selection:** Match visualization type to user task and perceptual capabilities
+2. **Dashboard Design:** Organize multiple visualizations for at-a-glance comprehension
+3. **Interactive Exploration:** Enable data investigation without overwhelming or losing users
+4. **Narrative Visualization:** Tell data stories with clear flow and guided interpretation
+
+---
+
+## Why Chart Selection Matters
+
+### WHY This Matters
+
+**Core insight:** Not all visual encodings serve all tasks equally well - position/length enable 5-10x more accurate comparison than angle/area.
+
+**Cleveland & McGill's Perceptual Hierarchy (most to least accurate):**
+1. Position along common scale
+2. Position along non-aligned scales
+3. Length
+4. Angle/Slope
+5. Area
+6. Volume
+7. Color hue
+8. Color saturation
+
+**Implication:** Chart type choice directly determines user accuracy in extracting insights.
+
+**Mental model:** Different charts are tools for different jobs - bar chart is like precision calipers (accurate comparison), pie chart is like eyeballing (rough proportion sense).
+
+---
+
+### WHAT to Apply
+
+#### Task-to-Chart Mapping
+
+**User Task: Compare Values**
+
+**Best choice:** Bar chart (horizontal or vertical)
+- **Why:** Position/length encoding (top of hierarchy)
+- **Enables:** Precise magnitude comparison, easy ranking
+- **Example:** Comparing sales across 6 regions
+
+**Avoid:** Pie chart
+- **Why:** Angle/area encoding (lower accuracy)
+- **Problem:** Difficult to judge which slice is larger when differences are subtle
+
+**Application rule:**
+```
+For precise comparison → bar chart with common baseline
+Sort descending for easy ranking
+Add data labels for exact values (dual coding)
+```
+
+---
+
+**User Task: Show Trend Over Time**
+
+**Best choice:** Line chart
+- **Why:** Position along time axis shows progression naturally
+- **Enables:** Pattern detection (rising, falling, cyclical), slope perception
+- **Example:** Monthly revenue over 2 years
+
+**Avoid:** Bar chart for trends (acceptable but line is clearer), stacked area (hard to compare non-bottom series)
+
+**Application rule:**
+```
+Time always on x-axis (left to right)
+Use line for continuous data, bar for discrete periods
+Limit to 5-7 lines max (more becomes tangled mess)
+Annotate significant events ("Product launch Q2")
+```
+
+---
+
+**User Task: Understand Distribution**
+
+**Best choice:** Histogram or box plot
+- **Why:** Shows shape (normal, skewed, bimodal), spread, outliers
+- **Enables:** Pattern recognition (is data normally distributed?), outlier identification
+- **Example:** Distribution of customer order values
+
+**Avoid:** Pie charts (can't show distribution), bar charts of individual values (too granular)
+
+**Application rule:**
+```
+Histogram: Choose appropriate bin width (too narrow = noise, too wide = hide patterns)
+Box plot: Shows median, quartiles, outliers clearly
+Include sample size in label for context
+```
+
+---
+
+**User Task: Show Part-to-Whole Relationship**
+
+**Acceptable choice:** Pie chart (BUT only if ≤5 slices and differences clear)
+- **Why:** Circular metaphor intuitive for "whole"
+- **Limitations:** Hard to judge angles, tiny slices unreadable
+
+**Better choice:** Stacked bar chart or treemap
+- **Why:** Position/length still more accurate than angle
+- **Enables:** Easier comparison of parts
+
+**Application rule:**
+```
+If using pie: ≤5 slices, sort descending, label percentages directly
+Better: Stacked bar (compare lengths) or treemap (hierarchical parts)
+Always ask: "Do users need precise comparison?" → If yes, avoid pie
+```
+
+---
+
+**User Task: Find Outliers or Clusters**
+
+**Best choice:** Scatterplot
+- **Why:** 2D position enables pattern detection, outliers pop out preattentively
+- **Enables:** Correlation visualization, cluster identification
+- **Example:** Relationship between marketing spend and revenue by product
+
+**Application rule:**
+```
+Add trend line if correlation expected
+Use color/shape for categorical third variable (max 5-7 categories)
+Label outliers with annotations
+Consider log scale if data spans orders of magnitude
+```
+
+---
+
+**User Task: Compare Multiple Variables**
+
+**Best choice:** Small multiples (repeated chart structure)
+- **Why:** Consistent structure enables pattern comparison across conditions
+- **Enables:** Seeing how patterns change by category
+- **Example:** Monthly sales trends for each product category (separate line chart per category)
+
+**Application rule:**
+```
+Keep axes consistent across multiples for fair comparison
+Arrange in logical order (by average, alphabetically, geographically)
+Limit to 6-12 multiples (more requires pagination)
+Highlight one for focus if needed
+```
+
+---
+
+## Why Dashboard Design Matters
+
+### WHY This Matters
+
+**Core insight:** Dashboards combine many visualizations competing for limited attention - without clear hierarchy and grouping, users experience cognitive overload.
+
+**Problems dashboards solve:**
+- At-a-glance status monitoring
+- Quick decision-making
+- Pattern detection across metrics
+
+**Cognitive challenges:**
+- Information density overwhelming working memory
+- No clear entry point (where to look first?)
+- Related metrics not visually grouped
+- Excessive scrolling breaks mental model
+
+**Mental model:** Dashboard is like airplane cockpit - instruments grouped by system, critical alerts preattentively salient, most important gauges in pilot's direct view.
+
+---
+
+### WHAT to Apply
+
+#### Visual Hierarchy for Dashboards
+
+**Principle:** Establish clear focal point with size, position, and contrast
+
+**Application pattern:**
+
+**Primary KPIs (3-4 max):**
+```
+- Position: Top-left (F-pattern start)
+- Size: Large numbers (36-48px)
+- Style: Bold, high contrast
+- Purpose: "What's the current status?" answered in 5 seconds
+```
+
+**Secondary Metrics (5-10):**
+```
+- Position: Below or right of primary KPIs
+- Size: Medium (18-24px)
+- Grouping: Clustered by relationship (all conversion metrics together)
+- Purpose: Supporting detail for primary KPIs
+```
+
+**Tertiary/Details:**
+```
+- Position: Lower sections or drill-down
+- Size: Smaller (12-16px)
+- Access: Details on demand (click to expand)
+- Purpose: Deep investigation, not monitoring
+```
+
+**Example:** E-commerce dashboard - Primary KPIs top-left (revenue, conversion, users), secondary metrics mid (channels, products), tertiary bottom (details, history).
+
+---
+
+#### Gestalt Grouping for Clarity
+
+**Principle:** Use proximity, similarity, and whitespace to show relationships
+
+**Proximity:** Related metrics close, unrelated separated by whitespace
+**Similarity:** Consistent styling (same charts styled same way, color encoding consistent)
+**Example:** Traffic panel (sessions, pageviews, bounce), Conversion panel (rate, revenue, AOV) separated by whitespace, red for errors throughout
+
+---
+
+#### Chunking for Working Memory
+
+**Principle:** Limit concurrent visualizations to 4±1 major groups
+
+**Application rule:** Group >15 metrics into 3-5 categories, each with 3-5 metrics max = 9-25 metrics organized into 4±1 chunks (fits working memory).
+
+---
+
+#### Preattentive Salience for Alerts
+
+**Principle:** Use red color ONLY for threshold violations requiring immediate action
+
+**Application rule:** Normal = gray, alert = red (critical only). Avoid red for all negatives (causes alert fatigue). Example: Revenue down 2% = gray, down 15% = red threshold violation.
+
+---
+
+#### Data-Ink Ratio Maximization
+
+**Principle:** Remove decorative elements; maximize ink showing actual data
+
+**Remove:** Heavy gridlines, 3D effects, gradients, excessive decimals, decorative icons, chart borders
+**Keep:** Data (points/lines/bars), minimal axes, direct labels, meaningful annotations
+
+---
+
+## Why Progressive Disclosure Matters
+
+### WHY This Matters
+
+**Core insight:** Users fear getting lost in complex data exploration - progressive disclosure (overview first, zoom/filter, then details) provides safety net and reduces cognitive load.
+
+**Shneiderman's Mantra:** "Overview first, zoom and filter, then details on demand"
+
+**Benefits:**
+- Reduces initial cognitive load (don't show everything at once)
+- Provides context before detail (prevents disorientation)
+- Enables personalized investigation (users drill into what they care about)
+- Lowers anxiety (visible state shows "where am I", undo provides safety)
+
+**Mental model:** Like Google Maps - start with full map view (overview), zoom to neighborhood (filter), click building for details (details on demand).
+
+---
+
+### WHAT to Apply
+
+#### Overview Level
+
+**Purpose:** Provide context and entry point
+
+**Design principles:**
+```
+Show: Overall pattern, main trends, big picture
+Hide: Granular details, outliers (show in drill-down)
+Enable: Quick understanding of "what's the story here?"
+```
+
+**Example:**
+```
+Sales Dashboard Overview:
+- Total sales number (aggregated)
+- Trend line (last 90 days)
+- Top 3 performing regions (summary)
+User understands: "Sales are up 12% this quarter, West region leading"
+```
+
+---
+
+#### Filter/Zoom Level
+
+**Purpose:** Focus on subset of interest
+
+**Design principles:**
+```
+Show: Filtered results clearly
+Externalize: Active filters as visible chips/tags (recognition, not recall)
+Enable: Easy modification (click chip to remove filter)
+Provide: Clear "Reset all filters" option
+```
+
+**Example:**
+```
+User clicks "West region" from overview:
+- Dashboard updates to show only West region data
+- Visible chip at top: "Region: West" with X to remove
+- Breadcrumb: "All Regions > West"
+- "Reset" button returns to overview
+User sees: "I'm viewing West region data, can easily get back"
+```
+
+---
+
+#### Details on Demand Level
+
+**Purpose:** Reveal specifics only when needed
+
+**Design principles:**
+```
+Trigger: Hover, click, or expand action (not visible by default)
+Show: Granular data, additional metrics, raw numbers
+Position: Tooltip, modal, or expandable section (doesn't disrupt main view)
+```
+
+**Example:**
+```
+User hovers over data point on trend line:
+- Tooltip appears: "June 15, 2024: $45,234 sales, 234 orders, $193 AOV"
+- User moves mouse away: Tooltip disappears
+- Main chart unchanged (not cluttered with all this detail by default)
+```
+
+---
+
+#### State Visibility
+
+**Principle:** Always show current navigation state - don't make users remember
+
+**Critical state to externalize:**
+```
+✓ Active filters (as removable chips)
+✓ Current zoom level or time range
+✓ Drilled-down path (breadcrumbs)
+✓ Sorting/grouping applied
+✓ Comparison baseline (if comparing to previous period)
+```
+
+**Example implementation:**
+```
+Dashboard header always shows:
+- Time range: "Last 30 days" (clickable to change)
+- Filters: [Region: West] [Product: Widget] (each with X to remove)
+- Comparison: "vs. previous 30 days" (toggle on/off)
+- Breadcrumb: "Overview > West > Widget Sales"
+
+User never wonders: "What am I looking at? How did I get here?"
+```
+
+---
+
+## Why Narrative Visualization Matters
+
+### WHY This Matters
+
+**Core insight:** People naturally seek stories with cause-effect and chronology - structuring data as narrative chunks information meaningfully and aids retention.
+
+**Benefits of narrative structure:**
+- Easier to process (story arc vs heap of facts)
+- Better retention (narrative = memorable)
+- Guided interpretation (annotations prevent misunderstanding)
+- Emotional engagement (storytelling activates empathy)
+
+**Mental model:** Data journalism isn't a data dump - it's a guided tour where the designer leads readers to insights.
+
+---
+
+### WHAT to Apply
+
+#### Narrative Structure
+
+**Classic arc:** Context → Problem/Question → Data/Evidence → Resolution/Insight
+
+**Application to visualization:**
+
+**Context (What's the situation?):**
+```
+- Title that sets stage: "U.S. Solar Energy Adoption 2010-2024"
+- Subtitle: "How policy changes drove growth"
+- Brief intro text or annotation providing background
+```
+
+**Problem/Question (What are we investigating?):**
+```
+- Visual question posed: "Did tax incentives accelerate adoption?"
+- Annotation highlighting the question point on chart
+```
+
+**Data/Evidence (What does data show?):**
+```
+- Chart showing trend with clear inflection point
+- Annotation: "Tax credit introduced 2015" with arrow to spike
+- Supporting data: % increase after policy vs before
+```
+
+**Resolution/Insight (What did we learn?):**
+```
+- Conclusion annotation: "Adoption rate tripled post-incentive"
+- Implications: "States with stronger incentives saw faster growth"
+- Call-to-action or next question (optional)
+```
+
+---
+
+#### Annotation Strategy
+
+**Principle:** Guide attention to key insights; prevent misinterpretation
+
+**Types of annotations:**
+
+**Callout boxes:**
+```
+Purpose: Highlight main insight
+Position: Near relevant data point
+Style: Contrasting color or background
+Content: 1-2 sentences max ("Sales spiked 45% after campaign launch")
+```
+
+**Arrows/Lines:**
+```
+Purpose: Connect explanation to data
+Use: Point from text to specific data element
+Example: Arrow from "Product launch" text to spike in line chart
+```
+
+**Shaded regions:**
+```
+Purpose: Mark time periods or ranges
+Use: Highlight recession periods, policy changes, events
+Example: Gray shaded region "COVID-19 lockdown Mar-May 2020"
+```
+
+**Direct labels:**
+```
+Purpose: Replace legend lookups
+Use: Label lines/bars directly instead of requiring legend
+Example: Line chart with "North region" text next to the line (not legend box)
+```
+
+**Application rule:**
+```
+Annotate: Main insight (what users should notice)
+Annotate: Unusual events (explain outliers/anomalies)
+Don't annotate: Obvious patterns (if trend is clear, don't state "going up")
+Test: Can user grasp message without annotations? If not, add guidance
+```
+
+---
+
+#### Scrollytelling
+
+**Definition:** Visualization that updates or highlights aspects as user scrolls
+
+**Benefits:**
+- Maintains context (chart stays visible while story progresses)
+- Reveals complexity gradually (progressive disclosure in narrative form)
+- Engaging (interactive storytelling)
+
+**Application pattern:**
+
+**Example progression:** Start with full context (0%) → Highlight specific periods as user scrolls (33%, 66%) → End with full picture + projection (100%). Chart stays visible, smooth transitions, user can scroll back, provide skip option.
+

skills/cognitive-design/resources/educational-design.md

@@ -0,0 +1,424 @@
+# Educational Design
+
+This resource provides cognitive design principles for instructional materials, e-learning courses, and educational software.
+
+**Covered topics:**
+1. Multimedia learning principles (Mayer's principles)
+2. Dual coding theory
+3. Worked examples for skill acquisition
+4. Retrieval practice for retention
+5. Segmenting and coherence
+
+---
+
+## Why Educational Design Needs Cognitive Principles
+
+### WHY This Matters
+
+**Core insight:** Human learning is constrained by working memory limits and processing channels - instructional design must align with these cognitive realities.
+
+**Common problems:**
+- Dense slides with text paragraphs + complex diagrams (split attention)
+- Passive reading/watching (weak memory traces)
+- Decorative graphics competing with instructional content
+- Information overload (exceeds working memory)
+- No active recall opportunities (retrieval practice missing)
+
+**How cognitive principles help:**
+- **Dual coding:** Combine relevant visuals + words (two memory traces)
+- **Modalities principle:** Audio narration + visuals (splits load across channels)
+- **Coherence:** Remove extraneous content (frees working memory)
+- **Segmenting:** Break into chunks (fits working memory)
+- **Retrieval practice:** Active recall strengthens retention
+
+**Research foundation:** Richard Mayer's multimedia learning principles, John Sweller's cognitive load theory, Paivio's dual coding theory
+
+---
+
+## What You'll Learn
+
+**Five key areas:**
+
+1. **Multimedia Principles:** How to combine words, pictures, and audio effectively
+2. **Dual Coding:** Leveraging visual and verbal processing channels
+3. **Worked Examples:** Teaching complex procedures efficiently
+4. **Retrieval Practice:** Active recall for long-term retention
+5. **Segmenting & Coherence:** Chunking content and removing noise
+
+---
+
+## Why Multimedia Principles Matter
+
+### WHY This Matters
+
+**Core insight:** People have separate processing channels for visual and verbal information (Baddeley's working memory model) - proper multimedia design leverages both without overloading either.
+
+**Baddeley's Model:**
+- **Phonological loop:** Processes spoken/written words
+- **Visuospatial sketchpad:** Processes images/spatial information
+- **Central executive:** Coordinates both channels
+
+**Implication:** You can split cognitive load across channels, but wrong combinations cause interference.
+
+---
+
+### WHAT to Apply
+
+#### Multimedia Principle
+
+**Principle:** People learn better from words + pictures than words alone
+
+**Evidence:** Dual coding creates two memory traces instead of one (Paivio 1971, Mayer 2001)
+
+**Application:**
+```
+❌ Text-only explanation of process
+✓ Diagram showing process + text labels
+✓ Video demonstrating concept + verbal explanation
+
+Example: Teaching how heart pumps blood
+❌ Text description only
+✓ Animated diagram of heart + narration
+Result: 50-100% better retention with multimedia
+```
+
+**Caution:** Pictures must be RELEVANT to content
+```
+❌ Decorative stock photo of "learning" (generic student at desk)
+✓ Annotated diagram directly supporting concept
+```
+
+---
+
+#### Modality Principle
+
+**Principle:** Audio narration + visuals better than on-screen text + visuals
+
+**Why:** On-screen text + complex visual both compete for visual channel (overload)
+
+**Application:**
+```
+For animations or complex diagrams:
+❌ Dense on-screen text + diagram (visual channel overloaded)
+✓ Audio narration + diagram (splits load across channels)
+
+Example: Explaining software interface
+❌ Screenshot with text callouts explaining every feature
+✓ Screenshot + voiceover explaining each feature
+Result: Reduces cognitive load, improves comprehension
+```
+
+**Exception:** For static text-heavy content (articles, code), on-screen text is fine
+- Reader controls pace
+- Can re-read as needed
+- Narration unnecessary
+
+---
+
+#### Spatial Contiguity Principle
+
+**Principle:** Place text near corresponding graphics, not separated
+
+**Why:** Prevents holding one in memory while searching for the other (split attention)
+
+**Application:**
+```
+Diagram with labels:
+❌ Diagram on left, labels in legend/list on right (requires visual search + memory)
+✓ Labels directly ON or immediately adjacent to diagram parts
+
+Example: Anatomy diagram
+❌ Numbered diagram + separate key (1. Heart, 2. Lungs...)
+✓ Direct labels on organs + leader lines
+Result: Instant association, no memory burden
+```
+
+---
+
+#### Temporal Contiguity Principle
+
+**Principle:** Present corresponding narration and animation simultaneously, not sequentially
+
+**Why:** Holding one in memory while waiting for the other adds cognitive load
+
+**Application:**
+```
+Video lesson:
+❌ Show full animation, then explain what happened (requires remembering animation)
+✓ Narrate while animation plays (synchronized)
+
+Example: Chemistry reaction
+❌ Play full reaction animation → then explain
+✓ Narrate each step as it's happening
+Result: Immediate connection between visual and explanation
+```
+
+---
+
+#### Coherence Principle
+
+**Principle:** Exclude extraneous material - every element should support learning goal
+
+**What to remove:**
+```
+❌ Decorative graphics unrelated to content
+❌ Background music during instruction
+❌ Tangential interesting stories (if they don't support main point)
+❌ Excessive detail beyond learning objective
+
+✓ Keep: Relevant diagrams, supporting examples, meaningful practice
+```
+
+**Application:**
+```
+Slide design:
+Before (violates coherence):
+- Stock photo of "teamwork" (decorative)
+- Background music playing
+- Tangent about company history
+- Dense paragraph with extra details
+→ Cognitive overload from extraneous content
+
+After (coherent):
+- Diagram directly illustrating concept
+- No background music
+- Focus only on learning objective
+- Concise explanation
+→ All working memory devoted to learning
+```
+
+**Evidence:** Extraneous content can reduce learning by 30-50% (Mayer)
+
+---
+
+#### Signaling Principle
+
+**Principle:** Highlight essential material to guide attention
+
+**Application:**
+```
+✓ Bold key terms first time introduced
+✓ Headings/subheadings show structure
+✓ Arrows/circles on diagrams highlighting key elements
+✓ Verbal cues: "The most important point is..."
+✓ Color highlighting for critical information (use sparingly)
+
+Example: Complex diagram
+Without signaling: User must determine what's important
+With signaling: Arrows point to key mechanism, key part highlighted
+Result: Attention directed to essentials
+```
+
+---
+
+#### Segmenting Principle
+
+**Principle:** Break lessons into user-paced segments rather than continuous presentation
+
+**Why:** Fits working memory limits, allows consolidation before next chunk
+
+**Application:**
+```
+❌ 30-minute continuous lecture video (cognitive overload)
+✓ 6 segments × 5 minutes each, user clicks "Next" to continue
+
+Benefits:
+- Fits attention span
+- User controls pace (can pause/replay)
+- Breaks between segments allow consolidation
+- Can skip ahead if already know topic
+```
+
+**Optimal segment length:** 3-7 minutes per concept
+
+---
+
+## Why Dual Coding Matters
+
+### WHY This Matters
+
+**Dual Coding Theory (Paivio):** Humans process visual and verbal information through separate channels that can reinforce each other.
+
+**Benefits:**
+- Two memory traces instead of one (redundancy aids recall)
+- Visual channel good for spatial/concrete concepts
+- Verbal channel good for abstract/sequential concepts
+- Combined = stronger encoding
+
+---
+
+### WHAT to Apply
+
+**Application patterns:**
+
+**Text + Diagram:**
+```
+Example: Explaining data structure
+✓ Code snippet (verbal) + visual diagram of structure
+Result: Can recall via either channel
+```
+
+**Narration + Illustration:**
+```
+Example: Historical event
+✓ Illustrated timeline + audio story
+Result: Visual spatial memory + verbal narrative memory
+```
+
+**Caution - Avoid Redundant Text:**
+```
+❌ On-screen text identical to audio narration (doesn't add channel, just duplicates)
+✓ On-screen keywords/outline + audio detailed explanation
+```
+
+---
+
+## Why Worked Examples Matter
+
+### WHY This Matters
+
+**Core insight:** For novices learning procedures, worked examples reduce extraneous cognitive load and allow focus on solution patterns.
+
+**Problem-solving (novice):**
+- High cognitive load (exploring solution space)
+- Many wrong paths taken
+- Limited capacity for noticing patterns
+
+**Worked example (novice):**
+- Low extraneous load (no exploring)
+- All capacity devoted to understanding steps
+- Can study solution pattern
+
+**Application:** Transition from worked examples → partially completed examples → full problems
+
+---
+
+### WHAT to Apply
+
+**Worked Example Structure:**
+
+```
+Step 1: Problem statement
+Step 2: Solution shown with explanation of each step
+Step 3: Principle highlighted: "Notice how we..."
+
+Example: Math problem
+Instead of: "Solve this equation: 3x + 7 = 19"
+Better:
+  Problem: 3x + 7 = 19
+  Solution:
+    3x + 7 = 19
+    3x = 12       (subtract 7 from both sides - inverse operation)
+    x = 4         (divide both sides by 3 - inverse operation)
+  Principle: Use inverse operations to isolate variable
+```
+
+**Fading:**
+```
+Start: Full worked example
+Next: Partially worked (complete last step)
+Then: Start provided, learner completes middle + end
+Finally: Full problem-solving
+```
+
+---
+
+## Why Retrieval Practice Matters
+
+### WHY This Matters
+
+**Testing effect:** Practicing retrieval (active recall) creates stronger memory traces than passive re-reading.
+
+**Evidence:** Retrieval practice improves long-term retention by 30-50% vs passive study (Roediger & Karpicke)
+
+**Why it works:**
+- Active recall strengthens memory pathways
+- Identifies gaps in knowledge (metacognitive benefit)
+- Desirable difficulty (requires effort = better encoding)
+
+---
+
+### WHAT to Apply
+
+**Application patterns:**
+
+**Embedded quizzes:**
+```
+After each segment: 2-3 questions testing key concepts
+✓ Multiple choice (forces retrieval)
+✓ Short answer (even better - must generate answer)
+✓ Immediate explanatory feedback (not just "correct/incorrect")
+
+Example:
+After video on Gestalt principles:
+Q: "Which principle explains why we see related items as grouped when they're placed close together?"
+A: Proximity principle
+Feedback: "Correct! Proximity is the tendency to group nearby elements. This is why we use whitespace to separate unrelated content."
+```
+
+**Spaced repetition:**
+```
+Immediate: Quiz at end of lesson
+1 day later: Review quiz
+1 week later: Cumulative quiz
+1 month later: Final assessment
+
+Spacing effect: Distributed practice beats massed practice
+```
+
+**Low-stakes practice:**
+```
+✓ Formative quizzes don't count toward grade (reduces anxiety)
+✓ Unlimited attempts (learning goal, not evaluation)
+✓ Explanatory feedback (teaching moment)
+```
+
+---
+
+## Why Segmenting & Coherence Matter
+
+### WHY This Matters
+
+**Segmenting:** Prevents cognitive overload by chunking within working memory limits
+
+**Coherence:** Eliminates extraneous load so all capacity devoted to learning
+
+**Together:** Essential for managing cognitive load in complex material
+
+---
+
+### WHAT to Apply
+
+**Segmenting strategies:**
+
+```
+30-minute topic divided into:
+- Segment 1 (5 min): Concept introduction + first example
+- Pause (user clicks next)
+- Segment 2 (5 min): Second example + principle
+- Pause
+- Segment 3 (5 min): Practice problem
+- Pause
+- Segment 4 (5 min): Application to real scenario
+- Pause
+- Segment 5 (5 min): Summary + quiz
+
+Benefits: Working memory not overloaded, consolidation between segments
+```
+
+**Coherence strategies:**
+
+```
+Remove:
+❌ Decorative stock photos
+❌ Background music
+❌ Tangential fun facts (if they don't support learning objective)
+❌ Overly detailed explanations beyond scope
+
+Keep:
+✓ Relevant diagrams supporting concept
+✓ Concrete examples illustrating principle
+✓ Practice problems applying knowledge
+✓ Summaries reinforcing key points
+```
+

skills/cognitive-design/resources/evaluation-rubric.json

@@ -0,0 +1,83 @@
+{
+  "criteria": [
+    {
+      "name": "Completeness",
+      "description": "Are all required components present and comprehensive?",
+      "scores": {
+        "1": "Major components missing - skill has significant gaps in coverage",
+        "2": "Several important components missing or incomplete - limited utility",
+        "3": "Core components present but some supporting elements missing - adequate coverage",
+        "4": "Nearly complete with only minor gaps - good comprehensive coverage",
+        "5": "Exceptionally complete - all core and supporting components present with depth"
+      }
+    },
+    {
+      "name": "Clarity",
+      "description": "Are instructions clear, unambiguous, and easy to understand?",
+      "scores": {
+        "1": "Instructions confusing or ambiguous - difficult to follow",
+        "2": "Some clarity but significant ambiguity remains - requires interpretation",
+        "3": "Generally clear with occasional ambiguity - mostly understandable",
+        "4": "Clear and well-explained with minimal ambiguity - easy to follow",
+        "5": "Crystal clear with excellent explanations and examples - no ambiguity"
+      }
+    },
+    {
+      "name": "Actionability",
+      "description": "Can the skill be followed step-by-step and applied in practice?",
+      "scores": {
+        "1": "Theoretical only - no actionable steps or practical guidance",
+        "2": "Limited actionability - some steps but difficult to apply",
+        "3": "Adequately actionable - can be followed with some effort",
+        "4": "Highly actionable - clear steps and practical application guidance",
+        "5": "Exceptionally actionable - detailed steps, examples, and immediate applicability"
+      }
+    },
+    {
+      "name": "Structure",
+      "description": "Is the skill logically organized with clear navigation?",
+      "scores": {
+        "1": "Poorly organized - difficult to navigate, no clear structure",
+        "2": "Weak organization - some structure but hard to find information",
+        "3": "Adequately organized - logical structure, acceptable navigation",
+        "4": "Well organized - clear structure and easy navigation",
+        "5": "Exceptionally organized - intuitive structure, excellent navigation, linked resources"
+      }
+    },
+    {
+      "name": "Examples",
+      "description": "Are sufficient concrete examples provided to illustrate concepts?",
+      "scores": {
+        "1": "No examples provided - purely theoretical",
+        "2": "Minimal examples - insufficient to illustrate concepts clearly",
+        "3": "Adequate examples - covers main concepts with at least one example each",
+        "4": "Good examples - multiple concrete illustrations across most concepts",
+        "5": "Excellent examples - comprehensive concrete illustrations for all major concepts"
+      }
+    },
+    {
+      "name": "Triggers",
+      "description": "Is 'when to use' clearly defined with specific trigger conditions?",
+      "scores": {
+        "1": "No trigger conditions specified - unclear when to use",
+        "2": "Vague triggers - difficult to know when skill applies",
+        "3": "Adequate triggers - general guidance on when to use",
+        "4": "Clear triggers - specific conditions and scenarios well-defined",
+        "5": "Excellent triggers - comprehensive when/when-not guidance with concrete scenarios"
+      }
+    },
+    {
+      "name": "Cognitive Foundation",
+      "description": "Are cognitive psychology principles well-explained and properly applied?",
+      "scores": {
+        "1": "No cognitive foundation - purely prescriptive rules without explanation",
+        "2": "Weak cognitive foundation - limited explanation of underlying principles",
+        "3": "Adequate cognitive foundation - basic principles explained",
+        "4": "Strong cognitive foundation - principles well-explained with research backing",
+        "5": "Exceptional cognitive foundation - deep principles, research citations, WHY clearly explained"
+      }
+    }
+  ],
+  "threshold": 3.5,
+  "passing_note": "Average score must be ≥ 3.5 for skill to be considered production-ready. Scores below 3 in any individual criterion require revision before deployment."
+}

skills/cognitive-design/resources/evaluation-tools.md

@@ -0,0 +1,411 @@
+# Evaluation Tools
+
+This resource provides systematic checklists and frameworks for evaluating designs against cognitive principles.
+
+**Tools covered:**
+1. Cognitive Design Checklist (general interface/visualization evaluation)
+2. Visualization Audit Framework (4-criteria data visualization quality assessment)
+
+---
+
+## Why Systematic Evaluation
+
+### WHY This Matters
+
+**Core insight:** Cognitive design has multiple dimensions - visibility, hierarchy, chunking, consistency, feedback, memory support, integrity. Ad-hoc review often misses issues in one or more dimensions.
+
+**Benefits of systematic evaluation:**
+- **Comprehensive coverage:** Ensures all cognitive principles checked
+- **Objective assessment:** Reduces subjective bias
+- **Catches issues early:** Before launch or during design critiques
+- **Team alignment:** Shared criteria for quality
+- **Measurable improvement:** Track fixes over time
+
+**Mental model:** Like a pre-flight checklist for pilots - systematically verify all critical systems before takeoff.
+
+Without systematic evaluation: missed cognitive issues, inconsistent quality, user confusion that could have been prevented.
+
+**Use when:**
+- Conducting design reviews/critiques
+- Evaluating existing designs for improvement
+- Quality assurance before launch
+- Diagnosing why design feels "off"
+- Teaching/mentoring cognitive design
+
+---
+
+## What You'll Learn
+
+**Two complementary tools:**
+
+**Cognitive Design Checklist:** General-purpose evaluation for any interface, visualization, or content
+- Quick questions across 6 dimensions
+- Suitable for any design context
+- 10-15 minutes for thorough review
+
+**Visualization Audit Framework:** Specialized 4-criteria assessment for data visualizations
+- Clarity, Efficiency, Integrity, Aesthetics
+- Systematic quality scoring
+- 15-30 minutes depending on complexity
+
+---
+
+## Why Cognitive Design Checklist
+
+### WHY This Matters
+
+**Purpose:** Catch glaring cognitive problems before they reach users.
+
+**Coverage areas:**
+1. Visibility & Comprehension (can users see and understand?)
+2. Visual Hierarchy (what gets noticed first?)
+3. Chunking & Organization (fits working memory?)
+4. Simplicity & Clarity (extraneous elements removed?)
+5. Memory Support (state externalized?)
+6. Feedback & Interaction (immediate responses?)
+7. Consistency (patterns maintained?)
+8. Scanning Patterns (layout leverages F/Z-pattern?)
+
+**Mental model:** Like a doctor's diagnostic checklist - systematically check each vital sign.
+
+---
+
+### WHAT to Check
+
+#### 1. Visibility & Immediate Comprehension
+
+**Goal:** Core message/purpose graspable in ≤5 seconds
+
+**Checklist:**
+- [ ] Can users identify the purpose/main message within 5 seconds? (5-second test)
+- [ ] Is important information visible without scrolling (above fold)?
+- [ ] Is text/content legible? (sufficient size, contrast, line length)
+- [ ] Are interactive elements distinguishable from static content?
+
+**Test:** 5-second test (show design, ask what they remember). **Pass:** Identify purpose. **Fail:** Remember decoration or miss point.
+**Common failures:** Cluttered layout, poor contrast, content buried below fold.
+**Fix priorities:** CRITICAL (contrast), HIGH (5-second clarity), MEDIUM (hierarchy)
+
+---
+
+#### 2. Visual Hierarchy
+
+**Goal:** Users can distinguish primary vs secondary vs tertiary content
+
+**Checklist:**
+- [ ] Is visual hierarchy clear? (size, contrast, position differentiate importance)
+- [ ] Do headings/labels form clear levels? (H1 > H2 > H3 > body)
+- [ ] Does design pass "squint test"? (important elements still visible when blurred)
+- [ ] Are calls-to-action visually prominent?
+
+**Test:** Squint test (blur design). **Pass:** Important elements visible when blurred. **Fail:** Everything same weight.
+**Common failures:** Everything same size, primary CTA not distinguished, decoration more prominent than data.
+**Fix priorities:** HIGH (primary not prominent), MEDIUM (heading hierarchy), LOW (minor adjustments)
+
+---
+
+#### 3. Chunking & Organization
+
+**Goal:** Information grouped to fit working memory capacity (4±1 chunks, max 7)
+
+**Checklist:**
+- [ ] Are long lists broken into categories? (≤7 items per unbroken list)
+- [ ] Are related items visually grouped? (proximity, backgrounds, whitespace)
+- [ ] Is navigation organized into logical categories? (≤7 top-level items)
+- [ ] Are form fields grouped by relationship? (personal info, account, preferences)
+
+**Test:** Count ungrouped items. **Pass:** ≤7 items or clear grouping. **Fail:** >7 items ungrouped.
+**Common failures:** 15+ flat navigation, 30-field ungrouped form, 20 equal-weight metrics.
+**Fix priorities:** CRITICAL (>10 ungrouped), HIGH (7-10 ungrouped), MEDIUM (clearer groups)
+
+---
+
+#### 4. Simplicity & Clarity
+
+**Goal:** Every element serves user goal; extraneous elements removed
+
+**Checklist:**
+- [ ] Can you justify every visual element? (Does it convey information or improve usability?)
+- [ ] Is data-ink ratio high? (maximize ink showing data, minimize decoration)
+- [ ] Are decorative elements eliminated? (chartjunk, unnecessary lines, ornaments)
+- [ ] Is terminology familiar or explained? (no unexplained jargon)
+
+**Test:** Point to each element, ask "What purpose?" **Pass:** Every element justified. **Fail:** Decorative/unclear elements.
+**Common failures:** Chartjunk (3D, backgrounds, excess gridlines), jargon, redundant elements.
+**Fix priorities:** HIGH (decoration competing with data), MEDIUM (unexplained terms), LOW (minor simplification)
+
+---
+
+#### 5. Memory Support
+
+**Goal:** Users don't need to remember what could be shown (recognition over recall)
+
+**Checklist:**
+- [ ] Is current system state visible? (active filters, current page, progress through flow)
+- [ ] Are navigation breadcrumbs provided? (where am I, how did I get here)
+- [ ] For multi-step processes, is progress shown? (wizard step X of Y)
+- [ ] Are options presented rather than requiring recall? (dropdowns vs typed commands)
+
+**Test:** Identify what users must remember. Ask "Could this be shown?" **Pass:** State visible. **Fail:** Relying on memory.
+**Common failures:** No active filter indication, no progress indicator, hidden state.
+**Fix priorities:** CRITICAL (lost in flow), HIGH (critical state invisible), MEDIUM (minor memory aids)
+
+---
+
+#### 6. Feedback & Interaction
+
+**Goal:** Every action gets immediate, clear feedback
+
+**Checklist:**
+- [ ] Do all interactive elements provide immediate feedback? (hover states, click feedback)
+- [ ] Are loading states shown? (spinners, progress bars for waits >1 second)
+- [ ] Do form fields validate inline? (immediate feedback, not after submit)
+- [ ] Are error messages contextual? (next to problem, not top of page)
+- [ ] Are success confirmations shown? ("Saved", checkmarks)
+
+**Test:** Click/interact. **Pass:** Feedback within 100ms. **Fail:** No feedback or delayed >1s without indicator.
+**Common failures:** No hover states, no loading indicator, errors not contextual, no success confirmation.
+**Fix priorities:** CRITICAL (no feedback for critical actions), HIGH (delayed without loading), MEDIUM (missing hover)
+
+---
+
+#### 7. Consistency
+
+**Goal:** Repeated patterns throughout (terminology, layout, interactions, visual style)
+
+**Checklist:**
+- [ ] Is terminology consistent? (same words for same concepts)
+- [ ] Are UI patterns consistent? (buttons, links, inputs styled uniformly)
+- [ ] Is color usage consistent? (red = error, green = success throughout)
+- [ ] Are interaction patterns predictable? (click/tap behavior consistent)
+
+**Test:** List similar elements, check consistency. **Pass:** Identical styling/behavior. **Fail:** Unjustified variations.
+**Common failures:** Inconsistent terminology ("Email" vs "E-mail"), visual inconsistency (button styles vary), semantic inconsistency (red means error and negative).
+**Fix priorities:** HIGH (terminology), MEDIUM (visual styling), LOW (minor patterns)
+
+---
+
+#### 8. Scanning Patterns
+
+**Goal:** Layout leverages predictable F-pattern or Z-pattern scanning
+
+**Checklist:**
+- [ ] Is primary content positioned top-left? (where scanning starts)
+- [ ] For text-heavy content, does layout follow F-pattern? (top horizontal, then down left, short mid horizontal)
+- [ ] For visual-heavy content, does layout follow Z-pattern? (top-left to top-right, diagonal to bottom-left, then bottom-right)
+- [ ] Are terminal actions positioned bottom-right? (where scanning ends)
+
+**Test:** Trace eye movement (F/Z pattern). **Pass:** Critical elements on path. **Fail:** Important content off path.
+**Common failures:** Primary CTA bottom-left (off Z-pattern), key info middle-right (off F-pattern), patterns ignored.
+**Fix priorities:** MEDIUM (CTA off path), LOW (secondary optimization)
+
+---
+
+## Why Visualization Audit Framework
+
+### WHY This Matters
+
+**Purpose:** Comprehensive quality assessment for data visualizations across four independent dimensions.
+
+**Key insight:** Visualization quality requires success on ALL four criteria - high score on one doesn't compensate for failure on another.
+
+**Four Criteria:**
+1. **Clarity:** Immediately understandable and unambiguous
+2. **Efficiency:** Minimal cognitive effort to extract information
+3. **Integrity:** Truthful and free from misleading distortions
+4. **Aesthetics:** Visually pleasing and appropriate
+
+**Mental model:** Like evaluating a car - needs to be safe (integrity), functional (efficiency), easy to use (clarity), and pleasant (aesthetics). Missing any dimension makes it poor overall.
+
+**Use when:**
+- Evaluating data visualizations (charts, dashboards, infographics)
+- Choosing between visualization alternatives
+- Quality assurance before publication
+- Diagnosing why visualization isn't working
+
+---
+
+### WHAT to Audit
+
+#### Criterion 1: Clarity
+
+**Question:** Is visualization immediately understandable and unambiguous?
+
+**Checklist:**
+- [ ] Is main message obvious or clearly annotated?
+- [ ] Are axes labeled with units?
+- [ ] Is legend clear and necessary? (or use direct labels if possible)
+- [ ] Is title descriptive? (conveys what's being shown)
+- [ ] Are annotations used to guide interpretation?
+- [ ] Is chart type appropriate for message?
+
+**5-Second Test:**
+- Show visualization for 5 seconds
+- Ask: "What's the main point?"
+  - **Pass:** Correctly identify main insight
+  - **Fail:** Confused or remember decorative elements instead
+
+**Scoring:**
+- **5 (Excellent):** Main message graspable in <5 seconds, perfectly labeled
+- **4 (Good):** Clear with minor improvements needed (e.g., better title)
+- **3 (Adequate):** Understandable but requires effort
+- **2 (Needs work):** Ambiguous or missing critical labels
+- **1 (Poor):** Incomprehensible
+
+---
+
+#### Criterion 2: Efficiency
+
+**Question:** Can users extract information with minimal cognitive effort?
+
+**Checklist:**
+- [ ] Are encodings appropriate for task? (position/length for comparison, not angle/area)
+- [ ] Is chart type matched to user task? (compare → bar, trend → line, distribution → histogram)
+- [ ] Is comparison easy? (common baseline, aligned scales)
+- [ ] Is cross-referencing minimized? (direct labels instead of legend lookups)
+- [ ] Are cognitive shortcuts enabled? (sorting by value, highlighting key points)
+
+**Encoding Check:**
+- Identify user task (compare, see trend, find outliers)
+- Check encoding against Cleveland & McGill hierarchy
+  - **Pass:** Position/length used for precise comparisons
+  - **Fail:** Angle/area/color used when position would work better
+
+**Scoring:**
+- **5 (Excellent):** Optimal encoding, zero wasted cognitive effort
+- **4 (Good):** Appropriate with minor inefficiencies
+- **3 (Adequate):** Works but more effort than necessary
+- **2 (Needs work):** Poor encoding choice (pie when bar would be better)
+- **1 (Poor):** Wrong chart type for task
+
+---
+
+#### Criterion 3: Integrity
+
+**Question:** Is visualization truthful and free from misleading distortions?
+
+**Checklist:**
+- [ ] Do axes start at zero (or clearly note truncation)?
+- [ ] Are scale intervals uniform?
+- [ ] Is data complete? (not cherry-picked dates hiding context)
+- [ ] Are comparisons fair? (same scale for compared items)
+- [ ] Is context provided? (baselines, historical comparison, benchmarks)
+- [ ] Are limitations noted? (sample size, data source, margin of error)
+
+**Integrity Tests:**
+1. **Axis test:** Does y-axis start at zero for bar charts? If not, is truncation clearly noted?
+   - **Pass:** Zero baseline or explicit truncation note
+   - **Fail:** Truncated axis exaggerating differences without disclosure
+
+2. **Completeness test:** Is full relevant time period shown? Or cherry-picked subset?
+   - **Pass:** Complete data with context
+   - **Fail:** Selective dates hiding broader trend
+
+3. **Fairness test:** Are compared items on same scale?
+   - **Pass:** Common scale enables fair comparison
+   - **Fail:** Dual-axis manipulation creates false correlation
+
+**Scoring:**
+- **5 (Excellent):** Completely honest, full context provided
+- **4 (Good):** Honest with minor context improvements possible
+- **3 (Adequate):** Not misleading but could provide more context
+- **2 (Needs work):** Distortions present (truncated axis, cherry-picked data)
+- **1 (Poor):** Actively misleading (severe distortions, no context)
+
+**CRITICAL:** Scores below 3 on integrity are unacceptable - fix immediately
+
+---
+
+#### Criterion 4: Aesthetics
+
+**Question:** Is visualization visually pleasing and appropriate for context?
+
+**Checklist:**
+- [ ] Is visual design professional and polished?
+- [ ] Is color palette appropriate? (not garish, suits content tone)
+- [ ] Is whitespace used effectively? (not cramped, not wasteful)
+- [ ] Are typography choices appropriate? (readable, professional)
+- [ ] Does style match context? (serious for finance, friendly for consumer)
+
+**Important:** Aesthetics should NEVER undermine clarity or integrity
+
+**Scoring:**
+- **5 (Excellent):** Beautiful and appropriate, enhances engagement
+- **4 (Good):** Pleasant and professional
+- **3 (Adequate):** Acceptable, not ugly but not polished
+- **2 (Needs work):** Amateurish or inappropriate style
+- **1 (Poor):** Ugly or completely inappropriate
+
+**Trade-off Note:** If forced to choose, prioritize Clarity and Integrity over Aesthetics
+
+---
+
+#### Using the 4-Criteria Framework
+
+**Process:**
+
+**Step 1: Evaluate each criterion independently**
+- Score Clarity (1-5)
+- Score Efficiency (1-5)
+- Score Integrity (1-5)
+- Score Aesthetics (1-5)
+
+**Step 2: Calculate average**
+- Average score = (Clarity + Efficiency + Integrity + Aesthetics) / 4
+- **Pass threshold:** ≥3.5 average
+- **Critical failures:** Any individual score <3 requires attention
+
+**Step 3: Identify weakest dimension**
+- Which criterion has lowest score?
+- This is your primary improvement target
+
+**Step 4: Prioritize fixes**
+1. **CRITICAL:** Integrity < 3 (fix immediately - misleading is unacceptable)
+2. **HIGH:** Clarity or Efficiency < 3 (users can't understand or use it)
+3. **MEDIUM:** Aesthetics < 3 (affects engagement)
+4. **LOW:** Scores 3-4 (optimization, not critical)
+
+**Step 5: Verify fixes don't harm other dimensions**
+- Example: Improving aesthetics shouldn't reduce clarity
+- Example: Improving efficiency shouldn't compromise integrity
+
+---
+
+## Examples of Evaluation in Practice
+
+### Example 1: Dashboard Review Using Checklist
+
+**Context:** Team dashboard with 20 metrics, users overwhelmed and missing alerts
+
+**Checklist Results:**
+- ❌ **Visibility:** Too cluttered, 20 equal-weight metrics
+- ❌ **Hierarchy:** Everything same size, alerts not prominent
+- ❌ **Chunking:** 15 ungrouped metrics (exceeds working memory)
+- ❌ **Simplicity:** Chartjunk (gridlines, 3D, gradients)
+- ❌ **Memory:** No active filter indication
+- ✓ **Feedback:** Hover states, loading indicators present
+- ⚠️ **Consistency:** Mostly consistent, minor button variations
+- ❌ **Scanning:** Key KPI bottom-right (off F-pattern)
+
+**Fixes:** (1) Reduce to 3-4 primary KPIs top-left, group others. (2) Remove chartjunk, establish hierarchy. (3) Show active filters as chips. (4) Standardize buttons.
+
+**Outcome:** Users grasp status in 5 seconds, find alerts immediately
+
+---
+
+### Example 2: Bar Chart Audit Using 4 Criteria
+
+**Context:** Q4 sales bar chart for presentation
+
+**Audit Scores:**
+- **Clarity (4/5):** Clear title/labels, direct bar labels. Minor: Could annotate top performer.
+- **Efficiency (5/5):** Optimal position/length encoding, sorted descending, common baseline.
+- **Integrity (2/5 - CRITICAL):** ❌ Y-axis starts at 80 (exaggerates differences), ❌ No historical context.
+- **Aesthetics (4/5):** Clean, professional. Minor: Could use brand colors.
+
+**Average:** 3.75/5 (barely passes). **Critical issue:** Integrity <3 unacceptable.
+
+**Fixes:** (1) Start y-axis at zero or add break symbol + "Axis truncated" note. (2) Add Q3 baseline for context. (3) Annotate: "West region led Q4 with 23% increase."
+
+**After fixes:** Clarity 5/5, Efficiency 5/5, Integrity 5/5, Aesthetics 4/5 = **4.75/5 Excellent**
+

skills/cognitive-design/resources/frameworks.md

@@ -0,0 +1,479 @@
+# Design Frameworks
+
+This resource provides three systematic frameworks for structuring cognitive design thinking and decision-making.
+
+**Frameworks covered:**
+1. Cognitive Design Pyramid (hierarchical quality assessment)
+2. Design Feedback Loop (interaction cycles)
+3. Three-Layer Visualization Model (data communication fidelity)
+
+---
+
+## Why Use Frameworks
+
+### WHY This Matters
+
+Frameworks provide:
+- **Systematic structure** for design thinking (not ad-hoc)
+- **Complete coverage** across multiple dimensions
+- **Prioritization guidance** (what to fix first)
+- **Shared vocabulary** for team communication
+- **Repeatable process** applicable across projects
+
+**Mental model:** Like architectural blueprints - frameworks give structure to design decisions so nothing critical is forgotten.
+
+Without frameworks: inconsistent application of principles, missed dimensions, unclear priorities, reinventing approach each time.
+
+---
+
+##What You'll Learn
+
+Three complementary frameworks, each suited for different contexts:
+
+**Cognitive Design Pyramid:** When you need comprehensive multi-dimensional quality assessment
+
+**Design Feedback Loop:** When you're designing interactive interfaces and need to support user perception-action cycles
+
+**Three-Layer Visualization Model:** When you're creating data visualizations and need to ensure fidelity from data through interpretation
+
+---
+
+## Why Cognitive Design Pyramid
+
+### WHY This Matters
+
+**Core insight:** Design effectiveness depends on satisfying multiple needs in hierarchical sequence - perceptual clarity is foundation, enabling cognitive coherence, which enables emotional engagement, which enables behavioral outcomes.
+
+**Key principle:** Lower levels are prerequisites for higher levels:
+- If users can't perceive elements clearly → coherence impossible
+- If design isn't coherent → engagement suffers
+- If not engaging → behavior change fails
+
+**Mental model:** Like Maslow's hierarchy of needs - must satisfy foundational needs before higher-level needs matter.
+
+**Use when:**
+- Comprehensive design quality check needed
+- Diagnosing what level is failing
+- Prioritizing improvements (fix foundation first)
+- Evaluating entire user experience holistically
+
+---
+
+### WHAT to Apply
+
+#### The Pyramid (4 Tiers)
+
+```
+        ┌─────────────────────────┐
+        │ BEHAVIORAL ALIGNMENT    │ ← Peak: Guides actual user behavior
+        ├─────────────────────────┤
+        │ EMOTIONAL ENGAGEMENT    │ ← Higher: Motivates and doesn't frustrate
+        ├─────────────────────────┤
+        │ COGNITIVE COHERENCE     │ ← Middle: Makes logical sense
+        ├─────────────────────────┤
+        │ PERCEPTUAL EFFICIENCY   │ ← Base: Seen and registered correctly
+        └─────────────────────────┘
+```
+
+---
+
+#### Tier 1: Perceptual Efficiency (Foundation)
+
+**Goal:** Users can see and register all necessary elements clearly.
+
+**Checkpoints:**
+- [ ] Sufficient contrast for all text and key elements (WCAG AA minimum: 4.5:1 for body text, 3:1 for large text)
+- [ ] Visual hierarchy obvious (squint test - primary elements still visible when blurred)
+- [ ] No overwhelming clutter or visual noise (data-ink ratio high)
+- [ ] Typography legible (appropriate size, line height, line length)
+- [ ] Color distinguishable (not relying solely on hue for colorblind users)
+- [ ] Grouping perceivable (Gestalt principles applied)
+
+**Common failures:**
+- Low contrast text (gray on light gray)
+- Everything same visual weight (no hierarchy)
+- Chartjunk obscuring data
+- Text too small or lines too long
+
+**Fix priority:** HIGHEST - without perception, nothing else works
+
+**Example:** ❌ All metrics gray 12px → ✓ Primary KPIs 36px bold, secondary 18px gray
+
+---
+
+#### Tier 2: Cognitive Coherence (Comprehension)
+
+**Goal:** Information is organized to align with how users think and expect.
+
+**Checkpoints:**
+- [ ] Layout matches mental models and familiar patterns (standard UI conventions)
+- [ ] Terminology consistent throughout (same words for same concepts)
+- [ ] Navigation/flow logical and predictable (no mystery meat navigation)
+- [ ] Memory aids present (breadcrumbs, state indicators, progress bars)
+- [ ] Chunking within working memory capacity (≤7 items per group, ideally 4±1)
+- [ ] Recognition over recall (show options, don't require memorization)
+
+**Common failures:**
+- Inconsistent terminology confusing users
+- Non-standard UI patterns requiring re-learning
+- Hidden navigation or state
+- Unchunked long lists overwhelming memory
+
+**Fix priority:** HIGH - enables users to understand and navigate
+
+**Example:** ❌ 30 ungrouped fields, inconsistent labels → ✓ 4-step wizard, grouped fields, consistent terms, progress visible
+
+---
+
+#### Tier 3: Emotional Engagement (Motivation)
+
+**Goal:** Design feels pleasant and motivating, not frustrating or anxiety-inducing.
+
+**Checkpoints:**
+- [ ] Aesthetic quality appropriate for context (professional/friendly/serious)
+- [ ] Design feels pleasant to use (not frustrating)
+- [ ] Anxiety reduced (progress shown, undo available, clear next steps)
+- [ ] Tone matches user emotional state (encouraging for learning, calm for high-stress tasks)
+- [ ] Accomplishment visible (checkmarks, confirmations, completed states)
+
+**Common failures:**
+- Ugly or amateurish appearance reducing trust
+- Frustrating interactions causing stress
+- No reassurance in multi-step processes
+- Inappropriate tone (playful for serious tasks)
+
+**Fix priority:** MEDIUM - affects engagement and trust, but only after foundation solid
+
+**Why it matters:** Emotional state influences cognitive performance - pleasant affect improves problem-solving, stress narrows attention
+
+**Example:** ❌ Dense text, no progress, no encouragement → ✓ Friendly tone, progress bar, checkmarks, "You're almost done!"
+
+---
+
+#### Tier 4: Behavioral Alignment (Action)
+
+**Goal:** Design guides users toward desired behaviors and outcomes.
+
+**Checkpoints:**
+- [ ] Calls-to-action clear and prominent (primary action obvious)
+- [ ] Visual emphasis on actionable items (buttons stand out)
+- [ ] Key takeaways highlighted (not buried in text)
+- [ ] Ethical nudges toward good decisions (defaults favor user)
+- [ ] Success paths more accessible than failure paths
+
+**Common failures:**
+- Primary CTA not visually prominent
+- Actionable insights buried in data
+- Destructive actions too easy (no confirmation)
+- Defaults favor business over user
+
+**Fix priority:** MEDIUM-LOW - optimize after foundation, coherence, engagement work
+
+**Example:** ❌ Insights in footnotes, equal button sizes → ✓ Key insight top (large), "Take Action" prominent green, export secondary gray
+
+---
+
+#### Applying the Pyramid
+
+**Process:**
+1. **Assess bottom-up:** Evaluate T1 (see clearly?) → T2 (makes sense?) → T3 (pleasant?) → T4 (guides action?)
+2. **Identify weakest tier:** Where are most failures? Which blocks success?
+3. **Prioritize foundation-up:** Fix T1 first (enables everything), then T2, then T3/T4
+4. **Re-evaluate:** Check fixes don't break higher tiers, iterate until all pass
+
+---
+
+## Why Design Feedback Loop
+
+### WHY This Matters
+
+**Core insight:** Users don't passively consume interfaces - they actively engage in continuous perception-action-learning cycles.
+
+**Loop stages:** Perceive → Interpret → Decide → Act → Learn → (loop repeats)
+
+**Key principle:** Design must support every stage; break anywhere causes confusion or failure.
+
+**Mental model:** Like a conversation - user asks (via perception), interface answers (via display), user responds (via action), interface confirms (via feedback), understanding updates (learning).
+
+**Use when:**
+- Designing interactive interfaces (apps, dashboards, tools)
+- Ensuring each screen answers user's questions
+- Providing appropriate feedback for actions
+- Diagnosing where interaction breaks down
+
+---
+
+### WHAT to Apply
+
+#### The Loop (5 Stages)
+
+```
+┌──────────┐
+│ PERCEIVE │ → "What am I seeing?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│INTERPRET │ → "What does this mean?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│  DECIDE  │ → "What can I do next?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│   ACT    │ → "How do I do it?"
+└────┬─────┘
+     ↓
+┌──────────┐
+│  LEARN   │ → "What happened? Was it successful?"
+└────┬─────┘
+     ↓
+ (repeat)
+```
+
+---
+
+#### Stage 1: Perceive
+
+**User question:** "What am I seeing?"
+
+**Design must provide:**
+- [ ] Visibility of system status (current page, active state, what's happening)
+- [ ] Clear visual hierarchy (where to look first)
+- [ ] Salient critical elements (preattentive cues for important items)
+
+**Common failures:**
+- Hidden state (user doesn't know where they are)
+- No visual hierarchy (don't know what's important)
+- Loading without indicator (appears broken)
+
+**Example:** ❌ No active filter indication → ✓ Active filters shown as visible chips at top
+
+---
+
+#### Stage 2: Interpret
+
+**User question:** "What does this mean?"
+
+**Design must provide:**
+- [ ] Clear labels and context (explain what user is seeing)
+- [ ] Familiar terminology (or definitions for specialized terms)
+- [ ] Adequate context (why am I here, what are these options)
+- [ ] Visual encoding that matches meaning (charts appropriate for data type)
+
+**Common failures:**
+- Jargon or abbreviations without explanation
+- Missing context (chart without title/axes labels)
+- Unclear purpose of page/screen
+
+**Example:** ❌ No title, axes "X"/"Y", no units → ✓ "Q4 Sales by Region (thousands USD)", labeled axes, annotated events
+
+---
+
+#### Stage 3: Decide
+
+**User question:** "What can I do next?"
+
+**Design must provide:**
+- [ ] Available actions obvious (clear CTAs)
+- [ ] Choices not overwhelming (Hick's Law - limit options)
+- [ ] Recommended/default option suggested when appropriate
+- [ ] Consequences of choices clear (especially for destructive actions)
+
+**Common failures:**
+- Too many options causing paralysis
+- No guidance on what to do next
+- Unclear consequences ("Are you sure?" without explaining what happens)
+
+**Example:** ❌ 10 unclear buttons → ✓ Primary "Continue" prominent, secondary "Save Draft" gray, "Cancel" text link
+
+---
+
+#### Stage 4: Act
+
+**User question:** "How do I do it?"
+
+**Design must provide:**
+- [ ] Affordances clear (buttons look pressable, sliders look draggable)
+- [ ] Controls accessible (appropriate size/position per Fitts's Law)
+- [ ] Keyboard shortcuts available for power users
+- [ ] Constraints prevent invalid actions (disabled states, input masking)
+
+**Common failures:**
+- Unclear what's clickable (flat design with no affordances)
+- Tiny touch targets on mobile
+- No keyboard access
+- Allowing invalid inputs
+
+**Example:** ❌ Flat text, no interactive cue → ✓ Raised appearance, hover state, cursor→pointer, focus ring
+
+---
+
+#### Stage 5: Learn
+
+**User question:** "What happened? Was it successful?"
+
+**Design must provide:**
+- [ ] Immediate feedback for every action (< 100ms for responsiveness perception)
+- [ ] Confirmations for successful actions (checkmarks, "Saved" message, state change)
+- [ ] Clear error messages in context (next to problem, plain language)
+- [ ] Updated system state visible (if filter applied, data updates)
+
+**Common failures:**
+- No feedback (user clicks button, nothing visible happens)
+- Delayed feedback (loading without indication)
+- Generic errors ("Error occurred" without explanation)
+- Feedback hidden or dismissible before user sees it
+
+**Example:** ❌ Click → nothing visible → page maybe changes → ✓ Click → spinner → success message → confirmed transition
+
+---
+
+#### Applying the Feedback Loop
+
+**For each screen/interaction, ask:**
+
+1. **Perceive:** Can user see current state and what's important?
+2. **Interpret:** Will user understand what they're seeing?
+3. **Decide:** Are next actions clear and not overwhelming?
+4. **Act:** Are controls obvious and accessible?
+5. **Learn:** Will user get immediate, clear feedback?
+
+**Example: Login form**
+- **Perceive:** Fields visible, labels clear
+- **Interpret:** "Log in to your account" heading
+- **Decide:** "Log in" button obvious, "Forgot password?" link
+- **Act:** Focus states, clickable button, Enter submits
+- **Learn:** Spinner on submit, success→redirect, error→message next to field with red border
+
+---
+
+## Why Three-Layer Visualization Model
+
+### WHY This Matters
+
+**Core insight:** Effective data visualization requires success at three distinct layers - accurate data, appropriate visual encoding, and correct user interpretation. Failure at any layer breaks the entire communication chain.
+
+**Layers:** Data → Visual Encoding → Cognitive Interpretation
+
+**Key principle:** You can have perfect data with wrong chart type (encoding failure) or perfect chart with user misunderstanding (interpretation failure). All three must succeed.
+
+**Mental model:** Like a telephone game - message (data) must be transmitted (encoding) and received (interpretation) accurately or communication fails.
+
+**Use when:**
+- Creating any data visualization
+- Diagnosing why visualization isn't working
+- Choosing chart types
+- Validating user understanding
+
+---
+
+### WHAT to Apply
+
+#### Layer 1: Data
+
+**Question:** Is the underlying data accurate, complete, and relevant?
+
+**Checkpoints:**
+- [ ] Data quality verified (no errors, outliers investigated)
+- [ ] Complete dataset (not cherry-picked subset that misleads)
+- [ ] Relevant to question being answered (not tangential data)
+- [ ] Appropriate aggregation/granularity (not hiding or overwhelming with detail)
+- [ ] Time period representative (not artificially truncated to show desired trend)
+
+**Common failures:**
+- Garbage data → garbage visualization
+- Cherry-picked dates hiding broader context
+- Outliers distorting scale
+- Wrong metric for question
+
+**Fix:** Validate data quality before designing visualization
+
+**Example:** "Are sales improving?" ❌ Only last 3 months (hides 2-year decline) → ✓ 2-year trend with annotation: "Recent uptick after sustained decline"
+
+---
+
+#### Layer 2: Visual Encoding
+
+**Question:** Are visualization choices appropriate for the data type, user task, and perceptual capabilities?
+
+**Checkpoints:**
+- [ ] Chart type matches task (compare → bar, trend → line, distribution → histogram)
+- [ ] Encoding matches perceptual hierarchy (position > angle > area)
+- [ ] Axes scaled appropriately (start at zero for bars, or clearly note truncation)
+- [ ] Color usage correct (hue for categories, lightness for quantities)
+- [ ] Labels clear and sufficient (title, axes, units, legend if needed)
+
+**Common failures:**
+- Pie chart when bar chart would be clearer
+- Truncated axis exaggerating differences
+- Rainbow color scale for quantitative data
+- Missing units or context
+
+**Fix:** Match encoding to task using Cleveland & McGill hierarchy
+
+**Example:** Compare 6 regional sales. ❌ Pie chart (poor angle/area) → ✓ Bar chart (precise position/length)
+
+---
+
+#### Layer 3: Cognitive Interpretation
+
+**Question:** Will users correctly understand the message and draw valid conclusions?
+
+**Checkpoints:**
+- [ ] Main insight obvious or annotated (don't require users to discover it)
+- [ ] Context provided (baselines, comparisons, historical trends)
+- [ ] Audience knowledge level accommodated (annotations for novices)
+- [ ] Potential misinterpretations prevented (annotations clarifying what NOT to conclude)
+- [ ] Self-contained (doesn't require remembering distant information)
+
+**Common failures:**
+- Heap of data without guidance to key insight
+- Missing context (percentage without denominator, comparison without baseline)
+- Assumes expert knowledge novices lack
+- Spurious correlation without clarification
+
+**Fix:** Add titles, annotations, context; test with target users
+
+**Example:** Ice cream sales vs drowning deaths. ❌ No annotation (viewers assume causation) → ✓ "Both increase in summer (common cause), not causally related"
+
+---
+
+#### Applying the Three-Layer Model
+
+**Process:**
+1. **Validate data:** Check quality, completeness, relevance, outliers, time period, aggregation
+2. **Choose encoding:** Identify task → select chart type matching task + perceptual hierarchy → design axes, colors, labels → maximize data-ink
+3. **Support interpretation:** Add title conveying message → annotate insights → provide context → test with users → clarify misinterpretations
+4. **Iterate:** Fix weak layers, re-validate
+
+**Example: Sales dashboard**
+- **Data:** Complete 2-year sales, verified quality, identified 2 outlier months (note in viz)
+- **Encoding:** Task = trend + regional comparison. Line chart, distinct hue per region (limit 5), y-axis at zero "Sales (thousands USD)", time on x-axis
+- **Interpretation:** Title "Regional Sales Trends 2023-2024: Overall Growth with West Leading", annotate outliers ("Holiday promo Nov 2023", "Launch June 2024"), show previous year dotted baseline, tested with sales team
+- **Result:** Accurate data + appropriate encoding + correct interpretation = insight
+
+---
+
+## Choosing the Right Framework
+
+**Use Cognitive Design Pyramid when:**
+- Comprehensive multi-dimensional quality assessment needed
+- Diagnosing which aspect of design is failing
+- Prioritizing fixes (foundation → higher tiers)
+- Evaluating entire user experience
+
+**Use Design Feedback Loop when:**
+- Designing interactive interfaces
+- Ensuring each screen supports user questions
+- Providing appropriate feedback
+- Diagnosing where interaction breaks down
+
+**Use Three-Layer Model when:**
+- Creating data visualizations
+- Choosing chart types
+- Validating data quality through interpretation
+- Diagnosing visualization failures
+
+**Use multiple frameworks together for complete coverage**
+

skills/cognitive-design/resources/quick-reference.md

@@ -0,0 +1,300 @@
+# Quick Reference
+
+This resource provides rapid access to core cognitive design principles and quick validation checks.
+
+---
+
+## Why Quick Reference
+
+### WHY This Matters
+
+Quick references enable:
+- **Fast decision-making** during active design work
+- **Rapid validation** without deep dive into theory
+- **Team alignment** through shared heuristics
+- **Design advocacy** with memorable, citable principles
+
+**Mental model:** Like a cheat sheet or checklist for design decisions - quick lookups when you need them.
+
+Without quick reference: slowed workflow, inconsistent application, forgetting key principles under time pressure.
+
+---
+
+## What to Use
+
+### 20 Core Actionable Principles
+
+#### Attention & Perception
+
+1. **Selective Salience:** Use preattentive features (color, contrast, motion, size) sparingly for critical elements only; overuse overwhelms
+2. **Visual Hierarchy:** Organize by importance using size, contrast, position, spacing; guide attention along F-pattern or Z-pattern
+3. **Perceptual Grouping:** Use proximity (close = related), similarity (alike = grouped), continuity (aligned = connected), closure (mind fills gaps)
+4. **Figure-Ground Distinction:** Ensure clear separation between foreground content and background
+
+#### Memory & Cognition
+
+5. **Working Memory Respect:** Limit concurrent elements to 4±1 chunks; group related items; show context rather than requiring memorization
+6. **Recognition Over Recall:** Make options visible rather than requiring memory; show current state, breadcrumbs, available actions
+7. **Chunking Strategy:** Group related information into meaningful units (phone: 555-123-4567; navigation: categories not flat list)
+8. **Progressive Disclosure:** Reveal complexity gradually; show only what's immediately needed, provide details on demand
+
+#### Encoding & Communication
+
+9. **Encoding Hierarchy:** Use position/length for precise comparisons (bar charts), reserve angle/area/color for less critical distinctions
+10. **Data-Ink Maximization:** Remove decorative elements that don't convey information; maximize proportion showing actual data
+11. **Dual Coding:** Combine relevant visuals with text (two memory traces); use audio narration with complex visuals
+12. **Spatial Contiguity:** Place labels/annotations adjacent to content they describe; prevent split-attention
+
+#### Consistency & Standards
+
+13. **Pattern Consistency:** Use predictable, familiar patterns (standard icons, conventional layouts, platform norms)
+14. **Terminology Consistency:** Use same words for same concepts throughout
+15. **Natural Mapping:** Align controls with effects intuitively (increase volume = move up; zoom in = pinch outward)
+
+#### Feedback & Interaction
+
+16. **Immediate Feedback:** Provide visible response to every action within milliseconds (loading states, confirmations, validation)
+17. **Visible State:** Externalize system state to interface (show active filters, current page, progress); don't rely on user memory
+18. **Error Prevention First:** Constrain inputs, disable invalid actions, provide guidance before errors; when errors occur, provide contextual recovery
+
+#### Emotional & Behavioral
+
+19. **Emotional Calibration:** Pleasant aesthetics improve problem-solving; frustration narrows attention and reduces working memory
+20. **Behavioral Guidance:** Use visual emphasis, clear calls-to-action, ethical nudges to guide toward desired outcomes
+
+---
+
+### 3-Question Quick Check
+
+**Use this for rapid validation:**
+
+#### Question 1: Attention
+**"Is it obvious what to look at first?"**
+- [ ] Visual hierarchy is clear (primary vs secondary vs tertiary)
+- [ ] Most important element is preattentively salient (but not overwhelming)
+- [ ] Layout follows predictable scanning pattern (F or Z)
+
+**If NO:** Increase size/contrast of primary elements, reduce visual weight of secondary items, establish clear entry point
+
+---
+
+#### Question 2: Memory
+**"Is user required to remember anything that could be shown?"**
+- [ ] Current state is visible (filters, progress, location)
+- [ ] Options are presented, not requiring recall
+- [ ] Concurrent elements fit in 4±1 chunks
+
+**If NO:** Externalize state to interface, show don't tell, chunk information into groups
+
+---
+
+#### Question 3: Clarity
+**"Can someone unfamiliar understand this in 5 seconds?"**
+- [ ] Purpose/main message is immediately graspable
+- [ ] No unnecessary decorative elements competing for attention
+- [ ] Terminology is familiar or explained
+
+**If NO:** Simplify, add labels/titles, remove extraneous elements, use annotations to guide interpretation
+
+**If all three are YES → design is likely cognitively sound**
+
+---
+
+### Common Decision Rules
+
+#### Chart Selection
+
+**Task: Compare values**
+→ **Use:** Bar chart (position/length encoding)
+→ **Avoid:** Pie chart (angle/area less accurate)
+→ **Why:** Cleveland & McGill hierarchy - position > angle
+
+**Task: Show trend over time**
+→ **Use:** Line chart with time on x-axis
+→ **Avoid:** Stacked area (hard to compare non-bottom series)
+→ **Why:** Continuous lines show temporal progression naturally
+
+**Task: Show distribution**
+→ **Use:** Histogram or box plot
+→ **Avoid:** Multiple pie charts
+→ **Why:** Enables shape perception (normal, skewed, bimodal)
+
+**Task: Show part-to-whole**
+→ **Use:** Stacked bar chart or treemap
+→ **Avoid:** Pie chart with >5 slices
+→ **Why:** Easier to compare bar lengths than angles
+
+**Task: Find outliers**
+→ **Use:** Scatterplot
+→ **Avoid:** Table of numbers
+→ **Why:** Visual pattern makes outliers pop out preattentively
+
+---
+
+#### Color Usage
+
+**Categorical data (types, categories)**
+→ **Use:** Distinct hues (red, blue, green - perceptually different)
+→ **Avoid:** Shades of same hue
+→ **Why:** Hue lacks inherent ordering; best for nominal categories
+
+**Quantitative data (amounts, rankings)**
+→ **Use:** Lightness/saturation gradient (light to dark)
+→ **Avoid:** Rainbow spectrum or varied hues
+→ **Why:** Lightness has natural perceptual ordering (more = darker)
+
+**Alerts/errors**
+→ **Use:** Red sparingly for threshold violations only
+→ **Avoid:** Red for all negative values
+→ **Why:** Overuse causes alert fatigue; preattentive salience needs restraint
+
+**Accessible color**
+→ **Use:** Redundant coding (color + icon/shape/text)
+→ **Why:** 8% of males are colorblind; don't rely on color alone
+
+---
+
+#### Chunking Information
+
+**Long lists (>7 items)**
+→ **Action:** Group into 3-7 categories with visual separation
+→ **Why:** Working memory limit; chunking fits capacity
+
+**Multi-step processes**
+→ **Action:** Break into 3-5 steps, show progress indicator
+→ **Why:** Progressive disclosure reduces overwhelm, visible state reduces anxiety
+
+**Form fields**
+→ **Action:** 4-6 fields per screen; group related fields with proximity/backgrounds
+→ **Why:** Fits working memory; Gestalt proximity shows relationships
+
+**Navigation menus**
+→ **Action:** 5-7 top-level categories max
+→ **Why:** Decision time increases with choices (Hick's Law)
+
+---
+
+#### Error Handling
+
+**Error message location**
+→ **Action:** Next to problematic field, not top of page
+→ **Why:** Gestalt proximity; spatial contiguity reduces cognitive load
+
+**Error message language**
+→ **Action:** Plain language ("Password must be 8+ characters") not error codes
+→ **Why:** Reduces interpretation load, especially under stress
+
+**Error prevention**
+→ **Action:** Disable invalid actions, constrain inputs, validate inline
+→ **Why:** Prevention > correction; immediate feedback enables learning
+
+**Error recovery**
+→ **Action:** Show what to fix, auto-focus to field, keep prior input visible
+→ **Why:** Recognition over recall; reduce motor effort
+
+---
+
+#### Typography & Layout
+
+**Heading hierarchy**
+→ **Action:** Use size + weight to distinguish levels (H1 > H2 > H3 > body)
+→ **Why:** Visual hierarchy guides scanning, shows structure
+
+**Line length**
+→ **Action:** 50-75 characters per line for body text
+→ **Why:** Longer lines cause eye strain; shorter disrupt reading rhythm
+
+**Whitespace**
+→ **Action:** Use to separate unrelated groups, create breathing room
+→ **Why:** Gestalt principle - separated = unrelated; crowding increases cognitive load
+
+**Alignment**
+→ **Action:** Left-align text in Western contexts; align related elements
+→ **Why:** Gestalt continuity; consistent starting point aids scanning
+
+---
+
+### Design Heuristics at a Glance
+
+#### Tufte's Principles
+- **Maximize data-ink ratio:** Remove chart junk, keep only ink showing data
+- **Graphical integrity:** Visual representation matches data proportionally
+- **Small multiples:** Repeated structure enables comparison across conditions
+
+#### Norman's Principles
+- **Visibility:** State and options should be visible
+- **Affordances:** Controls suggest their use (buttons look pressable)
+- **Feedback:** Every action gets immediate, visible response
+- **Mapping:** Controls arranged to match effects spatially
+- **Constraints:** Prevent errors by limiting invalid actions
+
+#### Gestalt Principles (Quick)
+- **Proximity:** Close = related
+- **Similarity:** Alike = grouped
+- **Continuity:** Aligned = connected
+- **Closure:** Mind completes incomplete figures
+- **Figure-Ground:** Foreground vs background separation
+
+#### Cognitive Load Principles
+- **Intrinsic load:** Task complexity (can't change)
+- **Extraneous load:** Bad design (MINIMIZE THIS)
+- **Germane load:** Meaningful learning effort (support this)
+
+#### Mayer's Multimedia Principles (Quick)
+- **Multimedia:** Words + pictures > words alone
+- **Modality:** Audio + visual > text + visual (splits load)
+- **Contiguity:** Place text near corresponding graphic
+- **Coherence:** Exclude extraneous content
+- **Segmenting:** Break into user-paced chunks
+
+---
+
+### When to Use Which Framework
+
+**Cognitive Design Pyramid**
+→ **Use when:** Comprehensive quality check needed, evaluating all dimensions of design
+→ **Tiers:** Perception → Coherence → Emotion → Behavior
+
+**Design Feedback Loop**
+→ **Use when:** Designing interactive interfaces, ensuring each screen answers user questions
+→ **Stages:** Perceive → Interpret → Decide → Act → Learn
+
+**Three-Layer Visualization Model**
+→ **Use when:** Creating data visualizations, checking data quality through to interpretation
+→ **Layers:** Data → Encoding → Interpretation
+
+---
+
+### 5-Second Tests
+
+**Dashboard:** Can user identify current status within 5 seconds?
+
+**Form:** Can user determine what information is needed within 5 seconds?
+
+**Visualization:** Can user grasp main insight within 5 seconds?
+
+**Infographic:** Can user recall key message after 5 seconds viewing?
+
+**Interface:** Can user identify primary action within 5 seconds?
+
+**If NO to any → simplify, strengthen hierarchy, add annotations**
+
+---
+
+### Common Rationales for Advocacy
+
+**"Why bar chart instead of pie chart?"**
+→ "Cleveland & McGill's research shows position/length encoding is 5-10x more accurate than angle/area for human perception. Bar charts enable precise comparisons; pie charts make them difficult."
+
+**"Why simplify the interface?"**
+→ "Working memory holds only 4±1 chunks. Current design exceeds this, causing cognitive overload. Chunking into groups fits human capacity and improves task completion."
+
+**"Why inline validation?"**
+→ "Immediate feedback enables learning through the perception-action loop. Delayed feedback breaks the cognitive connection between action and outcome."
+
+**"Why not use red for all negative values?"**
+→ "Preattentive salience depends on contrast. If everything is red, nothing stands out (alert fatigue). Reserve red for true threshold violations requiring immediate action."
+
+**"Why accessible color schemes?"**
+→ "8% of males have color vision deficiency. Redundant coding (color + icon + text) ensures all users can perceive information, not just those with typical vision."
+

skills/cognitive-design/resources/storytelling-journalism.md

@@ -0,0 +1,473 @@
+# Storytelling & Journalism
+
+This resource provides cognitive design principles for data journalism, presentations, infographics, and visual storytelling.
+
+**Covered topics:**
+1. Visual narrative structure
+2. Annotation strategies
+3. Scrollytelling techniques
+4. Framing and context
+5. Visual metaphors
+
+---
+
+## Why Storytelling Needs Cognitive Design
+
+### WHY This Matters
+
+**Core insight:** People naturally seek stories with cause-effect and chronology - structuring data as narrative aids comprehension and retention.
+
+**Challenges of data storytelling:**
+- Raw data is heap of facts (hard to process)
+- Visualizations can be misinterpreted without guidance
+- Readers skim, don't read thoroughly
+- Need emotional engagement + factual accuracy
+
+**How cognitive principles help:**
+- **Narrative structure:** Context → problem → resolution (chunks information meaningfully)
+- **Annotations:** Guide attention to key insights (prevent misinterpretation)
+- **Self-contained graphics:** Include all context (recognition over recall, no split attention)
+- **Emotional engagement:** Appropriate imagery improves retention (Norman's emotional design)
+- **Progressive disclosure:** Scrollytelling reveals complexity gradually
+
+**Mental model:** Data journalism is guided tour, not data dump - designer leads readers to insights while allowing exploration.
+
+---
+
+## What You'll Learn
+
+**Five key areas:**
+
+1. **Narrative Structure:** Organizing data stories with beginning, middle, end
+2. **Annotation Strategies:** Guiding interpretation and preventing misreading
+3. **Scrollytelling:** Progressive revelation as user scrolls
+4. **Framing & Context:** Honest presentation avoiding misleading frames
+5. **Visual Metaphors:** Leveraging existing knowledge for new concepts
+
+---
+
+## Why Narrative Structure Matters
+
+### WHY This Matters
+
+**Core insight:** Human brains are wired for stories - we naturally seek cause-effect relationships and temporal sequences.
+
+**Benefits of narrative:**
+- Easier to process (story arc vs unstructured facts)
+- Better retention (stories are memorable)
+- Emotional engagement (narratives activate empathy)
+- Natural chunking (beginning/middle/end provides structure)
+
+**Mental model:** Like journalism's inverted pyramid, but for visual data - lead with context, build to insight, resolve with implications.
+
+---
+
+### WHAT to Apply
+
+#### Classic Narrative Arc for Data
+
+**Structure:** Context → Problem/Question → Data/Evidence → Resolution/Insight
+
+**Context (Set the stage):**
+```
+Purpose: Orient reader to situation
+Elements:
+- Title that frames the story: "How Climate Change is Affecting Crop Yields"
+- Subtitle/intro: Brief background (2-3 sentences)
+- Visuals: Overall trend or map showing scope
+
+Example:
+Title: "The Midwest Corn Belt is Shifting North"
+Subtitle: "Rising temperatures are pushing viable growing regions 100 miles northward"
+Visual: Map showing historical corn production zones vs current
+```
+
+**Problem/Question (Establish stakes):**
+```
+Purpose: Show why this matters, what's at stake
+Elements:
+- Specific question posed: "Will traditional farming regions remain viable?"
+- Visual highlighting problem area
+- Human impact stated (not just abstract data)
+
+Example:
+Question: "Can farmers adapt quickly enough?"
+Visual: Chart showing yield declines in traditional zones
+Impact: "1.5 million farming families affected"
+```
+
+**Data/Evidence (Show the findings):**
+```
+Purpose: Present data that answers question
+Elements:
+- Clear visualizations (chart type matched to message)
+- Annotations highlighting key patterns
+- Comparisons (before/after, with/without intervention)
+
+Example:
+Visual: Line chart showing yields 1980-2024 by region
+Annotation: "Southern regions declining 15%, northern regions up 22%"
+Comparison: States that adapted (Iowa) vs those that didn't
+```
+
+**Resolution/Insight (Deliver the takeaway):**
+```
+Purpose: Answer the question, provide conclusion
+Elements:
+- Main insight clearly stated
+- Implications for future
+- Call-to-action or next question (optional)
+
+Example:
+Insight: "Adaptation possible but requires 5-10 year transition"
+Implication: "Without support, smaller farms will struggle to relocate/retool"
+Next: "How can policy accelerate adaptation?"
+```
+
+---
+
+#### Opening Strategies
+
+**Lead with human impact:**
+```
+❌ "Agricultural productivity data shows regional variations"
+✓ "Sarah Miller's family has farmed Iowa corn for 4 generations. Now her yields are declining while her neighbor 200 miles north is thriving."
+
+Why: Concrete human story engages emotions, makes abstract data personal
+```
+
+**Lead with surprising finding:**
+```
+❌ "Unemployment rates changed over time"
+✓ "Despite recession fears, unemployment in Tech Hub cities fell 15% while national rates rose"
+
+Why: Counterintuitive findings capture attention
+```
+
+**Lead with visual:**
+```
+Strong opening image/chart that encapsulates story
+Followed by: "This is the story of..." text
+Why: Visual impact draws reader in
+```
+
+---
+
+## Why Annotation Strategies Matter
+
+### WHY This Matters
+
+**Core insight:** Readers scan rather than study - without guidance, they may miss key insights or misinterpret data.
+
+**Benefits of annotations:**
+- Guide attention to important patterns (preattentive cues)
+- Prevent misinterpretation (clarify what data shows)
+- Reduce cognitive load (don't make readers discover insight)
+- Enable skimming (annotations convey story even without deep read)
+
+**Mental model:** Annotations are like tour guide pointing out important sights - "Look here, notice this pattern, here's why it matters."
+
+---
+
+### WHAT to Apply
+
+#### Annotation Types
+
+**Callout boxes:**
+```
+Purpose: Highlight main insight
+Position: Near relevant data point, contrasting background
+Content: 1-2 sentences max
+Style: Larger font than body, bold or colored
+
+Example on line chart:
+Callout pointing to spike: "Sales increased 78% after campaign launch - highest growth in company history"
+```
+
+**Arrows and leader lines:**
+```
+Purpose: Connect explanation to specific data element
+Use: Point from text annotation to exact point/region on chart
+Style: Simple arrow, not decorative
+
+Example:
+Arrow from "Product launch" text to vertical line on timeline
+Arrow from "Outlier explained by data error" to specific point
+```
+
+**Shaded regions:**
+```
+Purpose: Mark time periods or ranges of interest
+Use: Highlight recessions, policy changes, events
+Style: Subtle shading (10-20% opacity), doesn't obscure data
+
+Example:
+Gray shaded region labeled "COVID-19 lockdown March-May 2020"
+Allows comparison of before/during/after in context
+```
+
+**Direct labels on data:**
+```
+Purpose: Eliminate legend lookups
+Use: Label lines/bars directly instead of separate legend
+Benefit: Immediate association, no cross-referencing
+
+Example on multi-line chart:
+Text "North Region" placed directly next to its line (not legend box)
+```
+
+**Contextual annotations:**
+```
+Purpose: Explain anomalies, provide necessary background
+Use: Note data quirks, methodological notes, definitions
+
+Example:
+"*Data unavailable for Q2 2020 due to reporting disruptions"
+"**Adjusted for inflation using 2024 dollars"
+```
+
+---
+
+#### Annotation Guidelines
+
+**What to annotate:**
+```
+✓ Main insight (what should reader take away?)
+✓ Unexpected patterns (outliers, inflection points)
+✓ Important events (policy changes, launches, crises)
+✓ Comparisons (how does this compare to baseline/benchmark?)
+✓ Methodological notes (data sources, limitations)
+
+❌ Don't annotate obvious patterns ("trend is increasing" when clearly visible)
+❌ Don't over-annotate (too many annotations = visual noise)
+```
+
+**Annotation placement:**
+```
+✓ Near the data being explained (Gestalt proximity)
+✓ Outside the chart area if possible (don't obscure data)
+✓ Consistent positioning (all callouts top-right, or all left, etc.)
+```
+
+---
+
+## Why Scrollytelling Matters
+
+### WHY This Matters
+
+**Core insight:** Complex data stories benefit from progressive revelation - scrollytelling maintains context while building understanding step-by-step.
+
+**Benefits:**
+- Progressive disclosure (fits working memory)
+- Maintains context (chart stays visible throughout)
+- Engaging (interactive vs passive reading)
+- Guided exploration (designer controls sequence)
+
+**Mental model:** Like flipping through graphic novel panels - each scroll reveals next part of story while maintaining continuity.
+
+---
+
+### WHAT to Apply
+
+#### Basic Scrollytelling Pattern
+
+**Structure:**
+```
+1. Sticky chart (stays visible as user scrolls)
+2. Text sections (scroll past, trigger chart updates)
+3. Smooth transitions (not jarring jumps)
+4. User control (can scroll back up to review)
+```
+
+**Example implementation:**
+
+**Section 1 (scroll 0%):**
+```
+Chart shows: Full trend line 2010-2024
+Text visible: "Overall growth trajectory shows steady increase"
+User sees: Big picture
+```
+
+**Section 2 (scroll 33%):**
+```
+Chart updates: Highlight 2015-2018 segment in color, rest faded
+Text visible: "First phase: Rapid growth following policy change"
+User sees: Specific period in context of whole
+```
+
+**Section 3 (scroll 66%):**
+```
+Chart updates: Highlight 2020 dip in red
+Text visible: "COVID-19 impact caused temporary decline"
+User sees: Anomaly explained
+```
+
+**Section 4 (scroll 100%):**
+```
+Chart updates: Full color restored, add projection (dotted)
+Text visible: "Projected recovery to pre-2020 trend by 2026"
+User sees: Complete story with future outlook
+```
+
+---
+
+#### Scrollytelling Best Practices
+
+**Transitions:**
+```
+✓ Smooth animations (300-500ms transitions)
+✓ Maintain reference points (axis don't jump)
+✓ One change at a time (highlight region OR add annotation, not both simultaneously)
+❌ Jarring jumps (disorienting)
+```
+
+**User control:**
+```
+✓ Can scroll back up to review
+✓ Scroll speed doesn't affect (trigger points based on position, not speed)
+✓ "Skip to end" option for impatient users
+✓ Pause/play if animations continue automatically
+```
+
+**Accessibility:**
+```
+✓ All content accessible without scrolling (fallback for screen readers)
+✓ Keyboard navigation supported
+✓ Works without JavaScript (progressive enhancement)
+```
+
+---
+
+## Why Framing & Context Matter
+
+### WHY This Matters
+
+**Core insight:** Same data can support different conclusions based on framing - ethical journalism provides complete context to avoid misleading.
+
+**Framing effects (Tversky & Kahneman):**
+- 10% unemployment vs 90% employed (same data, different emotional impact)
+- Deaths per 100k vs % survival (same mortality, different perception)
+
+**Ethical obligation:** Provide enough context for accurate interpretation
+
+---
+
+### WHAT to Apply
+
+#### Provide Baselines & Comparisons
+
+**Always include:**
+```
+✓ Historical comparison (how does this compare to past?)
+✓ Peer comparison (how does this compare to similar entities?)
+✓ Benchmark (what's the standard/goal?)
+✓ Absolute + relative (numbers + percentages both shown)
+
+Example: "Unemployment rises to 5.2%"
+Better: "Unemployment rises to 5.2% from 4.8% last quarter (historical average: 5.5%)"
+Complete context: Reader can judge severity
+```
+
+**Avoid cherry-picking:**
+```
+❌ Show only favorable time period (Q4 2023 sales up! ...but down overall year)
+✓ Show full relevant period + note any focus area
+
+Example:
+❌ "Satisfaction scores improved 15 points!" (cherry-picked one quarter)
+✓ Chart showing full 2-year trend (overall declining with one uptick quarter)
+```
+
+---
+
+#### Clarify Denominator
+
+**Percentages need context:**
+```
+❌ "50% increase!" (50% of what?)
+✓ "Increased from 10 to 15 users (50% increase)"
+✓ "Increased 50 percentage points (from 20% to 70%)"
+
+Confusion: Is it 50 percentage point increase or 50% relative increase?
+Clarity: State both absolute numbers and percentage
+```
+
+---
+
+#### Note Limitations
+
+**Methodological transparency:**
+```
+✓ Data source stated: "Source: U.S. Census Bureau"
+✓ Sample size noted: "n=1,200 respondents"
+✓ Margin of error: "±3% margin of error"
+✓ Missing data: "State data unavailable 2020-2021"
+✓ Selection criteria: "Only includes full-time employees"
+
+Purpose: Reader can assess reliability and applicability
+```
+
+---
+
+## Why Visual Metaphors Matter
+
+### WHY This Matters
+
+**Core insight:** Familiar metaphors leverage existing knowledge to explain new concepts - but only if metaphor resonates with audience.
+
+**Benefits:**
+- Faster comprehension (tap into existing schemas)
+- Memorable (concrete imagery aids recall)
+- Emotional connection (metaphors evoke feelings)
+
+**Risks:**
+- Misleading if metaphor doesn't fit
+- Cultural assumptions (metaphor may not translate)
+- Oversimplification (metaphor hides complexity)
+
+---
+
+### WHAT to Apply
+
+#### Choosing Metaphors
+
+**Effective metaphors:**
+```
+✓ Virus spread as fire spreading across map (leverages fire = spread schema)
+✓ Data flow as river (volume, direction, obstacles)
+✓ Economic inequality as wealth distribution pyramid
+✓ Carbon footprint as actual footprint size
+
+Why they work: Concrete, universally understood, structurally similar to concept
+```
+
+**Problematic metaphors:**
+```
+❌ Complex technical process as simple machine (oversimplifies)
+❌ Cultural-specific metaphors (e.g., sports metaphors for international audience)
+❌ Metaphors that contradict data (e.g., "economy is healthy" shown as growing plant - what if it's not growing?)
+```
+
+---
+
+#### Metaphor Guidelines
+
+**Test your metaphor:**
+```
+1. Does it help understanding or just decorate?
+2. Is it universally recognized by target audience?
+3. Does it accurately represent the concept?
+4. Does it oversimplify in misleading ways?
+5. Could it be misinterpreted?
+
+If any answer is problematic → reconsider metaphor
+```
+
+**Clarify limitations:**
+```
+When using metaphor, note where analogy breaks down:
+"While virus spread resembles fire spread, unlike fire, viruses can have delayed effects..."
+
+Prevents overgeneralizing from metaphor
+```
+

skills/cognitive-design/resources/ux-product-design.md

@@ -0,0 +1,272 @@
+# UX & Product Design
+
+This resource provides cognitive design principles for interactive software interfaces (web apps, mobile apps, desktop software).
+
+**Covered topics:**
+1. Learnability through familiar patterns
+2. Task flow efficiency
+3. Cognitive load management
+4. Onboarding design
+5. Error handling and prevention
+
+---
+
+## Why UX Needs Cognitive Design
+
+### WHY This Matters
+
+**Core insight:** Users approach interfaces with mental models from prior experiences - designs that violate expectations require re-learning and cause cognitive friction.
+
+**Common problems:**
+- New users abandon apps (steep learning curve)
+- Task flows with too many steps/choices (Hick's Law impact)
+- Complex features overwhelm users (cognitive overload)
+- Confusing error messages
+- Onboarding shows all features at once (memory overload)
+
+**How cognitive principles help:** Leverage existing mental models (Jakob's Law), minimize steps/choices (Hick's/Fitts's Law), progressive disclosure, inline validation, onboarding focused on 3-4 key tasks (working memory limit).
+
+---
+
+## What You'll Learn
+
+1. **Learnability:** Leverage familiar patterns for instant comprehension
+2. **Task Flow Efficiency:** Minimize steps and optimize control placement
+3. **Cognitive Load Management:** Progressive disclosure and memory aids
+4. **Onboarding:** Teaching without overwhelming
+5. **Error Handling:** Prevention first, then contextual recovery
+
+---
+
+## Why Learnability Matters
+
+### WHY This Matters
+
+Users spend most time on OTHER sites/apps (Jakob's Law) - they expect interfaces to work like what they already know.
+
+**Benefits of familiar patterns:** Instant recognition (System 1), lower cognitive load, faster completion, reduced errors.
+
+---
+
+### WHAT to Apply
+
+#### Standard UI Patterns
+
+**Navigation:**
+- Hamburger menu (☰) for mobile
+- Magnifying glass (🔍) for search
+- Logo top-left returns home
+- User avatar top-right for account
+- Breadcrumbs for hierarchy
+
+**Actions:**
+- Primary: Right-aligned button
+- Destructive: Red, requires confirmation
+- Secondary: Gray/outlined
+- Disabled: Grayed out
+
+**Forms:**
+- Labels above/left of fields
+- Required fields: Asterisk (*)
+- Validation: Inline as user types
+- Submit: Bottom-right
+
+**Feedback:**
+- Loading: Spinner for waits >1s
+- Success: Green checkmark + message
+- Error: Red + icon + message
+- Confirmation: Modal for destructive actions
+
+**Application rule:** Use standard patterns by default. Deviate only when standard fails AND provide onboarding. Test if users understand without help.
+
+---
+
+#### Affordances & Signifiers
+
+Controls should signal function through appearance:
+
+**Buttons:** Raised appearance, hover state, active state, focus state
+**Links:** Underlined or distinct color, pointer cursor on hover
+**Inputs:** Rectangular border, cursor on click, placeholder text, focus state
+**Draggable:** Handle icon (≡≡), grab cursor, shadow on drag
+
+**Anti-patterns:** Flat design with no cues, no hover states, buttons looking like labels, clickable areas smaller than visual target.
+
+---
+
+#### Platform Conventions
+
+**iOS:** Back top-left, navigation bottom tabs, swipe gestures, share icon with up arrow
+**Android:** System back button, hamburger menu top-left, three-dot overflow, FAB bottom-right
+**Web:** Logo top-left to home, primary nav top horizontal, search top-right, footer links
+
+**Rule:** Match platform norms. If cross-platform, adapt to each. Don't invent when standards exist.
+
+---
+
+## Why Task Flow Efficiency Matters
+
+### WHY This Matters
+
+Every decision point and step adds time and cognitive effort.
+
+**Hick's Law:** Decision time increases logarithmically with choices (2 choices = fast, 10 = slow/paralysis)
+**Fitts's Law:** Time to target = distance ÷ size (large/nearby = fast, small/distant = slow)
+
+---
+
+### WHAT to Apply
+
+#### Reduce Steps
+
+**Audit method:**
+1. Map current flow
+2. Question each step: "Necessary? Can automate? Can merge?"
+3. Eliminate unnecessary
+4. Combine related
+5. Pre-fill known info
+
+**Example:** Checkout flow reduced from 8 steps to 4 (pre-fill email/shipping, combine review inline) = 50% fewer steps, higher completion.
+
+---
+
+#### Reduce Choices (Hick's Law)
+
+**Progressive disclosure:** Show 5 most common filters, "More filters" reveals rest
+**Smart defaults:** Highlight recommended option, show "Other options" link
+**Contextual menus:** 5-7 actions relevant to current mode, not all 50
+
+**Rule:** Common tasks ≤5 options. Advanced features behind "More". Personalize based on usage.
+
+---
+
+#### Optimize Control Placement (Fitts's Law)
+
+Frequent actions = large and nearby. Infrequent = smaller and distant.
+
+**Primary:** Large button (44×44px mobile, 32×32px desktop), bottom-right or natural flow
+**Secondary:** Medium, near primary but distinct (outlined, gray)
+**Tertiary/destructive:** Smaller, separated, requires confirmation
+
+---
+
+## Why Cognitive Load Management Matters
+
+### WHY This Matters
+
+Working memory holds 4±1 chunks - exceeding this causes confusion/abandonment.
+
+**Load types:** Intrinsic (task complexity), Extraneous (poor design - MINIMIZE), Germane (meaningful learning - support)
+
+---
+
+### WHAT to Apply
+
+#### Progressive Disclosure
+
+Reveal complexity gradually, show only immediate needs.
+
+**Wizards:** 4 steps × 6-8 fields (not 30 fields on one page) = fits working memory, visible progress
+**Expandable sections:** Collapsed by default, expand on demand
+**"Advanced" options:** Basic visible, "Show advanced" link reveals rest
+
+---
+
+#### Chunking & Grouping
+
+Group related items, separate with whitespace.
+
+**Forms:** Group by relationship (Personal Info, Shipping Address) = 2 chunks
+**Navigation:** 5-7 categories × 3-5 items each (not 25 flat items)
+
+---
+
+#### Memory Aids (Recognition over Recall)
+
+Show options, don't require memorization.
+
+**Visible state:** Active filters as chips, current page highlighted, breadcrumbs, progress indicators
+**Autocomplete:** Search suggestions, address autocomplete, date picker
+**Recent history:** Recently opened files, search history, previous purchases
+
+---
+
+## Why Onboarding Matters
+
+### WHY This Matters
+
+First experience determines continuation/abandonment. Must teach key tasks without overwhelming.
+
+**Failures:** All features upfront, passive tutorials, no contextual help
+**Success:** 3-4 core tasks, interactive tutorials, contextual help when encountered
+
+---
+
+### WHAT to Apply
+
+#### Focus on Core Tasks
+
+Limit to 3-4 most important tasks, not comprehensive tour.
+
+**Ask:** "What must users learn to get value?" NOT "What are all features?"
+
+**Example:** Project management app - onboard on: create project, add task, assign to member, mark complete. Skip advanced filtering/custom fields/reporting (teach contextually later).
+
+---
+
+#### Interactive Learning
+
+Users learn by doing, not reading.
+
+**Guided interaction:** Highlight button, require click to proceed (active learning, muscle memory)
+**Progressive completion:** Step 1 must complete before Step 2 unlocks = sense of accomplishment, ensures learning
+
+---
+
+#### Contextual Help
+
+Advanced features taught when encountered, not upfront.
+
+**First encounter tooltips:** One-time help when user navigates to new feature
+**Empty states:** "No tasks yet! Click + to create first task" with illustrative graphic
+**Gradual discovery:** After 1 week show tip, after 1 month show power tip (usage-based timing)
+
+---
+
+## Why Error Handling Matters
+
+### WHY This Matters
+
+Users make errors (slips/mistakes) - good design prevents and provides clear recovery.
+
+**Goal:** Prevention > detection > recovery
+
+---
+
+### WHAT to Apply
+
+#### Prevention (Best)
+
+**Constrain inputs:** Date picker (not free text), numeric keyboard for phone, input masking
+**Provide defaults:** Pre-select common option, suggest formats
+**Confirm destructive:** Require confirmation modal, "Type DELETE to confirm", undo when possible
+
+---
+
+#### Detection (Inline Validation)
+
+Immediate feedback as user types/on blur, not after submit.
+
+**Real-time validation:** Password strength meter as typing, email format on blur
+**Positioning:** Error NEXT TO field (not top of page) - Gestalt proximity
+
+---
+
+#### Recovery (Clear Guidance)
+
+Tell what's wrong and how to fix, in plain language.
+
+**Bad:** "Error 402"
+**Good:** "Password must be at least 8 characters"
+
+**Visual:** Red + icon, auto-focus to error field, keep user input (don't clear), green checkmark when fixed