Design Atlas
한국어
⌘ UX terms & laws

Affordance

어포던스

The property of an object's form that suggests how it can be used — a raised, shadowed button visually says "press me."

Also known as: Perceived affordance
···
html
<div class="stage">
  <div class="pane">
    <button class="real" id="b1">Save</button>
    <div class="cur" id="c1">➤</div>
  </div>
  <div class="pane">
    <span class="flat" id="b2">Save</span>
    <div class="bub" id="q">?</div>
    <div class="cur" id="c2">➤</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%;align-items:center}
.pane{position:relative;flex:1;height:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.real{padding:10px 22px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:700;box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000),0 10px 16px rgba(0,0,0,.2);animation:press 2.4s ease-in-out infinite}
@keyframes press{0%,55%{transform:translateY(0);box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000),0 10px 16px rgba(0,0,0,.2)}65%,75%{transform:translateY(6px);box-shadow:0 0 0 transparent}85%,100%{transform:translateY(0);box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 60%,#000),0 10px 16px rgba(0,0,0,.2)}}
.flat{color:var(--fg);font-weight:700;font-size:15px}
.bub{position:absolute;top:24%;left:60%;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;font:700 12px/1 monospace;color:var(--muted);opacity:0;animation:q 2.6s ease-in-out infinite}
@keyframes q{0%,50%{opacity:0;transform:translateY(6px)}65%,85%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.cur{position:absolute;font-size:16px;transform:rotate(-45deg);color:var(--fg)}
#c1{animation:go1 2.4s ease-in-out infinite}
#c2{animation:go2 2.6s ease-in-out infinite}
@keyframes go1{0%{left:20%;top:70%}55%{left:48%;top:47%}100%{left:48%;top:47%}}
@keyframes go2{0%{left:20%;top:70%}60%{left:52%;top:45%}100%{left:56%;top:40%}}

Coined by psychologist James J. Gibson, brought into UI/UX by Don Norman in "The Design of Everyday Things." Norman later split real affordance from *perceived* affordance — what the design matters for is the latter.

A shadowed, raised button with a press animation reads as "you can push this." Flat text with no depth cue leaves users unsure whether it's even clickable, so they hesitate.

Flat design trends weakened affordance across the web, which is why underlines and hover-color shifts (see: signifier) made a comeback as minimal cues.

When to use

Before shipping a new component, ask 'does this look pressable?' Every clickable element needs at least one cue — cursor, colour, or depth.