모바일 장치 용 양식 최적화 방법 - 웹 사이트에서 인형

양식은 웹 사이트에서 사용자의 정보를 수집하는 데 사용됩니다. 사이트는이 정보를 사용하여 거래 및 등록을 완료하거나 보험 청구를 온라인으로 제출하는 등의 다른 작업을 완료합니다.

휴대 기기 용 양식 디자인에 접근 할 때 실제 모바일 경험을 염두에 두는 것이 중요합니다. 양식의로드가 느려지거나 복잡해지면 방문자가 중간에 양식을 포기하거나 시작하기 전에 양식을 포기하게됩니다.

모바일 친화적 인 양식을 디자인 할 때 다음 모범 사례를 염두에 두십시오.

• 양식을 짧고 멋지게 유지하십시오. 필수 입력란 수를 최소화하여 양식을 쉽게 작성하십시오. 이름과 성의 두 필드 대신 "이름"에 대해 하나의 필드를 갖는 것은 양식을 한 필드를 더 짧게 만드는 쉬운 방법의 좋은 예입니다.

  너무 많이 요구하면 전혀 끝나지 않을 수도 있습니다.

• 짧을 수없는 경우 여러 페이지 양식을 만듭니다. 긴 양식이 필요한 경우 여러 페이지로 나누고 각 페이지의 스크롤없이 볼 수있는 부분 (스크롤없이 볼 수있는 부분은 화면을 스크롤해야 함)을 표시하고 방문자가 지나치게 스크롤하지 않아도되도록 다음 버튼 지우기를 포함하십시오. 진행률 표시 줄은 사용자가 여러 페이지로 구성된 모바일 양식을 사용하도록 도울 수 있습니다.

• 전송 버튼과 양식 필드를 손가락 크기로 만듭니다. 모바일 사용자는 손가락 끝으로 양식을 작성하므로 입력란 상호 작용을 쉽게 할 수 있도록 입력란 및 버튼이 충분히 커야합니다. 모든 모바일 장치에서 가장 잘 작동하는 표준 크기는 없지만 높이가 44 픽셀, 높이가 44 픽셀 인 단추 및 양식 필드를 만드는 것은 일반적으로 안전한 경험 법칙입니다.

• 드롭 다운 메뉴, 라디오 버튼 및 자동 선택 답변을 사용하여 타이핑을 최소화하십시오. 필요한 타이핑 양을 제한하기 위해 할 수있는 모든 일은 프로세스 속도를 높이고 고객 만족도를 높이는 데 도움이됩니다. 예를 들어 양식에서 주를 묻는 경우 사용자가 드롭 다운 메뉴에서 주를 선택하여 입력 할 필요가 없도록합니다.

• 당신이 요구하는 것을 분명히하십시오. 각 입력란 위에 사용자가 양식 필드에 입력 할 내용을 정확하게 지정하십시오. 예를 들어, 생일을 요청하는 경우 양식에 2 자리 또는 4 자리 숫자로 입력 한 출생 연도가 필요한지 여부를 명확히하십시오. 프로그레시브의 예를 참조하십시오.

  

  사용자에게 생년월일 정보를 입력하는 방법을 보여줍니다.

  툴팁 ( 툴팁 라고도 함)을 탭하면 더 많은 정보를 제공하는 버튼을 포함하여 추가 설명이 필요한 정보를 요청하는 경우 사용자 경험을 지원할 수 있습니다.다음은 툴팁을 사용하여 CCV의 의미를 설명하는 양식입니다.

  

  툴팁 버튼은 양식 필드 요구 사항을 설명합니다.

• 필요한 필드를 분명히 지정하십시오. 양식에 둘 이상의 입력란이있는 경우 사용자가 필수 입력란과 입력란을 정확히 알 수 있어야합니다. 필수 양식 필드 옆에 별표 (*)를 두는 것이 일반적입니다. 양식 필드가 모두 필요한 경우 모든 필드 옆에 별표를 붙이십시오. 방문객들이 모두 필요하다는 것을 이해한다고 가정하지 마십시오.

• Google 또는 Amazon과 같은 제 3 자 제공 업체를 통한 로그인을 허용하십시오. com. 때로는 등록 양식이 처음 사용자의 진입 장벽이 될 수 있습니다. 고객이 이미 연결되어있는 타사 제공 업체를 사용하여 로그인 할 수 있도록 허용하면 프로세스 속도가 빨라지고 등록 장벽이 제거됩니다.

  처음 사용자가 Google 계정 정보를 사용하여 로그인 할 수있게 해주는 제 3 자 통합의 예를 확인하십시오. 등록 정보를 양식에 입력하는 것보다 사용자가 훨씬 쉽습니다.

  

  HubSpot Sidekick은 선택적 제 3 자 인증을 가지고 있기 때문에, 처음 모바일 사용자는 양식을 건너 뛰고 Google 계정 정보로 등록 할 수 있습니다.

  타사 로그인은 구매 양식을 통해 고객을 유치 할 수있는 좋은 방법이기도합니다. 아마존과 같이 사용자가 이미 신용 카드 정보를 저장 한 서비스를 사용하여 로그인하고 결제 할 수 있도록 허용합니다. com을 사용하면 고객이 다단계 신용 카드 승인 양식을 건너 뛰게 할 수 있습니다.

  

  제 3 자 통합의 예.

• 양식에 초점을 맞추고 페이지의 다른 콘텐츠를 최소화하십시오. 방문자가 양식이있는 웹 페이지에 착륙 한 경우 방문자는 전환 페이지에 있으며 전환 기세를 유지하기 위해 페이지 내용이 모든 것을 수행하기를 원합니다. 방문자가 양식과 상호 작용하고 가능한 빨리 제출 버튼을 누르기를 원합니다.

  양식 상단 또는 하단에 많은 콘텐츠를 추가하면 양식 제출 프로세스가 지연되거나 완전히 벗어날 수있는 전환 방해가 될 수 있습니다. 산만 함을 최소화하려면 사용자가 양식을 작성하는 데 도움이되는 설명적인 내용 만 포함하십시오. 설명이 아닌 내용을 포함하려면 브루스 클레이 (BruceClay)의 예와 같이 양식을 간결하게 유지하고 양식과 직접 관련성을 유지하십시오. com.

  

  양식을 전환점에 올리면 전환율이 높아집니다.

• 양식 라인이 올바르게 완료되었는지 시각적으로 확인합니다. 모바일 사용자는 처음 양식을 작성하는 것을 좋아하지 않으며, 양식에 오류가 있기 때문에 다시 돌아가고 다시 채울 필요가 없습니다. 시각적 신호를 사용하여 양식의 각 행을 올바르게 완료했음을 알리거나 잘못 입력하면 시간을 절약하고 좌절을 제한 할 수 있습니다. 필드 옆에 녹색 체크 표시가 있으면 올바른 방법으로 필드가 완료되었음을 명확히 나타내며 잘못된 것이 있으면 빨간색 X가 제대로 작동하는 것을 나타내는 좋은 방법입니다.행에 문제가있는 경우 사용자가 오류를 수정할 수있는 방법을 명확하게 설명하십시오.

  시각적 및 언어 적 신호를 사용하여 양식의 각 행을 올바르게 완성했는지 여부를 알 수 있습니다.