모바일 양식 디자인 모범 사례

(이 기사는 Adobe의 후원을 받았습니다.) 양식은 모든 모바일 상호 작용의 핵심입니다. 그것은 사람과 그들이 찾고있는 것 사이에 서 있습니다. 우리는 매일 필수적인 온라인 활동을 위해 양식을 사용합니다. 마지막으로 티켓을 구매하거나, 호텔 객실을 예약하거나, 온라인으로 구매할 때를 기억하십시오. 아마도 이러한 상호 작용에는 양식을 작성하는 단계가 포함되었을 것입니다.

형식은 목적을 위한 수단일 뿐입니다. 사용자는 혼란 없이 신속하게 완료할 수 있어야 합니다. 이 기사에서는 효과적인 양식을 디자인하는 데 도움이 되는 실용적인 기술을 배우게 됩니다.

효과적인 양식을 만드는 것

모든 양식의 주요 목표는 완성입니다. 두 가지 요소가 완료율에 큰 영향을 미칩니다.

• 복잡성에 대한 인식
  사용자가 새 양식을 볼 때 가장 먼저 하는 일은 양식을 완료하는 데 필요한 시간을 추정하는 것입니다. 사용자는 양식을 스캔하여 이 작업을 수행합니다. 지각은 추정 과정에서 중요한 역할을 합니다. 양식이 복잡할수록 사용자가 프로세스를 포기할 가능성이 높아집니다.
• 상호작용 비용
  상호 작용 비용은 사용자가 목표에 도달하기 위해 인터페이스와 상호 작용하는 데 드는 인지적 및 물리적 노력의 합계입니다. 상호작용 비용은 양식 사용성과 직접적인 관련이 있습니다. 사용자가 양식을 완성하기 위해 더 많은 노력을 기울여야 할수록 양식은 덜 유용합니다. 높은 상호 작용 비용은 입력하기 어려운 데이터, 일부 질문의 의미를 이해하지 못하거나 오류 메시지에 대한 혼란의 결과일 수 있습니다.

양식의 구성 요소

일반적인 양식에는 다음과 같은 5가지 구성 요소가 있습니다.

• 입력 필드
  여기에는 텍스트 필드, 암호 필드, 확인란, 라디오 버튼, 슬라이더 및 사용자 입력을 위해 설계된 기타 필드가 포함됩니다.
• 필드 레이블
  이는 해당 입력 필드가 의미하는 바를 사용자에게 알려줍니다.
• 구조
  여기에는 필드의 순서, 페이지의 양식 모양, 서로 다른 필드 간의 논리적 연결이 포함됩니다.
• 작업 버튼
  이 양식에는 최소한 하나의 클릭 유도문안(데이터 제출을 트리거하는 버튼)이 있습니다.
• 피드백
  피드백은 작업 결과를 사용자에게 알립니다. 피드백은 긍정적이거나(예: 양식이 성공적으로 제출되었음을 나타냄) 부정적일 수 있습니다(예: "제공한 번호가 잘못되었습니다").

이 문서에서는 구조, 입력 필드, 레이블, 작업 버튼 및 유효성 검사와 관련된 여러 측면을 다룹니다. 이 기사에서 언급한 대부분의 요점에는 시각적으로 해야 할 일과 하지 말아야 할 일의 예가 있습니다. 이러한 모든 예제는 Adobe XD를 사용하여 만들었습니다.

입력 필드

폼 디자인에서 디자이너가 할 수 있는 가장 중요한 일은 타이핑의 필요성을 최소화하는 것입니다. 입력 노력을 줄이는 것이 필수적입니다. 디자이너는 양식 필드 디자인에 집중하여 이 목표를 달성할 수 있습니다.

총 필드 수 최소화

사용자에게 작성하도록 요청하는 모든 필드에는 약간의 노력이 필요합니다. 양식을 작성하는 데 더 많은 노력이 필요할수록 사용자가 양식을 작성할 가능성이 줄어듭니다. 그렇기 때문에 양식 디자인의 기본 규칙은 짧을수록 좋습니다 . 모든 불필요한 필드를 제거하십시오.

Baymard Institute는 결제 양식을 분석한 결과 너무 길거나 복잡한 결제 프로세스가 결제 도중 포기하는 가장 큰 이유 중 하나임을 발견했습니다. 연구에 따르면 평균 체크아웃에는 거의 15개의 양식 필드가 포함되어 있습니다. 대부분의 온라인 서비스는 기본적으로 표시되는 필드 수를 20~60% 줄일 수 있습니다.

많은 디자이너들은 "적을수록 좋다"는 원칙에 익숙합니다. 여전히 사용자에 대한 더 많은 데이터를 수집하기 위해 추가 질문을 합니다. 처음 가입하는 동안 사용자에 대한 더 많은 데이터를 수집하고 싶은 마음이 들 수 있지만 그러한 유혹에 저항하십시오. 이렇게 생각해 보세요. 양식에 필드를 추가할 때마다 잠재 사용자를 잃을 가능성이 높아집니다. 현장에서 얻은 정보가 새로운 사용자를 잃을 가치가 있습니까? 사용자의 연락처 정보를 수집하는 한 언제든지 추가 데이터 요청에 대한 후속 조치를 취할 수 있음을 기억하십시오.

모든 선택 필드를 명확하게 구별

선택 필드를 최적화하기 전에 양식에 정말로 포함해야 하는지 자문해 보십시오. 원하는 정보가 아니라 정말로 필요한 정보가 무엇인지 생각하십시오. 이상적으로는 양식의 선택적 필드 수는 0이어야 합니다.

브레인스토밍 세션 후에도 양식에 몇 가지 선택적 질문을 포함하려는 경우 사용자에게 해당 필드가 선택 사항임을 분명히 하십시오.

• 필수 필드 대신 선택 필드를 표시하십시오.
  가능한 한 적게 요청하면 양식의 대다수 필드가 필수 항목이 됩니다. 따라서 소수에 해당하는 필드만 표시하십시오. 예를 들어 6개 필드 중 5개 필드가 필수인 경우 하나의 필드만 선택 사항으로 표시하는 것이 좋습니다.
• "선택 사항" 레이블을 사용하여 선택 사항 필드를 나타냅니다.
  별표( * )를 사용하여 "선택 사항"을 의미하지 마십시오. 모든 사용자가 별표를 선택적 정보와 연관시키는 것은 아니며 일부 사용자는 의미에 혼동될 것입니다(별표는 필수 필드를 나타내는 데 자주 사용됨).

그에 따른 필드 크기 조정

가능하면 필드 길이를 어포던스로 사용하십시오. 입력 필드의 길이는 필드에서 예상되는 정보의 양에 비례해야 합니다. 필드의 크기는 시각적 제약으로 작용합니다. 사용자는 필드를 보기만 해도 입력해야 하는 텍스트의 양을 알 수 있습니다. 일반적으로 지역 번호 및 집 번호와 같은 필드는 주소 필드보다 짧아야 합니다.

필드 포커스 제공

양식의 첫 번째 입력 필드에 자동 초점을 맞춥니다. 필드에 자동 초점을 맞추면 사용자에게 표시와 시작점이 제공되므로 양식 작성을 빠르게 시작할 수 있습니다. 그렇게 하면 상호 작용 비용이 줄어들어 사용자가 불필요한 탭을 한 번 절약할 수 있습니다.

활성 입력 필드를 눈에 띄게 만들고 초점을 맞춥니다. 필드 초점 자체는 수정처럼 명확해야 합니다. 사용자는 초점이 어디에 있는지 한 눈에 이해할 수 있어야 합니다. 강조된 테두리 색상 또는 상자의 페이드 인일 수 있습니다.

사용자에게 이메일 주소를 반복하도록 요청하지 마십시오.

이메일 주소에 대한 추가 필드가 제품 개발자들 사이에서 인기가 있는 이유는 분명합니다. 모든 회사는 하드 바운스(잘못된 이메일 주소로 인한 배달 불가)의 위험을 최소화하기를 원합니다. 불행히도 이 접근 방식을 따른다고 해서 유효한 주소를 얻을 수 있다는 보장은 없습니다. 사용자는 종종 한 필드에서 다른 필드로 주소를 복사하여 붙여넣습니다.

"비밀번호 표시" 옵션 제공

암호 입력 필드를 복제하는 것은 제품 설계자들이 흔히 저지르는 또 다른 실수입니다. 디자이너는 사용자가 암호를 잘못 입력하는 것을 방지할 수 있다고 믿기 때문에 이 접근 방식을 따릅니다. 실제로 비밀번호에 대한 두 번째 필드는 상호작용 비용을 증가시킬 뿐만 아니라 사용자가 실수 없이 진행한다는 보장도 없습니다. 사용자는 필드에 입력한 내용을 볼 수 없기 때문에 동일한 실수를 두 번(두 필드 모두) 할 수 있으며 비밀번호를 사용하여 로그인하려고 할 때 문제가 발생합니다. Jakob Nielsen은 다음과 같이 요약했습니다.

사용자가 암호를 입력할 때 유용성이 저하되고 그들이 받는 유일한 피드백은 일련의 글머리 기호입니다. 일반적으로 암호를 마스킹해도 보안이 향상되지는 않지만 로그인 실패로 인해 비즈니스 비용이 발생합니다.

암호 필드를 복제하는 대신 사용자가 생성하기 위해 선택한 암호를 볼 수 있는 옵션을 제공하십시오. 클릭 시 암호를 해제하는 아이콘이나 확인란이 있습니다. 비밀번호 미리보기는 사용자가 전송하기 전에 데이터를 확인할 수 있는 기회가 될 수 있습니다.

데이터 필드를 슬라이스하지 마십시오

이름, 전화번호 또는 생년월일을 요청할 때 필드를 분할하지 마십시오. 슬라이스된 필드는 사용자가 다음 필드로 이동하기 위해 추가 탭을 하도록 합니다. 전화번호 또는 생년월일과 같은 일부 형식이 필요한 필드의 경우 자리 표시자로 명확한 형식 규칙과 쌍을 이루는 단일 필드를 갖는 것도 좋습니다.

드롭다운 메뉴 피하기

Luke Wroblewski는 드롭다운이 최후의 수단이 되어야 한다고 유명하게 말했습니다. 축소된 요소는 작은 화면에서 데이터 입력 프로세스를 더 어렵게 만들기 때문에 드롭다운은 특히 모바일에 좋지 않습니다. 드롭다운에 옵션을 배치하면 두 번 탭해야 하고 옵션이 숨겨집니다.

옵션 선택에 드롭다운을 사용하는 경우 라디오 버튼으로 교체하는 것이 좋습니다. 모든 옵션을 한 눈에 볼 수 있게 하고 상호 작용 비용을 줄여줍니다. 사용자는 항목을 탭하고 한 번에 선택할 수 있습니다.

자리 표시자 및 마스크 입력 사용

형식의 불확실성은 양식 디자인의 가장 중요한 문제 중 하나입니다. 이 문제는 양식 포기와 직접적인 관련이 있습니다. 사용자가 데이터를 제공해야 하는 형식이 불확실할 때 양식을 빠르게 포기할 수 있습니다. 형식을 명확하게 하기 위해 할 수 있는 몇 가지 작업이 있습니다.

자리 표시자 텍스트

입력 필드의 텍스트는 사용자에게 예상되는 내용을 알려줄 수 있습니다. 자리 표시자 텍스트는 "전체 이름"과 같은 간단한 필드에는 필요하지 않지만 특정 형식의 데이터가 필요한 필드에는 매우 유용할 수 있습니다. 예를 들어, 소포 추적을 위한 검색 기능을 설계하는 경우 추적 번호 필드에 대한 자리 표시자로 샘플 추적 번호를 제공하는 것이 좋습니다.

양식에서 자리 표시자 텍스트와 사용자가 입력한 실제 값 간에 시각적으로 명확하게 구분해야 합니다. 즉, 자리 표시자 텍스트는 미리 설정된 값처럼 보이지 않아야 합니다. 명확한 시각적 구분 없이 사용자는 자리 표시자가 있는 필드에 이미 값이 있다고 생각할 수 있습니다.

마스크 입력

필드 마스킹은 사용자가 입력된 텍스트의 서식을 지정하는 데 도움이 되는 기술입니다. 많은 디자이너가 필드 마스킹을 자리 표시자 텍스트와 혼동합니다. 같은 것이 아닙니다. 기본적으로 정적 텍스트인 자리 표시자와 달리 마스크는 사용자가 제공한 데이터의 서식을 자동으로 지정합니다. 아래 예에서는 전화번호를 입력할 때 괄호, 공백 및 대시가 자동으로 화면에 나타납니다.

또한 마스크 입력을 통해 사용자가 정보를 쉽게 확인할 수 있습니다. 전화번호가 청크로 표시되면 오타를 쉽게 찾고 수정할 수 있습니다.

매칭 키보드 제공

모바일 사용자는 현장에 적합한 키보드를 제공하는 앱과 웹사이트를 높이 평가합니다. 이 기능은 추가 작업을 수행하는 것을 방지합니다. 예를 들어 사용자가 신용 카드 번호를 입력해야 하는 경우 앱은 다이얼패드만 표시해야 합니다. 앱 전체에서 일관되게 키보드 일치를 구현하는 것이 중요합니다(앱의 모든 양식에 이 기능이 있어야 함).

올바른 키패드를 표시하도록 HTML 입력 유형을 설정합니다. 7가지 입력 유형은 양식 디자인과 관련이 있습니다.

• input type="text" 는 모바일 장치의 일반 키보드를 표시합니다.
• input type="email" 은 일반 키보드와 '@', '.com'을 표시합니다.
• input type="tel" 은 0에서 9까지의 숫자 키패드를 표시합니다.
• input type="number" 는 숫자와 기호가 있는 키보드를 표시합니다.
• input type="date" 는 모바일 장치의 날짜 선택기를 표시합니다.
• input type="datetime" 은 모바일 장치의 날짜 및 시간 선택기를 표시합니다.
• input type="month" 는 모바일 장치의 월 및 연도 선택기를 표시합니다.

특정 범위를 요청할 때 슬라이더 사용

많은 양식에서 사용자에게 값 범위(예: 가격 범위, 거리 범위 등)를 제공하도록 요청합니다. 이를 위해 "from" 및 "to"라는 두 개의 별도 필드를 사용하는 대신 슬라이더를 사용하여 사용자가 엄지 상호 작용으로 범위를 지정할 수 있도록 합니다.

민감한 정보를 요구하는 이유를 명확하게 설명

사람들은 개인 정보 보호 및 정보 보안에 대해 점점 더 우려하고 있습니다. 사용자가 비공개로 간주하는 정보 요청을 볼 때 "음, 왜 이것이 필요한가요?"라고 생각할 수 있습니다. 양식에서 사용자에게 민감한 정보를 요청하는 경우 필요한 이유를 설명하세요. 관련 필드 아래에 지원 텍스트를 추가하면 됩니다. 일반적으로 설명 텍스트는 100자를 넘지 않아야 합니다.

정적 기본값에 주의

시스템이 사용자에 대해 가지고 있는 정보를 기반으로 시스템에서 계산하는 스마트 기본값과 달리 정적 기본값은 모든 사용자에게 동일한 형식으로 미리 설정된 값입니다. 사용자의 상당 부분(예: 95%)이 특히 필수 필드의 경우 이러한 값을 선택할 것이라고 생각되지 않는 한 정적 기본값을 사용하지 마십시오. 왜요? 오류가 발생할 가능성이 높기 때문에 사람들은 양식을 빠르게 스캔하고 모든 질문을 구문 분석하는 데 추가 시간을 소비하지 않습니다. 대신 이미 값이 있다고 가정하고 필드를 건너뜁니다.

사용자 데이터 보호

Jef Raskin은 "시스템은 모든 사용자 입력을 신성하게 다루어야 합니다."라고 말했습니다. 이것은 양식에 대해 절대적으로 사실입니다. 웹 양식을 작성하기 시작한 다음 실수로 페이지를 새로 고치지만 데이터가 필드에 남아 있을 때 유용합니다. Garlic.js와 같은 도구는 양식이 제출될 때까지 양식 값을 로컬로 유지하는 데 도움이 됩니다. 이렇게 하면 사용자가 실수로 탭이나 브라우저를 닫더라도 소중한 데이터가 손실되지 않습니다.

작업 자동화

데이터 입력 과정을 최대한 원활하게 하려면 입력 필드의 수를 최소화하는 것만으로는 충분하지 않습니다. 데이터 입력에 필요한 사용자의 노력에도 주의를 기울여야 합니다. 타이핑은 상호 작용 비용이 많이 듭니다. 물리적 키보드를 사용하더라도 오류가 발생하기 쉽고 시간이 많이 걸립니다. 그러나 모바일 화면의 경우 더욱 중요해집니다. 더 많이 입력하면 사용자가 오류를 범할 가능성이 높아집니다. 사용자 만족도를 높이고 오류율을 줄이기 때문에 불필요한 입력을 방지하기 위해 노력하십시오.

이 목표를 달성하기 위해 할 수 있는 몇 가지 작업은 다음과 같습니다.

자동완성

대부분의 사용자는 Google 검색창에 질문을 입력할 때 자동 완성을 경험합니다. Google은 사용자가 필드에 입력한 내용과 관련된 제안 목록을 사용자에게 제공합니다. 동일한 메커니즘을 양식 디자인에 적용할 수 있습니다. 예를 들어 양식은 이메일 주소를 자동 완성할 수 있습니다.

자동 대문자

Autocapitalizing은 첫 글자를 자동으로 대문자로 만듭니다. 이 기능은 이름 및 주소와 같은 필드에 탁월하지만 비밀번호 필드에는 피하십시오.

자동 수정

자동 수정은 철자가 틀린 것으로 보이는 단어를 수정합니다. 이름, 주소 등과 같은 고유한 필드에 대해 이 기능을 끄십시오.

개인 정보 자동 채우기

주소 입력은 온라인 가입 양식에서 가장 번거로운 부분입니다. 브라우저 기능을 사용하여 이전에 입력한 값을 기반으로 필드를 채우면 이 작업을 더 쉽게 수행할 수 있습니다. Google의 연구에 따르면 자동 채우기를 사용하면 양식을 30% 더 빠르게 작성할 수 있습니다.

모바일 장치의 기본 기능을 사용하여 데이터 입력 간소화

최신 모바일 장치는 수많은 놀라운 기능을 갖춘 정교한 장치입니다. 설계자는 장치의 기본 기능(예: 카메라 또는 지리적 위치)을 사용하여 데이터 입력 작업을 간소화할 수 있습니다.

다음은 센서 및 장치 하드웨어를 사용하는 방법에 대한 몇 가지 팁입니다.

위치 서비스

지리적 위치 데이터를 기반으로 사용자의 국가를 미리 선택할 수 있습니다. 그러나 때때로 전체 주소를 미리 채우는 것은 정확성 문제로 인해 문제가 될 수 있습니다. Google의 Places API는 이 문제를 해결하는 데 도움이 될 수 있습니다. 지리적 위치와 주소 미리 채우기를 모두 사용하여 사용자의 정확한 위치를 기반으로 정확한 제안을 제공합니다.

위치 서비스를 사용하여 스마트 기본값을 제공하는 것도 가능합니다. 예를 들어 "항공편 찾기" 양식의 경우 사용자의 지리적 위치를 기반으로 사용자에게 가장 가까운 공항으로 "출발지" 필드를 미리 채울 수 있습니다.

생체 인증

오늘날 텍스트 비밀번호를 사용하는 가장 큰 문제는 대부분의 사람들이 비밀번호를 잊어버린다는 것입니다. 82%의 사람들이 비밀번호를 기억하지 못하고 세션의 5~10%에서 사용자가 비밀번호를 재설정해야 합니다. 암호 복구는 전자 상거래에서 큰 문제입니다. 사용자의 75%는 체크아웃하는 동안 비밀번호를 복구해야 하는 경우 구매를 완료하지 않을 것입니다.

암호의 미래는 암호가 없습니다. 오늘날에도 모바일 개발자는 생체 인식 기술을 활용할 수 있습니다. 사용자는 암호를 입력할 필요가 없습니다. 지문이나 얼굴 스캔을 사용하여 로그인하는 인증을 위해 생체 인식 판독기를 사용할 수 있어야 합니다.

카메라

양식에서 사용자에게 신용 카드 세부 정보 또는 운전 면허증 정보를 제공하도록 요청하는 경우 카메라를 스캐너로 사용하여 데이터 입력 프로세스를 단순화할 수 있습니다. 카드 사진을 찍고 모든 세부 정보를 자동으로 채우는 옵션을 제공합니다.

그러나 앱이 필드를 얼마나 잘 채우더라도 편집할 수 있도록 남겨 두는 것이 중요하다는 것을 기억하십시오. 사용자는 원할 때마다 필드를 수정할 수 있어야 합니다.

목소리

Apple HomePod, Google Home 및 Amazon Echo와 같은 음성 제어 장치가 시장을 적극적으로 잠식하고 있습니다. 일반적인 작업에 음성을 사용하는 것을 선호하는 사람들의 수가 크게 증가했습니다. ComScore에 따르면 2020년까지 전체 검색의 50%가 음성 검색이 될 것입니다.

사용자가 음성 명령을 사용하여 더 편안하고 자신감을 갖게 되면 모바일 상호 작용의 기대되는 기능이 될 것입니다. 음성 입력은 모바일 사용자에게 많은 이점을 제공합니다. 예를 들어 자동차를 운전하는 동안 사용자가 화면에 집중할 수 없는 상황에서 특히 유용합니다.

양식을 디자인할 때 데이터 입력의 대체 방법으로 음성 입력을 제공할 수 있습니다.

필드 레이블

명확하고 간결한 레이블 작성

레이블은 특정 입력 필드에서 사용자에게 예상되는 데이터를 알려주는 텍스트입니다. 명확한 레이블을 작성하는 것은 양식을 더 쉽게 액세스할 수 있도록 하는 가장 좋은 방법 중 하나입니다. 레이블은 사용자가 어떤 정보가 필요한지 한 눈에 이해할 수 있도록 도와야 합니다.

설명을 위해 완전한 문장을 사용하지 마십시오. 레이블은 도움말 텍스트가 아닙니다. 사용자가 양식을 빠르게 스캔할 수 있도록 간결하고 선명한 레이블(단어 또는 두 개)을 작성합니다.

레이블과 입력을 함께 가깝게 배치

눈이 시각적으로 함께 묶여 있음을 알 수 있으므로 각 레이블을 입력 필드 가까이에 두십시오.

사라지는 자리 표시자 텍스트를 레이블로 사용하지 마십시오.

인라인 레이블은 보기에 좋고 귀중한 화면 공간을 절약하지만, 이러한 이점보다 중요한 사용성 단점이 훨씬 더 큽니다. 그 중 가장 중요한 것은 컨텍스트 손실입니다. 사용자가 필드에 텍스트를 입력하기 시작하면 자리 표시자 텍스트가 사라지고 사람들이 이 정보를 기억하도록 합니다. 단순한 2필드 양식에서는 문제가 되지 않을 수 있지만 필드가 많은 양식(예: 7-10)에는 큰 문제가 될 수 있습니다. 사용자가 데이터를 입력한 후 모든 필드 레이블을 기억하는 것은 어려울 것입니다. 당연히 사용자 테스트는 양식 필드의 자리 표시자가 도움보다 유용성을 더 해치는 경우가 많다는 것을 지속적으로 보여줍니다.

자리 표시자가 사라지는 문제에 대한 간단한 해결책이 있습니다. 부동(또는 적응형) 레이블입니다. 사용자가 레이블 자리 표시자가 있는 필드를 탭하면 레이블이 사라지지 않고 필드 상단으로 이동하여 사용자가 데이터를 입력할 수 있는 공간을 만듭니다.

상단 정렬 레이블

양식의 필드 위에 필드 레이블을 배치하면 사용자가 양식을 스캔하는 방식이 향상됩니다. 이를 위해 시선 추적 기술을 사용하여 Google은 사용자가 양식을 제출하기 전에 더 적은 고정, 더 적은 고정 시간 및 더 적은 단속이 필요함을 보여주었습니다.

상단 정렬 레이블의 또 다른 중요한 이점은 레이블에 더 많은 공간을 제공한다는 것입니다. 긴 레이블과 현지화된 버전은 레이아웃에 더 쉽게 맞을 것입니다. 후자는 특히 작은 모바일 화면에 적합합니다. 양식 필드를 화면의 전체 너비로 확장하여 사용자의 전체 입력을 표시하기에 충분히 크게 만들 수 있습니다.

문장 케이스 대. 제목 케이스

단어를 대문자로 표시하는 두 가지 일반적인 방법이 있습니다.

• 제목 사례: 모든 단어를 대문자로 표시합니다. "이것은 타이틀 케이스입니다."
• 문장의 경우: 첫 단어를 대문자로 시작합니다. "이것은 문장의 경우입니다."

레이블에 대소문자를 사용하면 제목 대소문자에 비해 한 가지 장점이 있습니다. 읽기가 약간 더 쉽습니다(따라서 더 빠릅니다). 짧은 레이블의 경우 차이는 무시할 수 있지만("전체 이름"과 "전체 이름" 사이에는 큰 차이가 없음) 긴 레이블의 경우 대소문자가 더 좋습니다. 이제 제목의 경우 긴 텍스트를 읽는 것이 얼마나 어려운지 알 것입니다.

레이블에 대문자를 사용하지 마십시오.

전체 대문자 텍스트(모든 문자가 대문자로 된 텍스트를 의미함)는 실질적인 읽기(예: 두문자어 및 로고)를 포함하지 않는 컨텍스트에서는 괜찮지만 그렇지 않은 경우에는 모두 대문자를 사용하지 마십시오. Miles Tinker가 자신의 저서 가독성(Legibility of Print )에서 언급했듯이 전체 대문자 인쇄는 소문자 유형에 비해 스캔 및 읽기 속도를 크게 저하시킵니다.

형세

이제 사용자는 웹 페이지를 읽는 것이 아니라 스캔한다는 것을 알고 있습니다. 양식을 작성할 때도 마찬가지입니다. 그렇기 때문에 디자이너는 스캔하기 쉬운 양식을 디자인해야 합니다. 효율적이고 효과적인 스캔을 허용하는 것은 양식 작성 프로세스를 가능한 한 빨리 만드는 데 중요합니다.

단일 열 레이아웃 사용

CXL Institute의 연구에 따르면 단일 열 양식이 다중 열 양식보다 완료 속도가 더 빠릅니다. 이 연구에서 테스트 참가자는 다중 열 양식보다 평균 15.4초 빠르게 단일 열 양식을 완료할 수 있었습니다.

여러 열은 사용자의 수직적 추진력을 방해합니다. 여러 개의 열이 있으면 눈이 지그재그로 움직이기 시작합니다. 이것은 눈 고정 횟수를 극적으로 증가시키고 결과적으로 완료 시간을 증가시킵니다. 또한 여러 열 형식은 "어디서부터 시작해야 하나요?"와 같은 불필요한 질문을 사용자에게 제기할 수 있습니다. "오른쪽 열의 질문이 왼쪽 질문의 중요성과 동일합니까?"

1열 디자인에서 눈은 위에서 아래로 한 번에 한 줄씩 자연스러운 방향으로 움직입니다. 이것은 사용자에게 명확한 경로를 설정하는 데 도움이 됩니다. 한 열은 화면이 세로로 더 길어지고 세로 스크롤은 모바일 사용자에게 자연스러운 모션이기 때문에 모바일에 탁월합니다.

이 규칙에는 몇 가지 예외가 있습니다. 짧고 논리적으로 관련된 필드를 같은 행에 배치할 수 있습니다(예: 도시 및 지역 코드).

질문으로 흐름 만들기

질문하는 방식도 중요합니다. 질문은 응용 프로그램이나 데이터베이스의 논리가 아니라 사용자의 관점에서 논리적으로 질문해야 합니다. 사용자와 대화하는 느낌을 만드는 데 도움이 되기 때문입니다. 예를 들어, 체크아웃 양식을 디자인하고 이름, 전화번호, 신용카드와 같은 세부 정보를 묻는 경우 첫 번째 질문은 이름에 대한 것이어야 합니다. 순서를 변경하면(예: 이름 대신 전화번호로 시작) 불편합니다. 실제 대화에서 누군가의 이름을 묻기 전에 전화번호를 묻는 것은 이례적인 일입니다.

심층 질문은 끝까지 미루십시오

묻고 싶은 질문에 대한 흐름을 디자인할 때 우선 순위를 고려하세요. "어려운 것보다 쉬운 것" 규칙을 따르고 심층적이거나 개인적인 질문을 마지막에 배치하십시오. 이렇게 하면 사용자가 프로세스에 쉽게 참여할 수 있습니다. 일단 관계가 형성되면 복잡하고 방해가 되는 질문에 답할 가능성이 더 높아집니다. 이것은 과학적 근거를 가지고 있습니다. Robert Cialdini의 일관성 원칙은 누군가가 작은 행동을 취하거나 무언가를 향해 한 발짝 내디딜 때 끝내야 하는 압박감을 더 많이 느낀다고 규정합니다.

관련 필드를 함께 그룹화

게슈탈트 심리학의 원리 중 하나인 근접성의 원리는 관련 요소가 서로 가까이 있어야 한다고 말합니다. 이 원칙은 형식의 질문 순서에 적용될 수 있습니다. 관련 질문이 많을수록 서로 더 가깝습니다.

디자이너는 관련 필드를 섹션으로 그룹화할 수 있습니다. 양식에 6개 이상의 질문이 있는 경우 관련 질문을 논리적 섹션으로 그룹화하십시오. 시각적으로 구분하기 위해 섹션 사이에 충분한 양의 공백을 제공하는 것을 잊지 마십시오.

긴 형태를 더 단순하게 만들기

사용자에게 많은 질문을 하는 양식을 어떻게 디자인합니까? 물론 모든 질문을 한 화면에 담을 수도 있습니다. 그러나 이것은 완료율을 방해합니다. 사용자가 양식을 완성할 동기가 충분하지 않은 경우 양식의 복잡성이 사용자를 놀라게 할 수 있습니다. 첫인상은 중요한 역할을 합니다. 일반적으로 양식이 길거나 복잡할수록 사용자가 공백을 채우기 시작할 가능성이 줄어듭니다.

한 번에 표시되는 필드 수를 최소화합니다. 이것은 형식이 실제보다 짧다는 인식을 만듭니다.

이를 수행하는 두 가지 기술이 있습니다.

점진적 공개

점진적 공개는 사용자에게 적시에 적절한 것을 제공하는 것입니다. 목표는 적시에 작은 화면에 표시할 적절한 항목을 찾는 것입니다.

• 처음에는 사용자에게 가장 중요한 몇 가지 옵션만 표시합니다.
• 사용자가 양식과 상호 작용할 때 양식의 일부를 공개합니다.

청킹

청킹은 긴 형식을 단계로 나누는 것을 수반합니다. 양식을 몇 단계로 분할하여 완료율을 높일 수 있습니다. 청킹은 또한 사용자가 정보를 처리, 이해 및 기억하는 데 도움이 될 수 있습니다. 다단계 양식을 디자인할 때 항상 완성도 측정기를 사용하여 진행 상황을 사용자에게 알립니다.

디자이너는 진행률 추적기(위의 예에서 볼 수 있음) 또는 "Step # out of #" 표시기를 사용하여 총 단계 수를 알려주고 현재 사용자가 얼마나 멀리 있는지 표시할 수 있습니다. 후자의 접근 방식은 단계 표시가 많은 공간을 차지하지 않기 때문에 모바일 양식에 적합할 수 있습니다.

작업 버튼

버튼은 사용자가 작업을 수행하도록 지시하는 대화형 요소입니다.

액션 버튼을 설명하기

버튼의 레이블은 버튼의 기능을 설명해야 합니다. 사용자는 버튼을 보기만 해도 탭 후 어떤 일이 발생하는지 이해할 수 있어야 합니다. 대신 작업을 설명하는 레이블을 사용하여 "제출" 및 "보내기"와 같은 일반적인 레이블을 사용하지 마십시오.

지우기 또는 재설정 버튼을 사용하지 마십시오

지우기 또는 재설정 버튼을 사용하면 사용자가 양식에서 데이터를 지울 수 있습니다. 이러한 버튼은 사용자에게 거의 도움이 되지 않으며 종종 사용자에게 피해를 줍니다. 사용자가 입력한 모든 정보를 삭제할 위험이 다시 시작해야 하는 작은 이점보다 큽니다. 사용자가 양식을 작성하고 실수로 잘못된 버튼을 누르면 처음부터 다시 시작하지 않을 가능성이 큽니다.

기본 및 보조 버튼에 다른 스타일 사용

가능하면 2차 조치를 피하십시오. 그러나 양식에 2개의 클릭 유도문안(예: "할인 적용" 및 "주문 제출"이 있는 전자 상거래 양식) 버튼이 있는 경우 기본 작업과 보조 작업을 시각적으로 명확하게 구분해야 합니다. 버튼에 더 많은 시각적 가중치를 추가하여 기본 작업에 시각적으로 우선 순위를 지정합니다. 이렇게 하면 사용자가 잘못된 버튼을 누르는 것을 방지할 수 있습니다.

손가락 친화적인 터치 타겟 디자인

작은 터치 대상은 사용자가 대화형 개체와 상호 작용하는 것을 어렵게 만들기 때문에 끔찍한 사용자 경험을 만듭니다. 더 큰 입력 필드와 버튼과 같이 손가락 친화적인 터치 타겟을 디자인하는 것이 중요합니다.

아래 이미지는 평균 성인 손가락의 너비가 약 11mm임을 보여줍니다.

머티리얼 디자인 가이드라인에 따르면 터치 타겟은 최소 48 × 48 DP여야 합니다. 이 크기의 터치 대상은 화면 크기에 관계없이 약 9mm의 물리적 크기가 됩니다. 더 넓은 범위의 사용자를 수용하려면 더 큰 터치 대상을 사용하는 것이 적절할 수 있습니다.

타겟 크기가 중요할 뿐만 아니라 터치 타겟 사이의 충분한 공간도 중요합니다. 터치 대상 사이에 안전한 거리를 유지하는 주된 이유는 사용자가 잘못된 버튼을 터치하여 잘못된 작업을 호출하는 것을 방지하는 것입니다. "Agree" 및 "Disagree"와 같은 이진 선택 항목이 서로 바로 옆에 있을 때 버튼 사이의 거리는 매우 중요합니다. 머티리얼 디자인 가이드라인은 균형 잡힌 정보 밀도와 사용성을 생성할 8DP 이상의 공간으로 터치 대상을 분리할 것을 권장합니다.

탭 후 버튼 비활성화

양식 작업은 일반적으로 처리하는 데 시간이 필요합니다. 예를 들어, 제출 후 데이터 계산이 필요할 수 있습니다. 작업이 진행 중일 때 피드백을 제공할 뿐만 아니라 사용자가 실수로 버튼을 다시 누르는 것을 방지하기 위해 제출 버튼을 비활성화하는 것이 중요합니다. 이는 전자 상거래 웹사이트 및 앱에서 특히 중요합니다. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it's critical to notify users about that. It's possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. 불가피하다. It's essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it's still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you're a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it's usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it's better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today's date or a date in the future. Such a selector would force users to pick a date range that fits.

Don't Make Data Validation Rules Too Strict

While there might be cases where it's essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It's very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state's abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it's the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You've entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don't say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

오류 메시지를 인라인으로 배치하는 것이 훨씬 좋습니다. 첫째, 이 배치는 사용자의 자연스러운 위에서 아래로 읽는 흐름과 일치합니다. 둘째, 사용자 입력의 컨텍스트에서 오류가 나타납니다.

동적 유효성 검사 사용

오류 메시지를 표시하도록 선택하는 시간은 매우 중요합니다. 제출 버튼을 누른 후에만 오류 메시지가 표시되면 사용자가 당황할 수 있습니다. 사용자가 양식을 마칠 때까지 기다리지 마십시오. 데이터가 입력될 때 피드백을 제공합니다.

실시간 피드백과 함께 인라인 유효성 검사를 사용합니다. 이 유효성 검사는 입력한 정보가 양식의 요구 사항과 호환되는지 여부를 사람들에게 즉시 알려줍니다. 2009년 Luke Wroblewski는 제출 후 유효성 검사에 대해 인라인 유효성 검사를 테스트했으며 인라인 버전에 대해 다음 결과를 찾았습니다.

• 성공률 22% 증가,
• 22%의 오류 감소,
• 만족도 31% 증가,
• 완료 시간 42% 감소,
• 눈 고정 횟수 47% 감소.

그러나 인라인 유효성 검사는 신중하게 구현해야 합니다.

• 포커스에 인라인 유효성 검사를 표시하지 마십시오.
  이 경우 사용자가 필드를 탭하는 즉시 오류 메시지가 표시됩니다. 필드가 완전히 비어 있어도 오류가 나타납니다. 포커스에 오류 메시지가 표시되면 양식이 작성을 시작하기도 전에 사용자에게 소리를 지르는 것처럼 보일 수 있습니다.
• 각 문자를 입력한 후 유효성을 검사하지 마십시오.
  이 접근 방식은 불필요한 유효성 검사 시도 횟수를 증가시킬 뿐만 아니라 사용자를 짜증나게 합니다(사용자가 필드를 완료하기 전에 오류 메시지를 볼 가능성이 높기 때문). 이상적으로 인라인 유효성 검사 메시지는 사용자가 입력을 중단하거나 다음 필드로 이동한 후 약 500~1000밀리초 후에 나타나야 합니다. 이 규칙에는 몇 가지 예외가 있습니다. 사용자가 비밀번호를 생성할 때(비밀번호가 복잡성 요구 사항을 충족하는지 확인하기 위해), 사용자 이름을 생성할 때(이름을 사용할 수 있는지 확인하기 위해), 문자 제한이 있는 메시지.

접근성

모든 능력의 사용자가 디지털 제품에 액세스하고 즐길 수 있어야 합니다. 디자이너는 제품을 구축할 때 가능한 한 접근성 요구 사항을 통합하기 위해 노력해야 합니다. 다음은 양식을 보다 쉽게 ​​액세스할 수 있도록 하기 위해 수행할 수 있는 몇 가지 작업입니다.

양식에 적절한 대비가 있는지 확인

사용자는 야외에서 양식과 상호 작용할 가능성이 높습니다. 햇빛이 비치는 곳과 저조도 환경 모두에서 사용하기 쉬운지 확인하십시오. 양식에서 필드와 레이블의 명암비를 확인하십시오. W3C는 본문 텍스트에 대해 다음과 같은 명암비를 권장합니다.

• 작은 텍스트는 배경 대비 최소 4.5:1의 명암비를 가져야 합니다.
• 큰 텍스트(굵게 14포인트, 일반 18포인트 이상)는 배경 대비 명암비가 3:1 이상이어야 합니다.

색상 대비를 측정하는 것은 압도적으로 보일 수 있습니다. 다행스럽게도 일부 도구를 사용하면 프로세스가 간단해집니다. 그 중 하나가 Web AIM Color Contrast Checker로 디자이너가 대비 수준을 측정하는 데 도움이 됩니다.

상태를 전달하기 위해 색상에만 의존하지 마십시오.

색맹(또는 색각 결핍증)은 전 세계 남성 12명 중 1명(8%), 여성 200명 중 1명에게 영향을 미칩니다. 색맹에는 여러 가지 유형이 있지만 가장 흔한 두 가지는 protanomaly(적색광에 대한 감도 감소)와 deuteranomaly(녹색광에 대한 감도 감소)입니다. 유효성 검사 오류 또는 성공 메시지를 표시할 때 상태를 전달하기 위해 색상에만 의존하지 마십시오(즉, 입력 필드를 녹색 또는 빨간색으로 지정). W3C 지침에 따르면 색상은 정보를 전달하고, 행동을 나타내거나, 응답을 유도하거나, 시각적 요소를 구별하는 유일한 시각적 수단으로 사용되어서는 안 됩니다. 디자이너는 색상을 사용하여 이미 보이는 것을 강조하거나 보완해야 합니다. 사용자 인터페이스를 이해하는 데 도움이 되는 추가 시각적 신호를 제공하여 색맹 사용자를 지원합니다.

사용자가 글꼴 크기를 제어하도록 허용

가독성을 높이기 위해 사용자가 글꼴 크기를 늘릴 수 있습니다. 모바일 장치 및 브라우저에는 사용자가 시스템 전체에서 글꼴 크기를 조정할 수 있는 기능이 포함되어 있습니다. 또한 양식에 큰 글꼴 크기를 위한 충분한 공간이 할당되었는지 확인하십시오.

설계 결정 테스트

위에서 언급한 모든 사항은 업계 모범 사례로 간주될 수 있습니다. 그러나 "모범 사례"라고 하는 것이 항상 양식에 대한 최적의 솔루션이라는 의미는 아닙니다. 앱과 웹사이트는 주로 사용되는 컨텍스트에 따라 다릅니다. 따라서 디자인 결정을 테스트하는 것은 항상 중요합니다. 양식을 작성하는 과정이 원활하고 흐름이 중단되지 않으며 사용자가 도중에 직면하는 모든 문제를 해결할 수 있는지 확인하십시오. 정기적으로 사용성 테스트 세션을 수행하고 사용자 상호 작용에 대한 모든 중요한 데이터를 수집하고 이를 통해 학습합니다.

결론

사용자는 양식 작성을 주저할 수 있습니다. 그래서 디자이너로서 우리의 목표는 양식을 작성하는 과정을 최대한 쉽게 만드는 것입니다. 양식을 디자인할 때 빠르고 마찰 없는 상호 작용을 만들기 위해 노력하십시오. 오류 메시지를 올바르게 작성하는 것과 같은 사소한 변경으로 인해 양식의 유용성이 크게 향상될 수 있습니다.

이 기사는 Adobe에서 후원하는 UX 디자인 시리즈의 일부입니다. Adobe XD를 사용하면 아이디어에서 프로토타입으로 더 빠르게 이동할 수 있으므로 빠르고 유연한 UX 디자인 프로세스를 위해 제작되었습니다. 하나의 앱에서 디자인, 프로토타입 및 공유가 모두 가능합니다. Behance에서 Adobe XD로 만든 더 많은 영감을 주는 프로젝트를 확인하고 Adobe 경험 디자인 뉴스레터에 등록하여 UX/UI 디자인에 대한 최신 트렌드와 통찰력에 대한 최신 정보를 받아볼 수 있습니다.