딱보면 척이지!Affordance에 대한 이야기

!by 타칭 팡요 힙스터

햄버거 아이콘이라고 들어보셨나요?

?????

https://www.flickr.com/photos/marielou/184022067/

바로 요 버튼!

메뉴버튼이군!

아하

근데 왜 이게 메뉴 아이콘이죠?

메뉴처럼 생겼나..? 별로 누름직하지도 않은데

어쨌든 여러군데서 쓰니까 다들 알아먹는다고 합니다

!

학습효과의 무서움!

Affordance?

행동 유도성이라고 많이 번역되는데 UX에서 굉장히굉장히굉장히 자주 등장하는 개념이죠

https://www.flickr.com/photos/devilducmike/11222532344/

Affordance?

쉽게 말해서 의자를 보면 앉고싶다. 침대를 보면 눕고싶다. 누우면 아 자고싶다…(이건 아님)

https://www.flickr.com/photos/devilducmike/11222532344/

문고리가 중요한게 아니고… !

중요한건 우리가 매일 고민하는 프로덕에서 Affordance를 항상 고려하고 있다는 점!

각 요소들이 뭘 하게끔 의도했는지 딱보면 척 알 수 있는데

!사실 생각보다 꽤 다양한 방식으로 이루어집니다

1. 대놓고 알려주기 (Explicit Affordance)

중요하게 완수해야 하는 과업일 경우 (Pay me money!!)

!아직까지 이런 패턴이 없었던 경우

(Pull down to refresh)

2. 다른데서도 그랬으니 아마도.. (Pattern Affordance)

카카오스토리 웹앱을 처음보는 사람도

로고를 누르면 아마도 홈으로 갈 것이고

우측 상단에는 프로필 페이지 아니면 알림 등의 버튼이 있겠지?

3. 왠지 그렇게 생겼는데? (Metaphorical Affordance)

돋보기를 보니 왠지 검색이 하고싶어지는데?

아 왠지 영한 영영 국어 일본어 중국어 한자 사전일 것 같아!

동작을 실제 사물과 연관짓는것만큼 강려크하고 직관적인 방법은 없음!

!

요즘 애들은 디스켓이왜 저장을 의미하는지 모른다는건 함정

4. 숨겨놨지만 알고있다! (Hidden Affordance)

AHA!

모든 카드마다 버튼을 다 보여주면 너무 복잡하니까 마우스를 올리면 보여주자!

!하지만 유저는 모르고 지나갈 수도 있으니

핵심 기능을 숨겨놓을 땐 정말정말 숙고해서..

5. 그럴 것 같았는데 아니었어! (False Affordance)

이건 그냥 텍스트 같은데?

헐 눌러진다

우리 중에 스파이가 있어

얘만 안눌러짐!

6. 아직 안돼! (Negative Affordance)