텍스트 필드 & 폼 디자인
Text fields & Forms design
Container (Text fields & Forms design - UI component)
01. Container - 컨테이너
1. 다른 컴포넌트를 포함할 수 있는 GUI 컴포넌트
2. 추상 클래스로서 다른 컴포넌트를 포함할 수 있는 기능을 가진 컴포넌트들의 상위 클래스
3. 최상위 컨테이너는 다른 컨테이너에 속하지 않고 독립적으로 존재 가능한 컨테이너로 모든 컴포넌트는 컨테이너에 포함되어야 출력이 가능하다.
4. 컨테이너는 자신의 영역 내부에 다른 컴포넌트를 포함시키고 관리하는 역할을 한다.
5. 컨테이너가 다른 컨테이너를 포함할 수 있다.
6. 컴포넌트는 컨테이너에 부착시키지 않으면 독자적으로 화면에 출력될 수가 없고 반드시 컨테이너에 부착을 시켜야만 화면에 출력이 된다.
02. Component - 컴포넌트
1. 컨테이너에 포함되어야 화면에 출력될 수 있는 GUI 객체
2. 다른 컴포넌트를 포함할 수 없는 순수 컴포넌트
3. 컴포넌트는 앱의 구성단위이며, 컴포넌트 여러 개를 조합하여 하나의 앱을 만든다.
03. Text fields & Forms design
폼(form)은 불만사항과 다양한 법적 탄원서를 작성하는 작업을 단순화하기 위해, 오랜 시간 동안 존재해왔다.
정보와 정보 처리의 발달에 따라 데이터를 수집하는 수단도 발전하고 있다. 수년간 사용되었던 인쇄된 폼의 디자인에서 몇 가지 팁을 배울 수 있다.
텍스트 필드 구조
텍스트 필드를 사용하여 사용자는, UI에 텍스트를 입력할 수 있다.
텍스트 필드 컴포넌트 디자인은, 상호 작용을 위한 명확한 어포던스((Affordance) 어떤 행동을 유도한다는 뜻으로 행동 유도성이라고도 한다.)를 제공하여, 레이아웃에서 필드를 발견할 수 있게 하고, 효율적으로 폼을 완성하고, 쉽게 접근하도록 해야 한다.
기본 텍스트 필드의 주요 요소:
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) - 입력한 텍스트에 대한 추가 컨트롤(예: 지우기, 숨기기/표시 등)
텍스트 필드 유형
대부분 기본 텍스트 필드를 기반으로, 신용카드 번호와 같은 특정 유형의 정보를 입력하기 쉽게 변형한다. 다음은, 가장 일반적으로 사용되는 인풋 유형의 몇 가지 예이다.
수집하려는 데이터에 적절한 인풋 유형을 사용해야 한다.
요청된 데이터에 올바른 유형의 텍스트 필드를 제공하면, 사용자가 올바른 형식으로 정보를 입력하고, 오류를 범하는 실수를 피할 수 있다.
텍스트 필드는 사용자 인터렉션에 따라 형태를 달리해야 한다.
텍스트 필드의 상태를 시각적으로 제공해야 한다. 인풋 텍스트 필드의 상태는 Inactive, Hover, Disabled, Focus/active, Validation, Error 중 하나일 것이다. 텍스트 필드의 전체적 형태는 일관성 있어야 하지만, 상황에 따라 서로 명확하게 구분되어야 한다. 사용자의 멘탈모델에 벗어나지 않으려면 일반적인 사례를 따르는 것이 좋다.
최적의 텍스트 필드 스타일 선택해야 한다.
일반적으로 레이블 위치는 상단, 왼쪽 및 오른쪽 정렬이다. 최적의 스타일은 디자인 한 폼, 컴포넌트 라이브러리 및 플랫폼의 주요 목적과 규모에 따라 달라진다. 이들 모두는 몇 가지 장, 단점을 가지고 있다.
머티리얼 디자인 가이트로 대중화된 밑줄 입력 인풋은 좋은 예가 아닐 수 있다. 머티리얼 디자인 텍스트 필드의 진화에서는 수정된 인풋 디자인을 확인할 수 있다. 흥미롭게도, 동일한 연구에 따르면 사용자는 모서리가 둥근 인풋을 선호하였다.
왼쪽 정렬 레이블
요청하려는 데이터가 사용자에게 익숙하지 않은 경우 좋은 선택이 될 수 있다.
▪장점: 레이블을 쉽게 확장할 수 있다. 수직 공간의 좋은 활용이 될 수 있다.
▪단점: 레이블과 입력 폼 사이의 거리가 있기 때문에, 작업 완료 시간을 증가시킨다.
오른쪽 정렬 레이블
왼쪽 정렬 레이블보다 작업 수행 시간이 두 배 가까이 빠르다.
▪장점: 텍스트 필드 레이블과 인풋이 근접하게 배치되어 있어 시선의 이동이 줄어들어, 작업을 완료하는 시간이 빨라진다.
▪단점: 어떤 정보가 필요한지 파악하기가 어렵다.
상단 정렬 레이블
작업을 수행하는 데 있어, 가장 빠른 완료 시간과 최고의 선택이 될 수 있다. 수평 공간이 많이 필요하지 않으므로, 모바일 디자인에서 많이 사용된다.
▪장점: 사용자가 한눈에 인풋 레이블 및 인풋 텍스트를 빠르게 파악할 수 있다.
▪단점: 더 많은 수직 공간이 필요하다.
더 자세한 내용은 아래의 모범사례 참조
“Best practices for form design- by Luke Wroblewski”
“Label Placement in Forms — by Mateo Penzo”
텍스트 필드의 길이는 사용자의 인풋에 비례해야 한다.
폼의 모든 텍스트 필드에, 동일한 입력 길이를 적용한다면, 시각적으로 즐겁지만, 완료하기가 더 어려워질 것이다.
Placeholders로 레이블을 대체하지 말라.
placeholder 텍스트가 사라진다면, 사용자는 단기 기억을 하고 있어야 하며, 레이블이 없다면, 사용자는 폼을 제출하기 전, 모든 정보를 맞게 기입했는지 확인할 수 없다. 미니멀한 디자인을 원한다면, Material design floating labels을 확인해 볼 필요가 있다.
사용자가 폼을 작성할 수 있도록 도와줘야 한다.
▪ 자동완성(Auto-Complete)은 부분 쿼리를 해결하는데 도움이 된다. 이 기능은 텍스트를 입력하는 인풋박스 안에서 발생되며, 엔터 또는 오른쪽 화살표 키를 눌러 적용시킬 수 있다.
쿼리란: 쿼리는 웹 서버에 특정한 정보를 보여달라는 웹 클라이언트 요청(주로 문자열을 기반으로 한 요청이다)에 의한 처리이다. 쿼리는 대개 데이터베이스로부터 특정한 주제어나 어귀를 찾기 위해 사용된다.
▪자동 제안(Auto-Suggest)으로 관련 키워드 및 문구에 대한 무한 리스트를 검색할 수 있으며, 이 목록은 드롭다운 형식으로 나타낸다.
▪미리 채워져 있는 필드(Pre-fill fields)와 자동 기본 설정 기능(smart defaults)을 사용하기도 한다. IP 또는 현재 위치 정보를 통해 사용자가 현재 위치하고 있는 국가와 도시를 쉽게 감지할 수 있으며, 가장 일반적인 시나리오와 분석을 기반으로, 기본적으로 선택해야 할 항목을 정의할 수 있다. 하지만 전자 상거래(E-Commerce)는 예외적으로 사이즈, 색상과 같이 구매에 연관된 항목을 미리 선택해 놓지 않는다.
▪계좌 이체 시, 사용자의 올바른 결정과 실수를 피하기 위해 계좌 잔액과 같은 상황에 맞는 정보를 추가 적으로 제공해야 한다.
유효성 검사를 사용해야 한다.
"즉각적인 유효성 검사(Live inline validation)"란 사용자가 폼을 제출할 때, 일괄적으로 인풋을 확인하는 것이 아니라, 폼 입력을 진행하는 동안 실시간으로 유효성 검사를 실시하는 것이다.
▪인풋에 가까운 곳에 유효성 검사 메시지를 표시해야 한다.
▪오류 메시지는 사용자를 비난하는 대신, 문제를 해결하기 위한 방법을 알려줘야 한다.
▪사용자가 입력을 완료하기 전에, "성급한 유효성 검사"는 피해야 한다.
▪"긍정적 유효성 검사"를 사용한다면, 사용자는 좀 더 즐겁게 작업을 마칠 수 있다.
필드 수를 줄여야 한다.
합치나 불필요한 요소를 제거한다면, 이전보다 훨씬 단순해 보일 것이다.
▪풀 네임 및 날짜는 나누지 않아야 한다.
▪레이블이나 힌트는 가능하면 한 줄로 줄여야 한다.
관련 없는 필드는 숨겨야 한다.
정보는 점진적으로 공개하며, 필수사항만 공개하고, 사용자가 필요할 시 추가적으로 정보를 공개해야 한다.
조건부 로직을 사용해야 한다.
조건부 로직을 사용하면, 방문자의 응답에 따라 자동으로 폼 필드를 표시하거나, 숨기고 페이지를 건너뛸 수 있다. 이러한 접근 방식은 필드 수를 줄일 뿐만 아니라, 입력 프로세스가 보다 개인화되고, 대화하는 것처럼 느낄 수 있다.
관련 필드는 그룹으로 묶어야 한다.
복잡한 폼을 단순화하는 가장 쉬운 방법 중 하나는, 관련 필드를 그룹화하는 것이다. 게슈탈트 법칙에는 근접성, 유사성, 연속성, 폐쇄성, 연결성 등 여러 가지 요소가 있다. 이러한 비구조화된 필드를 관리 가능한 상태로 그룹화한다면, 사용성이 크게 증가할 것이다.
여러 개의 열로 된 레이아웃 사용은 피해야 한다.
하나의 열 레이아웃은 사용자에게 완료 시점을 명확하게 인지시켜준다. 하지만 여러 개의 열로 된 레이아웃을 사용한 결과, 실제로 사용자는 입력해야 할 데이터를 건너뛰거나, 필드에 잘못된 데이터를 입력하거나, 중간에 포기하는 경우가 발생하였다.
복잡한 폼을 몇 가지 단순한 단계로 세분화한다.
때로는 불필요한 요소를 제거한 후에도 어떤 폼은 거대해 보일 수 있다. 큰 단위를 작은 단위로 나누면, 작업을 완료하는데 훨씬 쉬워 보이고, 끝까지 과정을 수행할 수 있도록 동기를 부여한다.
▪단계를 표시하고, 진행 상황을 시각적으로 전달하게 되면, 사용자의 만족도가 높아지고, 앞으로 나아갈 동기가 생긴다.
▪너무 많은 단계를 세분화하는 것은 사용자에게 도움이 되지 않으며, 사용자를 귀찮게 할 뿐이다.
▪주요 정보를 요약하고, 최종 검토 단계를 갖춘다면, 사용자의 불안감은 줄어들 것이다.
상황에 맞는 키보드 유형을 제공해야 한다.
Android 또는 iOS는 다양한 유형의 키보드를 제공한다. 데이터 입력시간을 줄이려면, 텍스트 필드를 편집할 때는 텍스트를 바로 입력할 수 있는 키보드가 적합하다. 불필요한 스크롤을 방지하기 위해, 텍스트 필드를 키보드 위쪽에 제공해야 한다.
효율적인 비밀번호 생성 디자인
▪사용자가 비밀번호를 두 번 입력하도록 요청하는 대신, 비밀번호를 확인할 수 있어야 한다.
▪비밀번호를 설정할 때 필수사항을 제시해줘야 하며, 사용자가 모든 기준에 충족하는지 진행사항을 확인할 수 있어야 한다.
▪비밀번호의 안전성을 측정할 수 있는 측정기를 보여줌으로써, 사용자가 더 강력한 암호를 만들도록 권장해야 한다.
Taras Bakusevych, Text fields & Forms design — UI components series, UX Collective, May 25, 2020
