사용자의 다음 행위를 유도하는 시그니파이어 3원칙
안녕하세요. UX 컨설턴트 전민수입니다.
제가 최근 홀릭스에서 365 day 하루도 빠지지 않고 UX 라이브 Zoom 강의를 진행하고 있습니다.
4개 UX 강좌 진행 중에 있습니다.
[Live UX 강좌1] 홀릭스에서 매일 UX Quiz 풀어보면서 자신의 UI/UX 지식의 체크해 보세요~
[Live UX 강좌2] 홀릭스에서 두 달 만에 완성하는 UX 포트폴리오 스터디를 통해 UX 포트폴리오 만들어 보고, 1:1 코칭받아 보세요~
[Live UX 강좌3] 홀릭스에서 UX 리서치 A-Z 기초부터 고급 실력까지 쌓아보고, 1:1 코칭받아 보세요~
[Live UX 강좌4] 홀릭스에서 UX 설계 A-Z 스킬을 쌓아보고, 1:1 코칭받아보세요~
위 모든 Live 강좌에 대해 일주일 무료 체험 쿠폰을 드리고 있으니, 관심 있는 분은 아래 링크를 클릭해 주세요. 더 자세한 Live 강의 커리큘럼 살펴볼 수 있습니다.
사용자의 다음 행위를 유도하는 시그니파이어 3원칙
시그니 파이어 원칙 1. 모바일 앱에서는 시그니파이어를 제공하여 사용자의 다음 제스처 행위를 유도해야 합니다.
시그니파이어는 모바일 앱에서 사용자의 제스처 행위를 유도하는 등 시각적 단서입니다. 예를 들면 브천치 앱의 경우 이전과 다음 글이 있다는 것을 이미지 목록 형태로 살짝 보여줘 스와이핑을 유도하고 있습니다.
브런치. 좌우 스와이핑 유도 또 다른 예를 들어 보겠습니다. 사용자가 재생 목록에서 관심 있는 음원을 발견했을 때 내가 만든 어떤 카테고리에 담을까 고민하게 됩니다. 네이버 뮤직의 경우 '내 리스트 담기' 팝업창 하단에 리스트 이미지와 담기 버튼을 겹쳐 보이게 하여 현재 보여주고 있는 것 외에 리스트가 더 있다는 것을 시각적 단서를 주고 있습니다.
네이버 뮤직반면, 카카오뮤직의 경우 재생 음원을 뮤직리스트에 담을 때 네이버 뮤직처럼 팝업창이 제공되고 있으나 마치 4개의 카테고리만 있는 것처럼 보여 시그니파이어의 효과가 잘 반영되어 있다고 보기는 어렵습니다.
카카오뮤직시그니 파이어 원칙 2. 폼의 텍스트 박스는 입력 상황에 맞게 크기가 제공되어야 합니다.
폼의 텍스트 박스는 모두 같은 크기 형태로 제공할 필요가 없습니다. 입력 상황에 따라 크기는 달라져야 합니다. 만약 텍스트 박스가 사용자가 답변한 것보다 너무 길거나 적다면, 사용자는 내가 질문 의도를 잘 못 이해하고 답변하고 있는지 고민에 빠지게 될 것입니다. 사용성이 좋다는 것은 그만큼 사용자의 고민이 최소화되는 것을 말하는 것입니다.
예를 들어 메리츠 다이렉트에서 신용카드로 본인 확인 시, 카드번호, 유효기간, 비밀번호 등이 입력하는 숫자만큼 텍스트 박스의 크기가 제공되어 입력하기 편합니다.
메리츠 다이엑트또 하나의 예를 들어 보겠습니댜.
삼성카드 앱의 경우 면허번호 입력 시 숫자 입력 범위에 맞춰 크기가 맞춰져 있습니다.
반면, BC카드 앱의 경우 운전면허증 정보 입력 시 지역번호를 제외하고 세칸으로 나뉘어져 있습니다. 첫번째와 세번째 칸은 숫자 입력 사항에 맞춰 크기가 적절해 보입니다. 그런데 두번째 칸은 그렇지 않습니다. 두번째 칸에 숫자 6자리를 입력해야 하는데, 실제 입력칸은 숫자 3개만 입력해도 되는 것처럼 보이기 때문입니다.
시그니 파이어 원칙 3. 폼 입력 시 커서 모양을 통해 입력할 수 있다, 불가능하다 시각적 단서를 통해 알려줘야 합니다.
PC 버전의 경우 마우스 커서를 필드에 대었을 때 입력이 가능한 필드는 마우스 커서가 깜박이고, 입력할 수 없는 필드는 커서가 입력할 수 없다는 모양으로 바뀌게 됩니다. 모바일에서 마우스 역할이 손가락으로 원하는 지점에 맞춰 정확히 탭 하는 것입니다.
예를 들어 삼성화재 다이렉트의 경우 이름을 입력하기 위해 입력 칸에 손가락으로 탭을 하게 되면, 입력 칸의 테두리 색이 파린색으로 바뀌고 커서는 깜박거리는 등 사용자의 입력 행위를 유도합니다.
반면, 동부화재 다이렉트의 경우 필드 선택 시, 테두리 색상이 이전과 같은 하얀 색상이어서 입력 필드를 제대로 선택했다는 시각적 단서를 전달하고 있지 못합니다. 또한, 커서의 움직임 또한 파란색으로 배경색에 묻혀 눈에 잘 띄지도 않습니다.
동부화재 다이렉트사용자의 다음 행위를 유도하는 시그니 파이어 3원칙을 정리하면 다음과 같습니다.
모바일 앱에서는 시그니파이어를 제공하여 사용자의 다음 제스처 행위를 유도해야 합니다.
폼의 텍스트 박스는 입력 상황에 맞게 크기가 제공되어야 합니다.
폼 입력 시 커서 모양을 통해 입력할 수 있다, 불가능하다 시각적 단서를 통해 알려줘야 합니다.
감사합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
