Signifier, Affordance를 가리키는 표식

한 줄로

문이 밀어야 열린다는 사실(affordance)을 사용자에게 알려주는 것. 평평한 금속판, 화살표 스티커, "PUSH" 글자. 그것이 signifier입니다.

어디서 왔나

도널드 노먼이 The Design of Everyday Things 첫 판(1988)에서 affordance를 도입한 뒤, 한 가지 혼란이 생겼습니다. 디자이너들이 "이 버튼에 affordance를 더했다"고 말하는데, 실제로는 affordance가 아니라 affordance를 보이게 만든 표식을 추가한 것이었습니다.

이 혼란을 정리하기 위해 노먼은 2008년 Interactions 잡지에 "Signifiers, not Affordances"라는 글을 실었습니다. 두 개념을 분명히 분리한 것입니다.

Affordance: 사물이 실제로 할 수 있는 행동의 가능성. 객관적 속성.
Signifier: 그 affordance를 사용자에게 알리는 시각적·청각적 신호. 디자이너가 통제 가능.

예시로 문을 생각해 보겠습니다. Affordance는 문이 "열기"라는 행동을 afford한다는 점입니다. Signifier는 손잡이 모양(당겨), 평평한 금속판(밀어), "PUSH" 글자입니다.

문 자체의 affordance는 같지만, signifier가 잘못되면 사용자는 매번 헷갈립니다. 노먼이 비판한 "노먼 도어"가 그것입니다.

UI에서

UI의 signifier 예시는 다음과 같습니다.

버튼의 그림자: "누를 수 있음"을 알립니다.
링크의 밑줄/색: "클릭 가능"을 알립니다.
드래그 핸들의 도트 패턴: "잡을 수 있음"을 알립니다.
호버 효과: 마우스 위치에서 "여기 무언가 일어남"을 알립니다.

플랫 디자인의 약점

iOS 7 이후의 플랫 디자인은 affordance는 그대로지만 signifier가 약했습니다. 사용자가 "이게 버튼인지 텍스트인지" 헷갈렸습니다. 그래서 Flat 2.0은 미묘한 그림자, 미묘한 입체감을 다시 도입했습니다. affordance를 더 강하게 signify하기 위해서입니다.

바이브 메이커가 챙길 한 가지

본인 UI를 처음 보는 사람에게 보여주고 "어디를 클릭할 수 있을 것 같으세요?"를 물어보세요. 답이 즉시 안 나오는 영역이 있다면, affordance는 있지만 signifier가 약한 곳입니다.

관련

Affordance, Flat design, Discoverability