AgentSkillsCN

design-of-everyday-things

以人为本的设计原则，聚焦于产品的可用性、显性提示、即时反馈与概念模型，力求让每一次交互都直观自然、毫无认知负担

SKILL.md
--- frontmatter
name: design-of-everyday-things
description: Human-centered design principles focused on affordances, signifiers, feedback, and conceptual models for intuitive product interactions

Design of Everyday Things Principles

Overview

Don Norman's "The Design of Everyday Things" (1988, revised 2013) is the foundational text for human-centered design, establishing core principles that enable discoverability and intuitive use. The framework centers on five psychological concepts - affordances, signifiers, constraints, mappings, and feedback - supported by accurate conceptual models. Norman's insight: good design transfers responsibility from users to designers by creating products that match how people naturally think and behave, recognizing subconscious processing and natural mental models rather than forcing users to adapt to machines.

When to Use

  • •Designing physical products, digital interfaces, or interactive systems
  • •Evaluating existing products for usability improvements
  • •Creating control panels, dashboards, or complex device interfaces
  • •Reducing user errors and support costs through better design
  • •Training teams on fundamental human-centered design principles
  • •Bridging the Gulf of Execution (figuring out how to use) and Gulf of Evaluation (understanding what happened)

The Process

Step 1: Design Affordances for Intended Actions

Affordances are physical properties enabling possible actions. Design objects so form suggests function based on user capabilities. Example: Buttons that look pressable through dimensional appearance, handles shaped for gripping, touch screens with smooth glass surfaces signaling swipe capability.

Step 2: Add Clear Signifiers

Signifiers are perceivable indicators communicating where and how to act. Never rely on invisible affordances - add visible cues like labels, icons, contrasting colors, arrows, or highlights. Example: Push plate on doors, "Swipe down to refresh" text on mobile apps, raised bumps on F and J keyboard keys for finger positioning.

Step 3: Create Natural Mappings

Design logical relationships between controls and effects using spatial analogies. Position controls where they visually correspond to results, group related controls, shape controls like what they control. Example: Car seat adjustment controls shaped like the seat itself, stove burner knobs arranged matching burner layout, light switches positioned near corresponding lights.

Step 4: Provide Immediate, Informative Feedback

Communicate action results within 100 milliseconds. Make feedback specific and informative, not generic. Calibrate intensity - subtle for routine actions, attention-grabbing for critical alerts. Example: Button press animations, progress bars with percentages, haptic feedback on mobile devices, audio confirmation tones.

Step 5: Build Accurate Conceptual Models

Create simplified explanations of how systems work through system image (physical appearance, documentation, UI language). Use familiar metaphors and test whether users develop correct mental models. Example: File/folder metaphors for data organization, shopping cart icon for e-commerce, thermostats with clear temperature displays rather than ambiguous dials.

Step 6: Apply Constraints to Prevent Errors

Use physical, semantic, cultural, and logical constraints limiting possible actions to only correct ones. Design for error prevention through forcing functions and interlocks. Example: USB connectors that only fit one way, form validation preventing invalid email formats, confirmation dialogs for destructive actions, undo functionality.

Step 7: Consider All Three Processing Levels

Design for visceral (aesthetic), behavioral (performance), and reflective (meaning) levels. Initial appearance creates emotional response, functionality provides satisfaction, and personal significance drives long-term loyalty. Example: Apple products combine beautiful appearance (visceral), smooth operation (behavioral), and pride of ownership (reflective).

Example Application

Situation: Hotel sink stopper caused constant guest complaints and maintenance calls. Guests couldn't figure out how to drain water, flooding rooms.

Application:

  • •Step 1: Stopper had affordance of being liftable, but actual operation required pushing down
  • •Step 2: Added visible signifier - engraved "PUSH" arrow on stopper top
  • •Step 3: Redesigned mechanism so pulling up opened drain (natural mapping)
  • •Step 4: Added tactile click and visible gap when opened (feedback)
  • •Step 5: Made operation match standard sink expectations (conceptual model)
  • •Step 6: Added constraint preventing closure unless explicitly pushed

Outcome: Guest complaints dropped 95%, maintenance calls eliminated, positive reviews mentioned "easy-to-use fixtures."

Anti-Patterns

  • •Doors requiring signs to indicate push/pull (failed signifiers)
  • •Light switches without clear mapping to rooms (poor mapping)
  • •Elevator buttons providing no confirmation of registration (missing feedback)
  • •Refrigerator controls with misleading labels creating false theories (wrong conceptual model)
  • •Context-sensitive buttons without visual differentiation (inadequate signifiers)
  • •Complex devices requiring instruction manuals for basic operation (design failure)
  • •Assuming affordances are self-evident without signifiers
  • •Designing for idealized users rather than real human capabilities

Related

  • •Nielsen Norman Group Heuristics (applying principles to UI evaluation)
  • •Don't Make Me Think (web-specific usability application)
  • •Jobs to Be Done (understanding user intentions and goals)
  • •Human Interface Guidelines (platform-specific implementation)
  • •Accessibility Standards (overlapping with universal usability)
  • •Progressive Disclosure (managing complexity through constraints)
  • •Error Prevention and Recovery (constraint and feedback application)