Skip to content
cognitive-foundations logo

Cognitive Foundations

cognitive-foundations

Apply cognitive science and HCI research to design decisions. Use when you need the scientific 'why' behind usability, explaining user behavior, understanding perception/memory/attention limits, evaluating cognitive load, assessing mental model alignment, predicting performance with Fitts's/Hick'...

SKILL.md

Full skill instructions

Cognitive Foundations

The science of how minds work, and what that means for design.

When to Use This Skill

  • Explaining why a design works or fails (grounded in research, not opinion)
  • Evaluating cognitive load or working memory demands
  • Predicting user performance (Fitts, Hick-Hyman)
  • Diagnosing mental model misalignment
  • Justifying design decisions to stakeholders with evidence
  • Understanding attention, perception, or memory failures

Output Contracts

For Single-Principle Analysis

## Cognitive Principle: [Name]

**Principle**: [1-sentence explanation]

**Evidence in Design**: [Where/​how this applies]

**Implication**: [Specific, actionable recommendation]

**Confidence**: [High/​Medium/​Low] — [rationale]

For Cognitive Audit (Comprehensive)

## Cognitive Audit: [Screen/​Flow Name]

### Working Memory Load
- Items requiring recall: [count]
- Cross-screen memory demands: [Y/​N]
- Verdict: [Acceptable / High / Overloaded]

### Attention Demands
- Preattentive features for critical info: [Y/​N]
- Competing attention demands: [list]
- Change blindness risk: [areas where changes may go unnoticed]

### Mental Model Alignment
- Expected user model: [what users likely think]
- System behavior: [what actually happens]
- Gap: [mismatch, if any]

### Predictive Laws
- Fitts's Law concerns: [target size/​distance issues]
- Hick's Law concerns: [choice overload areas]

### Gulf Analysis
- Gulf of Execution: [unclear how to act?]
- Gulf of Evaluation: [unclear what happened?]

### Violations of Nielsen's Heuristics
| Heuristic | Violation | Severity |
|-----------|-----------|----------|
| ... | ... | 1-4 |

### Recommendations
1. [Highest priority fix]
2. [Second priority]
3. [Third priority]

For Explaining a Failure

## Failure Analysis: [What Went Wrong]

**Observed Behavior**: [What users did]

**Cognitive Explanation**: [Which principle explains this]

**Root Cause**: [Design element that caused it]

**Fix**: [Specific change]

Quick Reference: Predictive Laws

LawFormulaRule of Thumb
Fitts's LawMT = a + b × log₂(2D/​W)Bigger + closer = faster. Screen edges are infinite.
Hick-HymanRT = a + b × log₂(n+1)More choices = slower. Reduce or organize options.
Steering LawT = a + b × (A/​W)Narrow paths are slow. Cascading menus are hard.
Power LawT = a × N^(-b)Practice helps. Design for learnability.

Quick Reference: Nielsen's 10 Heuristics

#HeuristicQuick Test
1Visibility of system statusCan user always tell what's happening?
2Match system ↔ real worldLanguage familiar? Metaphors sensible?
3User control and freedomEasy undo? Clear exits?
4Consistency and standardsSame words/​actions mean same things?
5Error preventionConstraints prevent errors before they occur?
6Recognition over recallOptions visible? No memory required?
7Flexibility and efficiencyShortcuts for experts?
8Aesthetic and minimalistOnly relevant info? No clutter?
9Error recoveryErrors explained in plain language with fix?
10Help and documentationSearchable, task-focused, concise?

Quick Reference: Working Memory

  • Capacity: ~4 chunks (not 7)
  • Duration: ~20 seconds without rehearsal
  • Test: Count items user must hold in mind across screens/​steps

Red flags:

  • "Remember this code and enter it on the next page"
  • Multi-step forms without visible progress/​state
  • Complex comparisons requiring mental tracking

Quick Reference: Preattentive Features

Detected in <200ms, no focused attention required:

  • Color (hue, saturation)
  • Size (length, area)
  • Orientation (angle)
  • Motion (flicker, direction)
  • Shape (curvature, enclosure)

Use for: Critical info, errors, changes, status Don't use for: Everything (loses signal value)


Cognitive Load Checklist

Quick assessment for any interface:

FactorLow LoadHigh Load
Choices visible2-4 options10+ options
Memory demandsRecognitionRecall
Steps to goal1-3 clicks5+ clicks
InterruptionsNoneFrequent modals
Novel elementsFamiliar patternsNew conventions
Error recoveryClear undoDestructive actions
Visual complexityClean, groupedDense, undifferentiated

Scoring: Each "High Load" = +1. Score >3 = redesign needed.


Common Violations → Principle

SymptomLikely ViolationFix
Users don't notice changesChange blindnessAnimate, highlight transitions
Users can't find the buttonPoor Fitts's LawIncrease size, reduce distance
Users freeze at optionsHick's Law overloadReduce choices, progressive disclosure
Users forget mid-taskWorking memory exceededShow state, don't require recall
Users misunderstand stateGulf of EvaluationBetter feedback, visibility
Users click wrong thingPoor affordance/​signifierClearer visual treatment
Users make same error repeatedlyMode errorVisible mode indicators
Users abandon complex formsCognitive loadChunk, scaffold, save progress

Process

  1. Identify cognitive demands — What is the interface asking the user to perceive, remember, decide, or do?
  2. Match to principles — Which cognitive constraints or laws apply?
  3. Evaluate alignment — Does the design respect or violate these?
  4. Recommend changes — Specific modifications grounded in the principle

Deep Reference Files

For comprehensive principles and research:

  • PSYCHOLOGY.md — Perception, memory, attention, biases, emotion, motivation
  • HCI-THEORY.md — Norman's model, predictive laws, error theory, research methods, heuristics

Primary Sources


Key Researchers

  • Don Norman: Affordances, gulfs, emotional design
  • Daniel Kahneman: Dual process theory, heuristics and biases
  • Stuart Card: GOMS, information foraging, Fitts's Law
  • Anne Treisman: Feature integration, preattentive processing
  • Jakob Nielsen: Usability heuristics, discount usability
  • Ben Shneiderman: Direct manipulation, golden rules

Remember

  • Cognitive science explains why design principles work
  • Individual differences exist—design for variability, not averages
  • Lab findings may not generalize (ecological validity matters)
  • Theory informs but doesn't replace observing real users
  • When in doubt, reduce cognitive load—users have less capacity than you think

More Design skills

brandkit logo
Design

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K
View

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K
View

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K
View

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K
View

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K
View

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K
View

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K
View
Animate logo
Design

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K
View

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K
View

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K
View

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K
View

Design AI tools

Maze Guru logo
Images

Maze Guru

Chat-to-edit AI studio for product photos, portraits, branding, and video.

Freemium
View
R
Design

RoomGPT

Generate your dream room in seconds.

Paid
View

Redesign your interior in seconds using AI

Paid
View
Reroom logo
Design

Reroom

Transform rooms with AI-generated designs.

Freemium
View
Jife logo
Design

Jife

Transform Your Space with AI-Powered Japanese Interior Designs by Jife

Paid
View
Visily logo
Design

Visily

AI-powered wireframes for non-designers.

Free
View

Revolutionize Property Viewing with AI-Generated Floor Plans and Virtual Tours

Paid
View
Archsynth logo
Design

Archsynth

Transform sketches into stunning architectural renders with AI.

Paid
View