UX In Contact Forms: 리드를 전환으로 바꾸는 필수 요소

당신은 양식을 작성하는 것을 좋아합니까? 나는 아니라고 생각했다. 우리가 서비스에서 원하는 것이 아닙니다. 사용자가 원하는 것은 티켓 구매, 호텔 방 예약, 구매 등입니다. 양식을 채우는 것은 그들이 처리해야 할 필요악입니다. 이것은 당신을 설명합니까? 그렇다면 실제로 양식 제출에 대한 사람의 태도에 영향을 미치는 것은 무엇입니까?

• 시간이 많이 걸릴 수 있습니다.
• 복잡한 양식은 종종 이해하기 어렵습니다(또는 그냥 채우고 싶지 않은 경우).
• 이 양식은 신용 카드 세부 정보, 휴대폰 번호, 집 주소 등 공유하고 싶지 않은 개인 정보를 요청할 수 있습니다.

양식 필드는 뉴스레터 구독이든 데이터 수집을 위한 단계별 양식이든 상관없이 실제로 사용자-서비스 상호 작용을 위한 가장 중요한 도구입니다.

이 글에서는 우리 회사에서 디자인 연수생들이 가장 많이 하는 질문에 대해 알아보겠습니다. 다음은 웹 사이트 양식을 사용자 친화적으로 만드는 방법에 대한 FAQ 및 답변과 낮은 사용자 상호 작용을 방지하기 위한 팁입니다.

양식을 두 열에 배치해도 됩니까?

시선 추적 연구에 따르면 단일 열 형식이 여러 열 형식보다 더 좋습니다. 왜 그래? 웹사이트를 아래로 스크롤하는 방식은 양식을 채우는 방식과 유사합니다. 위에서 아래로 이동하면서 콘텐츠에 집중합니다. 평행 기둥이 있는 양식은 사용자를 쉽게 잘못 인도하고 주의를 분산시킬 수 있습니다. 사용자를 흐름에 유지하고 세로 방향을 방해하지 않으려면 단일 열에서 필드를 다른 필드 아래에 배치합니다. 물론 모든 규칙에는 예외가 있습니다. 아래와 같이 짧거나 논리적으로 연속된 필드(휴대폰번호, 시, 도, 지역번호)를 한 줄로 배치할 수 있습니다.

양식이 상당히 복잡한 구조를 가지고 있는 경우(예: 온라인 상점의 체크아웃 단계 또는 자금 대출 플랫폼의 등록 단계), 시각적으로 의미 그룹으로 나눌 수 있으며 공간이나 제목을 추가할 수 있습니다. 이것은 사용자에게 압도되지 않고 양식을 통해 진행되는 느낌을 줄 것입니다.

라벨은 어디에 부착해야 합니까?

레이블은 사용자에게 주어진 양식 필드에 어떤 정보가 속하는지 알려주며 일반적으로 양식 필드 외부에 위치합니다. 아주 최근에는 레이블 배치를 위한 두 가지 변형이 있었습니다. 필드 위와 왼쪽 정렬입니다. 얼마 전 대안이 나타났습니다. 디자이너는 양식에 애니메이션을 적용하고 자리 표시자에 레이블을 숨기기 시작했습니다. 레이블을 표시하는 가장 좋은 방법이 무엇인지에 대해 많은 논란이 있었지만 아직 명확한 답은 없습니다. 한 가지는 분명합니다. 레이블 배치는 상황에 따라 다릅니다. 각 옵션을 잘 살펴보겠습니다.

필드 위에 레이블 배치

이것은 가장 일반적인 레이블 배치이며 Google의 UX 연구에 의해 검증된 데는 그럴만한 이유가 있습니다. 반응형 마크업에 필수적인 스마트폰 크기에 더 잘 적응합니다.

레이블 왼쪽 맞춤

더 큰 데이터 입력 필드를 표시해야 하는 경우 이것이 최선의 선택일 수 있습니다. 왼쪽 맞춤 레이블은 더 많은 관심을 받고 다른 필드와 혼합되지 않습니다. 또한 연락처 양식은 수직으로 공간을 덜 차지합니다. 그러나 이러한 접근 방식은 데스크톱 보기에서만 잘 작동합니다. 모바일의 경우 크기가 문제입니다(왼쪽에 배치된 레이블과 필드 모두에 비해 화면이 너무 좁음). 이는 양식을 제출하기 전에 전체 입력 데이터를 볼 수 없거나 입력 오류를 발견할 수 없는 사용자에게 문제를 일으킬 수 있습니다. 잘못된 양식이 제출되는 것을 방지하려면 웹 사이트를 스마트폰 친화적으로 만들기 위해 추가 프로토타입을 만들어야 합니다.

필드 내부에 레이블 배치(필드 내 상단 정렬 레이블)

필드 내부에 배치된 대화형 레이블은 채우기 전에 스캔 가능성으로 인해 UX 디자이너에게 더 인기를 얻고 있습니다. 애니메이션은 다를 수 있지만 프로세스는 동일합니다. 레이블 자리 표시자가 있는 필드를 클릭한 후 레이블이 사라지지 않습니다. , 그러나 필드의 맨 위로 이동하여 사용자가 데이터를 입력할 수 있는 공간을 만듭니다.

이 접근 방식의 장점은 분명합니다. 공간을 절약하고 사용자가 애니메이션을 이해할 수 있습니다. 그러나 형식의 애니메이션이 항상 최상의 솔루션은 아닙니다. 양식의 컨텍스트에 따라 다릅니다. 매우 적은 수의 필드(로그인 또는 뉴스레터 상자)가 있는 양식에서 작업하는 경우 사용자가 기억해야 하는 정보가 많지 않기 때문에 상단 정렬 레이블이 필요하지 않습니다. 여러 섹션이 있는 복잡한 양식에서 더 잘 작동합니다. 이 방법의 장점에도 불구하고 드롭다운 선택이 어떻게 보이고 애니메이션에 적합할지 생각해 보십시오.

그럼에도 불구하고 대화형 레이블 자리 표시자는 정적 레이블 자리보다 1마일 정도 차이가 납니다. 필드를 클릭하면 레이블이 위로 이동하여 계속 표시되고 고정된 레이블은 사라집니다.

레이블 대신 자리 표시자 텍스트를 사용할 수 있습니까?

힌트를 제공하는 방법에는 여러 가지가 있습니다. 그 중 하나는 양식 필드에서 명령어의 일반적인 구현입니다. 불행히도 사용자 테스트는 양식 필드의 자리 표시자가 도움이 되기보다 유용성을 더 많이 손상시키는 경우가 많다는 것을 지속적으로 보여줍니다. 특히 양식이 12개 이상의 필드로 구성된 경우 양식을 작성하는 과정을 복잡하게 만들 수 있습니다. 사라지는 자리 표시자 텍스트는 사용자의 단기 기억에 부담을 줍니다. 사람들이 필드에 속한 정보를 기억하고 오류를 확인하고 수정하는 것을 어렵게 만듭니다. 또한 시각 및 인지 장애가 있는 사용자에게 추가적인 부담을 줍니다.

앞에서 보았듯이 사용자가 필드를 클릭하여 채울 때 자리 표시자 텍스트를 보이지 않게 유지하는 것이 어렵습니다. 레이블이 없으면 사용자는 양식을 제출하기 전에 작업을 확인할 수 없습니다. 현재 필드에 입력해야 하는 데이터와 이전 필드에 오류가 없는지 여부를 쉽게 잊어버릴 수 있습니다. 항상 잘못된 정보의 위험이 큽니다. 사용자는 입력이 설명을 충족하는지 확인하기 위해 각 필드의 텍스트를 하나씩 삭제하여 자리 표시자 텍스트를 표시해야 합니다. 실제로 많은 사람들은 오류 가능성조차 깨닫지 못하고 재확인하려고 노력하지 않습니다.

또한 이러한 접근 방식은 Tab 키를 눌러 필드 사이를 이동하는 사용자에게 편안하지 않을 것입니다. 사용자는 다음 필드로 전환하기 전에 다음 필드의 데이터를 구문 분석하는 데 익숙하지 않기 때문입니다. 커서가 양식 필드에 있을 때 사라지는 자리 표시자 텍스트는 키보드로 탐색하는 사용자를 짜증나게 합니다.

단점에도 불구하고 레이블을 자리 표시자로 사용하는 것이 매우 적절한 경우가 있습니다. 예를 들어 뉴스레터 구독의 경우 "이메일" 필드 하나만 채울 수 있습니다.

양식의 인지 부하를 줄이는 방법?

시계 간격

레이블과 해당 필드는 사용자에게 혼동을 주지 않고 어떤 레이블이 어떤 필드에 속하는지 이해할 수 있도록 시각적으로 그룹화되어야 합니다. 또한 레이블이 두 필드 사이에 동일한 거리에 배치되는 느슨한 패딩을 피하십시오.

자동 초점 첫 번째 입력 필드

자동 초점은 사용자를 양식의 시작점으로 안내합니다. 강조 테두리 색상, 배경 색상 또는 둘 다를 사용하여 첫 번째 필드를 강조하는 것이 좋습니다. 사용자를 호출하여 작성하면 등록 또는 구매가 빨라집니다.

절대 대문자를 사용하지 마십시오

대문자로 작성된 레이블, 특히 3~4개의 필드가 포함된 형식입니다. 모두 대문자로 된 글자는 읽기 어렵습니다. 또한, 그들은 외치는 모습을 보여줍니다.

버튼은 양식의 UX의 일부로 간주됩니까?

버튼은 사용자가 조치를 취하도록 지시하기 위한 것입니다. 그렇기 때문에 버튼 디자인은 항상 인식과 명확성에 중점을 두어야 합니다. 웹사이트나 앱을 바쁜 사용자가 시작한 대화의 일부로 생각하십시오. 버튼은 이 대화에서 중요한 역할을 합니다.

버튼은 취해야 할 조치를 설명해야 합니다.

좋은 대화 상자는 단순히 사용자에게 수행할 작업을 묻는 것이 아닙니다. 또한 각 옵션을 가능한 한 명확하게 만드는 것입니다. 그렇기 때문에 각 옵션에 대해 고유한 레이블을 갖는 것이 중요합니다. 이 레이블은 "적시" 도움말 역할을 하여 사용자가 올바른 작업을 선택할 때 더 많은 확신을 가질 수 있도록 합니다.

일반 레이블(예: "확인")을 사용하는 대신 버튼의 기능을 설명하기 위해 버튼의 이름을 지정합니다. BettingExpert는 간단한 동사를 행동 유도 문구로 변경하여 31.54% 더 많은 가입을 받았습니다. 가능하면 "예" 또는 "확인" 대신 동사를 사용하세요. 버튼이 설명 텍스트나 제목과 맥락에 맞지 않게 이해되기 때문입니다. CTA는 사용자의 의도를 반영해야 합니다. 예를 들어 등록인 경우 분명히 "등록" 버튼을 호출합니다.

기본 작업과 보조 작업 분리

양식과 관련된 기본 작업은 더 강력한 시각적 가중치를 전달해야 합니다. 보조 조치는 오류의 위험을 최소화하고 사람들을 성공적인 결과로 안내하기 위해 가장 약한 시각적 가중치를 가져야 합니다. 기본 작업 버튼은 강력하게 표시해야 하며 보조 작업 버튼을 누르기에 충분합니다.

기본 및 보조 버튼을 올바르게 사용하십시오. 기본 및 보조 버튼이라는 두 개의 버튼이 있는 경우 시각적으로 구분하여 오류를 줄이십시오. 그것이 더 중요하다는 점을 감안할 때 기본 버튼이 더 눈에 띄게 보일 것입니다.

강조 버튼

모든 양식 필드가 완료될 때까지 버튼을 활성화하지 마십시오. 이것은 사용자가 전송하기 전에 데이터를 시각적으로 확인할 수 있도록 하는 훌륭한 솔루션이 될 수 있습니다.

양식 작성 과정을 쉽게 할 수 있습니까?

자동 완성 추가

사용자 입력을 자동화하면 입력해야 하는 필드를 줄여 실수를 방지할 수 있습니다. 또한 Google의 연구에 따르면 자동 채우기를 사용하면 양식을 30% 더 빠르게 작성할 수 있습니다. 사용자가 이미 서비스에 등록되어 있는 경우 결제 단계에서 해당 필드의 계정 데이터를 자동으로 채웁니다. 또한 지역 코드 또는 지리적 위치 데이터를 기반으로 도시 및 지역 텍스트 필드를 자동으로 채울 수 있다는 점을 고려하십시오. 사용자가 제어할 수 있도록 이러한 필드를 편집 가능한 상태로 두는 것을 잊지 마십시오.

마스크 입력을 잊지 마세요

필드의 서식을 자동으로 지정하는 플러그인입니다. 이러한 솔루션은 날짜, 시간, 휴대폰 번호 등에 잘 맞습니다. 이 플러그인을 사용하면 양식을 훨씬 쉽게 작성할 수 있습니다. 사용자는 모든 것이 명확하기 때문에 더 이상 질문하지 않습니다.

창의적이 되십시오

필드 길이를 답에 대한 힌트로 사용하십시오. 이는 휴대폰 번호 필드, 집 주소 및 지역 코드와 같이 문자 수가 제한된 필드에 적합합니다.

두세 가지 옵션으로 드롭다운 선택을 피하십시오

드롭다운 대신 라디오 버튼을 사용하여 메시지를 빠르게 전달하고 사용자의 속도를 늦추지 마십시오. 추가 클릭 없이 모든 것이 명확해야 합니다.

양식 확인

양식 유효성 검사가 중요합니다. 오류가 발견된 필드를 구별하고 필드가 검증되지 않은 이유를 설명하십시오.

또한 데이터 및 형식에 대한 모든 요구 사항을 설명합니다. 사용자 암호에 6개의 기호가 포함되어야 하는 경우 이를 언급하십시오. 사용자가 추측하게 하지 마십시오. 프로세스를 편리하고 이해하기 쉽게 만드십시오.

암호 필드에서 일반적인 실수를 방지하기 위해 편의를 추가

이것은 비밀번호 미리보기 또는 사용자가 전송하기 전에 데이터를 확인할 수 있는 또 다른 기회일 수 있습니다. 또한 서비스에 암호에 대한 몇 가지 특별한 요구 사항이 있는 경우 필드를 채우기 전에 사용자에게 알립니다.

그건 그렇고, 암호 필드를 채울 때 꽤 자주 사용자는 알려진 문제에 직면하게 됩니다(예: caps lock이 켜져 있음). 버려진 양식과 웹사이트와의 부정적인 연관성을 방지하기 위해 사용자에게 Caps Lock 버튼을 눌렀음을 알리는 것이 좋습니다.

사용자가 소셜 미디어를 통해 승인하도록 허용

소셜 로그인은 정말 강력한 도구가 될 수 있습니다. 사용자의 시간을 많이 절약해 줍니다. 소셜 미디어를 사용하여 빠른 등록을 제공하는 경우 사람들에게 소셜 미디어 데이터의 보안을 확인하고 필요한 정보가 무엇인지 정확히 설명하는 것을 잊지 마십시오. 또한 허가 없이 데이터를 사용하지 않을 것임을 사용자에게 알립니다. 보안을 강화하기 위해 자물쇠 아이콘을 추가할 수 있습니다. 사용자 편에 서서 보안을 유지하십시오.

사용자의 위치가 양식의 UX에 영향을 줍니까?

예, 지역적 차이를 기억하십시오. 서비스가 둘 이상의 지역 시장(예: 미국, 유럽 및 아시아)을 대상으로 설계된 경우 이들 간의 다양한 차이점에 민감합니다. 필드, 힌트, 입력 등의 이름이 지역에 따라 달라지는 것은 놀라운 일이 아닙니다.

주의해야 할 사항은 다음과 같습니다.

• 모든 국가에는 고유한 숫자 형식이 있으므로 입력 마스크도 달라야 합니다.
• 미국은 우편번호라고 하고 유럽은 우편번호입니다.
• "state" 필드는 미국에서만 필요합니다.

결론

보시다시피, 좋은 가입 양식을 디자인하는 것은 까다롭습니다. UX 디자인이 중요합니다. UX를 ​​개선하기 위해 디자이너는 사용자의 입장이 되어야 합니다. 사용자가 실망하거나 양식 작동 방식을 파악하는 데 귀중한 시간을 낭비하는 위험을 감수하지 마십시오. 빈 양식 필드 외부에 레이블을 표시하여 처음부터 양식을 명확하게 만드십시오. 양식은 많은 전환 목표의 중요한 부분이므로 사용자가 빠르고 정확하게 목표를 달성할 수 있도록 하세요.