어포던스 — 눌리는 건 눌리게 생겨야 한다

문 손잡이가 "당기세요"라고 말하지 않아도 당기게 생긴 것, 그게 어포던스다. 화면에서는 눌리는 것은 눌리게, 안 눌리는 것은 안 눌리게 생겨야 한다. 화면이 평평해지면서(플랫 디자인) 이 신호가 약해졌고, 그래서 더 의식적으로 챙겨야 한다.

DEMO셋 다 버튼이다 — 어느 것이 눌리게 생겼나?
첫 버튼은 올리면 밝아지고 누르면 눌려 들어간다. 상태가 손에 답한다.
  • 인터랙티브 요소의 4상태를 다 그린다. 기본 · hover · 누름(active) · 잠김(disabled). 키보드용 focus까지 다섯.
  • 링크와 버튼을 구분한다. 이동은 링크(밑줄·색), 행동은 버튼(면·형태). 섞이면 예측이 깨진다.
  • 커서만 pointer로 바꾸는 건 어포던스가 아니라 변명이다. 모바일엔 커서가 없다.
사용자가 "이거 눌리나?" 하고 시험 삼아 눌러 보게 만들었다면 이미 진 것이다.

브루니가 적는다

색을 바꾸며 숨는 카멜레온이다. 화면을 보는 눈과 만드는 손을 한 강씩 적는다.

UI/UX 교과서 표지 · 전체 26강 →