# Data Visualization & Dashboard Design Patterns

> **Credibility note (2026-04-11)**: this file was audited for unsourced claims during the research honesty pass. Two P0 retractions were applied: (1) the "Linear 40-30-20-10 Space Rule" — no such rule exists in Linear's actual UI redesign blog; misattribution retracted. (2) the "FTC 2026 Click-to-Cancel Rule — legally mandatory" framing — the rule was vacated by the 8th Circuit on July 8, 2025, and there is no enforceable federal rule as of April 2026; the claim has been corrected to reflect current legal status. The full audit trail lives in `../01-audit/_todo/credibility-map.md`.

## Multi-Skill Visualization

### Petal Chart (Modified Radar)
Individual filled arcs per skill. Avoids spider chart area-distortion. Giorgia Lupi's "Data Humanism" philosophy ([giorgialupi.com/data-humanism-the-revolution-will-be-visualized](http://giorgialupi.com/data-humanism-the-revolution-will-be-visualized)) argues that data can be used "to become more humane and to connect with ourselves and others at a deeper level" (source confirms this longer form, not the shorter paraphrase in earlier drafts).

### Apple Activity Rings Adaptation
Our adaptation: 4 concentric rings — Speaking, Reading, Writing, Listening. Apple's actual Activity Rings use only 3 rings (Move, Exercise, Stand); this is our 4-skill extension of the same pattern, not Apple's shipped implementation. Apple's [Human Interface Guidelines for Activity Rings](https://developer.apple.com/design/human-interface-guidelines/activity-rings) are explicit that implementers must "never change the look of the rings by using filters, changing colors, or modifying opacity" — consistency is the entire point of the pattern's glanceability. Parent opens app and reads instantly.

### Small Multiples (Tufte)
4 identical mini-charts (one per skill), same time range. The pedagogical advantage of small multiples is that the reader decodes the key and axes once, then rapidly reads every subsequent chart without re-learning the encoding — Tufte discusses this in *Envisioning Information* and *The Visual Display of Quantitative Information*. (An earlier draft attributed the exact phrase "figure out the key only once" as a direct Tufte quote; we did not find that phrasing in his books during verification. Paraphrase retained, direct quote dropped.)

## Curriculum Progression

### Learning Path Map (Duolingo Model) — RECOMMENDED
Vertical scrolling path with nodes. Child's position marked with avatar. Completed nodes glow, future dimmed. Most intuitive for "where is my child now?"

### ISOTYPE (Otto Neurath)
20 small icons (one per lesson in unit) filling in. More honest than percentage bar. Shows actual count.

## Before/After Growth Proof

### Sparkline Comparison (Tufte)
Word-sized inline graphics: "Maya's speaking: [sparkline] +23% since September"

### "Spotify Wrapped" Narrative
Monthly/quarterly highlights: total lessons, new words, CEFR progress, teacher's top quote. Shareability factor for word-of-mouth.

### GitHub-style Heatmap Calendar
Lesson days showing consistency and investment.

## Layout Patterns

### Bento Grid — RECOMMENDED
- Larger cards in a bento layout tend to attract disproportionate visual attention — a common design-blog rule of thumb in 2026, though we did not find a single peer-reviewed eye-tracking study backing the specific "2.6x longer fixation" multiplier during our verification pass. The directional principle (size the hero card bigger to bias attention) is sound; the exact ratio is not independently auditable.
- Largest card = progress visualization
- Desktop: 3-4 columns, Tablet: 2, Mobile: 1
- Spacing: 12-24px uniform gaps

### Progressive Disclosure
Start with 5-7 summary cards, expand on demand. "Vocabulary: Strong" -> click -> detailed breakdown.

> **RETRACTED 2026-04-11**: An earlier draft included a "40-30-20-10 Space Rule" attributed to Linear's UI redesign blog. Linear's actual redesign post contains no such rule; the ratio appears to originate from an Improvado marketing blog and was falsely attributed. Retracted during the credibility pass — no replacement, as the section was not load-bearing for the Value Hub IA (Bento Grid + Progressive Disclosure above cover the same ground).

## Playful Data Visualization

### "Warm Data" Philosophy (Giorgia Lupi)
Avoid pixel-perfect clinical charts. Use rounded shapes, hand-drawn-feeling strokes, organic color transitions. Data should feel made FOR this specific child.

### Color Strategy: "Sophisticated Warmth"
- Primary action: warm gold or coral (not neon)
- Skill colors: 4 muted hues (coral/sage/soft blue/lavender)
- Background: warm cream or soft gray (never pure white)
- Text: warm dark (not pure black)
- Blue/green = calming, trust. Yellow/teal = energy, warmth.

### Celebration Animations
- Level-up: rings fill + confetti (200-500ms)
- Streak milestone: subtle pulse
- CEFR advancement: full-screen celebration
- Keep proportional to achievement

## Anti-Patterns to Avoid

### Vanity Metrics
- Total minutes (doesn't correlate with outcomes)
- Login streaks without completion
- XP Points parents don't understand
- Lesson count without quality context
- Percentile rankings (creates anxiety)

### Information Overload
- "Everything Dashboard" — show all data at once
- Comparison Trap — your child vs. class average = anxiety
- Alert Fatigue — over-notifying trains parents to ignore

### Dark Patterns (regulatory context)
- Chegg: $7.5M FTC settlement for hidden cancellation and deceptive billing practices ([FTC press release, September 2025](https://www.ftc.gov/news-events/news/press-releases/2025/09/ftc-finalizes-order-requiring-chegg-pay-75-million-resolve-allegations-it-used-deceptive-practices))
- ABCmouse: $10M FTC settlement for difficult cancellation, announced September 2020 ([FTC press release](https://www.ftc.gov/news-events/news/press-releases/2020/09/abcmouse-pay-10-million-settle-ftc-charges-it-failed-disclose))
- 76% of subscription sites use at least one dark pattern ([FTC/ICPEN/GPEN joint sweep of 642 sites, July 2024](https://www.ftc.gov/news-events/news/press-releases/2024/07/ftc-international-consumer-protection-enforcement-network-sweep-finds-dark-patterns-websites))
- **Billing transparency and easy cancellation are a known regulatory concern.** The FTC's Click-to-Cancel Rule was vacated by the 8th Circuit Court of Appeals on July 8, 2025; the FTC restarted rulemaking via ANPRM on March 11, 2026. As of April 2026 there is no enforceable federal click-to-cancel rule, but the pattern remains strong consumer protection practice regardless of legal status and is the subject of active rulemaking that may produce new requirements in 2026-2027.

## Key Frameworks

| Framework | Source | Use |
|-----------|--------|-----|
| Data Humanism | Giorgia Lupi | Warm, human-centered data philosophy |
| Activity Rings | Apple | Multi-skill glanceable progress |
| Small Multiples | Tufte | Skill comparison |
| Bento Grid | Modern UI | Modular, responsive layout |
| ISOTYPE | Neurath | Accessible progress counts |
| Wrapped Narrative | Spotify | Shareable growth celebration |
| Data-Ink Ratio | Tufte | Remove non-informing elements |
| 3-Second Rule | Dashboard UX research | Critical info at a glance |

## Sources

**Cited inline above**:
- Giorgia Lupi, "Data Humanism: The Revolution Will Be Visualized" — http://giorgialupi.com/data-humanism-the-revolution-will-be-visualized
- Apple Human Interface Guidelines, Activity Rings — https://developer.apple.com/design/human-interface-guidelines/activity-rings
- FTC v. Chegg settlement (September 2025) — https://www.ftc.gov/news-events/news/press-releases/2025/09/ftc-finalizes-order-requiring-chegg-pay-75-million-resolve-allegations-it-used-deceptive-practices
- FTC v. ABCmouse settlement (September 2020) — https://www.ftc.gov/news-events/news/press-releases/2020/09/abcmouse-pay-10-million-settle-ftc-charges-it-failed-disclose
- FTC / ICPEN / GPEN 2024 Dark Patterns Sweep — https://www.ftc.gov/news-events/news/press-releases/2024/07/ftc-international-consumer-protection-enforcement-network-sweep-finds-dark-patterns-websites

**Design inspiration (frameworks, not specific citations)**:
- Nadieh Bremer — visualcinnamon.com (data viz reference)
- Nicholas Felton — feltron.com (annual report aesthetic reference)
- Edward Tufte — sparklines, small multiples, data-ink ratio (*The Visual Display of Quantitative Information*, *Envisioning Information*)

**Dropped during the 2026-04-11 credibility pass** (listed in earlier drafts as generic citations without URLs or specific findings; removed rather than left as unverifiable):
- "Google Design: 6 Principles for Any Chart (Manuel Lima)" — no URL was attached; Manuel Lima is a real author but the specific Google Design attribution was not verifiable in 1-2 searches
- "Linear: UI Redesign Part II" — the blog post is real, but it does not contain the "40-30-20-10 Space Rule" that was falsely attributed to it in earlier drafts (see retraction block above). Removed to avoid implying the post supports a claim it does not contain.
- "Enabling Insights: 11 Principles for EdTech Dashboards" — vague source name, no URL; could not verify