전환율 향상을 위한 온라인 양식 작성을 위한 주요 팁

온라인 양식은 다양한 용도로 사용할 수 있습니다. 뉴스레터 가입, 웹사이트 계정 등록, 구매 또는 문의 등, 이제 우리는 필수 정보를 채우는 데 익숙해졌습니다.

그러나 온라인 양식에 대한 나쁜 경험은 사용자가 작업을 완전히 포기하고 다른 웹 사이트로 이동하도록 유도할 수 있습니다.

모바일 사이트의 사용이 계속 증가하고 Google의 최근 모바일 친화적 순위 알고리즘 업데이트로 인해 모바일 장치를 위한 사용자 친화적 양식을 만드는 것이 그 어느 때보다 중요해졌습니다. 나는 우리 모두가 그 기기에서 사용할 수 없는 양식을 휴대전화로 작성하는 데 극도로 좌절감을 느끼는 것과 관련이 있을 것이라고 확신합니다!

다음은 전환 프로세스의 마지막 장애물에서 잠재 고객을 잃지 않도록 데스크톱과 모바일 모두에서 사용자 친화적인 온라인 양식을 만들기 위한 주요 팁입니다.

1. 레이아웃

당연해 보일 수 있지만 온라인 양식에 깨끗하고 단순한 레이아웃을 사용하면 고객 여정이 최대한 원활해지고 더 많은 사람들이 모든 정보를 작성하도록 권장할 수 있습니다. House of Fraser의 이 예와 같은 수직 레이아웃은 사용자 친화적입니다.

그러나 Travel Republic의 이 예에서와 같이 가로 레이아웃도 작동할 수 있습니다.

핵심은 간단하게 유지하고 가능한 한 적은 수의 필드를 사용하여 필요한 정보를 캡처하는 것입니다.

모바일 사용자의 경우 이것은 특히 중요합니다. 완료하는 데 시간이 너무 오래 걸리면 사용자가 양식을 포기할 가능성이 훨씬 높아집니다.

스타벅스는 모바일 사이트에서 계정을 생성하기 위한 깨끗하고 단순한 수직 형태의 좋은 예가 있습니다.

온라인 양식에서 일반적인 탐색 옵션을 제거하면 깨끗하고 단순하게 유지하는 데 도움이 됩니다. 예를 들어 Fortnum과 Mason은 페이지 상단에서 메뉴를 제거하고 체크아웃 옵션 페이지에서 'Secure Checkout' 배너로 대체했습니다.

이렇게 하면 양식이 깨끗하게 유지될 뿐만 아니라 사용자가 변환 프로세스를 시작한 후 웹사이트의 다른 부분으로 다시 이동하는 것을 방지할 수 있습니다. Fortnum과 Mason이 제공한 것처럼 전자 상거래 웹사이트에도 게스트 체크아웃 옵션을 사용하는 것이 좋습니다. 사용자는 빠른 구매를 할 때 계정을 만들기 위해 모든 개인 정보를 제공하는 것을 꺼릴 수 있습니다.

2. 필드 레이블 및 입력 방법

필수 필드에 명확하게 레이블을 지정하는 것이 중요합니다. 사용자가 양식을 포기하게 만들 수 있는 입력 오류를 피하기 위해 명확하고 인식할 수 있는 레이블을 사용합니다. 필요한 경우 혼동을 피하기 위해 필드에 대한 설명을 포함합니다. OK Magazine 온라인 등록 양식의 "화면 이름" 필드에 이에 대한 예가 있습니다.

각 필드에 가장 적합한 입력 방법을 생각해 보십시오. 다양한 유형이 있습니다.

• 입력 필드
• 체크박스
• 버튼
• 캘린더
• 드롭다운 메뉴

대부분의 경우 어떤 방법이 가장 좋은지 분명할 것입니다. 그러나 모바일 양식의 경우 일부 방법은 피하는 것이 가장 좋습니다. 예를 들어, WWF의 모바일 사이트에는 다음과 같은 양식이 있으므로 사용자에게 다음과 같은 몇 가지 문제가 있습니다.

Yes/No 버튼은 손가락 끝으로 쉽게 선택하기에는 너무 작습니다. 뿐만 아니라 파란색 섹션의 '이것은 선물입니다' 확인란이 거의 완전히 가려져 있습니다. 이 양식은 모바일 장치에서 작성하려고 하면 답답할 것입니다.

반면에 Expedia는 캘린더 입력 방법이 모바일 장치에 충분히 큰지 확인합니다.

3. 프로세스 계획

온라인 양식이 너무 길어지면 여러 페이지로 분할하여 사용자를 위해 분할하는 것을 두려워하지 마십시오. 이 작업을 수행할 때 핵심은 처음부터 사용자에 대한 프로세스를 매핑하여 사용자의 기대치를 관리하는 것입니다.

Confused.com은 이에 대한 좋은 예를 보여줍니다. 페이지 상단에 여러 단계가 명확하게 번호가 매겨져 있습니다.

Times 웹사이트는 양식의 여러 단계를 약간 다른 형식으로 제공합니다. 다음은 온라인 계정에 가입하기 위한 양식의 첫 번째 페이지입니다.

아래로 스크롤하면 다음 단계를 볼 수 있습니다.

양식의 길이가 처음부터 사용자에게 명확해지면 완료할 시간이 충분한지 또는 나중에 다시 돌아와야 하는지에 대해 정보에 입각한 결정을 내릴 수 있습니다. 이렇게 하면 일반적으로 더 긴 양식과 관련된 문제를 피할 수 있습니다. 이 문제는 사용자가 양식을 작성하기 시작하여 길이에 좌절하고 작업을 포기하는 것뿐입니다.

4. 도움이 되십시오

이전의 OK Magazine 예와 유사하게 Barclaycard에는 온라인 뱅킹 로그인 양식에 필요한 정보가 정확히 무엇인지 설명하는 더 자세한 예가 있습니다.

Barclaycard는 필요한 정보를 설명할 뿐만 아니라 사용자가 입력할 수 있는 정보 유형에 대한 옵션을 제공합니다. 예를 들어 사용자 이름이나 ID 번호가 기억나지 않지만 카드가 있고 이 번호를 대신 입력할 수 있는 경우에 유용합니다.

또한 두 필드 모두에 대해 '잊어버린' 옵션을 제공합니다. 이것은 현재 온라인 로그인 양식 전체에서 표준으로 예상되지만 이러한 옵션을 사용할 수 없는 경우 매우 실망스러울 수 있으므로 주목할 가치가 있습니다.

사용자에게 도움이 되는 또 다른 방법은 정보로 무엇을 하고 있는지 솔직하게 말하는 것입니다. Virgin Active는 온라인 문의 양식에서 다음을 수행합니다.

Virgin의 "귀하의 번호만 사용하여 회신하겠다는 약속"은 귀하의 이메일 주소로 무엇을 하려는 것인지는 다루지 않지만 사용자에게 약간의 확신을 줍니다.

사용자가 '계속' 또는 '제출' 버튼을 클릭하기 전에 오류 없이 각 필드를 올바르게 완료했음을 알 수 있도록 하세요. 각 상자가 채워진 후에는 기호가 표시됩니다. 녹색 눈금과 적십자를 사용하여 온라인 등록 양식에 이에 대한 예가 있습니다.

오류가 있는 경우 관련 필드 옆에 명확하게 표시하고 필요한 경우 필요한 설명과 함께 표시합니다. 이렇게 하면 사용자는 첫 번째 클릭 시 양식이 수락되는지 확인할 수 있습니다.

5. 항상 테스트하십시오!

온라인 양식을 만들 때는 항상 시작하기 전에 가능한 한 많은 장치에서 직접 테스트하십시오. 모든 필드가 제대로 작동하는지 확인하기 위해 가능한 다양한 방법으로 양식을 작성하십시오.

온라인 양식은 웹사이트를 위한 귀중한 도구입니다. 데이터 캡처, 판매 처리, 문의 접수 등 변환을 완료하려면 양식이 필요합니다.

이 시점에서 방문자가 구매/등록/등록 등을 하도록 장려하는 데 많은 노력을 기울였습니다. 온라인 양식과 같은 간단한 것이 가장 중요한 전환을 방해하지 않도록 하십시오!