Design Atlas
한국어
⌘ UX terms & laws

Signifier

시그니파이어

An affordance nobody notices is useless — a signifier is the explicit signal (arrow, label, icon) that tells you what to do.

Also known as: Signifiers
···
html
<div class="stage">
  <div class="pane"><div class="tag">A</div>
    <div class="door" id="d1"></div>
    <div class="cur" id="c1">➤</div>
  </div>
  <div class="pane"><div class="tag">B</div>
    <div class="door" id="d2"><span class="arrow"></span></div>
    <div class="cur" id="c2">➤</div>
  </div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:6%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;overflow:hidden}
.tag{position:absolute;top:8px;left:10px;font:700 11px/1 monospace;color:var(--muted)}
.door{position:relative;width:46%;height:66%;border-radius:6px;background:linear-gradient(180deg,var(--bg),var(--line));border:2px solid var(--line);transform-origin:left center}
.arrow{position:absolute;right:14%;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--accent)}
#d1{animation:shake 2.6s ease-in-out infinite}
@keyframes shake{0%,50%{transform:rotate(0)}56%,64%,72%{transform:rotate(2deg)}60%,68%{transform:rotate(-2deg)}80%,100%{transform:rotate(0)}}
#d2{animation:swing 2.6s ease-in-out infinite}
@keyframes swing{0%,55%{transform:perspective(400px) rotateY(0)}80%,100%{transform:perspective(400px) rotateY(-55deg)}}
.cur{position:absolute;font-size:15px;transform:rotate(-45deg);color:var(--fg)}
#c1{animation:pull 2.6s ease-in-out infinite}
#c2{animation:push 2.6s ease-in-out infinite}
@keyframes pull{0%{left:20%;top:75%}50%{left:64%;top:48%}65%{left:56%;top:48%}100%{left:56%;top:48%}}
@keyframes push{0%{left:20%;top:75%}55%{left:68%;top:48%}80%{left:78%;top:48%}100%{left:78%;top:48%}}

Don Norman split this from affordance in the revised "Design of Everyday Things." A door handle affords pulling; the "PULL" sign next to it is the signifier. A flat push-plate has no handle-affordance at all, so the sign becomes mandatory.

Onscreen, a dropdown's ▾ arrow, a drag handle's grip icon, a link's underline — all signifiers. Function without a signal just makes users push when they should pull, or the reverse.

Door A has no sign, so the user pulls and gets stuck. Door B shows an arrow and opens the right way.

When to use

When affordance alone isn't enough, add a label, arrow, or icon. "Looks nice but I don't know what to do" feedback is a missing-signifier signal.