사용자의 다음 행위를 유도하는 시그니파이어 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원칙을 정리하면 다음과 같습니다.
모바일 앱에서는 시그니파이어를 제공하여 사용자의 다음 제스처 행위를 유도해야 합니다.
폼의 텍스트 박스는 입력 상황에 맞게 크기가 제공되어야 합니다.
폼 입력 시 커서 모양을 통해 입력할 수 있다, 불가능하다 시각적 단서를 통해 알려줘야 합니다.
감사합니다.
추천 VOD UX 강좌
안녕하세요. UX 컨설턴트 전민수입니다.
브런치를 운영한 지 6년이 되었는데 어느덧 구독자 12,000명 되었네요.
여러분의 응원에 힘을 얻어 지금껏 아티클을 가능한 작성 했는데요. 많은 구독자께서 브런치 글을 강의로 제공하면 좋겠다는 의견이 많았습니다. 그래서 과거부터 최신 UX 아티클의 내용을 더 쉽게 전달시키는 목적으로 인터넷 강의 형태로 촬영하여 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.
UX 라이브클래스 패키지를 통해 전체 178여 개 UX 강좌를 하나의 패키지 형태(총 300시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 할인율 98%(정가 990,000원 > 할인가 98,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다. 참고로 매달 선착순 10명 한정 판매하오니 서둘러 주세요~
(라이브클래스 플랫폼 회사 계약으로 인해 매달 선착순 10명만 수강 신청 가능하오니 양해 바랍니다)
PM VOD 패키지 바로가기 >
그러데요~ 전민수 UX 컨설턴트님!
라이브클래스 VOD 패키지 구매 시 어떤 점이 좋은가요? 질문이 많은데요...
첫째. 기존 UX 인강 강의는 무제한 형태고 제공되고 있으나, 최신 UX 트렌드에 맞춰 업데이트되지 않는 경우가 많습니다. 그런데 제가 강의 운영하는 라이브클래스 패키지는 현재 제공된 UX 강의 300시간 외 매달 꾸준히 최신 10시간 이상 VOD 촬영하고 있습니다.
이를 라이브클래스 패키지에 빠르게 업데이트하고 있어, 여러분이 UX 최신 트렌드를 따라갈 수 있고 UX 실력을 쌓아 나아가고, UX 전문가로 성장하는데 많은 도움이 될 것입니다. 치매 걸리기 전까지 라이브클래스 패키지에 매달 10시간 업데이트 예정입니다.
둘째. 라이브클래스 패키지 강의는 UX 프로세스와 방법론을 A-Z 백과사전 형태로 33개 테마 형태로 묶여 있어서, 구글링, 유튜브 등 검색하지 않아도 빠르게 원하는 UX 지식을 얻을 수 있습니다.
앞으로도 국내 환경에 맞는 UX 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.
구독자 여러분 감사합니다.
