1. 딱보면 척이지!
Affordance에 대한 이야기
!
by 타칭 팡요 힙스터

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

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

4. 바로 요 버튼!

5. 메뉴버튼이군!

6. 아하

7. 근데 왜 이게 메뉴 아이콘이죠?
메뉴처럼 생겼나..? 별로 누름직하지도 않은데

8. 어쨌든 여러군데서 쓰니까
다들 알아먹는다고 합니다
!
학습효과의 무서움!

9. Affordance?
행동 유도성이라고 많이 번역되는데
UX에서 굉장히굉장히굉장히 자주 등장하는 개념이죠
https://www.flickr.com/photos/devilducmike/11222532344/

10. Affordance?
쉽게 말해서
의자를 보면 앉고싶다.
침대를 보면 눕고싶다.
누우면 아 자고싶다…(이건 아님)
https://www.flickr.com/photos/devilducmike/11222532344/

11. 문고리가 중요한게 아니고…
!
중요한건 우리가 매일 고민하는 프로덕에서
Affordance를 항상 고려하고 있다는 점!

13. 각 요소들이 뭘 하게끔 의도했는지
딱보면 척 알 수 있는데
!
사실 생각보다 꽤 다양한 방식으로 이루어집니다

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

16. 중요하게 완수해야 하는 과업일 경우
(Pay me money!!)
!
아직까지 이런 패턴이 없었던 경우
(Pull down to refresh)

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

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

19. 로고를 누르면
아마도 홈으로 갈 것이고
우측 상단에는 프로필 페이지
아니면 알림 등의 버튼이 있겠지?

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

22. 돋보기를 보니 왠지 검색이 하고싶어지는데?
아 왠지 영한 영영 국어 일본어 중국어 한자 사전일 것 같아!

23. 동작을 실제 사물과 연관짓는것만큼
강려크하고 직관적인 방법은 없음!
!
요즘 애들은 디스켓이
왜 저장을 의미하는지 모른다는건 함정

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

26. AHA!

27. 모든 카드마다 버튼을 다 보여주면 너무 복잡하니까
마우스를 올리면 보여주자!
!
하지만 유저는 모르고 지나갈 수도 있으니
핵심 기능을 숨겨놓을 땐 정말정말 숙고해서..

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

29. 이건 그냥 텍스트 같은데?

30. 헐 눌러진다

31. 우리 중에 스파이가 있어
얘만 안눌러짐!

32. 6. 아직 안돼!
(Negative Affordance)