전자 상거래 랜딩 페이지의 A/B 테스트를 만드는 방법과 이유

오래 전 처음으로 시카고의 주요 쇼핑가인 미시간 애비뉴를 걸었을 때 두 개 이상의 상점의 창가에 완전히 놀랐던 기억이 납니다. 나이키 매장은 마이클 조던을 기리는 곳이었고, FAO 슈바르츠 장난감 매장은 멋진 미니 놀이공원이었습니다. 당신은 경험의 기념품을 얻기 위해 들어가서 결국 뭔가를 가져갔습니다.

온라인 상점의 실제 상점 창에 해당하는 것이 방문 페이지입니다. 방문 페이지는 웹사이트의 중요한 페이지입니다. 많은 경우 방문자가 Google 검색을 수행한 후 또는 블로그에서 게시물을 읽은 후 보게 되는 첫 번째 페이지입니다.

사람들은 종종 랜딩 페이지가 웹사이트의 홈페이지라고 생각하기 때문에 웹사이트가 하나뿐이라고 생각합니다. 그 어떤 것도 진실에서 멀어질 수 없습니다. 이러한 유형의 페이지는 당사 웹사이트의 진입점으로 설계한 페이지입니다. 방문자의 관심을 끌고 당사 사이트에 머물게 하고 쇼핑 경험을 시작하는 것입니다. 따라서 예를 들어 Nelio 웹사이트에서 Nelio A/B Testing을 표시해야 하는 일부 방문 페이지는 다음과 같습니다.

• Nelio A/B Testing의 홈페이지
• 귀하의 비즈니스를 위한 Nelio A/B 테스팅
• 전자상거래를 위한 Nelio A/B 테스팅
• 등

이 페이지 각각은 당사 제품에 관심을 가질 수 있는 다양한 유형의 프로필에 응답하기 위해 약간 다른 관점에서 당사 제품을 제공합니다. 따라서 예를 들어 전자 상거래의 랜딩 페이지는 전자 상거래가 있는 웹사이트의 기능을 강조합니다. 잠재 고객을 전환하기 위해 만들어졌습니다. 이러한 이유로 이 페이지에서 귀하의 주요 목적은 전환율을 최적화하는 것입니다.

이 게시물에서는 랜딩 페이지의 주요 특성과 전환율 향상을 위한 모범 사례를 살펴보겠습니다.

전자상거래 랜딩페이지의 특징

이미 보았듯이 전자 상거래 랜딩 페이지는 마케팅 목적으로 특별히 제작된 독립 실행형 웹 페이지입니다. 방문자가 광고, 검색 엔진 결과 또는 판촉 캠페인에서 링크를 클릭할 때 "방문하는" 페이지입니다.

랜딩 페이지의 목적은 전자 상거래의 경우 주로 구매를 하는 특정 행동을 고객이 완료하도록 하는 것입니다. 웹에 있을 수 있는 다른 방문 페이지와의 주요 차이점 중 하나는 특정 방문자 프로필에 맞게 맞춤화된다는 것입니다. 제목, 텍스트, 이미지 및 평가는 해당 프로필에 고유하므로 이 프로필을 가진 사람은 구매를 권장합니다. 반면에 방문 페이지에는 항상 하나 이상의 클릭 유도문안이 포함됩니다.

예를 들어 어떤 사람이 전자 상거래에서 전환율을 최적화하는 방법을 검색하고 다른 결과를 본 후 전자 상거래를 위한 Nelio A/B Testing의 링크를 클릭하면(위 이미지에서 부분적인 스크린샷을 볼 수 있습니다. ) 페이지를 방문하면 검색과 일치하는 헤드라인이 표시되고 매장 이미지가 표시되며 A/B 테스트를 만들도록 초대하는 텍스트 및 클릭 유도문안이 표시됩니다. 페이지는 또한 매장에서 제품 프레젠테이션을 최적화할 수 있는 방법을 설명하고 방문자에게 더 많은 자신감을 주기 위한 평가를 포함합니다. 마지막으로 데이터 덕분에 매출을 높일 수 있는 방법과 고객이 우리를 신뢰할 수 있는 이유에 대한 추가 정보를 설명하는 몇 가지 섹션이 있습니다.

위의 예에서 볼 수 있듯이 모든 방문 페이지의 목표는 잠재 구매자가 몇 초 만에 정확히 원하는 것을 찾는 것입니다. 페이지의 콘텐츠는 중요한 제품 기능(다시 말하지만 특정 청중을 염두에 두고 작성됨)을 포함하여 구매자 페르소나에 맞게 조정되어 자신감을 더하고 방문자가 쉽게 구매할 수 있습니다.

다른 방문 페이지를 갖는 가장 큰 장점은 특정 고객을 훨씬 더 잘 타겟팅할 수 있다는 것 입니다. 디자인, 가치 제안 및 클릭 유도문안은 시장 부문에 훨씬 더 맞춤화될 수 있습니다.

랜딩 페이지에서 왜 그리고 어떤 테스트를 만들어야 하나요?

위에서 언급한 기능을 단순히 구현하는 대신 A/B 테스트의 문제로 이동하는 이유가 궁금할 수 있습니다. 글쎄, 한 가지는 사용자의 전환을 향상시킬 것이라고 믿을 수 있는 것과 매우 다른 것은 웹사이트에서 실제로 일어나는 일입니다. 무엇이 작동하고 무엇이 작동하지 않는지 확인할 수 있는 유일한 방법은 A/B 테스트를 수행하는 것입니다.

이미 알고 계시겠지만 A/B 테스트는 개선 가설(예: 특정 관련 정보를 더 잘 표시하기 위해 방문 페이지를 재배포하면 더 많은 전환으로 이어질 것이라고 생각할 수 있음)으로 시작하고 가설을 대안으로 구현하고, 이 변형이 원본 페이지보다 실적이 좋은지 테스트합니다. 기술적으로 A/B 테스트는 각 방문자에게 하나의 변형 또는 다른 변형을 표시하고 방문자가 수행하는 작업을 추적하고 어떤 것이 가장 좋은지(있는 경우) 결정합니다.

이렇게 하면 해당 변경 사항이 실제 개선 사항인지 여부를 실제 데이터로 확인했기 때문에 사이트에 적용한 변경 사항의 전환율이 더 높아집니다.

예를 들어 보여드리겠지만 A/B 테스트에서 얻은 결과는 예상과 다를 수 있으므로 이를 수행하는 것이 매우 중요합니다. 또한 A/B 테스트는 지속적으로 수행되어야 하며 전환율 최적화 프로세스 또는 CRO로 알려진 것의 일부여야 합니다.

웹사이트의 방문 페이지에서 사용할 수 있는 몇 가지 모범 사례를 살펴보겠습니다.

페이지 단순화

방문 페이지는 간단하고 따라하기 쉬워야 합니다. 방문자가 너무 많은 텍스트에 압도되거나 길을 잃거나 "지금 구매" 버튼을 찾을 수 없는지 확인하십시오. 페이지를 단순화하는 몇 가지 팁은 다음과 같습니다.

• 간결하고 직접적인 헤드라인 표시
• 명확하고 가시적인 클릭 유도문안 표시
• 결제 페이지로 연결되지 않는 탐색 링크 제거
• 글머리 기호로 제품 세부 정보 표시
• 필수 정보만 표시하는 텍스트 축소

랜딩 페이지를 처음에 잠깐 살펴보고 그 페이지에 머물지 아니면 더 나은 것을 찾을지 결정하는 페이지라고 생각하십시오. 불필요한 텍스트를 피하고 방문자에게 가치를 더하는 답변에 자신을 제한하십시오.

이론은 괜찮지만 가장 중요한 것은 페이지에서 만든 단순화가 방문자가 선호하는 단순화인지 확인하는 A/B 테스트를 만드는 것입니다. 예를 들어 Nelio Software 홈 페이지를 단순화하고 A/B 테스트를 만들었습니다. 우리의 목표는 더 단순하고 시각적이며 간결한 대안 버전을 디자인하여 전환율을 높이는 것이었습니다.

우리는 테스트를 실행했고 놀랍게도 우리가 만든 새로운 변형은 전환을 개선하는 더 나은 솔루션이 아니었습니다. 테스트하지 않았다면 더 낫다고 생각했지만 실제로는 그렇지 않은 페이지를 적용했을 것입니다. 이 게시물에서 수행한 A/B 테스트의 세부 정보를 찾을 수 있습니다.

그러나 다음 이미지에서 볼 수 있듯이 우리는 여기서 멈추지 않고 Nelio 홈페이지의 다양한 변형을 계속 테스트했습니다. 이 게시물을 작성하는 시점에 우리 홈페이지의 디자인은 이전 제안과 매우 다릅니다. 더 명확하고 단순하며 깔끔합니다. 그리고 그것은 더 나은 성능을 발휘합니다!

랜딩 페이지의 첫 번째 접기

랜딩 페이지의 첫 번째 접는 부분이 가장 중요한 섹션입니다. 해당 페이지를 방문하는 모든 방문자가 가장 먼저 보게 되는 내용입니다. 그들이 귀하의 웹사이트를 계속 탐색하는지, 더 보기 위해 아래로 스크롤하거나, 2초 이내에 Google 검색 엔진으로 도망가는지 여부에 달려 있습니다.

불행히도 이 첫 번째 접기에 모든 정보를 담을 수는 없습니다. 무엇을 넣을지 신중하게 선택해야 합니다. 방문자에게 알려야 할 가장 중요한 정보는 무엇입니까? 첫 번째 접기의 A/B 테스트를 생성하면 웹사이트의 전환율을 높이는 데 큰 영향을 미칠 수 있습니다.

예를 들어, 제품이 설명되어 있고 전환 목표가 사용자가 제품 가격 페이지를 방문하도록 하는 Nelio A/B Testing 랜딩 페이지에서 우리는 첫 번째 접기의 다른 버전을 테스트했습니다. 블록 위로 마우스를 가져간 다음 슬라이더를 움직여 두 버전을 비교합니다.

변형에서는 제목을 변경하고 이미 로고에 있는 제품 이름 대신 방문자의 궁금증을 유발하는 메시지를 추가했습니다. 다른 색상? 버튼 모양이 다른가요? 이 모든 것을 위한 대체 위치?

이에 이어 "청중이 가장 좋아하는 것을 발견하고 전환을 개선하기 위해 WordPress의 다른 버전을 만들고 테스트하십시오"라는 호기심을 충족시킬 솔루션이 있음을 나타내는 자막으로 변경했습니다. 마지막으로 "지금 시작"이라는 긴급성을 추가하여 작업 버튼의 텍스트를 변경했습니다. 또한 웹사이트의 첫 번째 섹션은 첫 번째 접힌 부분 전체를 차지합니다. 메시지에 집중하는 것이 목표였습니다.

이 경우 A/B 테스트 결과는 영어 버전과 스페인어 버전이 다릅니다. 영어 버전에서는 12% 이상의 전환 개선을 얻었지만 스페인어 버전에서는 결정적인 데이터를 얻을 수 없었습니다. 이 실험에 대한 자세한 내용을 보려면 여기를 클릭하십시오.

이 예는 방문 페이지를 A/B 테스트하는 것의 중요성을 다시 한 번 보여줍니다. 테스트하기 전에는 변경 사항이 웹 사이트에 어떤 영향을 미칠지 알 수 없습니다.

추천 이미지

방문자의 인식에 가장 큰 영향을 미치는 웹사이트의 첫 번째 접는 요소 중 우리가 사용하는 특징 이미지가 핵심입니다. 그들이 처음 본 것처럼 방문객의 일반적인 감정이 거부감이라면 우리는 잃어 버릴 것입니다. 또한, 특집 이미지는 콘텐츠가 소셜 미디어에서 공유될 때 중요한 역할을 합니다.

이러한 이유로 추천 이미지의 A/B 테스트를 만드는 것만큼 쉬운 일이 변환 결과를 볼 때 입가에 미소를 가져다 줄 수 있습니다. 사용자가 가격 페이지를 방문하는 것이 전환 목표인 Nelio Contents 랜딩 페이지에서 추천 이미지에 대한 A/B 테스트를 수행했습니다.

이 페이지의 첫 번째 접는 부분에는 이마에 포스트잇을 하고 짙은 수염을 기른 ​​미소 짓고 있는 남자가 컴퓨터 앞에서 웃고 있는 모습이 담겨 있습니다. 컴퓨터 모니터에는 Nelio Content의 편집 일정이 표시됩니다. 우리는 두 가지 추가 변형으로 A/B 테스트를 만들기로 결정했습니다. 첫 번째 대안은 랩톱 앞에서 작업하는 팀을 보여주는 보다 일반적인 이미지입니다. 두 번째 옵션에서 우리는 편집 캘린더의 스크린샷을 보여주었는데, 여기에는 흐림 효과를 적용하여 그 위의 텍스트를 더 읽기 쉽게 만들었습니다.

이 경우 다른 것보다 나은 이미지가 있습니까? 어떻게 생각해? 수염 난 신사는 다른 두 가지 이미지 변형을 이길 수 있습니까?

그런데 이상하게도 수상한 이미지가 있었습니다. 전체 테스트 결과 페이지는 다음과 같습니다.

특히, 컴퓨터 앞에 있는 사람들의 그룹이 있는 이미지는 스페인어 버전에서 거의 90%의 신뢰도를 가진 수염 난 남자보다 25% 더 나은 전환율을 보였고 우승한 영어 버전에서는 거의 15%의 비율 향상을 보였습니다. 95%를 초과하는 훨씬 더 높은 통계적 신뢰도.

보시다시피, 가설을 확증하기 위해 A/B 테스트를 생성하지 않은 경우 가장 잘 작동하는 것이 무엇인지 추측하는 것은 매우 어렵습니다. 이 테스트에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

그리고 다른 추천 이미지를 테스트하는 것과 같은 방식으로 시도해 볼 수 있는 또 다른 흥미로운 유형의 테스트는 비디오용 이미지를 변경하는 것이 더 나은지 여부입니다. 이 게시물에서는 이 실험에 대한 자세한 내용을 설명합니다.

행동 유도 버튼

방문 페이지에서 시도해야 하는 또 다른 유형의 테스트는 다양한 스타일의 클릭 유도문안 버튼을 테스트하는 것입니다. 버튼의 크기, 스타일 및 텍스트를 테스트합니다.

클릭 유도문안 버튼에 가장 적합한 색상에 대한 몇 가지 이론에 따라 Nelio Content 랜딩 페이지의 버튼 색상에 대한 A/B 테스트를 수행하기로 결정했습니다. 이 경우 Nelio A/B Testing으로 CSS 스타일 테스트를 수행했습니다.

다음은 우리가 수행한 A/B 테스트의 각 변형에 대해 CSS 스타일 편집기에서 볼 때 작업 버튼의 모양입니다. 먼저 주황색 버튼이 있는 원본 버전이 있습니다. 다른 두 가지 변형에는 버튼을 각각 녹색과 빨간색으로 설정하는 CSS가 포함됩니다.

이 경우에 얻은 결과(이 실험에 대한 자세한 내용은 여기에서 볼 수 있음)는 녹색이 Nelio 콘텐츠 페이지의 영어 청중에게 가장 잘 맞는 색상이었습니다. 그러나 스페인 청중의 경우 우리가 이미 가지고 있는 것보다 더 잘 작동하는 색상을 찾지 못했습니다.

이러한 A/B 테스트는 어떻게 생성합니까?

A/B 테스트 도구를 사용하면 A/B 테스트를 만드는 것이 매우 쉽습니다. 특히, 완전히 통합된 WordPress 플러그인인 Nelio A/B Testing을 사용하면 블록 편집기로 페이지를 수정하는 것처럼 쉽게 모든 테스트의 변형을 만들 수 있습니다.

또한 이전 이미지 중 일부에서 이미 보았듯이 WordPress 자체에도 결과가 있으므로 코딩 지식이 있거나 WordPress 외부의 도구를 사용할 필요가 없습니다.

이 완전한 가이드에서는 WordPress 블록 편집기로 A/B 테스트를 생성하는 방법을 설명합니다.

전자 상거래의 전환 개선을 시작하십시오

전자 상거래에서 전환율을 높이는 것은 웹사이트 방문 수를 늘리는 것만큼 또는 더 중요 합니다. 방문 페이지는 방문자가 도달하는 페이지이며 방문자를 전환시키는 것이 주요 우선 순위가 되어야 합니다. 당신은 이미 그들 모두가 몇 가지 공통적인 특징을 가지고 있다는 것을 보았지만 A/B 테스트를 생성해야만 그것들을 개선하는 방법을 알게 될 것입니다. 우리는 몇 가지 예를 보여 주었지만 복사하는 대신 자신의 가설을 세우고 실험을 시작하십시오.

지속적으로 A/B 테스트를 만든 경험을 통해 적은 노력으로 매출을 늘릴 수 있었습니다. 웹사이트에서 전환을 개선하기 위해 무엇을 기다리고 계십니까?

Unsplash에서 Igor Miske의 추천 이미지.