Physical affordance

물리적 어포던스

The way an object's shape itself signals how to operate it — a flat plate says push, a bar-shaped handle says pull.

Also known as: Norman door행동유도성
···
html
<div class="afp-wrap">
  <div class="afp-door">
    <div class="afp-panel afp-plate"></div>
    <svg class="afp-hand" viewBox="0 0 40 40"><path d="M8,26 Q8,14 20,14 Q32,14 32,26 L32,32 L8,32 Z"/></svg>
    <span class="afp-cap">flat plate → push</span>
  </div>
  <div class="afp-door">
    <div class="afp-panel afp-bar"></div>
    <svg class="afp-hand afp-hand-pull" viewBox="0 0 40 40"><path d="M8,26 Q8,14 20,14 Q32,14 32,26 L32,32 L8,32 Z"/></svg>
    <span class="afp-cap">bar handle → pull</span>
  </div>
</div>
css
.afp-wrap{display:flex;gap:clamp(10px,5vmin,30px);align-items:center;justify-content:center;width:100%;height:100%;padding:clamp(8px,3vmin,16px)}
.afp-door{position:relative;width:34%;max-width:150px;height:78%;background:var(--surface);border:1.5px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center}
.afp-panel{position:absolute}
.afp-plate{width:34%;height:38%;background:var(--muted);opacity:.5;border-radius:3px;top:30%;left:50%;transform:translateX(-50%)}
.afp-bar{width:16%;height:44%;background:var(--accent);border-radius:3px;top:28%;right:14%}
.afp-hand{width:20%;position:absolute;top:34%;left:8%;fill:var(--accent-2);animation:afp-push 2s ease-in-out infinite}
.afp-hand-pull{left:auto;right:36%;animation:afp-pull 2s ease-in-out infinite}
.afp-cap{position:absolute;bottom:-1.9em;font-size:clamp(8px,2.2vmin,11px);color:var(--muted);white-space:nowrap}
@keyframes afp-push{0%,20%{transform:translateX(0)}50%{transform:translateX(60%)}80%,100%{transform:translateX(0)}}
@keyframes afp-pull{0%,20%{transform:translateX(0)}50%{transform:translateX(-60%)}80%,100%{transform:translateX(0)}}

Affordance is a term coined by psychologist James Gibson for "the possibilities for action that an environment offers an actor." Donald Norman brought it into product design, and his most-cited example is the "Norman door" — a door fitted with only a flat plate can only be pushed, so there's no room for confusion; one with a vertical bar handle signals pull through its shape alone. The trouble case is a door that needs pulling but is fitted with a flat plate anyway, so everyone keeps pushing — that's affordance and signifier (the cue telling you what to do) coming apart.

On physical products, affordance runs through touch, weight, and sound as much as sight. Knurling cut into a knob's surface signals "turn me"; a raised lip around a dial's edge signals "hook a finger here and rotate." A concave dish sunk into a button's face signals "press here," because a thumbprint naturally settles into a hollow.

A shadowed rectangle in a UI reading as a "pressable button" is the same physical affordance faked on a screen, and it's why skeuomorphism leaned on it so heavily in early touchscreen interfaces — reusing a shape cue already learned from the physical world, so the interface didn't have to explain itself.

When to use

When checking whether a control's shape (a handle, button, or dial) actually matches how it works.