brunch

매거진 UX 디자인의 모든 것

라이킷 134 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Oct 01. 2018

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

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

사용자의 다음 헹위를 유도하기 위한 어포던스 효과를 적절하게 사용해야 합니다. Affordance 버튼을 제공하여 유저가 원하는 것을 얻기 위해 들여야 하는 노력을 줄여줘야 합니다. 어포던스는 사용자의 다음 행위를 유도하기 시각적 단서를 제공하는 것입니다. 문고리를 잡아당기면 문이 열리든지, 주차할 때 주차를 안내하는 주차 안내선이 해당합니다. 웹사이트의 경우 행동유도 버튼을 예로 들 수 있습니다. 행동유도 버튼은 한 화면에 유저가 수행할 수 있는 한 가지 액션만 제공하는 것이 좋으며, 어쩔 수 없이 여러 액션이 제공된다면 가장 중요한 액션만 눈에 잘 띌 수 있도록 행동유도 버튼(call-to action)은 눈에 잘 띄어야 합니다.

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

로그인 버튼의 역할은 사용자가 입력한 아이디와 패스워드를 시스템에 보내는 것입니다. 그런데 아래 좌측 사례에서 보듯이 사용자가 어떤 정보를 입력하지 않았음에도 불구하고 로그인 버튼이 액션버튼처럼 보여지고 있습니다. 이는 잘 못된 어포던스 효과를 주는 것입니다. 이는 현재처럼 마이페이지에 아이디와 비밀번호를 입력을 요구하지 않는다면, 로그인버튼은 강조버튼이 아닌 최소한의 크기로 부차적 버튼 형태로 보여줘야 합니다. 혹은 로그인 버튼 모양을 삭제하고 링크 정도로 보여줘도 무방합니다. 또한, 로그인 버튼을 눌렀을 때 나타나는 다음 로그인 페이지의 화면인데 로그인 버튼은 다른 버튼에 비해 강조되어야 함에도 불구하고 오히려 지문로그인 버튼이 더 강조되어 어퍼던스 효과를 잘 못 사용되고 있습니다.

개편전 로그인 화면

이후 개편된 로그인 화면은 (좌) 작게 크기의 버튼으로 구성되어 있으며, (우) 지문로그인 버튼은 삭제되고 로그인 버튼은 크게 보여줘 어포던스 효과를 주고 있습니다.

개편 이후 로그인 화면

사용자 다음 행위를 유도하기 위한 어포던스 원칙2. 기능을 조작할 때 버튼에 어포던스(Affordance)를 줘 사용자의 다음 행위를 끌어내야 합니다.

예를 들어 팟티의 경우 편집 목록에서 아무것도 선택하지 않았을 때는 페이지 하단의 삭제 버튼은 비활성화 상태로 보여주고 있다가, 하나 이상을 선택하였을 때 삭제 버튼은 활성화 상태로 어포던스를 주고 있습니다.

반면, 팟빵은 편집 목록에서 목록에 있는 팟캐스트를 선택하든, 선택하지 않든 페이지 하단의 삭제 버튼은 색상 등 시각적 상태 변화가 전혀 없습니다.

또 하나의 예를 들어 보겠습니다. 카카오뮤직의 경우 댓글을 달기 전에는 버튼이 비활성화되어 있다가, 댓글을 달기 시작하면 비활성화된 버튼은 활성화된 버튼으로 바뀌어 사용자의 어포던스를 유도합니다.

반면, Mnet의 경우 댓글을 아직 달지 않았음에도 불구하고 댓글 '등록' 버튼이 활성화 상태로 보입니다.

Mnet

사용자 다음 행위를 유도하기 위한 어포던스 원칙3. 과업 행위가 연속성이 있다면 다음 행위에 어포던스 효과를 줘야 합니다.

예를 들어 삼성카드 앱의 경우 본인확인 단계에서 시스템이 요청한 사항을 다 입력하지 않았을 때 '인증번호 발송' 버튼이 비활성화 상태로 보입니다. 시스템이 요청한 사항을 다 입력하면 바로 '인증번호 발송' 버튼이 활성화 상태로 보이기 때문에, 사용자가 다음에 어떤 행위를 해야 알지 알게 됩니다.

반면, 롯데카드 모바일 웹의 경우 본인인증 단계에서 시스템이 요청한 사항을 다 입력하든지, 그렇지 않든지 '인증번호 받기'와 '다음' 버튼은 마치 눌러도 된다는 것처럼 활성화된 상태로 보입니다. 실제를 정보를 입력하지 않은 상태에서 눌러보면 '오류 메시지가 나옵니다. 때문에 '인증번호 받기'와 '다음' 버튼은 비활성화된 상태로 보여줘야 합니다.

롯데카드 모바일 웹

사용자 다음 행위를 유도하기 위한 어포던스 원칙4. 기능은 그 상태를 명확하게 보여줘 사용자의 다음 행위를 유도해야 합니다.

기능을 조작할 때 대표적인 콤포넌트가 버튼이 있습니다. 버튼의 의미는 '누른다' 의미가 담겨져 있습니다. 따라서 버튼은 클릭할 수 있다는 자체를 시각적으로 명확하게 보여줘야 합니다.

예를 들어 카카오 뮤직의 경우 페이지 하단에 현재 재생 중인 곡임을 알 수 있도록 바 형태로 제공되고 있습니다. 다음 곡을 듣고자 하는 경우 바 우측에 >> 버튼이 활성화 상태의 색상으로 되어 있어, 이 버튼을 누르면 다음 곡이 재생된다는 생각을 하게 합니다.

카카오뮤직

반면, 지니의 경우 페이지 하단에 현재 재생 중인 곡을 바 형태로 제공하고 있는데, 다음 곡으로 이동하는 '>>' 버튼이 회색의 색상으로 흐리게 보여, 마치 버튼 자체가 비활성화 상태인 것처럼 착각을 일으킵니다. 그래서 '다음 재생 곡이 없나?' 하는 착각을 일으킵니다.