모바일 UI 디자인 기본 요소 - 텍스트 필드
가장 대표적인 입력 컨트롤
텍스트 필드 Text input field는 사용자가 문자와 숫자를 직접 입력할 수 있는 입력 컨트롤이다. - 입력 컨트롤은 사용자가 정보를 앱과 웹사이트에 입력할 수 있게 한다. - 텍스트 필드는 가장 대표적인 입력 컨트롤이다.
사용자가 입력 필드 Input field를 탭 하면 텍스트 입력이 가능하도록 키보드가 화면에 나타나고 입력 필드 내에 커서가 표시된다. 사용자는 가상의 키보드를 통해 정보를 직접 입력한다.
여러 가지 입력 컨트롤이 있지만 범주화할 수 없는 정보 입력을 요청할 때 사용한다. 즉 이름, 이메일 주소, 전화번호, 비밀번호 같은 일반적인 정보부터 송금 또는 이체 금액, 계좌번호와 같은 좀 더 자세한 정보의 직접 입력에 사용된다. 날짜나 국가 또는 백분율 같이 일정 범위가 제한돼 있거나 범주화가 가능한 경우 텍스트 필드를 사용하지 않아야 한다. 1~100까지 입력이 제한된 백분율 같은 경우는 슬라이더로, 국가나 학교 같이 범위가 명확한 정보 입력은 리스트 형식의 선택 컨트롤을 사용하여 입력 오류를 방지한다.
텍스트 필드는 회원가입이나 로그인 같이 흔히 보는 대화창부터 인터넷 뱅킹에서 계좌 송금 앱, 사용자의 연락처 등록 등 전환과 밀접한 관계가 있는 화면에서 많이 사용된다. 특히 모바일에서는 텍스트 필드는 중요한 컨트롤이 되었다. 화면의 반이상을 가리는 가상의 키보드로 엄지손가락을 통해 정확하게 정보를 입력하는 것은 쉬운 일이 아니다. 따라서 사용자가 직접 정보 입력을 쉽게 할 수 있는 다양한 인터렉션 디자인이 필요해졌다. (데스크톱 웹사이트나 프로그램에서는 중요도가 떨어졌었다.)
텍스트 필드는 회원가입이나 로그인에서 정보를 입력할 때 뿐만 아니라 계좌를 송금하거나 연락처를 추가할 때 많이 사용된다.모바일에서는 텍스트 필드의 인터렉션 개선이 곧 돈이 되는 앱이 많다. 페이스북, 트위터, 라인, 카카오 톡, 번개 장터 등 앱에서 사용자가 텍스트 입력이 불편해서 입력을 하지 않는다면 비즈니스가 성립되지 않는다. 토스 같은 금융 서비스 앱을 사용해보면 텍스트 필드의 인터렉션 디테일에 얼마나 신경을 쓰는지 알 수 있을 것이다. 사용자가 쉽고 간단하고 정확하게 정보를 입력할 수 있도록 인터렉션을 설계하는 것이 곧 비즈니스의 성공요인이 된다.
모바일에서 사용자는 다음과 같은 이유로 텍스트 필드에 직접 입력을 요청하는 페이지에서 이탈한다.
• 입력에 오류가 계속 발생한다. 모바일에서 텍스트 입력은 정확도가 떨어지고 입력도 쉽지 않다.
• 사용자는 직접 정보를 입력하고 싶어 하지 않는다. 사용자는 꼭 필요한 경우가 아니라면 정보를 직접 입력하고 싶어 하지 않는다. 요청하는 정보가 개인정보와 관련된 것이라면 입력 정보를 최소화하기를 원한다.
마이크로 인터렉션이 화두가 되면서 많은 앱과 사이트에서 어떻게 하면 사용자가 신용카드 번호를 쉽게 입력할 수 있을지에 대한 수많은 인터렉션 시도들이 나왔다.
쿠팡과 farfetch는 신용카드 정보입력을 스캔만 하면 입력할 수 있다.사용자가 정보를 쉽게 입력할 수 있게 하기 위해 슬라이더, 스피너, Date/time picker(날짜/시간 선택 컨트롤), 컬러 피커 등 입력 컨트롤에 대한 아이디어들이 나와있지만 텍스트 필드는 가장 기본적인 입력 컨트롤이다. 가장 대표적인 입력 컨트롤의 기본적인 구조와 인터렉션을 이해한다는 것은 더 나은 사용자 경험을 디자인하는데 많은 도움이 될 것이다.
텍스트 필드의 구조
텍스트 필드는 사용자가 쉽게 양식을 채울 수 있도록 도와주는 기본 요소가 있다. 텍스트 필드의 구조는 일반 상태에서와 입력 중 상태에 따라 요소가 각각 다르다. 입력 전에는 요청하는 정보가 무엇인지에 대한 정보가 노출되고 입력 중일 때는 입력을 쉽게 할 수 있도록 돕는 정보가 노출된다.
1. 레이블 Label
레이블은 입력 필드에 입력할 정보가 무엇인지 사용자에게 설명한다. "이메일", "연락처" 등이 이에 해당한다. 모든 텍스트 필드에는 레이블이 있어야 한다. 레이블은 입력 필드와 정렬되어 항상 표시된다. 레이블은 아이콘으로 대신할 수 있다. 필드에 정보를 입력 중인 포커스 상태에도 레이블은 유지되어야 한다. 명확한 레이블을 사용하여 필드의 용도를 알려준다. 레이블은 사용자가 빠르게 인지 할 수 있게 설명적인 글보다는 한두 단어로 간결하게 사용해야 한다. 특정 경우에는 레이블을 생략하고 필드 내 플레이스 홀더로 대체시키기도 한다.
2. 입력 필드 Input Field
입력 필드는 레이블 아래에 표시되는 텍스트를 입력할 위치를 나타낸다. 정보 입력이 가능한 영역이다. 사용자가 입력한 정보를 실시간으로 보여준다. 필드가 활성화되어 있거나 오류가 있으면 선 또는 보더의 색상과 두께가 각 상태에 따라 변경된다.
3. 플레이스 홀더 텍스트 Placeholder Text
레이블에 대한 추가 설명이다. 필드 내에 있는 짧은 텍스트로 요청하는 정보의 부가적인 내용을 설명하는 문구가 보인다. 사용자가 정보를 입력하면 사라진다. 힌트 텍스트 Hint text라고도 한다. 가끔 레이블을 대체하기도 하지만 권장하지는 않는다.
4. 커서 Cursor
커서는 사용자가 텍스트 입력 시 입력된 텍스트의 필드 내의 현재 입력 위치를 나타낸다.
5. 입력 텍스트 Input text
텍스트 필드에 사용자가 입력한 텍스트를 입력 텍스트라고 한다. 입력 텍스트는 플레이스 홀더 텍스트보다 더 어두운 색이어야 한다. 사용자가 입력한 정보가 잘 입력되었는지 확인할 수 있도록 가독성이 높고 충분하게 폰트의 크기가 커야 한다.
6. 클리어 버튼 Clear button
필드에 입력한 정보를 한꺼번에 삭제할 수 있다. 사용자가 입력한 정보를 수정할 때 삭제 키를 하나하나 일일이 탭 하여 삭제할 필요가 없다. 사용자가 입력을 시작할 때부터 나타난다. 클리어 버튼은 모바일에서 특히 유용한 요소이다.
7. 도움말 텍스트 Helper text
사용자가 정보 입력 중 필드 하단에 노출된다. 입력정보에 대한 검증 결과를 노출하여 사용자가 정확한 정보 입력을 할 수 있도록 도운다. 사용자가 입력 중에 입력을 도와주는 “이메일 형식으로 입력해 주세요” , “숫자는 입력하실 수 없습니다 " 등으로 표현된다.
위에서 설명한 기본 요소들이 텍스트 필드에 필수적인 요소이다. 하지만 입력 필드 외의 요소는 생략 또는 새로운 UI를 통해 변형이 가능하다. 응용을 하기 전에 각 기본 요소에 대해서 먼저 이해해야 한다.
필드의 상태 States
텍스트 필드는 크게 활성화 상태와 비활성화 Disabled 상태 두 가지로 나뉠 수 있다. 활성화 상태일 때 텍스트 필드는 일반적인 다른 컨트롤과 마찬가지로 사용자의 행동에 따라 상태가 변경된다. 활성화 상태는 비어있을 때와 입력돼 있을 때가 있다. 활성화 상태는 사용자가 텍스트를 편집 가능한 상태이고 비활성화 상태는 사용자가 텍스트를 편집할 수 없다. 각 상태의 명칭은 조금씩 다르다. 여기서는 보편적으로 사용되는 명칭을 사용한다.
1. 디볼트 Default (Empty or Resting or Inactive)
텍스트 필드의 활성화 상태에서 사용자가 정보를 직접 입력하기 전 상태이다. 이 상태에서는 필드는 비어 있다. 사용자에게 어떤 정보를 입력해야 할지 레이블을 통해 인지시킨다. 필드 내에 플레이스 홀더가 나타나 있다.
2. 호버 Hover
사용자가 필드위에 마우스나 손가락을 올렸을 때 상태 변화를 통해 입력 가능함을 알린다. 필드의 보더 또는 라인이 두꺼워지거나 색상의 명도가 높아져 상태변화를 알린다.
3. 포커스 Focus (Activated)
사용자가 입력을 위해 필드를 눌렀을 때의 상태이다. 이 상태에서는 필드의 색이 활성화로 변하며 필드 내에 커서가 나타나고 키보드가 올라온다. 플레이스 홀더 텍스트는 사라지지 않는다. 정보 입력 준비단계로 보면 된다.
이 상태는 키보드나 기타 방향 입력 장치를 통한 탐색이 가능하게 한다.
4. 타입 Type (Activated with Input)
사용자가 키보드를 통해 정보를 직접 입력 중일 때의 상태이다. 플레이스 홀더는 사라지고 그 자리에 입력한 텍스트가 나타난다. 필드 우측에 클리어 버튼이 나타난다. 입력한 정보를 삭제 키를 통해 편집 가능하다.
5. 입력됨. Filled
사용자가 요청한 정보를 입력 완료한 상태이다. 이때 검증 결과를 노출할 수 있다.
6. 오류 Error
사용자가 입력한 정보가 요청한 형식이 아닐 때의 상태이다. 텍스트 필드에 입력한 정보가 유효하지 않은 경우 사용자가 포커스를 다른 요소나 필드로 이동하면 오류 메시지가 표시된다. 오류를 나타 내기 위해 필드의 보더와 레이블은 오류를 나타내는 빨간색이나 주황 같은 더 따뜻한 색조의 색상을 사용한다. 절대로 사용자가 "완료"나 "확인" 버튼을 텝한 후 오류 메시지를 표시하지 말고 입력 중 검증을 통해 그 결과를 인라인으로 표시해야 한다.
7. 비활성화 Disabled
비활성화 상태이다. 사용자는 정보 입력을 할 수 없다. 사용자에게 시각적으로 텝이 불가능하고 편집이 가능하지 않음을 알 수 있게 한다.
8. 성공 Success
사용자가 입력한 정보가 요청한 형식에 맞을 때 입력이 성공적으로 완료된 것을 알리기 위한 상태이다. 이메일이나 전화번호 등 특정 형식이 있어 검증이 빠르게 이루어질 경우 사용할 수 있다. 일반적인 텍스트 필드에는 사용되지 않는 상태이다.
위 상태는 텍스트 필드의 기본적인 인터렉션이다. 이 외에 사용자의 입력을 보다 쉽고 편리하게 할 수 있는 다양한 방법이 있다.
입력 유형과 키보드 유형
모바일에서는 텍스트 필드의 입력 정보 유형에 따라 키보드가 다르다. 데스크 탑은 물리적인 키보드로 문자나 숫자, 특수 문자를 하나의 키보드에서 입력이 가능하지만 모바일은 하나의 키보드에서 입력이 불가능하다. 따라서 모바일에서는 입력 정보 유형에 최적화된 형태로 키보드를 제공한다.
텍스트 필드에 입력할 정보 유형은 크게 문자와 숫자 그리고 문자와 숫자 조합이다. 문자 유형은 "보드명"이나 "검색어"나 "제목" 같이 특정 형식이 없이 무제한 입력할 수 있는 문자이다. 숫자는 전화번호, 계좌번호와 같이 숫자만 입력 가능한 정보이다. 문자와 숫자 조합은 이메일, URL과 같이 특정 형식이 있고 문자와 숫자를 조합해서 입력할 수 있는 정보다. 모바일에서는 이러한 정보 유형에 따라 각기 다른 키보드를 제공하고 있다. 사용자가 요청하는 입력정보의 유형을 고려해서 키보드를 제공할 수 있어야 한다.
일단 iOS에서 제공하는 키보드는 특수문자 입력을 제외하면 다음과 같다.
기본 키보드
가장 기본적인 키보드 유형이다. 문자 입력에 최적화된 형태로 특수문자나 숫자, 영문은 가능 키를 통해야만 입력 가능하다. 카카오 톡 같은 메지시 앱에서 텍스트를 입력할 때 나타나는 키보드이다.
검색 키보드
기본 키보드에서 [엔터] 키가 [검색]으로 변경되어있다. 검색어를 입력하고 키보드의 검색 버튼을 바로 택할 수 있어 검색 필드 옆에 검색 버튼은 불필요하다.
이메일 키보드
이메일을 빠르게 입력할 수 있는 키보드이다. 기본 키보드에서 [@]과 [.] 이 추가되어 있다. 대신 [음성 입력] 키가 빠졌다.
URL 키보드
URL을 빠르게 입력할 수 있는 키보드이다. 기본 키보드에서 [.], [/], [. com]이 추가되어있다. 대신에 스페이스 키가 사라졌다.
숫자 키보드
숫자 입력에 최적화된 키보드이다. 문자는 입력할 수 없지만 왼쪽에 특수문자 키보드를 통해 특수 문자 [+,*,#] 등을 입력도 가능하다. (통화할 때의 키패드는 여기서 제외한다.)
검증과 피드백
모바일에서 사용자가 텍스트 필드에 정보를 정확하게 입력하는 경우보다 그렇지 못할 경우가 더 많다. 입력 필드가 일정한 형식이나 제한된 범위를 요청한다면 입력한 정보가 적절한지 검증하고 정확한 입력을 안내해야 한다. 사용자가 입력하는 즉시 입력값을 검증하여 입력을 도울 수 있는 피드백을 제공하는 상호작용을 디자인해야 한다.
금융서비스에서는 1일 또는 1회 송금한도가 제한되어 있는 경우가 많다. 이 경우 사용자가 송금 버튼을 누르기 전에 검증을 통해 적절한 피드백을 제공해야 한다.위의 예시의 경우 사용자가 금액을 입력하는 즉시 입력값과 송금한도를 검증한다. 그리고 송금한도 검증을 통과하지 못할 경우 송금을 거부한다. 필드 하단에 무엇이 잘못되었는지에 대한 인라인 피드백은 잘못을 바로 잡을 다른 대안도 제시하고 있다.
모바일에서 작업을 수행할 때 성공하는 경우보다 실패하는 경우가 더 많다. [제이콥 닐슨의 모바일 사용성 컨설팅 보고서]에 따르면 사용성 조사에서 모바일 앱을 사용했을 경우 성공률은 74%이고 모바일 전용 웹사이트에서는 64%를 기록했다. 바꾸어 말하면 약 30%의 사용자가 작업 수행을 포기한다. 데스크톱에 비해 작은 화면에서 마우스와 물리적 키보드 없이 손가락으로 조작하기란 쉽지 않다. 특히 엄지 손가락으로 가상의 키보드에 텍스트 입력은 오타가 많이 발생한다. 다수의 항목을 텍스트 필드에 입력해야 하는 다이얼로그(대화 상자) 또는 폼(form)의 경우 사용자가 모든 텍스트 필드에 적절한 값을 입력하여 작업을 완료할 확률은 높지 않다. 이는 회원가입이나 결제 같은 앱과 웹의 전환율과 직결되는 작업의 성공률이 50% 이하일 것으로 예상되고 실제로도 그렇다. (운영하는 쇼핑몰의 회원가입 완료 비율은 평균 40% 안팎이다.)
디자이너는 텍스트 필드에 사용자가 정확하고 적절한 입력을 할 수 있도록 도와야 한다. 사용자가 어떤 정보를 입력해야 하는지 명확하게 인지시키고 잘못 입력했을 때 무엇이 잘못됐는지 알 수 있도록 적절한 피드백을 통해 빠르게 잘못을 바로 잡을 수 있도록 안내해야 한다.
가장 쉬운 방법은 사용자가 정보 입력을 완료하고 “확인” 버튼을 텝한 후 오류 메시지를 내보내 입력 오류를 알리는 것이다. 이 경우 사용자는 정확하게 무엇이 잘못되었는지 판단하기 어렵고 거부감을 가질 수 있다. 또한 이러한 상황이 반복된다면 작업을 포기할 확률이 높아진다. 이는 전환율을 떨어뜨린다.
입력 오류 방지
사용자의 입력 오류 가능성을 100% 차단할 수는 없다. 그러나 입력 필드에 잘못된 입력을 할 가능성을 방지할 수는 있다. 첫 번째는 키보드 입력을 해야 하는 텍스트 필드 대신에 다른 컨트롤을 제공하는 것이다. 국가를 입력해야 할 때 두 번째는 입력을 제한하거나 거부하는 방법이다. 세 번째는 입력에 맞는 적절한 키보드를 제공하여 잘못된 입력을 막을 수 있다.
1. 선택 컨트롤 사용
사용자의 입력 오류를 방지하는 방법 중 하나는 데이트 피커 Date pickers나 슬라이더 같은 제한된 입력 컨트롤을 사용해 애초에 부적절한 값을 입력할 수 있는 가능성을 차단하는 것이다.(About Face 4 인터랙션 디자인의 본질 목표 지향 디자인부터 스마트기기 환경까지, 시대를 초월하는 UX 방법론) 사용자에게 날짜나 시간 입력을 요청할 경우 텍스트 필드보다는 데이트 피커 사용을 통해 잘못된 날짜 입력을 방지할 수 있다. 또한 국가나 지역 같은 일정 형식과 범위가 있는 경우 입력할 경우 선택 컨트롤을 제공할 수 있다.
날짜와 시간 입력에는 직접입력 보다는 피커picker를 사용하면 입력 오류를 줄일수 있다.2. 입력 거부
회원 가입 시 한글 이름같이 문자만 요청하는 입력 필드의 경우 숫자 입력 시 입력이 되지 않게 하고 필드 하단에 도움말을 노출할 수 있다. 적극적 검증 컨트롤이 키보드 입력 값을 거부할 때는 사용자에게 그것이 거부됐음을 명백히 드러낼 필요가 있다. 또한 그것이 왜 거부됐는지를 분명히 설명해야 한다. 설명을 통해 사용자는 문제점을 제대로 파악하여 요청하는 값을 제대로 입력할 것이다. 반면 제대로 된 설명이 주어지지 않을 경우 고장 난 게 아니냐며 애꿎은 키보드만 탓하는 경우도 있다.
3. 최적화된 키보드 제공
요청하는 정보 유형에 맞는 키보드를 제공한다. 앞서 이야기한 기본 키보드, 검색 키보드, 이메일 키보드, URL키보드, 숫자 키보드 등 키보드 유형을 최적화하여 제공해야 한다. 전화번호나 금액 입력 필드에 숫자만 입력이 가능한 숫자 키보드를 제공해야 한다. 필드는 0부터 9까지 숫자 외에 모든 입력을 거부한다. 숫자 키보드는 스페이스바, 텝, 대시 및 기타 기호 문자의 입력을 원천적으로 차단하여 오류를 방지할 수 있다. 적절한 키보드 제공은 불필요한 키보드 변경과정을 줄이고 입력 과정을 빠르게 하여 오타 가능성을 줄인다.
피드백과 도움말
책 [About Face 4]에 따르면 사용자가 입력을 최종적으로 완료하기 전까지는 입력 값에 대한 검증이 불가한 경우가 있다. 컨트롤이 사용자의 정보 입력이 완료될 때까지 기다린 뒤 다음 단계에서 값을 검증할 때, 이를 소극적 검증 passive validation이라 부른다. 화면에서 텍스트 필드가 여러 개일 경우 사용자가 하나의 텍스트 필드에 입력을 완료하고 다음 텍스트 필드로 이동했을 때 검증이 이뤄진다. 즉 사용자가 입력 과정을 마친 뒤 다음 입력 단계로 넘어간 상태다. 검증은 사용자가 대화 상자를 닫기 이전에 이뤄져야 한다.
검증을 통해 입력값이 부정확함을 알리는 것뿐만 아니라 사용자에게 입력이 유효함을 알리는 시각적 피드백도 중요하다. 일반적으로 입력값의 유효성을 알리기 위해 필드의 색을 변경하고 필드의 우측에 체크 아이콘을 표시할 수 있다. 텍스트 필드의 성공 Success 상태가 이에 해당한다. 이때 필드의 색상은 긍정과 성공을 의미하는 녹색이나 초록색을 사용한다.
UI에서 색의 사용에 대해서는 아래 링크를 참조한다.
도움말 텍스트는 앞에서 설명한 입력 필드 하단에 나타나는 텍스트를 말한다. 도움말은 필드에 요청하는 값에 대한 정보와 허용가능 범위를 설명한다. 도움말 텍스트는 사용자가 부적절한 입력을 할 경우 나타나는 시각적인 피드백이다. 입력값이 정확할 때까지 나타난다. 간결하면서도 효과적으로 정보를 전달하는 것이 중요하다. 사용자는 도움말을 보면서 자신이 적절한 입력을 하고 있는지 알 수 있다.
사용자가 입력한 정보(값)에 대한 검증과 피드백의 대표적인 예는 비밀번호 입력 필드의 보안 검증 피드백이다. 회원가입 시 비밀번호의 보안성은 높을수록 좋다. 비밀번호 숫자는 최소 8자 이상이어야 타인이 비밀번호를 쉽게 알아낼 수 없다. 회원가입 시 일반적인 비밀번호의 요건은 8자 이상 16자 이하, 하나 이상의 숫자 및 대문자와 특수 문자 모두를 포함해야 한다. 정리하면
하나 이상의 영문 대문자 (?=.*? [AZ])
하나이상의 영문 소문자 (?=.*? [az])
하나 이상의 숫자 (?=.*? [0-9])
하나 이상의 특수 문자 (?=.*?[#?!@$%^&*-])
최소 8자. {8,}$
(우측은 자바스크립트 검증식이라고 한다.)
시스템은 사용자가 입력하는 이 8개 이상의 문자에 대해 유효성을 검증하고 그 결과를 피드백하여
사용자가 이 요건에 맞게 비밀번호 입력 필드에 입력을 할 수 있게 안내해야 한다. 너무 짧게 해서도 안되고 너무 길어서도 안된다. 또한 영문 소문자와 대문자 그리고 특수문자 조합으로 입력을 유도해야 한다. 가장 일반적인 방식은 아래의 방식이다.
한두 단계의 차이는 있겠지만 위와 같은 피드백을 통해 보안성이 높은 비밀번호를 자연스럽게 안내할 수 있다.
레이블 기능을 하는 아이콘은 왼쪽 정렬을 권장
텍스트 필드의 레이블을 아이콘으로 대신할 수 있지만 사용자의 빠른 인지를 위해 왼쪽에 위치시킬 것을 권장한다.텍스트 필드에서 레이블을 아이콘으로 대신할 수 있다. 대표적으로 "검색"레이블보다 아이콘을 사용하는 검색 필드이다. 아이콘 레이블을 사용할 경우 필드의 왼쪽에 정렬시켜야 한다. 필드의 오른쪽은 일반적으로 [북마크] , 채팅 앱의 [전송] 버튼같이 기능 아이콘을 위치시킨다. 아래의 예시 경우 비밀번호를 볼 수 있는 토글 아이콘 버튼을 위치시킬 수 있다.
텍스트 필드의 레이블은 사용자가 입력한 정보보다 더 크거나 강조되지 않아야 한다.
텍스트 필드에서 사용자에게 가장 중요한 요소는 입력 필드의 정보이다. 작은 화면에서 입력한 정보가 정확하게 입력되었는지 확인하기 쉬워야 한다.
텍스트 필드의 레이블은 타이틀이 아니다. 필드보다 더 돋보여서는 안된다.한 유형의 정보를 요청하는 텍스트 필드의 입력 필드를 나누지 말아야 한다.
텍스트 필드의 수가 많을수록 전환율은 떨어진다. 입력 필드는 최대한 단순화해야 한다. 한 행의 텍스트 필드에 입력 필드를 나누지 않아야 한다. 예를 들어 이메일이나 전화번호 등의 한 유형의 정보를 입력 요청하는 텍스트 필드는 분할하지 않아야 한다. 입력 필드를 분할하는 목적은 사용자가 정확하게 입력을 하기 위함이다. 이는 키보드에 텝 키가 있는 데스크 탑에서만 유효하다. 모바일에서 이메일이나 전화번호 입력 필드를 분할하는 것은 입력을 더 어렵게 한다. 한 필드를 다 채운 후 사용자는 다음 필드를 손가락으로 텝해야 한다. 즉 필드의 분할은 사용자의 터치 횟수를 증가시킨다. 입력 필드를 분할하지 말고 사용자의 입력에 대한 검증을 통해 정확한 입력을 돕는 방법을 찾아야 한다.
모바일에서 필드의 분할은 터치 횟수를 증가시킨다. 사용자가 16자리의 숫자를 입력하는 동안 적절한 피드백을 통해 입력을 도울 방법을 찾아야 한다.
전화번호 필드를 분할하고 [-]를 필드 사이에 넣는 것은 데스크탑에나 유효한 방법이다.
텍스트 필드의 수가 많을 수록 전환율은 떨어진다. 한 유형의 정보 입력에 선택컨트롤까지 사용하는 것은 터치 횟수가 증가하게 한다.불필요한 필드를 없애려면 고려할 사항이 많지만 전환율은 높아진다. 입력 필드의 수와 사용자가 들여야 하는 노력은 반비례한다. 텍스트 필드는 최대한 단순해야 한다.
오류 메시지는 필드의 하단에 있어야 한다.
사용자가 입력한 정보를 잘못 입력했을 때 텍스트 필드에 인라인으로 오류 메시지를 나타낸다. 이때 오류 메시지는 레이블과 구분되는 디자인을 권장한다.
참고자료
https://mono.company/journal/design-practice/the-10-commandments-of-good-form-design-on-the-web/
책
About Face 4 인터랙션 디자인의 본질 목표 지향 디자인부터 스마트기기 환경까지, 시대를 초월하는 UX 방법론. 앨런 쿠퍼 | 로버트 라이만 | 데이비드 크로닌 | 크리스토퍼 노셀 (지은이) | 최윤석 | 고태호 | 유지선 | 김나영 (옮긴이) |
