모바일 UI 디자인 기본 요소 - 텍스트 필드[Text input field]
•
사용자가 문자와 숫자를 직접 입력할 수 있는 입력 컨트롤
•
이름, 이메일 주소, 전화번호, 비밀번호, 송금, 이체 금액, 계좌번호 등
•
날짜나 국가 또는 백분율 같이 일정 범위가 제한돼 있거나 범주화가 가능한 경우 텍스트 필드를 사용하지 않아야 함.
•
1~100까지 입력이 제한된 백분율 같은 경우는 슬라이더 사용해 오류 방지.
•
국가나 학교 같이 범위가 명확한 정보 입력은 리스트 형식 사용해 오류 방지.
•
데스크톱 웹사이트나 프로그램에서는 중요도가 떨어짐.
[모바일 텍스트 필드에서 페이지에서 이탈하는 경우]• 입력에 오류가 계속 발생하는 경우.
•
모바일에서 텍스트 입력은 정확도가 떨어지고 입력도 쉽지 않다.
• 사용자는 직접 정보를 입력하고 싶어 하지 않음.
•
사용자는 꼭 필요한 경우가 아니라면 정보를 직접 입력 하기 쉽지 않음.
•
요청하는 정보가 개인정보와 관련된 것이라면 입력 정보를 최소화하기를 원함.
•
사용자가 신용카드 번호를 쉽게 입력할 수 있을지에 대한 수많은 인터렉션 시도
•
마이크로 인터렉션
[텍스트 필드의 구조]•
텍스트 필드의 구조는 일반 상태에서와 입력 중 상태에 따라 요소가 각각 다르다
1. 레이블 Label
2. 입력 필드 Input Field
3. 플레이스 홀더 텍스트 Placeholder Text
4. 커서 Cursor
5. 입력 텍스트 Input text
6. 클리어 버튼 Clear button
7. 도움말 텍스트 Helper text
(* 이미지 참고)
[입력 유형과 키보드 유형]
•
기본 키보드
•
검색 키보드
•
이메일 키보드
•
URL 키보드
•
숫자 키보드
(*이미지 참고)
[검증과 피드백]디자이너는 사용자가 어떤 정보를 입력해야 하는지 명확하게 인지시키고 잘못 입력했을 때 무엇이 잘못됐는지 알 수 있도록 적절한 피드백을 통해 빠르게 잘못을 바로 잡을 수 있도록 안내하여야 함.
안 좋은 예:사용자가 정보 입력을 완료하고 “확인” 버튼을 텝한 후 오류 메시지를 내보내 입력 오류를 알리는 것
•
이 경우 사용자는 정확하게 무엇이 잘못되었는지 판단하기 어렵고 거부감을 가질 수 있다.
•
또한 이러한 상황이 반복된다면 작업을 포기할 확률이 높아진다.
→ 이는 전환율을 떨어뜨린다.
[입력 오류 방지]1. 선택 컨트롤 사용
•
데이트 피커 Date pickers나 슬라이더 같은 제한된 입력 컨트롤을 사용
2. 입력 거부
3. 최적화된 키보드 제공
•
요청하는 정보 유형에 맞는 키보드를 제공.
[피드백과 도움말]1. 레이블 기능을 하는 아이콘은 왼쪽 정렬을 권장한다.
2. 텍스트 필드의 레이블은 사용자가 입력한 정보보다 더 크거나 강조되지 않아야 한다.
3. 한 유형의 정보를 요청하는 텍스트 필드의 입력 필드를 나누지 말아야 한다.
4. 오류 메시지는 필드의 하단에 있어야 한다.
아티클 주소: