Affordable UX

contents

대부분의 서비스는 서비스의 페르소나와 시나리오가 존재합니다. 유저가 서비스 기획 의도대로 사용하길 바라면서 이를 유도하는 UX를 Affordable UX라고 합니다.

Affordance는 말 그대로 어떤 행동을 유도하는 것, 즉 행동유도성을 뜻합니다.

Affordance는 사용자의 다음 행위를 유도하는 시각적 단서를 제공합니다. 예를 들어서, 문고리를 잡아당기면 문이 열린다던지, 주차 시에 주차를 안내하는 주차 안내선을 따라서 주차를 하면 된다던지 하는 시각적 단서들이 있습니다.

앱 내에서는 UI 컴포넌트의 color, opacity, boarder, animation 등의 변화를 통해서 행동을 유도할 수 있게 됩니다.

행동을 유도하는 버튼은 한 화면에 유저가 수행할 수 있는 한 가지 액션만 제공하는 것이 좋습니다. 어쩔 수 없이 여러 액션이 제공되어야 한다면 가장 중요한 액션만 눈에 잘 띌 수 있도록 해야 합니다.

사용자의 다음 행위를 유도하기 위한 Affordance 4원칙이 있습니다.

사용자의 다음 행위를 유도하는 버튼에는 어포던스 효과를 줘야 하고, 그렇지 않은 버튼은 어포던지 효과를 주지 말아야 합니다.

•

(왼쪽 사진) 사용자가 어떤 정보를 입력하지 않았음에도 불구하고 로그인 버튼이 액션 버튼처럼 보여짐

•

(오른쪽 사진) 로그인 버튼이 다른 버튼에 비해 강조되어야 함에도 불구하고 오히려 지문로그인 버튼이 더 강조되어 어퍼던스 효과를 잘못 사용함

기능을 조작할 때 버튼에 어포던스(Affordance)를 주어 사용자의 다음 행위를 끌어내야 합니다.

한 글자라도 적으면 댓글 전송이 활성화된다.

과업 행위가 연속성이 있다면 다음 행위에 어포던스 효과를 줘야 합니다.

삼성 카드 앱

•

본인확인 단계에서 시스템이 요청한 사항을 다 입력하지 않았을 때 ‘인증번호 발송' 버튼이 비활성화 상태로 보이고 시스템이 요청한 사항을 다 입력하면 인증번호 발송 버튼을 활성화 상태로 보여줌

•

사용자가 다음에 어떤 행위를 해야할지 알게 될 것

기능은 그 상태를 명확하게 보여줘 사용자의 다음 행위를 유도해야 합니다.

버튼은 클릭할 수 있다는 자체를 시각적으로 명확하게 보여줘야 합니다.

테슬라 법칙

복잡성 보존의 법칙 : 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.

우리는 인터랙션, 인터페이스 등을 이용해서 복잡성에 대한 유저의 인지부하를 덜어주어야 합니다.

•

간단한 로그인 프로세스 : Touch ID, Face ID, 소셜 로그인

•

일련의 프로세스 자동화 : 회원가입 프로세스, 입력 프로세스

•

마이크로 인터랙션

•

코치마크

•

최소한의 기능이 있는 UI

마이크로 인터랙션은 서비스 이용 시 사사로운 피드백을 제공하는 것을 말합니다.

이는 아주 작은 피드백이지만 서비스의 retain에 큰 영향을 주게 됩니다.

마이크로 인터랙션의 요소에는 3가지가 있습니다.

•

상태 전달

•

조작 감각 전달

•

액션에 대한 피드백

코치마크는 서비스 사용이 익숙하지 않은 유저에게 온보딩 및 사용 가이드 라인을 제공하는 기능입니다.

하지만, 코치마크를 사용하지 않을 수 있는 UI/UX가 바람직합니다.

네이버 앱 코치마크

카카오TV 코치마크

•

사용자의 다음 행위를 유도하기 위한 어포던스 4원칙