brunch

You can make anything
by writing

C.S.Lewis

by UX 컨설턴트 전민수 Jun 20. 2019

입력 상황에 맞는 키패드 제공 UX 디자인 가이드 원칙

UX 컨설턴트 전민수입니다.


지난 5년간 브런치에서 아티클 작성한 것을 토대로, 여러분께 UX 아티클의 내용을 더 쉽게 전달 시키는 목적으로 별도 강의 촬영하게 되었습니다. 그간 UX 강의 촬영했던 영상을 편집해서 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.   

UX 라이브클래스 패키지를 통해 전체 178여개 UX 강좌를 하나의 패키지 형태(총 121시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 2023년 3월 한정 이벤트 판매로 할인율 98%(정가 5,340,000원 > 할인가 99,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다. 


https://ebprux.liveklass.com/packages/137053


앞으로도 국내 환경에 맞는 UX 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.

감사합니다.  



사용자의 입력 상황에 맞춰 키패드를 보여줘야 합니다


신용카드 신청 시 본인 인증하기 위해서는 주민등록증이나 자동차 운전면허증 정보를 입력해야 합니다. 숫자 입력의 경우 숫자 키패드만 띄워줘 입력의 편의성을 높여주는 것입니다. 예를 들어 KB국민카드의 경우 면허증 번호 입력 시 숫자 키패드만 보여줘 입력하는데 어려움이 없습니다. 



이처럼 입력해야 하는 정보에 형식에 맞춰 숫자 키패드를 명확히 보여주면 사용자는 '아~ 숫자만 입력하는 칸이구나!' 인지성이 더 높아져 정보를 입력하기 편해집니다. 그런데 숫자 키패드를 보여줘야 하는 상황에 숫자가 아닌 전체 키패드를 보여주면 '서울을 입력해야 하는 건가? 아니면 면허증 번호를 입력해야 하는 건가?' 혼란을 가져올 수 있습니다. 따라서 숫자만 입력해야 하는 칸인 경우 아예 다른 옵션을 주지 않고 숫자 키패드만 보여줘서 입력 오류를 줄여주는 게 UI 편의성을 더 높여주는 것입니다. 


그런데, 개편 전 BC카드의 경우 운전면허증 정보 입력 시 이미 명확히 숫자만 입력해야 하는 경우인데 숫자가 아닌 굳이 전체 키패드를 보여줘 키패드 선택에 번거로움이 발생합니다.  


첫 번째 칸과 두 번째 칸은 보안 숫자 키패드여서 숫자를 선택하는데 어려움이 없었으나, 세 번째 칸은 숫자 키패드가 아닌 한글 자판의 키패드가 열려 숫자 키패드 변경하는 과정에서 잘 못 누를 수 있거나 숫자 키패드를 변경하기 위해 조작해야 하기 때문입니다. 



BC카드. 운전면허증 입력 시 세번째 칸은 숫자 키패드가 아닌 한글 자판의 키패드가 보여집니다.


따라서 세 번째 입력 칸은 한글 입력 키패드가 아닌 숫자 입력 키패드를 보여줘 사용자가 키패드 변경 없이 편리하게 입력할 수 있도록 UI 환경이 조성되어야 할 것입니다. 




전민수 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 방법론&프로세스 프레임웍)

https://ebprux.liveklass.com/


[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중  

(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)

(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)

https://www.inflearn.com/users/196290


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari