cognitive-design

What this skill does

# Cognitive Design Principles

## Table of Contents

- [Overview](#overview)
- [Workflows](#workflows)
  - [Apply Cognitive Principles Workflow](#apply-cognitive-principles-workflow)
  - [Quick Validation Workflow](#quick-validation-workflow)
- [Path Selection Menu](#path-selection-menu)
  - [Path 1: Understand Cognitive Foundations](#path-1-understand-cognitive-foundations)
  - [Path 2: Apply Design Frameworks](#path-2-apply-design-frameworks)
  - [Path 3: Get Domain-Specific Guidance](#path-3-get-domain-specific-guidance)
  - [Path 4: Access Quick Reference](#path-4-access-quick-reference)
  - [Path 5: Explore Source Landscape](#path-5-explore-source-landscape)
  - [Path 6: Exit](#path-6-exit)
- [Related Skills](#related-skills)

---

## Overview

This skill provides the cognitive science foundations for effective design — the perception, attention, memory, and decision-making principles that explain WHY certain designs work. It helps ground design decisions in research (Tufte, Norman, Ware, Cleveland & McGill, Mayer), apply systematic frameworks (Cognitive Design Pyramid, Design Feedback Loop, Three-Layer Model), choose appropriate visual encodings, and manage attention, memory limits, and cognitive load.

**Related skills:** `design-evaluation-audit` for systematic reviews, `cognitive-fallacies-guard` for detecting misleads, `visual-storytelling-design` for data journalism, `information-architecture` for content organization, `d3-visualization` for D3.js implementation.

---

## Workflows

### Apply Cognitive Principles Workflow

**Use when:** Creating a new interface, dashboard, visualization, or educational content from scratch

**Time:** 1-2 hours

**Copy this checklist and track your progress:**

```
Cognitive Design Progress:
- [ ] Step 1: Orient to cognitive principles
- [ ] Step 2: Structure design thinking with frameworks
- [ ] Step 3: Apply domain-specific guidance
- [ ] Step 4: Validate against quick reference
```

**Step 1: Orient to cognitive principles**

Start with [Cognitive Foundations](resources/cognitive-foundations.md) for deep understanding of WHY designs work (perception, memory, Gestalt principles) OR use [Quick Reference](resources/quick-reference.md) for rapid orientation (20 core principles, decision rules). Foundations give you theoretical grounding; Quick Reference gets you started faster.

**Step 2: Structure design thinking with frameworks**

Use [Design Frameworks](resources/frameworks.md) to apply systematic approaches: Cognitive Design Pyramid (4-tier quality assessment), Design Feedback Loop (interaction cycles), and Three-Layer Visualization Model (data communication fidelity). These provide repeatable structure for design decisions.

**Step 3: Apply domain-specific guidance**

Choose your domain: [Data Visualization](resources/data-visualization.md) for charts/dashboards, [UX Product Design](resources/ux-product-design.md) for interfaces/apps, or [Educational Design](resources/educational-design.md) for e-learning/training. Apply tailored cognitive principles for your specific context.

**Step 4: Validate against quick reference**

Use [Quick Reference](resources/quick-reference.md) to verify your design against the 3-question check (Attention? Memory? Clarity?) and 20 core principles. Confirm your design passes basic cognitive alignment.

**Next steps:** Use `design-evaluation-audit` skill for systematic evaluation, `cognitive-fallacies-guard` to check for misleads.

---

### Quick Validation Workflow

**Use when:** Need rapid go/no-go decision, spot-checking changes, or validating against cognitive basics during active design work

**Time:** 5-10 minutes

**Copy this checklist and track your progress:**

```
Quick Validation Progress:
- [ ] Step 1: Three-question rapid check
- [ ] Step 2: Spot checks if issues found
```

**Step 1: Three-question rapid check**

Use [Quick Reference](resources/quick-reference.md) and apply: (1) Attention - "Is it obvious what to look at first?" (visual hierarchy clear, primary elements salient, predictable scanning), (2) Memory - "Is user required to remember anything that could be shown?" (state visible, options presented, fits 4±1 chunks), (3) Clarity - "Can someone unfamiliar understand in 5 seconds?" (purpose graspable, no unnecessary decoration, familiar terminology). If all YES → likely cognitively sound.

**Step 2: Spot checks if issues found**

If any question fails, consult the relevant cognitive foundation: Failed attention? Check hierarchy and visual salience in [Cognitive Foundations](resources/cognitive-foundations.md). Failed memory? Check chunking and memory constraints. Failed clarity? Check simplicity principles and labeling guidance.

---

## Path Selection Menu

**Choose your path based on current need:**

### Path 1: Understand Cognitive Foundations

**Choose this when:** You want to learn the core cognitive psychology principles underlying effective design (attention, memory, perception, Gestalt grouping, visual encoding hierarchy).

**What you'll get:** Deep understanding of WHY certain designs work, grounded in research.

**Time:** 20-40 minutes

**→ [Go to Cognitive Foundations resource](resources/cognitive-foundations.md)**

---

### Path 2: Apply Design Frameworks

**Choose this when:** You want systematic frameworks to structure your design thinking.

**What you'll get:** Three complementary frameworks:
- **Cognitive Design Pyramid** (4 tiers: Perceptual Efficiency → Cognitive Coherence → Emotional Engagement → Behavioral Alignment)
- **Design Feedback Loop** (Perceive → Interpret → Decide → Act → Learn)
- **Three-Layer Visualization Model** (Data → Visual Encoding → Cognitive Interpretation)

**Time:** 30-45 minutes

**→ [Go to Frameworks resource](resources/frameworks.md)**

---

### Path 3: Get Domain-Specific Guidance

**Choose this when:** You're working on a specific type of design and want tailored cognitive principles.

**Choose your domain:**

#### 3a. Data Visualization (Charts, Dashboards, Analytics)

**→ [Go to Data Visualization resource](resources/data-visualization.md)**

**Covers:** Chart selection via task-encoding alignment, dashboard hierarchy and grouping, progressive disclosure for exploration, narrative data visualization

---

#### 3b. Product/UX Design (Interfaces, Mobile Apps, Web Applications)

**→ [Go to UX Product Design resource](resources/ux-product-design.md)**

**Covers:** Learnability via familiar patterns, task flow efficiency, cognitive load management, onboarding design, error handling

---

#### 3c. Educational Design (E-Learning, Training, Instructional Materials)

**→ [Go to Educational Design resource](resources/educational-design.md)**

**Covers:** Multimedia learning principles, dual coding, worked examples, retrieval practice, segmenting, coherence principle

---

### Path 4: Access Quick Reference

**Choose this when:** You need rapid design guidance, core principles summary, or quick validation checks.

**What you'll get:** 20 core principles, 3-question check, common decision rules, design heuristics

**Time:** 5-15 minutes

**→ [Go to Quick Reference resource](resources/quick-reference.md)**

---

### Path 5: Explore Source Landscape

**Choose this when:** You want to understand the research traditions and key authors behind cognitive design principles.

**What you'll get:** Key researchers (Tufte, Norman, Ware, Cleveland & McGill, Mayer, Nielsen), their contributions, and when to cite them.

**Time:** 10-20 minutes

**→ [Go to Source Landscape resource](resources/source-landscape.md)**

---

### Path 6: Exit

**Choose this when:** You've completed your design work or gathered the information you need.

**Before you exit:**
- Have you achieved your goal for this session?
- Need to evaluate your design? → Use `design-evaluation-audit` skill
- Need to check for misleads? → Use `cognitive-fallacies-guard` skill
- Need to tell a data story? → Use `visual-storytelling-design` skill

---

## Related Skills

|