전환율이 높은 방문 페이지 양식을 위한 17가지 핵심 요소 [검증됨]

방문 페이지 양식이 수익에 얼마나 영향을 미칠 수 있습니까?

Expedia를 살펴보겠습니다. 2010년에 Expedia는 "회사"라는 제목의 선택적 양식 필드에 연간 1,200 만 달러의 비용이 든다는 사실을 발견했습니다.

뭐?!

예.

"지금 예약" 버튼을 누른 방문자는 선택 사항인 "회사" 필드에 은행 이름을 입력한 다음 집 주소 대신 은행 주소를 추가하여 수백 건의 거래에 실패했습니다.

추가 양식 필드를 제거한 후 판매는 밤새 급증했습니다.

그렇군요.

방문 페이지 형식의 경우 작은 사고가 항상 대규모 전환 조회에 기여합니다.

이것이 랜딩 페이지 양식이 모든 마케팅에서 가장 많이 연구되는 요소 중 하나인 이유 중 하나입니다.

좋은 소식: 수년간의 방문 페이지 디자인 및 전환 최적화 끝에 완벽한 방문 페이지 형식을 17개의 데이터 기반 요소로 압축했습니다. 이 기사에서는 각각을 최적화하는 방법(예제 포함)을 분석할 것입니다.

그것들을 바로 잡으면 전환 골드가 생깁니다.

그것들을 잘못 이해하면 Expedia와 같은 출혈 전환을 발견할 수 있습니다.

먼저 모범 사례와 예를 살펴보기 전에 모든 방문 페이지에 양식이 필요한지 여부에 대한 혼란을 정리하겠습니다.

짧은 대답: 예 및 아니오.

설명하자면…

랜딩 페이지에는 리드 캡처 페이지와 클릭연결 페이지의 두 가지 유형이 있습니다.

리드 캡처 페이지(일명 리드 생성 페이지)에는 방문 페이지에 직접 양식이 포함됩니다. 결국 양식이 없으면 영업팀이 후속 조치를 취할 수 있도록 리드 정보를 어떻게 캡처할 수 있습니까?

예를 들어, Blueshift의 마케팅 자동화 랜딩 페이지에는 연락처 정보를 요청하는 리드 양식이 있습니다. 잠재 고객이 연락처 정보를 제출하면 Blueshift의 영업 팀이 후속 조치를 취하여 데모 일정을 잡을 것입니다. 단순한.

반면에 클릭연결 페이지는 방문 페이지에 양식을 포함 하지 않습니다 . 대신 클릭 유도문안(CTA) 버튼을 클릭하면 잠재 고객이 즉시 전환 목표를 완료할 수 있는 전환 페이지가 열립니다(즉, 리드 정보가 필요 없음).

예를 들어 Norton은 바이러스 백신 소프트웨어를 판매하기 전에 잠재 고객을 워밍업하기 위해 클릭연결 랜딩 페이지를 사용합니다. 잠재 고객은 웹 사이트에서 직접 구매할 수 있으므로(영업 팀이 필요 없음) 리드 양식이 필요하지 않습니다.

따라서 랜딩 페이지의 양식과 관련하여 기술적으로 리드 캡처 페이지에만 양식이 포함됩니다.

그러나 클릭연결 페이지의 방문 페이지에 양식이 포함되어 있지 않더라도 계정 생성 페이지, 등록 페이지 또는 체크아웃 페이지와 같이 클릭연결 페이지가 포함된 페이지로 연결될 가능성이 높습니다.

예를 들어 Norton의 클릭연결 페이지에도 결국에는 다음과 같은 지불 양식이 포함됩니다.

요약: 모든 방문 페이지에 양식이 포함되어 있는 것은 아니지만 어느 시점에서 모든 전환 경로는 양식을 통과합니다. 당신은 그들을 피할 수 없습니다. 그리고 최소한 모든 웹사이트에는 문의 양식이 필요합니다. 그러니 잘 들어!

더 이상 고민하지 않고 전환율이 높은 방문 페이지 양식 디자인의 17가지 요소(특정 순서 없음)를 살펴보겠습니다.

1. 양식 레이아웃
2. 이동 경로 기술(다단계)
3. 진행 표시기
4. 필드 수
5. 필드 레이블
6. 자리 표시자 텍스트
7. 클릭 트리거
8. 축소 복사
9. 클릭 유도문안(CTA)
10. 양식 팝업 대 포함
11. 자동 완성
12. 자동 포맷
13. 사회적 증거
14. 필수 대 선택
15. 모바일 친화적
16. 조건부 논리
17. 라디오 버튼과 드롭다운

양식의 경우 단일 열, 이중 열 또는 하이브리드의 세 가지 레이아웃 옵션이 있습니다.

단일 열 양식은 위에서 아래로 직선으로 구성된 양식 필드가 있는 선형 양식입니다. 예를 들어 Hellosign의 이 리드 양식은 단일 열 레이아웃을 특징으로 합니다.

반면에 이중 열 양식은 위에서 아래로 행으로 구성된 양식 필드의 두 열을 특징으로 합니다. 예를 들어 Hubspot의 이 리드 양식은 이중 열 레이아웃을 특징으로 합니다.

그리고 마지막으로, 하이브리드 형태는 단일 열과 이중 열이 모두 있는 형태입니다. 예를 들어, 이 오스카 양식은 하이브리드 레이아웃을 특징으로 합니다.

수년 동안 단일 열 양식은 높은 전환율을 위한 최상의 양식 레이아웃으로 생각되었습니다.

예를 들어, CXL의 Peep은 과거에 단일 열 형식이 이중 열 형식보다 성능이 더 우수하다고 언급했습니다. Ben Labay(Speero의 UX 디자이너이자 마케팅 이사)는 선형 형태를 더 빠르고 더 좋게 선언한 연구를 발표했습니다.

그러나 모든 사람이 동의하는 것은 아닙니다.

예를 들어 Hubspot은 단일 열 형식을 테스트하고 이중 열 형식이 단일 열 형식보다 57% 더 나은 성능을 보인다는 것을 발견했습니다.

왜요? 더 많은 양식 필드.

Hubspot의 양식에는 13개의 양식 필드가 있습니다. 단일 열 레이아웃은 위압적으로 보였습니다. 더 짧은 이중 열 형식이 더 높게 변환된 이유일 수 있습니다.

요약: 양식 레이아웃과 관련하여 옵션을 선택하기 전에 양식 필드의 수를 고려하십시오.

양식 필드가 8개 이하인 경우 단일 열 양식이 가장 적합할 수 있습니다. 더 짧은 단일 열 형식이 위에서 아래로 수직 모멘텀을 방해하지 않기 때문에 작성이 더 쉽고 빠르다는 것을 증명하는 수많은 증거가 존재합니다.

Hubspot과 같은 10개 이상의 양식 필드가 있는 경우 이중 열 양식이 더 나은 성능을 보일 것입니다. 이 경우 이중 열 형식은 양식 길이를 더 짧고 덜 부담스럽게 만듭니다.

두 세계의 장점을 최대한 활용하려면 하이브리드 형식으로 실험하십시오. 몇 개의 이중 열 행을 사용하여 양식을 줄이고 몇 개의 단일 열 행을 사용하여 추진력을 유지하십시오.

그리고 정말로 양식 전환을 늘리고 싶다면 단일 열 양식을 여러 단계로 나누는 것을 고려하십시오. 이것은 우리를 다음 요점으로 이끕니다...

다단계 양식(Breadcrumb Technique이라고도 함)은 긴 양식을 여러 단계로 나눕니다. 각 단계에는 3-4개 이하의 양식 필드(바람직하게는 단일 열)가 있습니다.

하지만 그게 다가 아닙니다.

다단계 양식은 행동 심리학을 사용하여 먼저 쉬운 질문을 하고 위협적인 질문은 마지막으로 남겨 둠으로써 잠재 고객을 한 단계에서 다음 단계로 미세 전환합니다.

뭐?

행동 심리학은 사람들이 시작한 일을 끝내는 것을 좋아한다고 말합니다. Breadcrumb Technique의 마법은 소프트볼 질문을 먼저 함으로써 시작하게 하는 것입니다.

예를 들어, 우리 고유의 리드 양식은 4단계로 나누어진 다단계 양식을 사용합니다. 그러나 이메일 주소와 전화번호를 먼저 묻는 대신(매우 위협적) 마지막에 요청합니다. 실제로 처음 세 단계는 위협적이지 않은 질문을 던집니다.

결과? 더 많은 전환.

데이터를 보자...

우리는 우리의 클라이언트를 위한 양식을 두 단계로 변환했습니다(그리고 마지막으로 이름, 전화번호, 이메일을 요청했습니다). 그렇게 함으로써 우리는 다음을 달성했습니다.

• CPA $800 이상에서 $35로 감소
• 전환량 6에서 135/월로 증가
• 전환율이 1%에서 거의 20%로 증가

양식은 다음과 같습니다.

결과는 다음과 같습니다.

다른 고객에게도 동일한 작업을 수행하여 전환수가 74% 증가하고 CPA가 51% 감소했습니다.

그러나 우리는 다단계 양식을 사용하는 유일한 사람이 아닙니다. 최고의 리드 생성 및 SaaS 랜딩 페이지는 모두 다단계 양식을 사용합니다.

예를 들어 Lytx 차량 추적은 방문 페이지에서 다단계 양식을 사용합니다.

그리고 ADP는 방문 페이지에서 다단계 양식을 사용합니다.

요약 : 다단계 양식이 단일 단계 양식보다 높게 변환 되지 않은 유일한 사례는 가이드, 백서 또는 전자책과 같은 낮은 가치의 낮은 요청 제안이었습니다. 다른 모든 표준 리드 생성 랜딩 페이지(예: 데모 또는 무료 상담 요청)의 경우 다단계 양식이 단일 단계 양식보다 더 많이 변환됩니다.

다단계 양식을 선택하는 경우 진행률 표시기를 잊지 마십시오(특히 더 긴 양식의 경우).

이름에서 알 수 있듯이 진행률 표시기(또는 진행률 표시줄)는 시각적 마커를 사용하여 방문자에게 양식의 현재 위치와 완료까지 얼마나 남았는지 나타냅니다.

예를 들어, ADP는 양식의 각 단계에 번호를 매기고 현재 단계를 파란색으로 강조 표시하여 진행 상황을 나타냅니다.

두 가지 다른 유형의 진행률 표시줄에는 완료율과 레이블이 지정된 단계(숫자 제외)가 있습니다.

완료율

남은 단계(숫자 없음)

요점: 진행 표시기에 관해서는 아낌없이 사용하십시오. 연구에 따르면 완료까지의 명확한 경로를 시각화하면 양식 전환이 증가하고 장바구니 이탈을 줄일 수 있습니다. 마지막으로, 단계 사이를 쉽게 앞뒤로 토글하는 것을 잊지 마십시오.

백만 달러짜리 질문: 방문 페이지 양식에 몇 개의 양식 필드를 포함해야 하나요?

Hubspot에 따르면 일반적인 리드 생성 양식은 5가지 양식 필드로 구성됩니다.

그리고 Hubspot에 따르면 형식이 길수록 전환율이 낮아 집니다 .

논리적인 것 같죠?

그렇게 빠르지 않습니다.

예, 양식 필드가 짧을수록 일반적으로 전환율이 높아지지만 항상 그런 것은 아닙니다.

예를 들어 Michael Aagaard(이전 Unbounce)의 유명한 실험에서 그는 3개의 양식 필드(9에서 6으로)를 제거하면 실제로 전환이 14% 감소 한다는 것을 발견했습니다.

무슨 일이에요? Michael은 자신이 제거한 3개의 필드가 실제로 가장 많이 참여하는 3개의 필드 잠재 고객이라고 결론지었습니다. 그래서 그는 그것들을 다시 추가하고 마찰을 제한하기 위해 사본을 업데이트했으며 원본보다 19% 증가한 전환율을 경험했습니다.

또 다른 예에서 CXL은 이메일 만 요청하면 이름, 주 및 운전 경험도 요청했을 때보다 전환율이 13.56% 낮았다 는 사실을 발견했습니다.

리드 생성과 관련하여 양식 필드를 제거하기만 하면 잠재 고객에게 남은 것은 무엇입니까?

이름, 전화번호, 이메일과 같은 위협적인 질문 외에는 아무 것도 없습니다. 이 경우 두려움만으로도 회심을 잃을 수 있습니다.

또는 잠재 고객이 질문에 적절하게 대답할 것 같은 느낌을 주기에 질문이 충분하지 않습니다.

또한, 더 짧은 양식은 양식 필드를 줄임으로써 전환을 증가시킬 수 있지만 동시에 리드 품질을 저하시킬 수 있습니다. 아니 부에노.

요약: 모두가 불필요한 양식 필드(즉, 답변이 필요하지 않은 질문)를 제거해야 한다는 데 동의합니다. 더 많은 필드를 추가해야 하는지 아니면 필드를 제거해야 하는지 여부는 컨텍스트에 따라 다릅니다.

• 동기: 구매가 임박한 리드는 구매 동기가 높기 때문에 더 긴 양식을 작성하는 경향이 있습니다(즉, 아무 것도 방해가 되지 않음). 예를 들어, 모기지 대출 견적을 원하면 20개의 양식 필드를 작성하여 받을 것입니다. 무료 전자책에는 그다지 많지 않습니다.
• 전환 목표: 이메일 구독 또는 주문형 웨비나 등록에는 리드 생성 양식보다 훨씬 적은 수의 필드가 필요합니다. 두 가지 다른 목표, 두 가지 다른 양식 크기. 간단한 이메일 수신 동의를 여러 단계로 수행할 필요가 없습니다.
• 리드 품질: 리드 볼륨보다 리드 품질이 더 중요한 경우 더 많은 양식 필드를 추가하고 더 많은 정보를 수집합니다. 그러나 리드 품질이 리드 볼륨보다 더 중요 하지 않은 경우(즉, 사용자 지정 광고 잠재고객을 구축하기 위해 자사 데이터를 수집하는 경우) 더 적은 수의 양식 필드가 승리합니다.
• 구조: 데모 일정을 잡거나 영업 담당자를 만나는 것과 같이 심각한 요청을 하는 경우 다단계 양식은 치트 코드와 같습니다. 질문을 더 작은 단계로 나누기만 하면 더 많은 질문을 하지 않아도 됩니다.

마지막으로 Unbounce의 설립자이자 CEO인 Oli Gardner에게 연락하여 양식 길이에 대한 피드백을 받았습니다. 그가 말한 내용은 다음과 같습니다.

“저는 대부분의 사람들이 가지고 있는 것과 같은 사고방식으로 시작했습니다. 양식 필드가 적을수록 더 잘 수행됩니다.

전환의 관점에서 이것은 여전히 ​​​​사실입니다. 그러나 필드를 몇 개 더 추가하면 결과에 어떤 영향을 미칠 수 있는지 알면 놀랄 것입니다.

때로는 양식 길이가 큰 차이를 만들지 않으며, 양보다 질에 관심이 있는 경우 추가 마찰이 좋은 일이 될 수 있습니다.

그러나 해당 필드를 신중하게 선택하지 않으면 마찰로 인해 잘못된 데이터가 생성됩니다.

예를 들어, 새로운 칩 및 핀 지불 기술에 대한 보고서를 제공하는 양식을 보았습니다. 이 양식에는 내가 고용주인지 구직자인지 묻는 클릭 유도문안 옆에 라디오 버튼 필드가 포함되어 있으며 둘 다 제안과 관련이 없으며 필수 필드였습니다!

불필요한 질문은 일부 사람들을 도망가게 만들고 나머지는 단순히 무작위로 클릭하여 질문을 우회하여 데이터를 오염시키고 가치가 없게 만듭니다."

필드 레이블은 각 각 양식 필드의 이름을 나타내는 양식 필드 위, 측면 또는 내부의 현미경을 나타냅니다.

예를 들어, 아래 양식에서 두 필드 레이블은 "이메일" 및 "비밀번호"(양식 필드 상단에 배치됨)를 읽습니다.

레이블 배치와 관련하여 세 가지 주요 옵션이 있습니다.

• 상단(왼쪽 정렬)
• 인라인(왼쪽 정렬)
• 필드 왼쪽(오른쪽 정렬)

각각을 검토해 보겠습니다.

상단(왼쪽 정렬)

레이블은 양식 필드 상자 위에 배치되고 왼쪽으로 플러시됩니다.

예를 들어, 우리가 방금 보여준 SEMRush 계정 생성 양식(위)은 왼쪽에 정렬된 필드 상단에 양식 레이블을 배치합니다.

전환과 관련하여 연구에 따르면 양식 필드 상단 의 왼쪽 정렬 레이블이 가장 높은 값을 전환하는 것으로 나타났습니다. 왜요? 가장 쉽고 빠르게 작성하기 때문입니다.

예를 들어 시선 추적 소프트웨어를 사용하면 양식 필드 상단의 왼쪽 정렬 레이블이 방문자의 시선이 양식 필드와 제한된 인지 부하가 ​​있는 레이블에 집중하도록 하는 것을 볼 수 있습니다.

인라인 또는 "내야"(왼쪽 정렬)

레이블은 양식 필드 상자 안에 배치되고 왼쪽으로 플러시됩니다.

예를 들어, 아래의 Bob HR 양식은 필드 상자 안에 필드 레이블을 배치합니다.

인라인 필드 레이블은 이와 같은 짧은 형식에 적합하며 특히 이름이나 전화번호와 같은 기본 정보만 묻는 경우에 적합합니다.

그러나 더 복잡한 양식 필드가 있는 더 긴 양식의 경우 인라인 양식은 특히 모바일에서 사용자 경험을 악몽으로 만듭니다.

왜요?

상자를 클릭하면 레이블이 사라집니다. 레이블이 말한 내용을 잊어버린 경우 다시 찾을 수 있는 유일한 방법은 전체 항목을 삭제하고 다시 시작하는 것입니다. 그렇군요.

필드 왼쪽(오른쪽 정렬)

레이블은 필드 상자의 왼쪽 (외부)에 배치됩니다.

양식 필드 위에 레이블을 배치하는 것만큼 효율적이지는 않지만(방문객은 눈을 왼쪽에서 오른쪽으로, 위아래로 움직여야 하기 때문에) 양식 필드 왼쪽에 레이블을 배치하는 것도 제한된 인지 부하를 필요로 했습니다.

요약: 최상의 결과를 얻으려면 양식 필드(왼쪽 정렬) 위에 필드 레이블을 배치하십시오. 그리고 두 가지 장점을 모두 활용하려면 누군가가 입력을 시작하면 다음과 같이 양식 필드의 맨 위로 이동하는 인라인 양식 레이블을 사용해 보세요.

어떤 옵션을 선택하든 다음 사항에 유의하십시오.

• 일반 텍스트 레이블 사용: 굵은 레이블은 매력적으로 들릴 수 있지만 읽기는 더 어렵습니다.
• 공백: 양식 필드와 레이블 사이에 적절한 공백이 있는지 확인하십시오.
• 텍스트 정렬: 인지 부하를 줄이려면 필드 레이블을 필드 왼쪽에 배치할 때 텍스트를 오른쪽 정렬하고 필드 레이블을 상단 또는 인라인에 배치할 때 텍스트를 왼쪽 정렬합니다.
• 근접성: 무엇을 하든지 레이블을 양식 필드 가까이에 두십시오.

자리 표시자 텍스트는 누군가가 입력을 시작하면 사라지는 양식 필드(일반적으로 밝은 회색) 내에 배치된 힌트, 설명 또는 예입니다. 자리 표시자 텍스트는 인라인 레이블과 같으며 레이블 이름 대신 실제 제출의 예입니다.

예를 들어 Oscar는 각 리드 캡처 양식 필드 내에서 자리 표시자 텍스트를 사용합니다.

여러 연구에 따르면 인라인 자리 표시자 텍스트를 사용하면 사용자 경험이 저하되고 양식 변환이 감소한다는 사실이 확인되었습니다.

왜요? 정말 불필요한 부담입니다.

• 인라인 레이블과 마찬가지로 자리 표시자 텍스트는 입력을 시작하면 사라지므로 방문자가 자리 표시자 힌트 텍스트를 잊어버린 경우 해당 항목을 삭제해야 합니다.
• 오류 메시지가 나타나면 방문자가 문제를 해결하는 방법을 모르는 것입니다.
• 인라인 자리 표시자는 빈 필드를 덜 눈에 띄게 만듭니다. 시선 추적 소프트웨어는 사람들의 눈이 채워진 상자가 아니라 빈 상자에 끌리는 것으로 나타났습니다.
• 색상 대비가 좋지 않아 특히 시각 장애인이 읽기 어렵습니다.

대신 무엇을 해야 할까요?

각 양식에 대한 지침을 제공해야 하는 경우(완벽할 수 있음) 지침을 필드 레이블 아래 에 배치하되 양식 필드 위에 배치하십시오. 예를 들어:

클릭 트리거는 의심을 없애고 방문자를 전환으로 유도하기 위해 설계된 양식 CTA 또는 제출 버튼 아래 또는 주위에 배치되는 매력적인 문구입니다.

예를 들어, 이 Lusha 랜딩 페이지는 방문자에게 왜 "무료 시작" 버튼을 눌러야 하는지 상기시키기 위해 "신용카드 필요 없음"과 함께 별 등급 및 총 리뷰 수를 사용합니다.

또는 ContentVerve의 이 이전 예에서는 옵트인 양식에 몇 가지 혜택 관련 글머리 기호를 추가하여 이메일 뉴스레터 구독이 87% 증가했습니다.

요점: 클릭 트리거를 사용하여 양식의 반대편에 있는 내용에 대한 잠재 고객의 이의를 예상하고 처리하십시오.

마이크로카피는 방문자에게 지시하거나 정보를 제공하는 데 사용되는 양식 내의 작은 사본을 나타내는 광범위한 용어입니다.

엄밀히 말하면 클릭 트리거, 필드 레이블 및 자리 표시자는 모두 양식 마이크로카피의 예이지만 이 경우 방문자에게 특정 정보가 필요한 이유 또는 정보를 어떻게 얻을 것인지 알려줌으로써 마찰을 줄이는 데 도움이 되는 마이크로카피에 대해 구체적으로 이야기하고 있습니다. 사용해.

마이크로카피가 존재하는 경우는 작지만 양식 변환에 큰 영향을 미칠 수 있습니다.

예를 들어, 아래는 방문자에게 전자 상거래 구매를 완료하기 위해 전화번호가 필요한 이유를 알려주는 양식 마이크로카피의 예입니다(많은 사람들이 이 정보가 불필요하고 포기할 수 있기 때문에).

또 다른 일반적인 유형의 현미경은 아래와 같은 오류 메시지로 구성됩니다.

현미경은 변환합니까? 물론이지.

예를 들어 사람들이 장바구니를 포기하는 가장 큰 이유는 비용이기 때문에 Yoast는 결제 양식에 "추가 비용이 들지 않습니다"라는 문구를 추가하고 전환율을 11.30% 증가시켰습니다.

또는 사람들이 잘못된 주소를 입력했기 때문에 거래가 완료되지 않는다는 것을 발견한 전 Hubspot의 UX 디자이너의 이 예. 그는 한 줄의 마이크로카피를 추가하여 양식 변환을 크게 늘리고 고객 지원 비용을 줄였습니다.

요점: 방문자는 정보가 필요한 이유, 정보 사용 방법 또는 올바른 정보 입력의 중요성을 말하지 않는 한 항상 알지 못합니다. 어리둥절하거나 불안한 전망에 대비하기 위해 양식 인터페이스의 일부로 마이크로카피를 도입합니다.

행동에 동기를 부여하는 강력하고 유혹적인 CTA 없이는 완전한 형식이 없습니다.

클릭 유도문안 버튼을 구성할 때 다른 모든 것보다 중요한 두 가지는 복사와 대조입니다.

첫째, 보내기, 제출, 시작, 지불 또는 활성화와 같은 일반적인 CTA는 우리가 "노력 버튼"이라고 부르는 것입니다. 그들은 방문자가 앞에 힘든 무언가가 있는 것처럼 느끼게 합니다. 무슨 수를 써서라도 피하십시오.

대신 수신, 가져오기, 즐기기, 보기 또는 발견과 같은 가치 기반 버튼을 선택하세요. 이 모든 기능을 통해 방문자는 양식 반대편에서 (노력이 아니라) 보상이 기다리는 것처럼 느끼게 됩니다.

예를 들어 Jarvis는 다음과 같이 클릭하지 않을 수 없는 명확하고 설득력 있는 행동 지향적인 CTA를 제공합니다.

더 관심이 있으세요? 가치 기반 버튼에 대한 61개의 추가 아이디어가 있습니다.

두 번째로, 양식 변환의 증가는 버튼의 색상과는 관련이 없고 버튼과 배경의 색상 대비 와 더 관련이 있습니다.

예를 들어 고객인 Darwin Homes의 사례 연구에서 CTA 버튼 색상을 A/B 테스트한 결과 CPA가 45% 감소하고 전환율이 22% 증가했습니다.

요점: 양식 버튼 CTA 카피에 명확한 이점을 추가하고(일반적인 CTA를 완전히 피하고) 버튼을 배경과 대조하여 주의를 끌도록 하세요.

다단계 양식에 대해 이야기하고 양식을 시작하기 쉽게 만들어 방문자를 한 단계에서 다음 단계로 미세 전환하는 방법을 기억하십니까?

양식 버튼에도 동일하게 적용됩니다.

방문 페이지에 양식을 삽입하는 대신 CTA 버튼을 그 자리에 배치한 다음 팝업 라이트박스에서 양식을 열거나 클릭하면 전환 페이지로 트래픽을 보내는 실험을 하십시오.

Aweber 연구에서 그들은 방문 페이지에 포함하는 대신 팝업 버튼 뒤에 양식을 배치하면 전환이 무려 1,375% 증가한다는 사실을 발견했습니다.

Hubspot 연구에서 그들은 양식을 전용 옵트인 페이지로 연결하는 CTA 버튼으로 교체하면 전환율이 0.4%(2.4%에서 2.8%로) 증가한다는 사실을 발견했습니다. 별 것 아닌 것처럼 들릴 수도 있지만 수천 번의 방문을 통해 수백 건의 전환이 발생했습니다.

예를 들어 Intercom과 AllHands(아래) 모두 팝업 버튼 뒤에 방문 페이지 양식을 배치합니다.

요점 : 항상 그렇듯이 모든 것을 테스트하십시오. 그러나 버튼 뒤에 위협적인 형태를 숨기면 방문자가 첫 번째 단계를 더 쉽게 시작할 수 있습니다. 그리고 일단 첫걸음을 떼면 다음 걸음을 내딛는 경향이 더 높아집니다.

자동 완성 양식은 방문자가 직접 입력하도록 하는 대신 방문자의 브라우저 데이터를 사용하여 이름, 전화번호, 신용 카드 정보 및 주소와 같은 필드를 자동 완성(또는 자동 완성)하는 양식을 나타냅니다.

Google에 따르면 자동 완성을 사용하면 양식을 최대 30% 더 빠르게 작성하여 전환율을 높일 수 있습니다.

요약: 특히 모바일 장치에서 웹 양식 작성을 좋아하는 사람은 아무도 없습니다. 자동 완성을 사용하여 마찰을 줄이고 전환율을 높이십시오.

양식을 작성했는데 지역 코드를 괄호로 묶는 것을 잊었거나 신용 카드 번호 사이에 공백을 너무 많이 추가한 후 다시 시작해야 한다는 사실을 알게 된 적이 있습니까?

같은.

양식을 더 쉽게 작성할 수 있도록(그리고 인지 부하를 줄이고 형식 오류를 제한하려면) 잠재 고객이 대시, 괄호, 쉼표, 슬래시를 추가해야 하는지 여부를 추측하게 하지 마십시오. 방문자가 정보를 입력하는 방식에 관계없이 형식은 자체적으로 수정됩니다.

예를 들어, 이 양식 필드는 숫자를 더 추가할 때 자동으로 달러 값의 형식을 지정합니다.

더 나은 방법은 "텍스트 마스킹"이라는 기능을 사용하여 값을 올바르게 자동 형식화할 뿐만 아니라 얼마나 더 입력해야 하는지 알려주는 인라인 자리 표시자를 제공한다는 것입니다.

요약: 날짜, 전화번호, 신용카드 번호 또는 특정 형식이 필요할 수 있는 기타 숫자 값(예: 가격, 소득)에 대해 자동 형식을 사용하십시오. 형식 오류를 줄이고 변환을 증가시킬 뿐만 아니라 양식 제출 데이터가 모두 동일하게 표시되도록 합니다.

사회적 증거는 제3자 리뷰, 평가, 별점 또는 다른 사람들이 귀하의 제품이나 서비스로 성공을 거두었다는 신뢰할 수 있는 배지를 말합니다.

사회적 증거가 왜 중요한가? 고객의 66%는 사회적 증거가 있으면 구매 가능성이 높아진다고 말합니다.

사회적 증거가 왜 그렇게 잘 작동합니까? 사람들이 선택에 대한 확신이나 확신이 없을 때 이미 같은 선택을 한 사람들에게서 영감을 찾기 때문입니다. 그리고 종종 그들은 다른 사람들이 선택한 것을 선택합니다.

실제 방문 페이지에서 사회적 증거만 필요하다고 생각했다면 다시 생각해 보십시오.

사람들이 올바른 결정을 내리고 있음을 상기시키기 위해 양식 근처 또는 주변에 별점, 평가 또는 클라이언트 로고와 같은 사회적 증거를 배치하십시오.

특히 클릭연결 페이지(예: 체크아웃 페이지 또는 계정 생성 페이지와 같은 전환 페이지로 클릭연결되는 방문 페이지)의 경우 양식 옆에 사회적 증거도 배치하십시오.

예를 들어 Jarvis는 계정 생성 양식 옆에 고객 수와 고객 로고를 배치합니다.

InvisionApp은 또한 양식 옆에 사회적 증거를 제공합니다. 이번에는 고객(Uber) 중 한 사람의 평가 형식으로 제공됩니다.

테이크 아웃: 방문자가 계속해야 하는 이유를 상기시키기 위해 양식 주변이나 근처에 사회적 증거를 후추로 표시하십시오.

양식 필드가 필요하지 않은 경우 처음에는 실제로 필요한지 여부를 자문해 보십시오. 그렇지 않은 경우 불필요한 필드를 모두 제거하십시오.

그러나 선택적 필드가 필요하다고 생각하고 필수 필드와 병치해야 하는 경우 다음 모범 사례를 따르십시오.

• 필수 필드에 빨간색 별표 레이블 지정: 빨간색 별표 여야 합니까? 아니요. 그러나 빨간색 별표는 필수 필드의 표준이며 사용자는 이를 기대합니다.
• 레이블 왼쪽에 별표 배치: 레이블 앞에 별표를 배치하면 방문자가 양식 왼쪽에서 위에서 아래로 필수 필드를 쉽게 스캔할 수 있습니다.
• "필수" 레이블 고려: 별표 외에 "필수" 레이블을 추가하려면 인라인이 아닌 필드 외부(즉, 양식 필드 상단)에 텍스트를 배치하는 것이 가장 좋습니다.
• 선택적 필드에도 레이블 지정: 선택적 필드 에 레이블을 지정하면 방문자가 선택 사항을 추론할 필요가 없으므로 인지 부하를 줄이는 데도 도움이 됩니다. 대신 양식에서 명시적으로 알려줍니다. 필수는 아니지만 좋은 보너스입니다.
• 필수 필드에 레이블 지정하지 않기: 특정 경우에 필수 필드에 레이블을 지정하는 것이 불필요하다고 생각할 수 있습니다. 하지마 항상 필수 필드에 레이블을 지정하십시오.

요점 : 필수 필드 레이블에는 섹시함이 없습니다. 바로 이것이 바로 이 레이블에 귀여우면 안 되는 이유입니다. Jakob의 법칙에 따르면 귀하의 웹사이트 방문자는 대부분의 시간을 다른 웹사이트에서 보내기 때문에 귀하의 웹사이트가 다른 모든 사람과 동일한 기본 사용자 경험 원칙을 따르기를 기대합니다. 어떤 편차와 당신은 그들의 멘탈 모델에 렌치를 던집니다.

이것은 말할 필요도 없지만 현재 인터넷 트래픽의 50% 이상이 모바일 장치에서 발생하기 때문에 양식이 더 작은 화면(모바일 반응형)에 최적화되어 있지 않으면 많은 전환이 발생할 수 있습니다.

모바일에 최적화된 양식은 어떤 모습인가요? 네 번 탭하고 스와이프하여 호텔을 예약하는 것은 어떻습니까?

모바일용 양식 최적화와 관련하여 이 문서에서 방금 설명한 것과 동일한 규칙이 적용되지만 그 영향이 더 확대될 뿐입니다.

예를 들어, 사람들은 데스크탑에 잘못 배치된 필드 레이블에 대해 인내심이 거의 없지만 더 큰 화면에서 파악하고 탐색하기 쉽기 때문에 휴식을 취할 것입니다.

그러나 모바일 장치의 경우 불편한 엄지손가락과 작은 형태가 이미 불쾌한 경험을 만들기 때문에 사용성 마찰에 대한 내성이 훨씬 적습니다.

모바일용 양식을 디자인할 때 다음과 함께 이 문서에서 이미 설명한 것과 동일한 모범 사례를 적용하십시오.

• 더 큰 텍스트
• 더 큰 CTA 버튼
• 필드와 버튼 주변에 더 많은 공백(터치하기 쉽도록)
• 드롭다운이 없고 대신 라디오 버튼을 선택하세요(드롭다운은 모바일에서 작성하는 데 시간이 가장 오래 걸림).
• 팝업을 통해 포함된 양식 또는 별도의 양식 페이지 선택

요점: 단일 열 레이아웃, 다중 단계, 진행률 표시줄, 자동 채우기, 필드 레이블... 모두 모바일에도 적용되며 더 작은 화면에서만 가능합니다.

조건부 논리를 사용하면 방문자의 답변에 따라 양식 경험을 동적으로 사용자 지정할 수 있습니다.

모든 사람이 같은 질문으로 양식을 시작하지만 어떻게 대답하느냐에 따라 매우 다른 두 지점에서 끝날 수 있습니다.

조건부 논리는 양식을 단축하고 질문당 선택 항목의 수를 줄이며(즉, 불필요한 단계 제거) 보다 개인화된 양식 경험을 만들어 전환을 증가시킵니다.

요약: 기본 리드 생성 양식은 개인화된 정보가 충분하지 않기 때문에 조건부 논리의 이점을 얻지 못합니다. 그러나 더 긴 양식, 지원 양식 또는 리드 자격을 갖춘 양식의 경우 조건부 논리는 양식의 악몽을 즐거운 경험으로 바꿀 수 있습니다.

방문자가 양식을 작성하는 데 필요한 작업이 적을수록 양식을 작성할 가능성이 높아집니다. 기간.

CXL에 따르면 라디오 버튼이나 드롭다운이 작성하기 더 쉬운지 여부를 알아보기 위한 테스트를 실행한 후 응답자가 드롭다운보다 2.5초 빠르게 라디오 버튼을 채웠다는 것을 발견했습니다.

라디오 버튼과 마찬가지로 체크박스도 작성하기 쉽습니다.

차이점이 뭐야? 라디오 버튼은 여러 옵션이 상호 배타적일 때(즉, 하나의 선택만 선택할 수 있는 경우) 체크박스는 둘 이상의 옵션을 선택할 수 있는 경우에 사용됩니다.

우리는 다단계 양식에서도 드롭다운을 사용한 다음 확인란으로 교체했습니다. 이제 (특히 모바일에서) 양식을 작성하는 것이 더 쉽고 빠를 뿐만 아니라 더 많은 전환을 얻을 수 있습니다.

요약 : 대부분의 경우 드롭다운보다 라디오 버튼이나 확인란을 선택합니다. 그러나 상식을 실천하십시오. 예를 들어 주 또는 국가를 선택하는 것과 같이 수십 가지 옵션이 있는 경우 50개 이상의 라디오 버튼을 포함하는 것은 이치에 맞지 않습니다. 대신 드롭다운을 선택하세요.

전환율이 높은 방문 페이지 양식의 앞서 언급한 요소를 뒷받침하는 많은 증거에도 불구하고 여전히 A/B 테스트를 직접 해야 합니다.

삶을 더 쉽게 만들기 위해 분석을 형성하는 데도 도움이 됩니다.

맞습니다. 사용자가 다단계 양식을 통과할 때 사용자 행동을 측정할 수 있는 실제 분석입니다.

우리가 가장 좋아하는 양식 분석 도구:

• 마우스플로우
• 주코
• 핫자르
• MonsterInsights(WP 플러그인)

이 문서에서 설명한 모범 사례를 사용하여 방문 페이지 양식 템플릿을 작성하십시오. 그런 다음 양식 분석에 의존하여 누출을 노출하십시오. 그런 다음 다른 패치를 테스트합니다. 짜잔.

그리고 당신이 무엇을 하든, 당신이 정말로 필요하지 않는 한 이러한 선택적 필드를 양식에 두지 마십시오(Expedia를 보면).