UI 디자인 가이드 : Text Field & Form
입력 양식은 상당한 시간동안 계속해서 존재해왔습니다. 물성이 있는 존재로서도요.
고객 불만 사항을 적어내거나 기타 다양한 법적 탄원서를 작성할 때처럼 말이죠.
정보 처리의 발전과 함께 현대에는 데이터를 수집하는 방법이 오프라인에서 온라인으로 그리고 자동 수집으로도 확장되고 있습니다. 인쇄된 형식의 다양한 폼이 수년 동안 존재하며 발전해왔듯이 오래된 디자인에서도 팁을 배울 수 있을 겁니다.
텍스트 필드 해부
텍스트 필드를 사용해서 사용자는 UI에서 텍스트를 입력할 수 있게 됩니다.
일반적으로 Form과 Dialogs에 사용되곤 합니다. 텍스트 필드 컴포넌트 디자인은 인터랙션을 위한 명확한 어포던스를 제공하여 레이아웃에서 검색 가능하고, 또한 효율적으로 접근하여 입력할 수 있도록 해야 합니다.
텍스트 필드의 기본 구성 요소는 다음과 같습니다.
1. Container(컨테이너) — 상호작용 가능한 입력 영역
2. Input text — 텍스트 필드에 입력
3. Label Text — 해당 필드에 어떤 정보가 들어가는지 가이드해줍니다.
4. Placeholder text(자리 표시자) — 사용자가 입력 시 입력되는 텍스트로 대체되는 필수 정보의 설명 또는 예시
5. Helper or Validation text(optional) — 추가 정보 혹은 유효성 검사에 대한 피드백 메시지 표시
6. Leading icon(optional) — 텍스트 필드에 필요한 입력 유형에 대한 아이콘
7. Trailing icon(optional) — 지우기, 숨기기/표시 등과 같은 입력된 텍스트에 대한 추가 제어 아이콘
텍스트 필드의 구조와 해부는 아래 아티클에서도 자세히 확인할 수 있습니다.
다양한 유형의 텍스트 필드(Text field types)
기본 텍스트 필드를 기본으로 해서 대부분 카드 번호처럼 특정 유형의 정보를 잘 처리할 수 있도록 변형합니다. 아래는 UI 전체에서 가장 일반적으로 사용되는 입력 유형의 몇 가지 예시입니다.
수집하는 데이터에 적절한 입력 유형을 사용하세요.
요청된 데이터에 알맞은 유형의 텍스트 필드를 제공하면 사용자는 실수 없이 정보를 올바르게 입력할 수 있어 효율적인 프로세스가 됩니다.
텍스트 필드는 상태 및 사용자 상호 작용에 따라 모양을 변경해야 합니다.
텍스트 필드의 상태를 전달할 시각적 신호를 제공합니다.
입력 텍스트 필드의 상태는 inactive, hover, disabled, focused, validation, error 중 하나일 겁니다.
모든 상태는 서로 명확하게 구분하되 전체 가이드와 애플리케이션(혹은 사이트) 내에서 일관성을 유지해야 합니다. 가급적 모범 사례를 따르는 것이 좋습니다.
최고의 텍스트 필드 스타일 선택
일반적으로 레이블 위치 지정에는 상단, 왼쪽 및 오른쪽 정렬의 세 가지 주요 옵션이 있는데요.
적합한 스타일은 양식, 구성 요소 라이브러리 및 디자인하려는 플랫폼의 목표와 규모에 따라 달라집니다.
각각 장점과 단점을 가집니다.
오리지널 머티리얼 디자인 가이드라인으로 인기 있는 언더라인 타입(Underline input) 은 최선의 선택이 아닙니다. Material Design에서도 이미 수정되었습니다. 연구에 따르면 사용자는 동일한 타입에서는 모서리가 둥근 디자인을 선호한다고 합니다.
1. 왼쪽 정렬 레이블
입력해야 하는 데이터가 사용자에게 익숙하지 않을 때 좋은 선택
장점: 쉽게 확장 가능한 레이블, 수직 공간의 효율적인 사용
단점: 레이블과 해당 입력 사이의 간격으로 인해 입력 시간을 증가시킵니다.
2. 오른쪽 정렬 레이블
왼쪽 정렬 레이블에 비해 거의 두 배정도 입력시간이 감소합니다.
장점: 텍스트 필드 레이블과 입력이 밀접하게 배치되어 시선 이동 수를 제한하여 빠른 완료 시간
단점: 전체 내용을 빠르게 스캔한 뒤 모든 정보를 이해하기가 조금 어렵습니다.
3. 상단 정렬 레이블
대부분 가장 빠른 입력 시간으로 나이스 한 선택지입니다. 많은 수평 공간이 필요하지 않아서 모바일에 적합합니다.
장점: 사용자가 한 번의 시선 이동으로 입력 레이블 및 입력 텍스트를 캡처할 수 있음, 가장 빠른 완료 시간
단점: 더 많은 수직 공간이 필요합니다.
텍스트 필드의 길이는 예상 사용자 입력에 비례하도록 합니다.
양식의 모든 텍스트 필드에 동일한 입력 길이를 사용하면 시각적으로 보기에는 좋겠지만 입력하는 사용자에게는 어렵습니다.
자리 표시자로 레이블을 대체하지 않습니다.
없어지는 자리 표시자 텍스트는 사용자가 내용을 잊을 수 있습니다.
사용자가 양식을 제출하기 전에 레이블이 없어지면 제공한 모든 정보를 확인할 수 없습니다.
매우 미니멀한 형태의 디자인을 원한다면 머티리얼 디자인의 플로팅 라벨(floating labels) 방식을 사용할 수 있습니다. 양식 내부의 자리 표시자 텍스트는 때로 사용자를 혼란스럽게 하므로 힌트 텍스트는 필드 외부에 작성해 두는 것이 좋습니다.
사용자가 양식을 쉽게 작성하도록 자동 완성을 사용합니다.
자동 완성으로 부분 쿼리를 해결할 수 있습니다. 입력하는 입력 상자 내에서 Enter 또는 "오른쪽 화살표 키"를 눌러 입력할 수 있습니다.
자동 완성으로 관련 키워드 및 문구에 대한 거의 무제한 목록을 검색합니다. 목록은 드롭다운 형식의 멀티 제안 목록으로 나타납니다.
스마트 기본값으로 필드를 미리 채워둡니다. 사용자의 IP 또는 위치정보의 경우 감지를 통해 국가와 도시 정보 입력을 쉽게 할 수 있습니다. 그리고 가장 일반적인 시나리오와 분석을 기반으로 기본적으로 선택해야 하는 항목을 정의할 수 있습니다. 단, 이커머스 서비스는 예외이며 크기나 색상과 같은 구매와 관련된 기본 설정은 미리 선택하지 않는 게 좋습니다.
각 상황에 맞는 정보를 제공합니다. 사용자의 올바른 결정을 돕고 실수를 피하기 위해 이체 서비스 같은 경우 계정 잔액과 같은 추가 정보를 제공해주는 게 좋습니다.
인라인 유효성 검사 사용(inline validation)
'라이브 인라인 유효성 검사'는 사용자가 양식을 제출할 때 일괄적으로 입력을 확인하는 것과는 대조적으로 사용자가 양식을 진행하면서 사용자 입력의 유효성을 실시간으로 확인하는 것입니다. 더 많은 피해를 입히지 않도록 올바르게 구현하십시오.
입력에 가까운 유효성 검사 메시지를 모두 함께 표시합니다.
사용자에게 소리를 지르지 마십시오. 오류 메시지는 사용자를 비난하는 대신 문제를 해결하는 방법을 알려야 합니다.
입력을 마치기 전에 필드가 유효하지 않은 것으로 표시되면 " 조기 유효성 검사"를 피하십시오.
"긍정적 유효성 검사" 사용을 고려하면 기쁨과 발전의 감각을 더할 수 있습니다.
최소한의 필드 수
시각적 노이즈를 제거하여 훨씬 간결하게 보입니다.
이름 및 날짜와 같은 텍스트는 여러 필드로 나누지 마세요.
같은 정보를 여러 번 묻지 마세요.
레이블 및 힌트 복사로 작업하여 가능한 한 줄이도록 하세요.
관련도가 낮은(혹은 옵션) 필드는 숨기기
최초에는 필수 사항만 공개하고, 사용자가 필요해지면 정보를 점진적으로 공개하여 복잡하지 않게 구성합니다.
조건부 입력(conditional logic) 사용
조건부 입력을 사용하면 사용자의 응답을 기반으로 양식에서 필드를 자동으로 표시하거나 숨기고 페이지를 건너뛸 수 있습니다. 이 방식은 입력해야 하는 필드 수를 줄일 뿐만 아니라 프로세스를 보다 개인화된 대화 타입으로 만듭니다.
그룹 관련 필드
관련 필드를 그룹화해서 복잡한 양식을 단순화하세요.
게슈탈트 심리학에는 항목끼리 관련되어 있다고 느끼는 데 도움이 되는 여러 그룹화 원칙이 있습니다.
근접성, 유사성, 연속성, 폐쇄성 및 연결성처럼요.
수십 개의 비정형 필드를 관리 가능한 몇 개의 집합으로 그룹화하면 사용성이 크게 향상됩니다.
여러 열 레이아웃은 사용하지 않기
레이아웃은 단일하게 사용하세요. 사용자를 위해 명확한 시각적 완료 경로를 만들어주도록요.
다중 열 양식 레이아웃을 사용하는 결과에는 사용자가 실제로 입력할 데이터가 있는 필드를 건너뛰거나 잘못된 필드에 데이터를 입력하거나 입력을 중단할 수 있습니다.
복잡한 양식은 단계를 나누어 간단하게 합니다.
때로 최소한의 정보 입력단계라도 내용이 많을 수 있습니다. 입력 필드가 많은 경우 단계를 나누어 쉽게 처리할 수 있도록 구성합니다.
단계를 표시하고 현재 진행 상황을 시각적으로 전달하면, 사용자 만족도와 완료율이 높아집니다.
너무 많은 단계는 도움이 되지 않으며 사용자를 짜증 나게 합니다.
사용자의 불안을 줄이고 마지막에 검토할 수 있도록 주요 정보의 요약을 제공하세요.
입력 단계가 많은 경우 화면 요소를 최소화하세요.
양식이 여러 단계로 나뉘는 경우 사용자가 명확하게 인식이 가능하도록, 주변 정보를 최소화합니다. 또한 작은 팝업에서는 단계를 나누는 양식을 사용하지 않는 것이 좋습니다.
적절한 키보드 유형 표시
Android 또는 iOS는 다양한 키보드 유형을 제공합니다. 데이터 입력을 간소화하려면 텍스트 필드를 편집할 때 표시되는 키보드가 필드의 유형에 적합해야 합니다. 키보드가 표시되는 위치를 설정하고, 불필요한 스크롤이 생기지 않도록 텍스트 필드를 위쪽 영역에 배치합니다.
암호 생성은 이렇게 하세요.
사용자가 비밀번호를 두 번 입력하도록 요청하기보다 비밀번호를 해제하도록 허용합니다. 비밀번호 생성 앱에서도 더 잘 작동합니다.
암호 입력 시 필수 입력 사항을 표시하고 모든 기준을 충족할 때까지 사용자의 진행 상황을 표시해줍니다. 사용자에게 복잡하게 요구하지 마세요.
암호 강도 측정기(strength meters encourage )로 사용자가 더 강력한 암호를 만들도록 권장합니다.
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
