brunch

매거진 UX 디자인의 모든 것

라이킷 37 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Dec 07. 2017

UX원칙#2-3 페이지이동최소화와 폼입력절차줄이기

전민수의 UX 가이드 칼럼 #03

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

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

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

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

(3월 한정 이벤트) UX 라이브클래스 패키지(총 121시간): 178개 UX 강의묶음, 할인율 98%, 할인가 99,000

매일 !!!! UX 방법론 A-Z, UX 리서치 A-Z 등 강의 진행합니다.

ebprux.liveklass.com

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

감사합니다.

UX 가이드 원칙 #02. 페이지 이동 최소화

페이지 이동 최소화 원칙 1. 팝업 행위 최소화해야 합니다.

팝업은 특정 웹사이트가 어떠한 내용을 표시하기 위해 갑자기 생성되는 새 창을 말합니다. 팝업창은 항상 새 창으로 보여주기 때문에 반드시 닫기 과정을 거쳐야 하는 번거로움이 있습니다. 또한, 현재 작업 중인 상태에서 불필요한 팝업창이 갑자기 등장한다면 인터랙션의 방해가 될 수도 있고, 시선이 분산될 수 있습니다. 좋은 UI는 팝업 생성을 최소화하는 것이 좋습니다.

타 은행은 보안 수단 입력 후 공인인증서 입력을 위해 '확인' 버튼을 누르고, 인증서 입력 후 '확인' 버튼을 누르는 등 2번의 행위가 일어지나, 우리은행의 경우 팝업이 열린 상태에서 인증서 정보를 입력하지 않고 보안 수단 입력 페이지에서 한 번에 인증서 정보를 입력할 수 있어 간단하고 편합니다.

우리은행. 인증서 입력 시 팝업이 열리지 않고 페이지내 입력이 가능하다.

페이지 이동 최소화 원칙 2. 기능 선택 시 편의성을 높여줘야 합니다.

과업 수행 시 한 번에 일을 처리할 수 있도록 페이지 이동을 최소화합니다. 두 번에 걸쳐 수행할 일을 한 번에 처리할 수 있다면 사용성이 그만큼 높아지는 것이지요.

예를 들어 트위터의 경우 검색어 선택 시 최근 검색어가 제공되고 있습니다. 최근 검색어를 바로 삭제할 수 있도록 검색어 우측에 버튼이 제공되어 편합니다.

트위터 (재편집)

반면, 페이스북의 경우 검색어 선택 시 하단에 최근 검색이 제공되는데, 바로 삭제할 수 있는 버튼이 없어 당황스럽습니다. '수정' 버튼을 눌러야 활동 로그 페이지가 열리게 되는 거고, 거기서 최근 검색어 삭제가 가능합니다. 일반적으로 수정이라는 의미가 삭제라는 의미를 지니지 않기 때문에 레이블이 주는 의미도 혼동됩니다. '수정'이라는 단어 선택보다는 '수정 및 삭제' 혹은 '편집'이라고 명명하는 것이 더 적합할 것입니다.

UX 가이드 원칙 #03. 폼 입력 절차 줄이기

폼 입력 절차 줄이기 원칙 1. 데이터 입력 시 커서가 사용자가 다음에 입력해야 할 필드에 자동으로 이동하여야 탭을 한번 더 해야 하는 절차를 줄여줘야 합니다.

PC버전의 경우 주민등록번호 입력 시 앞자리 입력 후 자동적으로 다음 뒷자리로 커서가 이동하여 깜박거리는 행위로 다음 행위를 유도하는 어포던스를 주는 게 대표적 사례입니다.

모바일의 예를 들어 보면 메가박스에서 비회원 상태에서 신용카드로 예매하고자 하는 경우 주민등록번호 앞자리 입력하자마자, 커서는 휴대폰 번호 필드로 이동하여 깜박거리며 사용자의 다음 행위를 유도하고 있습니다. 마찬가지로 휴대폰 번호 입력하고 나면, 커서는 자동으로 비밀번호로 이동하게 됩니다.

메가박스

CGV의 경우도 비밀번호 입력하자마자 커서는 생년월일로 바로 이동이 되어 편합니다.

반면, 롯데시네마의 경우 카드번호 다 입력하면, 커서가 다음에 입력해야 할 필드인 'CVC/4DBC'로 자동으로 이동할 것 같았으나 그렇지 않습니다. 모바일에서는 사용자의 행위를 최소화하는 것이 좋습니다.

롯데시미나

폼 입력 절차 줄이기 원칙 2. 사용자가 화폐 숫자를 입력할 때 자동으로 콤마를 삽입해주어야 합니다.

숫자 입력 시 사용자가 직접 콤마를 입력하는 것보다 시스템이 알아서 콤마를 자동으로 삽입해주면 키보드 입력이 최소화되어 편합니다.

은행 앱의 경우 이체 금액 입력 시 천 단위로 콤마가 자동으로 삽입됩니다.

신한은행. 가격 입력 시 천 단위로 콤마가 자동적으로 붙는다.

폼 입력 절차 줄이기 원칙 3. 필요시 시스템이 자동으로 지정하는 디폴트 값이 있어야 합니다.

폼 항목에서 라디오 버튼이나 체크 박스가 컴포넌트로 많이 사용되는데 라디오 버튼은 처음부터 디폴트로 설정되어 있어야 합니다. 사용자가 가장 많이 선택하는 항목에 디폴트 값이 미리 정해져 있다면, 사용자가 버튼 선택의 행위가 그만큼 줄여주게 됩니다. 만약, 선택지 사항을 디폴트 값으로 지정하고 싶지 않다면 라디오 버튼보다는 선택형 메뉴나 체크 박스 형태로 보여주는 것이 더 좋습니다. 다시 말하면 선택형 메뉴나 체크박스에는 옵션 항목에 디폴트 값이 미리 선정되어 있으면 안 됩니다.

예를 들어 CGV의 경우 결제수단 선택 시 '신용카드, 휴대폰 결제' 등 다양한 선택지가 제공되고 있는데, 이는 라디오 버튼을 통해 제시하고 있는데, '신용카드' 옵션에 디폴트 값이 맺어져 있습니다. 신용카드로 결제하고자 하는 사용자는 다른 추가 옵션 선택하지 않고 페이지 하단의 '결제하기' 버튼만 누르면 됩니다.

또 하나의 예를 들어 보면 메가박스의 경우 결제수단 선택 시 체크 형태의 리스트 메뉴가 제공되고 있습니다. 이는 라디오 버튼 방식이 아니기에 리스트 메뉴에 디폴트 값이 사전에 설정되어 있지 않습니다. 사용자는 주어진 선택지에서 선택하면 되니까요.

폼 입력 절차 줄이기 원칙 4. 하나만 선택해야 하는 셀렉트 메뉴의 경우 사용자들이 자주 이용하는 선택지가 디폴트로 설정되어 있어야 합니다.

대부분의 앱에서는 휴대폰 앞자리는 사람들이 가장 많이 사용하는 010 번호가 디폴트로 설정되어 있어 뒷자리 번호만 입력하면 되어 편합니다. 예를 들어 현대카드의 경우 카드 신청 시 휴대전화 번호의 앞자리는 '010'이 디폴트 번호로 설정되어 있습니다.

반면, NH카드의 경우 휴대폰 인증을 통해 본인 확인을 할 수 있는데, 휴대폰 앞자리 선택이 번거롭습니다. 사용자가 휴대폰 앞자리에서 셀렉트 메뉴를 선택하고, 여러 선택지 중 '010' 번호를 찾아야 하는 번거로움이 있습니다.

NH카드

폼 입력 절차 줄이기 원칙 5. 사용자의 입력 상황에 맞춰 키패드를 보여줘야 합니다.

온라인에서 카드 신청 시 주민등록증이나 자동차 운전면허증 정보를 입력하여 본인인증을 할 수 있습니다. 예를 들어 KB국민카드의 경우 면허증 번호 입력 시 숫자 키패드만 보여줘 숫자를 입력하는 데 별 어려움이 없습니다.

반면, BC카드의 경우 운전면허증 정보 입력 시 키패드 선택에 불편함이 있습니다. 첫 번째 칸과 두 번째 칸은 보안 숫자 키패드여서 숫자를 선택하는데 어려움이 없었으나, 세 번째 칸은 숫자 키패드가 아닌 영문 자판의 키패드가 열려 다시 숫자 키패드를 변경하기 위해 조작해야 하는 번거로움이 있습니다. 세 번째 칸도 숫자 키패드를 입력할 수 있도록 편의를 제공해야 합니다.