2. 인터랙티브 미디어디자인
Chapter # : 50
날짜 입력에서 드롭다운을 현명하게 사용하라
사용자가 전체 날짜를 입력해야 할 때 연도는 숫자 입력, 월일은 드롭다운으로 제공해라. 모바일에서는 시스템 데이트 피커를 사용해라.
예시) google 계정 생일
변경(모바일)
연도랑 일은 직접 숫자를
입력 받고, 월은 드롭다운
형식으로 되어있음.
유효하지 않은 값을 입력
필드에 넣으면 에러 문구를
띄워 줌. 예시), Coursera 생년월일 입력(PC)
연도, 월, 일 모두 드롭다운 형식으로 되어있음.
연도의 경우 2009년부터 나열되어 있음.
예시) The Day Before어플 디데이 설정 (모바일)
시스템 데이트 피커와 유사한 형태.
연도, 월, 일 모두 스피너 형태로 되어있지만
숫자를 클릭하면 숫자 입력 패드로 값을 입력할
수 있음.
3. 인터랙티브 미디어디자인
Chapter # : 51
지불 카드 정보를 요구할 때에는 최소한의 정보만 받아라
필요한 카드번호, 유효기간, CV2 코드 등 거래에 필요한 최소한의 정보만 입력 받아라. 카드번호는 시각적으로 4개의 그룹으로 묶어서 보여주어라. 스페이스바를 누르면
빈칸을 알아서 제거해라. CV2 혹은 카드 보안 코드를 어디서 찾아야 하는지 안내를 포함하라. 카드 정보는 HTTPS 연결을 통해서만 수집해라.
예시) 노마드코더 카드 정보
입력 화면(PC)
카드 번호를 입력하면 4개의
그룹으로 나누어서 보여줌.
필수적으로 입력해야 하는
최소한의 정보만 입력받음.
HTTPS 보안 연결 상태에서
안전하게 카드 정보를 수집함.
카드 앞 번호를 보고 브랜드를
인식해 아이콘을 변경함.
예시) MAXON 카드 정보 입력
화면(PC)
카드 번호를 입력했을 때
4개의 그룹으로 분리해서
보여주지 않아 숫자를 제대로
입력했는지 비교적 확인하기
어려움.
결제 방법에 이름을 붙여 추가
정보를 입력하게 함.
HTTPS 보안 연결 상태에서
안전하게 카드 정보를 수집함.
보안 코드를 어디서 확인할 수
있는지 안내를 포함하고 있음.
유효 기간을 입력하는 필드의
placeholder 값이 명확하지
않음.
4. 인터랙티브 미디어디자인
Chapter # : 52
우편 또는 ZIP 코드 입력을 쉽게 만들어라
우편번호 또는 ZIP코드는 나라별로 다르니 일단 텍스트 입력 필드로 입력받아라. 최근에는 우편 번호를 입력하는 폼 자체에서 실시간 검색을 할 수 있다.
예시), Amazon 결제 시 우편 번호 입력 화면(PC)
우편 번호 또는 ZIP코드를 입력하기 전에 국가를 선택할 수 있음. 선택한
국가에 따라 입력필드의 개수가 다르게 주어지지만 우편번호와 ZIP코드를
입력하는 입력필드는 텍스트 형식임.
Australia
예시), Naver 배송지 입력 화면(PC)
우편번호를 입력하려고 하면 주소로
우편번호를 검색할 수 있는 창이 뜸.
United state
5. 인터랙티브 미디어디자인
Chapter # : 53
통화 입력에서 소수 자리를 덧붙이지 마라
통화 입력에서 소수 자리를 덧붙이는 것은 에러가 날 수 있으니 하지마라. 사용자가 원하면 센트를 입력할 수 있게 하되, 입력하지 않으면 ‘0’으로 가정해라.
입력한 뒤에는 사용자가 금액을 확인할 수 있게 해라.
예시), M-able 어플 주식 매수 (모바일)
소수소수 4자리까지 보여줌.
예시) 뱅크 샐러드
원화는 소수점 아래가 없어서 애초에
사용자가 소수점을 입력할 수 없음
예시) 똑똑 계산기 어플에서 환율 계산하는
화면(모바일)
사용자가 원하면 센트를 입력할 수 있음. 센트를
입력하지 않아도 뒤에 소수 자리를 덧붙이지 않음.
