UI 구성요소인 텍스트 필드 및 양식 디자인

 

텍스트 필드 구조

텍스트 필드는 사용자가 UI에 텍스트를 입력할 수 있도록 합니다. 텍스트 필드는 일반적으로 양식과 대화 상자에 나타납니다. 텍스트 필드 컴포넌트 디자인은 상호 작용을 위한 명확한 여백을 제공하여 레이아웃에서 필드를 검색할 수 있고, 효율적으로 채울 수 있으며, 접근이 용이해야 합니다.

 

 

기본 텍스트 필드의 주요 요소는 다음과 같습니다.

1. 컨테이너

상호 작용 가능한 입력 영역

2. 입력 텍스트

텍스트 필드에 입력

3. 레이블 텍스트

사용자에게 지정된 양식 필드에 어떤 정보가 있는지 알려줍니다.

4. 플레이스홀더 텍스트

사용자가 입력 텍스트로 대체되는 필수 정보에 대한 설명 또는 예시입니다.

5. 도우미 또는 유효성 검사 텍스트(선택 사항)

추가 컨텍스트 또는 유효성 검사 메시지를 제공합니다.

6. 선행 아이콘(선택 사항)

텍스트 필드에 필요한 입력 유형을 설명합니다.

7. 후행 아이콘(선택 사항)

입력한 텍스트에 대한 지우기, 숨기기/표시 등의 추가 제어 기능을 제공합니다.

 

 

텍스트 필드 유형

대부분은 신용카드 번호와 같은 특정 유형의 정보를 더 잘 처리할 수 있도록 수정된 기본 텍스트 필드를 기반으로 합니다. 다음은 우리가 만드는 UI에서 가장 일반적으로 사용되는 입력 유형의 몇 가지 예입니다.

 

 

수집하는 데이터에 적합한 입력 유형 사용

요청된 데이터에 적합한 유형의 텍스트 입력란을 제공하면 사용자가 올바른 형식으로 정보를 입력하고 실수를 방지하여 프로세스를 최대한 쉽고 효율적으로 진행할 수 있습니다.

 

 

텍스트 필드는 상태 및 사용자 상호 작용에 따라 모양을 변경해야 합니다.

이를 위해 텍스트 필드의 상태를 알려주는 시각적 단서를 제공할 수 있습니다. 입력 텍스트 필드는 비활성, 호버링, 비활성화, 포커스, 유효성 검사, 오류 중 하나의 상태를 가질 수 있습니다. 모든 상태는 서로 명확하게 구분되어야 하며 전체 양식과 애플리케이션에서 일관성을 유지해야 합니다. 이미 형성된 사용자 멘탈 모델에 도전하지 않는 모범 사례를 따르는 것이 좋습니다.

 

 

가장 적합한 텍스트 필드 스타일 선택하기

일반적으로 레이블 위치에는 상단, 왼쪽 및 오른쪽 정렬의 세 가지 주요 옵션이 있습니다. 가장 적합한 스타일은 디자인하는 양식, 컴포넌트 라이브러리 및 플랫폼의 주요 목표와 크기에 따라 달라집니다. 모두 장단점이 있습니다.

 

 

기존 머티리얼 디자인 가이드라인에서 대중화된 밑줄 입력은 최선의 선택이 아닙니다. 이미 머티리얼 디자인의 진화라는 대규모 연구를 바탕으로 수정된 내용이 있으니 확인해 보시기 바랍니다. 흥미롭게도 같은 연구에 따르면 사용자는 모서리가 둥근 입력을 선호한다고 합니다.

 

왼쪽 정렬 레이블

요청된 데이터가 사용자에게 익숙하지 않은 경우 좋은 선택입니다.

장점 

쉽게 확장 가능한 레이블, 세로 공간 활용이 좋음

단점 

레이블과 해당 입력 사이의 가변적인 거리로 인해 완료 시간이 길어짐

 

 

오른쪽 정렬 라벨

왼쪽 정렬 라벨에 비해 완료 시간이 2배 가까이 빨라집니다.

장점

텍스트 필드 레이블과 입력이 밀접하게 배치되어 시선 이동 횟수가 제한되어 완료 시간이 빠릅니다.

단점

양식을 빠르게 스캔하고 필요한 모든 정보를 파악하기 어려움

 

 

상단 정렬 라벨

완료 시간이 가장 빠르며 대부분의 경우에 가장 적합한 선택입니다. 가로 공간이 많이 필요하지 않으므로 모바일에서 잘 작동합니다.

장점

사용자가 한 번의 시선 이동으로 입력 라벨을 캡처하고 텍스트를 입력할 수 있으며 완료 시간이 가장 빠릅니다.

단점

더 많은 세로 공간이 필요함

 

 

텍스트 필드의 길이는 예상 사용자 입력에 비례해야 합니다.

양식의 모든 텍스트 필드에 동일한 입력 길이를 사용하면 시각적으로 보기 좋지만 작성하기는 더 어려워집니다.

 

 

플레이스홀더는 레이블을 대체할 수 없습니다.

사라지는 플레이스홀더 텍스트는 사용자의 단기 기억력에 부담을 줍니다. 레이블이 없으면 사용자가 양식을 제출하기 전에 제공한 모든 정보를 확인할 수 없습니다. 매우 미니멀한 양식 디자인을 원한다면 머티리얼 디자인 플로팅 레이블 방식을 사용할 수 있습니다.

양식 내부의 플레이스홀더 텍스트는 때때로 사용자에게 혼란을 줄 수 있으므로 필드 외부에 힌트 텍스트를 사용하는 것이 좋습니.

 

 

사용자의 양식 작성 지원

- 자동 완성 기능으로 부분 쿼리를 해결하도록 도와주세요. 입력 상자에서 입력한 내용을 입력하거나 '오른쪽 화살표 키'를 눌러 수락하면 됩니다.

 

- 자동 제안 기능으로 관련 키워드 및 구문에 대한 사실상 무한한 목록을 찾아보세요. 이 목록은 드롭다운 형태의 여러 제안 목록으로 표시됩니다.

- 필드를 미리 채우고 스마트 기본값을 사용하세요. 

IP 또는 지리적 위치로 사용자의 국가와 도시를 쉽게 감지할 수 있는 경우가 많습니다. 그리고 가장 일반적인 시나리오와 분석에 따라 기본적으로 선택해야 할 항목을 정의할 수 있습니다. 전자상거래는 예외이므로 크기나 색상과 같은 구매와 관련된 기본 설정을 미리 선택하지 마세요.

 

 

 

상황에 맞는 정보를 제공하세요. 

사용자가 올바른 결정을 내리거나 실수를 방지하기 위해 송금할 때 계정 잔액과 같은 추가 정보가 필요하다는 것을 알고 있다면 주저하지 말고 정보를 제시하세요.

 

 

인라인 유효성 검사 사용

'라이브 인라인 유효성 검사'는 사용자가 양식을 제출할 때 일괄적으로 입력을 확인하는 것과 달리 사용자가 양식을 진행하면서 입력의 유효성을 실시간으로 확인하는 것입니다. 더 많은 피해가 발생하지 않도록 올바르게 구현하세요.

 

• 입력과 가까운 곳에 유효성 검사 메시지를 모두 함께 표시하세요.
• 오류 메시지는 사용자를 비난하는 대신 문제를 해결하는 방법을 알려주어야 합니다.
• 사용자가 입력을 완료하기 전에 필드가 유효하지 않은 것으로 표시되는 '조기 유효성 검사'를 피하세요.
• “긍정적 유효성 검사” 사용을 고려하면 기쁨과 발전의 느낌을 더할 수 있습니다.

 

 

필드 수 줄이기

시각적, 인지적 부하를 줄이고 훨씬 더 단순해 보입니다.

 

• 성명 및 날짜와 같은 텍스트를 여러 필드로 나누지 마세요.
• 같은 정보를 여러 번 요청하지 마세요.
• 레이블 및 힌트 복사본을 사용하여 가능한 한 줄이세요.

 

관련 없는 필드 숨기기

정보를 점진적으로 공개함으로써 꼭 필요한 정보만 공개하고 사용자가 필요할 때만 복잡성을 관리할 수 있도록 돕습니다.

 

 

조건부 논리 사용

조건부 논리를 사용하면 방문자의 답변에 따라 양식의 필드를 자동으로 표시하거나 숨기고 페이지를 건너뛸 수 있습니다. 이 접근 방식을 사용하면 필드 수를 줄일 수 있을 뿐만 아니라 입력 프로세스를 보다 개인화되고 대화처럼 만들 수 있습니다.

 

 

관련 필드 그룹화

복잡한 양식을 단순화하는 가장 쉬운 방법 중 하나는 관련 필드를 그룹화하는 것입니다. 게슈탈트 심리학의 그룹화 원칙에는 여러 가지가 있는데, 이는 항목이 서로 연관되어 있다는 느낌을 주는 데 도움이 됩니다: 근접성, 유사성, 연속성, 폐쇄성, 연결성입니다. 수십 개의 구조화되지 않은 필드를 관리하기 쉬운 몇 개의 집합으로 그룹화하면 양식 사용성이 크게 향상됩니다.

 

 

여러 열 레이아웃을 사용하지 마세요

하나의 열 레이아웃은 사용자에게 명확한 완료 경로를 제공합니다. 다중 열 양식 레이아웃을 사용하면 사용자가 실제로 입력할 데이터가 있는 필드를 건너뛰거나 잘못된 필드에 데이터를 입력하거나 단순히 중간에 멈춰서 포기하는 경우가 발생할 수 있습니다.

 

 

 

 

복잡한 양식을 몇 가지 간단한 단계로 나누기

때로는 불필요한 요소를 모두 제거한 후에도 일부 양식은 거대해질 수 있습니다. 거대한 작업을 일련의 작은 작업으로 나누면 훨씬 더 쉬워 보이고 끝까지 프로세스를 수행하도록 동기를 부여할 수 있습니다.

 

• 단계를 표시하고 진행 상황을 시각적으로 전달하여 사용자의 만족도를 높이고 앞으로 나아갈 동기를 부여하세요.
• 양식을 너무 세분화하지 마세요. 너무 많은 단계는 도움이 되지 않고 오히려 사용자를 귀찮게 할 뿐입니다.
• 불안감을 줄이고 마지막에 검토 단계가 필요 없도록 주요 정보를 요약하여 제공하세요.

 

 

 

마법사 외부로 이동하는 기능 최소화하기

양식이 여러 단계로 나눌 수 있을 만큼 큰 경우에는 작업할 수 있는 별도의 명확한 공간이 필요합니다. 일반적인 탐색 기능이나 프로세스를 방해하는 링크를 노출하면 혼란만 야기할 뿐입니다. 또한 작은 팝업에 여러 단계로 구성된 양식은 사용하지 않는 것이 좋습니다.

 

 

적절한 키보드 유형 표시

Android 또는 iOS는 각기 다른 유형의 입력을 용이하게 하도록 설계된 여러 가지 키보드 유형을 제공합니다. 데이터 입력을 간소화하려면 텍스트 필드를 편집할 때 표시되는 키보드가 해당 필드에 있는 콘텐츠 유형에 적합해야 합니다. 키보드가 표시되는 위치에 유의하세요. 불필요한 스크롤을 하지 않으려면 텍스트 필드를 상단 영역에 배치하세요.

 

 

 

말도 안 되는 비밀번호 생성 디자인 중지

• 사용자에게 비밀번호를 두 번 입력하도록 요청하는 대신 사용자가 비밀번호의 마스크를 해제할 수 있도록 허용하면 비밀번호 생성 앱에서도 더 잘 작동합니다.
• 비밀번호 요구 사항을 항상 표시하고 모든 기준을 충족하기 위한 사용자의 진행 상황을 표시하세요. 사용자의 요구 사항을 단순화하세요.
• 강도 측정기를 사용하여 사용자가 더 강력한 비밀번호를 만들도록 장려하세요.

 

 

 

출처:

https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0