[UX] Affordance 행동을 유발하는 디자인

 

What is Affordance?

어포던스는 인지 가능한 행동 가능성, 즉 사용자가 가능하다고 생각하는 행동으로 해석된다.  

물체가 어떻게 작동하는지, 물체가 인식하는 기능과 실제 기능을 어떻게 생각하는지에 대한 강력한 지표로 사용된다.

 

Affordance History

affordance 지각 심리학자 James J. Gibson이 만들어 낸 개념이다. (The Ecological Approach to Visual Perception)

이 개념은 Donald Norman이 1988년 그의 저서 The Psychology of Everyday Things에서 소개되어졌고, 이후 개념은 다양한 산업에 걸쳐 유행하게 된다. Donald Norman과 Gibson의 주장은 서로 달랐고, Donald Norman은 Affordance에 대해 'Perceived Affordance'라고 수정하게 된다. 

 

둘의 주장의 차이는 

Gibson's Affordance	Donald Norman's Affordance
"이 가능성을 인식하는 개인의 능력과 무관하게 환경에서 개인이 사용할 수 있는 행동 가능성" 사용자의 행동 능력과 관련된 환경에서의 행동 가능성 사용자의 경험, 지식, 문화 또는 인지 능력과 무관 어포던스는 존재하기도 하고 존재하지 않기도 함 모든 행동에 대한 유발 가능성	"사물의 인식 및 실제 속성을 말하며, 주로 사물이 어떻게 사용될 수 있는지를 결정하는 기본 속성이다. 어포던스가 활용될 때 사용자는 사진, 라벨 또는 지침없이 보기만 해도 무엇을 해야하는지 아는 것." 실제로 존재하지 않을 수도 있는 인식된 특성 속성을 사용하는 방법에 대안 또는 단서 사용자의 경험, 지식, 문화에 따라 달라질 수 있음 행동을 어렵게 만들거나 쉽게 만들 수 있음 특정 행동의 유발 가능성

출처 : McGrenere and Ho, 2000

 

심리학에는 비 직접 지각, 직접 지각 두가지 관점으로 나눌 수 있다.

 

비 직접 지각은 전통적인 심리학적 관점으로, 사람이 외부로 부터 자극을 받으면 >  뇌에서 그에 대한 이미지를 생성하고 기억하는 등의 과정을 거친다는 관점과 직접 지각은 사람의 뇌에서 복잡한 프로세스 없이 사물 자체로 존재하여 이것을 그대로 받아들이는 관점이 있다.

 

 

특정 대상이 가지고 있는 본질적, 외면적 속성이 우리에게 전해주는 무언가
Gibson

과거 지식과 경험이 우리 주변에 있는 사물의 지각에 적용되는 것으로 사물에 관한 정신적 해석에 기인
Donald Norman

 

 

두 사람의 이야기로 보아 Gibson은 직접 지각 관점으로 

Norman은 비직접 지각의 관점으로 바라 본다는 것을 알 수 있다.

 

이후 Gaver(1991)의 Afforance

 

Gaver는 Affordance와 지각정보의 유무를 바탕으로 영역을 나눴다. Gaver의 논문 Technology Affordances에서 어포던스는 지각의 유무와 상관없이 존재 하는데 이는 그것들이 지각되어야만하는 고유한 속성을 가지고 있다고 설명한다.

이 말은 어포던스는 지각되었을 때 결국 행위자에게 의미가 있다는 뜻이다. 

 

Gaver의 이론으로 Norman 이론이 설명 가능한데, False Affordance는 잘못된 디자인, perceptible affordance는 잘된 디자인이라고 설명할 수 있다.

 

출처 : Gaver (1991)

 

 

Types of Affordance

1) Obvious Affordance

명백한 어포던스는 개체의 지각 속성으로, 개체가 어떻게 사용될 것인지에 대한 아이디어를 제공한다. 명시적 어포던스는 사용자가 쉽게 찾을 수 있으므로 기술에 정통하지 않고 일반적인 디자인 규칙이나 패턴을 이해하지 못하는 사용자에게 적합하고 사용자에게 혁신적인 디지털 인터페이스를 도입할 때도 유용하다.

2) Hidden Affordance

숨겨진 어포던스는 개체의 고유 속성이다. 항목의 성능을 나타내는 증거는 명확하지 않을 수 있으며 조치가 취해질 때까지 나타나지 않을 수도 있다. 숨겨진 어포던스의 간단한 예는 드롭다운 메뉴 또는 사용자가 마우스를 올려놓을 때만 나타나는 UI의 기타 클릭 가능한 기능이다.

3) Pattern Affordance

사용자가 이미 인식하고 있는 패턴에 의존하기 때문에 가장 일반적인 유형의 어포던스이다. 웹사이트의 홈페이지 내비게이션은 많은 사용자가 이해하는 패턴이므로 예로는 홈페이지에 내비게이션이 있다. 다른 예로는 텍스트 본문의 하이퍼링크를 참조하는 밑줄, 기울임꼴 또는 대조 텍스트, 카메라의 셔터는 오른쪽에 위차한 것을 말한다. 

 

hyperlink

사진: Unsplash 의 Andrew Hutchings

패턴은 암기할 필요가 없도록 사용자에게 유용한 정신적 지름길을 제공한다. 패턴은 기술에 정통한 사용자를 위해 디자인할 때는 유용하지만 디지털 인터페이스에 대한 경험이 적은 사용자에게는 혼란스러울 수 있어, 기존 패턴을 깨는 것을 경계해야 한다.

4) Metaphorical Affordance

일러스트레이션 어포던스는 의도를 전달하는 데 사용되는 실제 또는 원래 개체의 이미지를 기반으로 한다. 예를 들어 온라인 구매를 나타내는 장바구니 아이콘, 이메일 또는 메시지를 보내기 위해 봉투에 넣거나 녹음하는 옵션을 보여주는 마이크 이미지가 있다. 

5) Wrong Affordance

객체의 속성이 객체가 실제로 작동하지 않음을 나타내는 경우 거짓 어포던스가 발생한다. 이에 대한 예는 잘못 연결된 버튼, 예상치 못한 반응을 말한다. 허위 어포던스는 종종 의도하지 않거나 효과적인 설계 기술이 부족하기 때문에 나타난다.

6) Negative Affordance

부정적인 어포던스는 작업이나 상호 작용의 부족을 표현할 때 사용된다. 이러한 유형의 비용은 일반적으로 고객으로부터 더 많은 정보가 필요하고 고객이 다음 단계로 넘어가지 않도록 하려는 경우에 나타난다.

 

Affordance in UI

어포던스는 사람과 물리적 또는 디지털 객체 간의 관계이고, 사용자 인터페이스(UI) 디자인에서 어포던스는 매우 분명하다. 

사용자의 현재 기대치와 이전 경험을 기반으로 사용자는 UI에서 사용 가능한 옵션이나 작업을 통해 관찰하고 가능한 작업을 결정한다.

 

1) 버튼
버튼은 인터페이스에서 상호 작용을 나타내는 데 사용되는 핵심 요소 중 하나이다. 

크기, 색상, 음영, 대비 및 관련 사본은 명확하고 효과적인 버튼을 만드는 데 큰 역할을 한다.

2) 애니메이션
애니메이션 표현은 종종 실제 동작이나 움직임(밀기, 당기기 등)을 모방하며 단순한 것부터 매우 복잡한 것까지 다양하다. 토글 버튼은 사용자가 토글을 드래그할 때 모양이나 색상의 변화를 보여주는 단순한 애니메이션 디스플레이다.

 

3) 알림
알림은 사용자의 주의를 끌거나 변경 사항을 표시하는 데 사용할 수 있다. 예를 들어 사용자가 프로필 설정을 완료하지 않은 경우 메뉴 표시줄의 프로필 아이콘 옆에 빨간색 점이 나타날 수 있다. 또 다른 좋은 예는 장바구니에 항목을 추가할 때 장바구니 아이콘 옆에 나타나는 숫자이다.

4) 입력 필드
입력 필드는 사용자 데이터를 입력할 수 있는 위치를 나타냅니다. 이들은 종종 필드의 크기와 면적과 배경의 차이로 표시됩니다.

5) 아이콘
아이콘은 종종 사용자 인터페이스를 탐색할 수 있는 패턴이나 은유에 의존합니다. 전통적인 디자인은 "즐겨찾기" 페이지를 나타내기 위해 하트나 별 기호를 사용하는 기능을 사용하는 반면 플로피 디스크 아이콘은 은유적으로 "저장" 버튼으로 제공됩니다.

6) 사진
아이콘, 사진, 이미지 사용으로 소비자가 제품으로 무엇을 할 수 있는지 이해하는 데 도움이 되는 빠른 시각적 코드를 줍니다.

 

What is the best affordacne?

적절한 어포던스는 인터페이스, 정보, 시스템을 설계하는 것에서 고객 오류 및 마찰을 최소화하는 것이다. 

디자인으로 인한 행동 부족이나 원치 않는 결과로 잘못된 방향을 제시해서는 안된다.

 

 

 

 

 

+ 참고 문헌 
https://brunch.co.kr/@booungsae/4
https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/affordanceshttps://uxmag.com/articles/affordance-in-good-product-design https://www.uxpin.com/studio/blog/affordances-user-interaction/ https://medium.com/@thoughtbottler/affordance-the-indicator-of-good-design-1977362f4ea9https://uxdesign.cc/understanding-affordance-in-ui-design-4b4ddbdd0b30https://uxplanet.org/ux-design-glossary-how-to-use-affordances-in-user-interfaces-393c8e9686e4https://webdesign.tutsplus.com/ko/articles/web-design-glossary-what-is-affordance--cms-23902