# Cognitive design Cognitive design is an approach to designing products, interfaces, and systems that explicitly accounts for how human cognition works—our [[Perception]], [[Attention]], [[Memory]], [[Decision Making]], and mental models. The field draws heavily on [[Cognitive Psychology]] and was popularized by [[Don Norman]]'s seminal work *The Design of Everyday Things* (1988). Rather than designing based on aesthetics or engineering convenience alone, cognitive design prioritizes how users actually think, learn, and interact with systems. The core insight of cognitive design is that good design works *with* human cognitive limitations rather than against them. Our [[Working Memory]] is limited (7±2 items), we rely on [[Heuristics]] and shortcuts, and we form mental models that may not match reality. Effective design provides clear [[Affordance]]s and [[Signifier]]s, reduces [[Cognitive Load]], offers appropriate feedback, and creates consistent mappings between actions and outcomes. Cognitive design principles underpin [[User Experience (UX)]], [[Interaction Design]], and [[Human-Computer Interaction (HCI)]]. ## Cognitive Design Framework ``` ┌─────────────────────────────────────────────────────────────┐ │ COGNITIVE DESIGN FRAMEWORK │ ├─────────────────────────────────────────────────────────────┤ │ │ │ HUMAN COGNITION DESIGN RESPONSE │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ Limited attention │ ──▶ │ Visual hierarchy │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ Limited memory │ ──▶ │ Recognition > recall│ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ Mental models │ ──▶ │ Match user's model │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ Error-prone │ ──▶ │ Prevent/recover │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ Context-dependent │ ──▶ │ Appropriate cues │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ## Norman's Design Principles | Principle | Description | Example | |-----------|-------------|---------| | **Visibility** | State and actions should be visible | Button shows enabled/disabled | | **Feedback** | Confirm actions were received | Sound on click, loading indicator | | **Constraints** | Limit possible actions | Grayed-out unavailable options | | **Mapping** | Clear relationship between controls and effects | Stove knob position = burner | | **Consistency** | Similar operations, similar elements | All buttons work the same way | | **[[Affordance]]** | Object suggests how to use it | Handle suggests pulling | ## Cognitive Limitations and Design Solutions | Cognitive Limitation | Design Solution | |---------------------|-----------------| | **[[Working Memory]] (~7 items)** | Chunk information, limit options | | **Short attention span** | Progressive disclosure, visual hierarchy | | **Prone to errors** | Undo, confirmation dialogs, forgiving design | | **Preference for recognition** | Menus over commands, icons | | **Schema-dependent learning** | Use familiar patterns, metaphors | | **Decision fatigue** | Smart defaults, limit choices | ## Three Levels of Processing (Norman) | Level | Focus | Design Concern | |-------|-------|----------------| | **Visceral** | Immediate, automatic | First impressions, aesthetics | | **Behavioral** | Subconscious, learned | Usability, efficiency | | **Reflective** | Conscious, analytical | Meaning, self-image, satisfaction | ## Mental Models ``` ┌─────────────────────────────────────────────────────────────┐ │ MENTAL MODELS │ ├─────────────────────────────────────────────────────────────┤ │ │ │ DESIGNER'S SYSTEM USER'S │ │ MODEL IMAGE MODEL │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │How it │──────▶ │What user│──────▶ │How user │ │ │ │actually │ │sees and │ │thinks it│ │ │ │works │ │interacts│ │works │ │ │ └─────────┘ └─────────┘ └─────────┘ │ │ │ │ Goal: Make system image communicate designer's model │ │ so user's model matches reality │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ## Key Figures | Person | Contribution | |--------|--------------| | [[Don Norman]] | *The Design of Everyday Things*, popularized cognitive design | | [[George Miller]] | Working memory limits (7±2) | | Alan Cooper | Personas, goal-directed design | | Susan Weinschenk | *100 Things Every Designer Needs to Know About People* | | Steve Krug | *Don't Make Me Think* | ## Applications | Domain | Application | |--------|-------------| | **UX Design** | Interface layout, navigation, feedback | | **[[Information Architecture (IA)]]** | Organization matching mental models | | **Instructional design** | Reducing cognitive load in learning | | **Safety-critical systems** | Error prevention in aviation, medicine | | **Accessibility** | Design for cognitive disabilities | ## References - Norman, D. (2013). *The Design of Everyday Things* (revised edition) - Weinschenk, S. (2011). *100 Things Every Designer Needs to Know About People* - Krug, S. (2014). *Don't Make Me Think, Revisited* - https://en.wikipedia.org/wiki/Cognitive_design ## Related - [[Cognitive design principles]] - [[Don Norman]] - [[Cognitive Psychology]] - [[User Experience (UX)]] - [[Human-Computer Interaction (HCI)]] - [[Affordance]] - [[Signifier]] - [[Cognitive Load]] - [[Mental Models (MoC)|Mental Models]]