Text fields & Forms design
UI Component series
Form은 불만에 대한 내용을 작성하거나 법적인 소송을 하는 것을 단순화 하기 위해 매우 오래전부터 존재해 왔다. 정보 처리의 발전과 함께, 데이터를 수집하는 수단도 발전했다. 오랫동안 사용되어온 인쇄된 form의 디자인에서 몇 가지 팁을 배울 수 있다.
텍스트 필드의 구조
기본 텍스트 필드의 주요 요소이다.
1. Container - 인터렉션할 수 있는 인풋 영역
2. Input text - 텍스트 필드에 입력된 텍스트
3. Label text - 주어진 필드에 어떤 정보가 들어가야 하는지 사용자에게 알려주는 텍스트
4. Placeholder text - 입력할 텍스트에 대한 설명이나 정보의 예시. 사용자가 텍스트를 입력하면 그 텍스트와 대체된다.
5. Helper or Validation text(optional) - 추가적인 맥락을 제공하거나 확인하는 메시지
6. Leading icon - 텍스트 필드가 요구하는 인풋의 타입을 설명
7. Trailing icon - 삭제, 숨기기/보이기 등의 입력된 텍스트에 대한 추가적인 컨트롤
텍스트 필드의 종류
대부분의 텍스트 필드는 기본 텍스트 필드를 신용카드 번호와 같이 특정한 타입의 정보를 더 다루기 쉽게 변형한 것들이다. 다음은 우리가 만드는 UI에서 가장 많이 사용되는 인풋타입에 대한 몇 가지 예이다.
수집하려는 데이터에 따라 적합한 인풋 타입을 사용하라.
요구하는 데이터에 따라 적합한 타입의 텍스트 필드를 사용하면 사용자가 올바른 형식으로 정보를 입력하고 실수를 피하도록 하여 프로세스를 쉽고 효과적으로 만들 수 있다.
텍스트 필드는 상태와 사용자 인터렉션에 따라 형태를 달리해야 한다.
텍스트 필드의 상태를 커뮤니케이션하는 시각적 단서를 제공해야 한다. 인풋 텍스트 필드는 inactive, hover, disabled, focused, validation, error 중 하나의 상태를 취할 수 있다. 모든 상태는 서로 명확히 구분되어야 하며 어플리케이션의 전체 폼에 통일성 있게 적용되어야 한다. 사용자의 멘탈모델을 벗어나는 시도를 하지 말고 일반적으로 사용되는 형식을 따르는 것이 좋다.
메터리얼 디자인 가이드라인의 밑줄로 된 인풋 컨트롤은 그리 좋은 예가 아니다. 메터리얼 디자인 가이드라인의 진화에 대한 연구를 보면 더 진화된 형태를 볼 수 있다. 연구에 의하면 사용자는 모서리가 둥근 사각형 형태의 인풋을 더 선호한다고 한다.
좌측 정렬된 레이블
요구된 데이터가 사용자에게 익숙한 데이터가 아닐 때 사용하기 좋다.
장점 : 레이블의 길이를 조정하기 좋다. 세로 공간을 활용하기 좋다.
단점 : 레이블과 레이블에 해당하는 인풋 사이의 거리가 멀어지거나 여러 가지로 보여서 테스크를 수행하는 시간이 길어진다.
우측 정렬된 레이블
좌측 정렬된 레이블보다 테스크 수행 시간이 두 배 가까이 빠르다.
장점 : 레이블과 인풋이 근접하게 배치되어 있어서 시선의 이동이 줄어들어 테스크를 완료하는 시간이 빨라진다.
단점 : 폼을 빨리 스캔해서 전체적으로 어떤 정보가 요구되는지 이해하기가 어렵다.
상단 정렬된 레이블
테스크를 완료하는 시간이 가장 빠르고 대부분의 케이스에서 전반적으로 가장 좋은 선택이다. 가로 공간을 많이 차지하지 않기 때문에 모바일에서 사용하기 좋다.
장점 : 인풋 레이블과 텍스트를 한 눈에 볼 수 있어 테스크 완료 시간이 가장 빠르다.
단점 : 세로 공간이 좀 더 필요하다.
아래 토픽에서 좀 더 알아볼 수 있다.
"Best practices for form design - by Luke Wroblewski"
"Lable Placement in Forms - by Mateo Penzo"
텍스트 필드의 길이는 예상되는 사용자 인풋의 길이에 따라 맞춰져야 한다.
폼 안에 있는 모든 텍스트 필드의 길이를 통일성있게 맞추면 시각적으로 정리되어 보일 수는 있어도 입력을 하기 어려워질 수 있다.
Placeholder로 레이블을 대체하지 말아라.
Placeholder의 텍스트가 없어지면 사용자는 Placeholder의 내용을 기억하고 있어야 한다. 레이블이 없으면 사용자는 폼을 제출하기 전에 입력한 모든 정보를 체크하기 어렵다. 디자인을 미니멀하게 하고 싶다면 메터리얼 디자인의 floating label을 적용해라.
폼 안의 placeholder는 사용자에가 혼란을 줄 수 있다. 필드 바깥에서 힌트 텍스트를 사용하는 것이 좋다.
사용자가 쉽게 폼을 채울 수 있도록 도와줘라.
자동완성(Auto-Complete)으로 부분적으로 입력을 해도 완성이 되도록 하라. 이 기능은 텍스트를 입력하는 인풋박스 안에서 수행되며, 엔터를 누르거나 오른쪽 화살표 키를 누르면 자동완성된 텍스트를 적용할 수 있다.
자동제안(Auto-Suggest)기능으로 한정적이지 않은 연관된 키워드나 문장을 검색하라. 이 기능은 드롭다운 폼에서 여러가지 제안 리스트로 나타난다.
미리 채워져 있는 필드(Pre-fill field)와 자동으로 기본값이 입력되어 있는 기능(smart default)을 사용하라. IP또는 위치정보로 사용자의 국가를 쉽게 탐지할 수 있다. 일반적인 시나리오와 분석결과에 근거해서 기본으로 선택하는 항목을 정할 수도 있다. E-commerce에서는 예외적으로, 사이즈나 색상과 같이 구매에 연관된 항목들은 미리 선택해 놓으면 안된다.
맥락에 맞는 정보를 제공하라. 계좌이체를 할 때 잔액 정보와 같이 사용자가 올바른 결정을 하거나 실수를 방지할 수 있는 부가적인 정보를 제공하라.
행간에 유효성 검사(Inline Validation)를 사용하라.
"Live inline validation"은 사용자가 폼을 제출했을 때 한꺼번에 입력 내용들을 체크하는 것과는 반대로, 사용자가 폼 입력을 진행하는 동안 입력의 유효성을 실시간으로 체크하는 것이다. 아래와 같은 사항들을 고려해야 더 귀찮게 하지 않을 수 있다.
유효성 검사 메시지를 인풋 근처에 보여주어라.
사용자를 나무라지 마라. 에러 메세지는 사용자를 혼내기 위한 것이 아니라 문제를 어떻게 해결할지 알려주기 위한 것이다.
성급하게 검사(premature validation)하지 말라. 입력을 끝내기 전에 입력필드의 내용이 유효하지 않다고 지적하지 말아라.
긍정적인 메시지로 검사하라(positive validation). 사용자가 좀더 즐겁게 진행할 수 있다.
필드의 갯수를 제한하라.
시각적인 인지 부하를 줄여주면서 훨씬 심플해 보일 것이다.
풀네임을 나누거나 날짜를 여러개의 필드로 만들지 말아라.
같은 정보를 여러 번 묻지 말아라.
레이블이나 힌트를 가능하면 짧게 만들어라.
관련없는 필드는 숨겨라.
정보를 순차적으로 보여주는 것으로 사용자에게 필요한 정보만 노출시키면 사용자가 원할 때에만 복잡한 정보들을 다루게 할 수 있다.
조건부 로직(Conditional logic)을 사용하라.
조건부 로직은 방문자의 답변에 따라 폼의 필드를 자동으로 보여주거나 숨기거나 건너뛰게 할 수 있다. 이 방법은 필드의 갯수를 줄일 수도 있고 양식을 채우는 과정을 더 개인화하고 대화체로 만들 수 있다.
연관된 필드를 묶어라.
복잡한 폼을 단순하게 만드는 가장 쉬운 방법 중 하나는 연관된 필드를 그룹핑 하는 것이다. 게슈탈트 법칙에는 근접성, 유사성, 연속성, 폐쇄성, 연결성 등 아이템들이 연관된 것 처럼 보이게 해 주는 그룹핑에 대한 원리가 많이 있다. 체계가 없는 여러 필드를 몇 개의 세트로 그룹핑하면 폼의 사용성을 아주 뛰어나게 할 수 있다.
여러개의 열로 된 레이아웃을 사용하지 말아라.
1열 레이아웃은 사용자가 완료되는 경로를 명확하게 인지할 수 있게 해준다. 여러 개의 열로 된 레이아웃을 사용하면 사용자가 데이터를 입력해야 하는 필드를 건너뛸 수 있고, 엉뚱한 필드에 데이터를 입력하거나 작성을 멈추고 포기할 수도 있다.
복잡한 폼을 몇 가지 단순한 단계로 분리해라.
불필요한 모든 것을 제거한 후에도 어떤 폼은 너무 거대해 보일 수 있다. 큰 테스크를 작은 단위로 나누면 훨씬 쉬워 보이고 사용자가 프로세스를 완료하도록 동기를 부여할 수 있다.
스텝을 보여줘서 사용자가 수행하는 단계를 시각적으로 커뮤니케이션하라. 그러면 사용자에게 만족감을 줄 수 있고 단계를 더 진행하도록 동기를 부여할 수 있다.
단계를 너무 많이 만들지 말아라. 너무 많은 단계는 도움이 되지 않고 사용자를 귀찮게 할 뿐이다.
중요 정보를 요약해서 보여주는 것은 안정감을 준다. 그리고 마지막에는 단계를 리뷰하여라.
위자드 밖으로 나갈 수 있는 경로를 최소화하라.
폼이 여러가지 단계로 나눌 만큼 크다면, 현재 단계에 집중할 수 있도록 명확하게 분리되어야 한다. 일반적인 내비게이션이나 링크를 노출하면 수행 과정을 방해하고 혼란스럽게 만들 것이다. 다단계 폼을 작은 팝업으로 보여주는 것도 추천하지 않는다.
적당한 키보드 타입을 제공하라.
Android와 iOS는 여러가지 종류의 키보드 종류를 제공한다. 각각의 키보드는 다른 종류의 인풋을 용이하게 하기 위해 디자인되어 있다. 데이터 입력을 원활하게 하기 위해 입력필드의 컨텐츠 타입에 적합한 키보드가 제공되어야 한다. 키보드가 나타나는 위치도 고려해야 한다. 불필요한 스크롤을 방지하기 위해 텍스트 필드를 윗쪽에 제공해야 한다.
패스워드 생성 디자인
사용자가 패스워드를 두 번 입력하도록 요구하는 대신, 패스워드가 보일 수 있도록 하여라.
항상 패스워드 요구사항을 보여주고, 사용자의 패스워드가 요구사항에 얼마나 맞는지 보여주어라. 사용자를 위해 요구사항을 간소화 하라.
강도 측정기를 사용해서 보안이 강한 패스워드를 생성하도록 유도해라.
원문 출처 : https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0
