gh-lyndonkl-claude/skills/cognitive-design/resources/cognitive-fallacies.md

# 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
```