Menu

Individual skill

affordance

Use this skill whenever the question is whether the user can tell what an element does — whether it looks clickable, draggable, expandable, editable, or interactive at all. Trigger when designing buttons, links, custom controls, drag handles, draggable cards, editable inline fields, or any interactive element. Trigger on reviews when users hesitate, miss controls, or click on things that aren't interactive. Affordance is one of the most decisive principles in interaction design — Norman placed it at the center of *The Design of Everyday Things* — and it's one of the most violated by modern flat-design conventions that strip the visual cues users rely on.

plugins/HDeibler/universal-design-principles/plugins/interaction-and-control-principles/skills/affordance/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
1,531
Repository last updated
Nov 6, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Affordance

Affordance is the relationship between an object's properties and the actions it makes possible. A door handle affords pulling; a flat plate affords pushing; a button affords pressing; a slider affords sliding. When the affordance matches the intended use, the design works without instruction. When the affordance contradicts the intended use, even a sign saying "PUSH" cannot fully repair it — users still try to pull the handle first.

## Definition (in our own words)

Affordance is what an object's appearance, shape, weight, and material tell the user about what they can do with it. The affordance lives partly in the object itself (a button has a graspable shape) and partly in the user's perception of it (a child seeing a button for the first time has a different model than an adult who's seen ten thousand). Designers control the visual and behavioral signals; users bring prior experience. Where the two align, the design "just works"; where they diverge, the user must read, ask, or guess.

## Origins and research lineage

- **James J. Gibson**, *The Ecological Approach to Visual Perception* (Houghton Mifflin, 1979). Gibson coined "affordance" in ecological psychology to describe what an environment offers an animal: a horizontal surface affords standing; a graspable object affords carrying. The concept predates HCI but maps naturally to it.
- **Donald Norman**, *The Design of Everyday Things* (1988, revised 2013). Translated affordance from Gibson's perceptual psychology into design vocabulary. Norman's iconic example — doors that look like they pull but actually push — became shorthand for affordance failure.
- **Norman's later refinement** — "Signifiers, not affordances" (2008). Norman clarified that what designers actually control are *signifiers* (visible cues that suggest an action). The affordance is the underlying possibility; the signifier is what tells the user about it. The book's principle covers both, but the distinction matters in fine-grained design discussion.
- **Lidwell, Holden & Butler** (2003) compactly stated the principle as "a property in which the physical characteristics of an object or environment influence its function" and gave the door-handle-vs-flat-plate example as the canonical illustration.