Analyze and apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error prevention", "discoverability", "human-centered design", or "fault tolerance". Covers the gulfs of execution and evaluation. For usability scoring, see ux-heuristics. For iOS-specific patterns, see ios-hig-design. Trigger with 'design', 'everyday', 'things'.
Instrucciones de origen · Vista previa de solo lectura
name
design-everyday-things
description
Analyze and apply foundational design principles: affordances, signifiers, constraints, feedback, and conceptual models. Use when the user mentions "why is this confusing", "affordance", "error prevention", "discoverability", "human-centered design", or "fault tolerance". Covers the gulfs of execution and evaluation. For usability scoring, see ux-heuristics. For iOS-specific patterns, see ios-hig-design. Trigger with 'design', 'everyday', 'things'.
allowed-tools
Read, Glob, Grep
license
MIT
author
Wondelai <hello@wondelai.com>
version
1.0.1
compatible-with
claude-code, codex, openclaw
tags
["design","design-everyday"]
Design of Everyday Things Framework
Foundational design principles for creating products that are intuitive, discoverable, and understandable. The "bible of UX" — applicable to physical products, software, and any human-designed system.
Core Principle
Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible. When something works well, we take it for granted. When it fails, we blame ourselves — but the fault is almost always in the design.
The foundation: Design must bridge the gap between what people want to do and what the product allows them to do. The best designs are discoverable (users figure out what to do) and understandable (users figure out what happened).
Scoring
Goal: 10/10. When reviewing or creating designs, rate 0-10 based on discoverability, understandability, and error prevention. A 10/10 means users can figure out what to do without instructions, understand what happened, and recover from errors easily. Always provide current score and improvements to reach 10/10.
The Two Gulfs
Every interaction with a product requires bridging two gulfs:
USER PRODUCT
│ │
├──── Gulf of Execution ────────────────→│
│ "How do I do what I want?" │
│ │
│←──── Gulf of Evaluation ──────────────┤
│ "What happened? Did it work?" │
Gulf of Execution
The gap between what users want to do and what the product lets them do.
Questions users ask:
What can I do here?
How do I do it?
Which control do I use?
How do I operate this control?
Bridging strategies:
Clear signifiers showing what's possible
Natural mappings between controls and outcomes
Constraints preventing wrong actions
Familiar conceptual models
Gulf of Evaluation
The gap between what the product did and what users understand happened.
Questions users ask:
What happened?
Did it work?
Is this what I wanted?
What state is the system in now?
Bridging strategies:
Immediate, visible feedback
Clear system state indicators
Meaningful error messages
Progress indicators
Design goal: Make both gulfs as narrow as possible. The ideal design requires zero bridging — action and understanding are immediate.
Definition: Can users figure out what actions are possible and how to perform them?
Five components of discoverability:
Affordances
Signifiers
Constraints
Mappings
Feedback
(Each detailed below)
Test: Put a new user in front of your product. Can they figure out what to do within 10 seconds? If not, discoverability is broken.
Anti-pattern: "The user manual explains it." If users need a manual, the design failed.
2. Affordances
Definition: The relationship between the properties of an object and the capabilities of the agent (user) that determine how the object could be used.
Key insight: Affordances exist whether or not they are perceived. A door affords pushing whether or not you know to push it. What matters is perceived affordance.
Types:
Type
Definition
Example
Real affordance
Physical capability exists
A button affords pressing
Perceived affordance
User believes capability exists
A raised area looks clickable
Hidden affordance
Capability exists but isn't obvious
Right-click context menu
False affordance
Appears to afford action but doesn't
A decorative element that looks clickable
Anti-affordance
Prevents action
A barrier that blocks movement
Digital applications:
Element
Affordance
How to Signal
Button
Affords clicking/tapping
Raised, colored, shadow, hover state
Text field
Affords text input
Border, hint text, label
Link
Affords navigation
Color, underline, cursor change
Slider
Affords dragging
Handle, track, visual range
Scroll area
Affords scrolling
Scroll bar, fade at edge, partial content
Common failures:
Flat design removes perceived affordances (is it a button or a label?)
Touch targets that are too small (fat finger problem)
No visual distinction between interactive and decorative elements
Norman's model for how humans interact with products:
1. GOAL → "I want to adjust the temperature"
2. PLAN → "I'll use the thermostat"
3. SPECIFY → "I'll press the up arrow"
4. PERFORM → (presses button)
─── Gulf of Execution ───
5. PERCEIVE → (sees display change)
6. INTERPRET → "The number went up"
7. COMPARE → "Is this what I wanted?"
─── Gulf of Evaluation ───
Design implications:
Stages 1-3 (execution): Support with clear signifiers, mappings, constraints
Stage 4 (action): Support with good affordances
Stages 5-7 (evaluation): Support with clear feedback, system state
Use as evaluation tool: Walk through each stage for any interaction. Where does the user get stuck?
Don Norman, PhD is co-founder of the Nielsen Norman Group and director of The Design Lab at UC San Diego. He coined the term "user experience" while at Apple in the 1990s. The Design of Everyday Things (originally published in 1988 as "The Psychology of Everyday Things") is considered the most influential design book ever written and is required reading in virtually every design program worldwide. Norman has served as VP of Advanced Technology at Apple and has been a professor at Northwestern, UC San Diego, and KAIST (Korea).
