(입력 필드) 커서 움직임 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 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.
감사합니다.
(입력 필드) 커서 움직임 UX 원칙
일반적으로 신용카드를 보면 숫자 16개, 4개 단위로 끊어져 있습니다. 카드번호처럼 연속적으로 정보를 입력해야 하는 경우 커서는 자동으로 다음 칸으로 이동되어야 합니다. 카드번호 입력 시 한칸을 입력하면 다음칸으로 커서가 자동으로 이동이 되면 사용자의 행위는 끊어지지 않고 연속적으로 입력할 수 있어 편하기 때문입니다.
만약, 커서가 자동으로 다음칸으로 이동되지 않는다면 키패드 입력하고 나서 다음 입력 필드를 터치해야 하는 등 입력 절차가 귀찮아집니다.
예를 들어 개편전 롯데시네마의 경우 4자리 카드번호 입력 시 커서의 움직임은 다음칸에 자동으로 이동이 되어 입력하는데 편하지만, 다음에 입력해야 할 필드인 'CVC/4DBC'에 커서가 자동으로 이동되지 않아, 필드를 한번 더 터치해야 하는 번거로움이 있었습니다.
그런데, 개편된 롯데시네마는 4자리 카드번호를 모두 입력하자마자, 커서가 CVC 번호 칸으로 자동으로 이동이 됩니다. 더불어, 입력칸에 이전과 다른 색상의 변화끼지 생겨 사용자가 다음에 어떤 것을 입력해야 하는지 알 수 있어 개편전보다 인식성이 더 높아졌다는 것을 알 수 있습니다.
이처럼 카드번호처럼 연속적으로 정보를 입력해야 하는 경우 커서는 자동으로 다음 칸으로 이동되어 사용자의 입력 행위를 최소화 할 수 있어야 합니다.
감사합니다.
2023년 3월 한정 판매 이벤트!!! UX 강좌 라이브클래스 패키지
https://ebprux.liveklass.com/packages/137053
