당신은 당신이 할 수있는 모든 것을합니다 웹 사이트 만들기 방문자를 전환으로 이끌 것입니다. 분석을 연구할 때 귀하가 만든 사용자 여정이 방문자의 지원을 받고 있다는 사실을 알게 되어 매우 기쁩니다. 그러나 변환을 방해하는 것이 있습니다.
Le 연락처 양식 방문자 여정의 필수적인 부분입니다. 실제로 웹사이트에서 제공할 수 있는 거의 모든 것을 갖추고 있더라도 연락처 양식 올바르게 사용하지 않으면 경험을 망칠 수 있습니다. "깨진" 버튼, 혼란스러운 필드, 너무 많은 단계, 체계적이지 않은 인터페이스... 심지어 연락처 양식 사용자 경험을 방해할 수 있습니다.
잘못 될 수있는 많은 것들이 있습니다.
완벽한 연락 양식 작성을위한 5 규칙
2014년에 발표된 Google 시선 추적 연구에 따르면 디자인을 위한 가장 기본적인 사용 지침을 따르는 것이 형태 사용자 경험을 크게 향상시킬 것입니다. 특히 연락처 양식이 모든 규칙을 충족하는 경우 사용자의 78%가 양식을 작성하고 한 번에 제출할 수 있습니다. 그러나 연락처 양식이 이러한 규칙을 위반하는 경우 42%만이 한 번의 시도로 그렇게 할 수 있습니다.
이 규칙이 무엇인지 궁금하십니까? 그래서 계속 읽으십시오.
규칙 # 1 : 정렬에 집중
여기의 다른 규칙에서 볼 수 있듯이 사람들은 종종 형태 이는 종종 잘못된 설계 선택으로 이어집니다. 예를 들어 정렬 문제를 생각해 보십시오.
BrainTraffic 웹 사이트에서 이와 같은 양식을보고 다음과 같이 생각할 수 있습니다. 흠… 완료하기에 너무 길지 않습니까?
이 "문제"를 해결하는 방법 중 하나는 레이블을 왼쪽으로 이동하고 답 필드를 오른쪽에 배치하는 것입니다. 그러나 UX 전문가는 양식을 스캔하는 기능을 손상시키기 때문에 이것이 절대 안된다고 말할 것입니다. 필드를 가로로 나란히 배치하는 것에 대해 생각한 경우에도 마찬가지입니다.
당신이 원하는 경우 형태 연락처가 정렬 표준을 충족하는 경우 수행해야 할 작업은 다음과 같습니다.
- 모든 레이블, 양식 필드 및 기본 클릭 유도 문안 버튼을 왼쪽 정렬합니다.
- 관련 필드를 가로로 정렬하지 마십시오. 양식을 논리적으로 구성 할 수 있지만 각 질문 또는 필드는 세로로 쌓아야합니다.
- 객관식 질문이있는 필드 (6 개 미만의 옵션)는 드롭 다운 메뉴가 아닌 수직 포인트 또는 확인란 목록에 표시되어야합니다.
규칙 2 : 모든 관련 필드 포함
연락처 양식을 디자인 할 때 짧을수록 좋습니다. 항상 그런 것은 아닙니다. 가장 중요한 것은 사용자에게 필요한 모든 관련 필드를 제공한다는 것입니다.
Unbounce의 수석 전환 최적화 도구 인 Michael Aagaard는 프리젠 테이션 이 문제를 해결 한 2015 년. 그와 그의 팀은이 문의 양식을 단축하면 어떻게되는지 알고 싶어했습니다.
보시다시피, 양식 작성 프로세스를 간소화하기 위해 불필요한 필드라고 생각되는 항목을 제거했습니다. 그러나 테스트를 마친 후 더 짧은 형식으로 전환율이 14 % 감소했습니다.
규칙 # 3 : 필드 단순화
사용자가 데스크톱 또는 모바일 장치를 사용하여 연락처 양식과 상호 작용하는지 여부는 중요하지 않거나 지원 기술이 필요한 경우 양식을 갖추어야합니다. 입력 과정을 단순화합니다.
알아야 할 기술은 다음과 같습니다.
표
데스크톱 사용자 및 접근성 문제가있는 사용자의 경우 연락처 양식에 논리적 탭 순서가 활성화되어 있는지 확인하십시오.
입력 마스크
사용자가 특정 필드의 형식을 지정하는 방법을 추측하도록하는 대신 자동으로 형식을 지정하는 입력 마스크를 사용하여 추가 할 수 있습니다.
구글 자동 완성
각 필드를 코딩하는 대신 형식 준수 할 표준에 따라 자동으로 Google 주소 자동 완성 플러그인을 사용하여 자동 완성을 활성화합니다. 이렇게하면 맞춤법 오류와 주소를 잘못 입력하지 않아도 될뿐만 아니라 방문자가 대부분의 정보를 입력하지 않아도됩니다.
규칙 # 4 : 모두 종료
이 규칙이 미니멀리즘의 기본 원칙에 위배된다는 것을 알고 있지만 불필요하게 방문자를 실망시키지 않으려면 세심한주의를 기울여야합니다.
설명해 드리겠습니다. 매우 간단 해 보이는 문의 양식이 있습니다. 사용자는 레이블이 제안하는 내용을 기반으로 작성하고 제출 버튼을 클릭합니다. 그런 다음 그들은 다음과 같은 끔찍한 빨간색 메시지를받습니다.“당신은 그것을 제대로하지 않았습니다! 돌아가서 양식을 수정하고 다시 보내십시오! "
당신은 아마 사용자로서 그것을 만났을 것이며, 특히 오류가 발생할 때 입력 한 정보 중 일부가 삭제되는 경우 얼마나 실망 스러울 수 있는지 알고있을 것입니다. 따라서 사용자가 수정해야 할 사항과 수정 방법을 추측하게하는 대신이 시점에 도달하지 마십시오. 도중에 모든 철자 :
- 사용자가 양식을 작성하는 위치를 정확하게 알 수 있도록 현장 (특히 모바일)에 중점을 둡니다.
- 입력 마스크를 사용하여 필드를 자동으로 형식화하지 않는 경우 모든 형식화 요구 사항을 기록하십시오.
- 필드가 "선택 사항"인 경우 명시 적으로 표시합니다 (빨간색 별표가 아닌 단어 사용).
- 사용자가 입력 할 때 암호 필드를 표시하거나 숨기는 옵션을 제공합니다.
- 사용자가 필드에 참여하자마자 오류 메시지를 표시합니다. 끝까지 기다리지 마십시오.
규칙 # 5 : 조언을 숨기지 마십시오
연락처 양식의 게시판 텍스트는 다음과 같습니다.
Target이 필드에 레이블을 배치하는 방법을 확인하십시오. 일부 연락처 양식에서 이러한 레이블 / 표시는 사용자가 필드를 클릭하면 사라집니다. 대상은이를 약간 다르게 처리하고 레이블을 필드 상자의 맨 위로 이동합니다 ( "이메일 주소"참조).
이것이 어떻게 처리되는지에 관계없이 그룹과 같은 유용성 전문가 닐슨 노먼, 다음과 같은 이유로 이것이 잘못된 설계 관행이라고 말할 것입니다.
- 이것은 다음 필드에서 멀티 태스킹, 산만하거나 너무 빠른 속도의 사용자에게 문제가됩니다. 단서가 사라지면 사용자는 필요한 것을 재발견하기 위해 필드를 떠나야합니다.
- 팁이 사라지면 사용자가 양식을 다시 작성하여 작업을 확인하거나 오류를 수정하지 않고 아래 내용을 확인할 수 있습니다.
- 자리 표시 자 팁에 사용되는 밝은 회색 텍스트는 읽기에 적합하지 않습니다.
- 힌트 텍스트가있는 필드는 이미 데이터를 채운 필드와 혼동 될 수 있으므로 사용자가이를 무시하고 양식을 제출하면 오류 메시지가 표시됩니다.
- 일부 화면 읽기 도구는 힌트 텍스트를 읽을 수 없습니다.
NNG에 따르면 사용자는 단서 텍스트가 포함 된 필드보다 빈 필드가 더 매력적이라고 생각합니다. 양식이 이러한 레이블 또는 설명자를 필드 위에 더 오래 배치하는 것처럼 보이더라도 유용성이 향상됩니다.
이것으로 더 나은 문의 양식을 작성하는 데 도움이되기를 바랍니다.
