Text fields

Basic principles

Discoverable

사용자가 정보를 입력할 수 있다는 것을 표시해주어야하며 눈에 띄어야 합니다.

Clear

텍스트 필드의 상태(활성화/비활성화/포커스/오류/사용불가)는 명확하게 구분되어야 합니다.

Efficient

텍스트 필드에 입력할 정보를 이해하기 쉬워야하고, 오류 발생 시 설명이 용이해야합니다.

Anatomy

1. Container
2. Leading icon (optional)
3. Label text
4. Input text
5. Trailing icon (optional)
6. Activation indicator
7. Helper text (optional)

[Input text] 기본 키패드

텍스트 필드의 포맷에 맞는 키패드를 기본으로 제공해야합니다.

Don’t

영문 입력 가능한 필드에 한글 키패드를, 숫자만 입력 가능한 필드에 문자 키패드를 기본으로 제공하는 등, 사용자가 입력을 위해 키패드를 다시 세팅하지 않도록 합니다.

[Input text] 활성화 상태 UI

텍스트 필드가 활성화되어있는 상태(focused)와 그렇지 않은 상태가 명확히 구분되도록 커서를 표시하거나 container의 색상을 눈에 띄게 변경합니다.

Don’t

텍스트 필드가 활성화 상태임에도 커서가 없어 사용자가 비활성화 상태로 오해하여 필드를 재선택 하는 등의 불필요한 동작을 할 수 있습니다.

필드 내에 커서를 두거나, 텍스트 박스의 배경 및 테두리 색상 변경 등으로 활성화 상태임을 명확히 알려줍니다.

UX Writing

Label text

Label text는 항상 보이도록 유지해야합니다. 중간에 자르거나 말줄임 처리하지 않습니다. 2줄 이상으로 표시하지 않습니다.

Helper text / Error message

한줄까지만 표시할 수 있습니다. 항상 표시하거나 또는 필드에 포커스가 갔을 경우에만 표시할 수도 있습니다. 오류 메시지는 helper text 를 지우고 그 자리에 표시합니다.

[Helper text] 오류 메시지 - 오류 여부 판단

입력 중인 텍스트(부분 텍스트)와 요구하는 정보(전체 텍스트)의 포맷을 실시간으로 비교하여 지속적인 오류 메시지를 내보내지 않도록 유의합니다.  
요구하는 텍스트에서 전혀 사용하지 않는 포맷을 입력한 경우에만 텍스트 입력 중 오류 메시지를 출력합니다.

Don’t

올바른 텍스트 입력 중임에도 완성된 텍스트 포맷을 만족하지 못한다는 이유로 입력 내내 오류 메시지를 출력하는 실수는 하지않도록 유의합니다.

[Helper text] 오류 메시지 - 텍스트 길이

오류 메시지는 한 줄을 원칙으로하고, 최소한 기존 helper text와 같은 줄 수를 유지하여 영역이 밀리지 않도록 합니다.

Caution

오류 메시지는 1줄로 처리하여 텍스트 필드가 아래로 밀리지 않도록합니다.

기존 help text와 동일하게 한 줄을 유지하여 레이아웃이 안정적입니다.