딱보면 척이지
Affordance에 대한 이야기
--
Affordance(행동 유도성)에 대해 들어보셨나요? Affordance는 UX에서 자주 나오는 개념으로 사용자가 어떤 버튼, 페이지 등에 어떻게 동작할지, 어떤 내용이 있을지 기대하는 바가 있는데 그 기대하는 바대로 프로덕트가 동작하는 개념을 말합니다. 딱보면 척 알 수 있는 바로 그것 이죠! 이번주의 세미나는 판교의 힙스터 황호성님이 Affordance에 대해 발표해 주셨습니다.
햄버거 아이콘을 누르면 메뉴가 튀어나온다든가, ‘?’ 아이콘을 누르면 설명이 나오는 걸 다들 예상합니다. 이런 Affordance는 여러 방식으로 표현되고 있습니다.
1. 대놓고 알려주기 (Explicit Affordance)
버튼 위에 ‘로그인’ 이라고 써 있는 경우 많이 보셨죠? 특정 상황에서 사용자가 행해야하는 핵심 액션을 강조하거나 이제까지 없었던 새로운 상호작용이라 가이드가 필요한 경우 Explicit하게 글로 사용자에게 안내해 줍니다.
2. 다른데서도 그랬으니 아마도…(Pattern Affordance)
학습효과라는 말과 비슷하다고 생각할 수 있겠네요. 처음에 예시로 들었던 햄버거 아이콘을 생각해 봅시다. 세줄자리 버튼을 누른다고 메뉴가 나온다는것을 스마트폰을 처음만져본 파푸아뉴기니 사람은 아마 모르겠죠. 하지만 우리는 메뉴가 나올 것을 기대합니다. 왜냐면 다른 서비스에서 그렇게 쓰고 있으니까!
3. 왠지 그렇게 생겼는데? (Metaphorical Affordance)
스마트폰을 꺼내 봅시다. 전화기 아이콘이 있네요. 이걸 누르면 전화를 할 수 있구나 싶죠. 편지봉투 아이콘이 있네요. 이걸 누르면 메일을 보낼 수 있겠다 라는 생각이 듭니다. 실제 사물을 본따 만든 아이콘으로 그 사물과 관계된 액션을 유도 할 수 있습니다. 이때, 돋보기 아이콘을 누르면 검색 결과를 보여주는건 연관성이 별로 없어보인다고 반박할 순 있겠네요. 사실 Metaphorical과 Pattern Affordance의 경우는 딱 잘라서 나눌 수 있는 개념은 아닙니다. Metaphorical Affordance의 경우 학습된 경우가 많다고 하네요
4. 숨겨놨지만 알고 있다! (Hidden Affordance)
특정 Trigger가 있어야만 할 수 있는 행동들이 있습니다. 예를 들어 웹페이지 화면에 마우스 오버를 해야 메뉴가 보이는 경우가 있죠. 지저분한 버튼을 숨길 수 있는 장점이 있는 반면 사용자가 Trigger를 알아내야만 하는 단점이 있습니다. 정말 중요한 액션의 경우엔 심사 숙고 하시길…
5. 그럴것 같았는데 아니었어!(False Affordance)
모든 프로덕트 디자이너들이 피하고 싶은 일일겁니다. 사용자가 기대한 대로 동작하지 않는 프로덕트는 아무 의미없습니다. 우리는 제대로 합시다.
6. 아직 안돼! (Negative Affordance)
어떤 서비스에 가입하려고 하는데 가입하기 버튼이 안눌리는 경험 하시적 있죠? 비밀번호 조건을 안지켰다든가 꼭 써야 하는 필드를 안썼다든가 할때 가입 버튼이 비활성화 되어 있습니다. 이런 경우를 Negative Affordance라고 합니다.
이론을 알아야만 좋은 프로덕트를 만들 수 있는것은 아니지만 런칭하기 전에 한번씩 생각해보며 점검하면 사용자에게 더욱 의미있는 프로덕트를 만들 수 있지 않을까합니다.
