양식이 있는 페이지에서 시도해야 하는 A/B 테스트

게시 됨: 2022-06-02

많은 웹사이트의 가장 중요한 목표 중 하나는 더 많은 리드 또는 구독자를 확보하는 것입니다. 이를 위해 방문자가 제품에 대한 추가 정보를 요청하거나 뉴스레터를 구독하기 위해 연락할 수 있는 양식을 표시하는 페이지가 하나 이상 있을 것입니다.

전환의 관점에서 양식이 있는 페이지의 디자인과 콘텐츠는 중요할 수 있습니다. 이러한 이유로 오늘 저는 전환을 최적화하기 위해 시도할 수 있는 A/B 테스트 유형의 몇 가지 예를 공유하고자 합니다. (방문자 연락 또는 구독). 다음 예제에서는 페이지의 양식이 WordPress와 완전히 통합된 양식 생성 플러그인인 Nelio Forms로 생성된 것을 볼 수 있습니다.

페이지 내 양식의 위치

페이지에서 전환 개선에 대해 이야기할 때 가장 자주 논의되는 사항 중 하나는 클릭 유도문안의 위치입니다. 페이지 방문자가 양식을 작성하도록 하는 것이 목표인 경우 양식을 다른 위치에 배치하고 어떤 것이 가장 적합한지 분석하십시오. WordPress의 Nelio A/B Testing 플러그인을 사용하여 이와 같은 테스트를 만드는 방법에 대한 간단한 예를 살펴보겠습니다.

Nelio Unlocker 페이지(모든 웹 페이지를 WordPress 또는 Elementor 블록 편집기로 변환하는 플러그인)의 테스트를 만들고 페이지의 더 높은 곳에 양식을 배치하여 더 많은 방문자가 저희에게 연락하는지 확인하려고 한다고 가정해 보겠습니다.

테스트의 대안으로 이전 이미지에서 볼 수 있듯이 양식을 위로 이동했을 뿐만 아니라 미적으로 더 보기 좋게 만들기 위해 페이지 아래에 예제가 있는 섹션을 배치했습니다.

Nelio A/B Testing 플러그인으로 이 테스트를 어떻게 수행합니까? 먼저 새 테스트 페이지를 만들도록 선택합니다.

Nelio A/B Testing의 테스트 목록
Nelio A/B Testing의 테스트 목록

테스트 이름을 지정하고 테스트할 페이지를 선택한 후 기본적으로 생성하는 각 변형은 원본 페이지의 복사본이 되며 원하는 대로 변경하도록 편집할 수 있습니다.

페이지 양식 배치 테스트 만들기
페이지 양식 배치 테스트 만들기.

Nelio A/B Testing(WordPress에 완전히 통합된 플러그인)의 가장 큰 장점은 변형 변경이 블록 편집기에서 페이지를 편집하는 것만큼 쉽다는 것입니다. 이 경우 이동하려는 페이지의 블록을 선택하고 위치를 변경하기만 하면 됩니다.

A/B 테스트 페이지 변형 수정
A/B 테스트의 페이지 변형 수정

필요한 수정을 한 후에는 페이지를 저장하고 우리가 만들고 있던 테스트로 돌아가서 테스트의 전환 목표와 작업을 나타내는 것만 남았습니다. 이 예에서 우리의 목표는 연락처 양식을 작성하는 것입니다. '전환 목표 및 액션' 섹션에서 목표 이름을 지정하고 '양식 제출' 전환 액션을 추가합니다.

테스트의 목적 및 전환 액션의 정의
테스트의 전환 목표 및 작업에 대한 정의입니다.

이전 이미지에서 볼 수 있듯이 이 테스트의 전환 액션으로 저장하기 위해 제출해야 하는 양식을 선택할 수 있는 드롭다운이 있습니다.

그리고 그게 다야! 이제 테스트의 시작 버튼을 눌러 해당 페이지에 대한 트래픽의 절반이 하나의 대안을 보고 나머지 절반은 다른 대안을 보도록 할 수 있습니다. 테스트 결과 페이지에서 각 변형의 방문 및 전환을 추적하여 어떤 옵션이 가장 효과적인지 분석할 수 있습니다.

채울 필드의 수 및 유형

Hubspot이 40,000페이지 이상을 분석한 연구에서 입력해야 할 필드의 수와 각 필드의 유형이 전환율에 영향을 미친다는 사실을 관찰했습니다.

위의 그래프에서 알 수 있듯이 이미 짐작한 대로 입력할 필드가 적을수록 방문자가 귀하에게 연락하기가 더 쉬워집니다. 그럼에도 불구하고 양식에서 얻은 정보의 품질을 평가해야 합니다. 지나가는 사람이 귀하에게 연락하기를 원하는지, 아니면 정말로 관심이 있고 귀하에게 정보를 조금 더 제공할 의사가 있는 사람만 선호합니까? 그들 자신?

다음 예에서 볼 수 있듯이 양식 필드의 수와 유형을 수정하는 다양한 A/B 테스트를 수행하고 가장 적합한 것을 분석하십시오.

이러한 테스트를 만들기 위해 Nelio Forms와 같은 플러그인을 사용하면 추가 양식을 만드는 것만큼 쉽습니다. 양식 편집기는 이미 익숙한 블록 편집기와 거의 동일합니다.

새 문의 양식 만들기
새 연락처 양식을 만드는 중입니다.

그리고 테스트의 대체 페이지를 편집할 때(원본 페이지의 복사본임을 기억하십시오) 기존 양식을 사용 가능한 양식 목록과 함께 드롭다운에서 선택하여 새로 생성된 양식으로 교체하기만 하면 됩니다.

변형에서 생성된 새로운 형태로 원래 형태 바꾸기
변형에서 원래 형태를 새로 생성된 형태로 교체합니다.

이 경우 테스트의 전환 목표 및 액션을 지정할 때 두 가지 형식의 제출을 ​​전환 액션으로 추가해야 합니다. 이러한 방식으로 이 두 가지 양식(테스트의 각 변형에 하나씩)을 제출하면 전환으로 기록됩니다.

두 가지 테스트 전환 액션의 사양
두 가지 테스트 전환 액션의 사양입니다.

양식 레이블을 표시할 위치

몇 년 전 양식 디자인의 참고 자료인 Luke Wroblewski의 기사에서는 각 필드의 위 또는 왼쪽에 필드 레이블을 표시할 때의 장단점을 비교했습니다.

이전 예에서 눈치채셨다면, 필드가 많은 세로 양식의 문제점 중 하나는 너무 많은 공간을 차지할 수 있다는 것입니다. 시도할 수 있고 개인적으로 양식을 매우 깔끔하게 만드는 대안 중 하나는 필드 레이블을 별도의 엔터티로 표시하지 않고 대신 자리 표시자를 작성하는 것입니다.

Nelio Forms를 사용하는 경우 레이블을 숨겨야 한다고 필드 설정에서 지정한 다음 적절한 자리 표시자를 작성하기만 하면 됩니다.

필드 레이블 숨기기 및 자리 표시자 작성
필드 레이블을 숨기고 자리 표시자를 작성합니다.

이렇게 하면 양식의 높이가 줄어들고 사용자는 각 필드에 무엇을 입력해야 하는지 쉽게 알 수 있습니다.

레이블이 없고 자리 표시자가 있는 양식
레이블이 없고 자리 표시자가 있는 양식입니다.

제출 버튼 텍스트 및 색상

다양한 색상과 다양한 클릭 유도문안 텍스트를 테스트하는 것도 전환을 개선하기 위한 매우 인기 있는 테스트 유형입니다. 한 가지 색상 또는 다른 색상이 더 잘 작동하거나 메시지가 그래야 한다고 말하는 사람들을 찾을 수 있습니다. 하지만 방문자가 가장 좋아하는 색상을 테스트하고 확인하는 것이 좋습니다. 이것이 바로 우리가 웹사이트 중 한 곳에서 수행한 작업으로, 다양한 버튼 색상을 테스트하고 우리에게 가장 적합한 것이 무엇인지 확인했습니다.

블록 편집기에 완전히 통합된 Nelio Forms와 같은 플러그인을 사용하는 경우 테스트하려는 대안만큼 많은 양식을 생성하면 됩니다. 이렇게 하려면 페이지나 게시물에서 하는 것처럼 원본 양식을 복사하고 버튼의 특성을 수정하는 것만 큼 쉽습니다.

사용자 지정 제출 버튼이 있는 양식
사용자 지정 제출 버튼이 있는 양식.

데이터 프라이버시에 대한 정보

마지막으로, 양식으로 할 수 있는 또 다른 테스트는 수집한 데이터의 개인 정보 보호에 대해 다른 표현을 시도하고 그것이 어떤 영향을 미치는지 확인하는 것입니다. 사람들은 스팸을 받는 것을 원하지 않으므로 신뢰를 구축하려면 데이터를 제3자와 공유하지 않을 것임을 명시적으로 강조하는 것이 도움이 될 수 있습니다.

데이터 개인 정보 보호에 대한 대체 텍스트가 있는 양식
데이터 개인 정보 보호에 대한 대체 문구가 있는 양식.

다른 스타일로 다른 대체 표현을 시도하고 각 대안이 가질 수 있는 영향을 분석합니다.

결론

오늘 우리는 전환율을 개선하기 위해 문의 양식이 있는 페이지에서 테스트할 수 있는 몇 가지 아이디어를 공유하고자 합니다. 추천을 아무리 많이 찾아도 A/B 테스트를 수행한 후에야 웹사이트에서 가장 효과적인 것이 무엇인지 알 수 있습니다. 페이지 내에서 양식의 위치를 ​​변경하든 다른 양식 콘텐츠를 테스트하든 간에 여러 테스트하고 더 많은 리드, 구독자 또는 고객을 확보하는 방법을 확인하십시오.

Nelio Forms와 같은 기본 WordPress 플러그인을 사용하여 양식을 만들고 Nelio A/B Testing을 사용하여 A/B 테스트를 수행하는 경우 양식이 있는 페이지를 테스트하는 것이 그 어느 때보다 쉬워졌습니다!

Unsplash에 대한 Robert Anasch의 추천 이미지.