가격 페이지에서 히트맵 사용

A/B가 아닌 테스트로 "이달의 A/B 테스트"를 시작합시다. 인터넷의 다른 구석으로 도망치기 전에 히트맵으로 시작하는 이유를 설명하겠습니다.

웹사이트에서 A/B 테스트를 정기적으로 사용하지 않는 주요 원인 중 하나는 어디서부터 시작해야 할지 모르는 것입니다. 어떤 변경을 시도하고, 어디서, 왜 해야 합니까? 이것이 여러분이 스스로에게 던지게 될 핵심 질문입니다. 어떻게 대답해야 할지 모르겠다면 테스트를 포기하게 될 것입니다.

이것을 극복하기 위해 내가 추천하는 것은 가장 먼저 웹사이트에서 시작할 페이지를 선택하는 것입니다. 이 페이지는 목표와 관련이 있어야 합니다. 즉, 방문이 많은 페이지이거나 활동이나 비즈니스의 핵심 페이지입니다.

오늘의 예에서는 프리미엄 플러그인인 Nelio A/B Testing 및 Nelio Content의 가격 책정 페이지부터 시작하기로 선택했습니다. 우리 회사의 수입이 두 페이지를 통해 들어오기 때문에 이 페이지는 우리 비즈니스의 핵심입니다.

페이지를 선택했으므로 변경해야 할 사항과 이유를 알기 위해 히트맵 테스트를 실행하여 시작하는 것이 좋습니다. 히트맵이 방문자가 웹사이트와 상호 작용하는 방식에 대한 실제 데이터를 제공하기 때문에 그렇게 합니다.

실제 사용자 데이터로 페이지가 어떻게 작동하는지 실제로 볼 때 향후 테스트를 실행할 아이디어를 얻는 것이 훨씬 쉽습니다. 이것이 히트맵이 항상 좋은 시작인 이유입니다.

WordPress에서 히트맵 테스트를 만드는 방법

WordPress 페이지에 대한 히트맵 테스트를 만드는 것은 매우 쉽습니다. 선택한 페이지를 선택하고 테스트를 시작하기만 하면 됩니다.

Nelio A/B Testing에서 버튼을 클릭하여 새 테스트를 추가할 때 열리는 대화 상자에서 이 유형의 테스트를 선택하여 새 히트맵 테스트를 만듭니다.

테스트 편집 화면에서 나중에 쉽게 식별할 수 있도록 테스트 이름을 설정합니다. 테스트에서 시도하려는 항목에 대한 설명을 추가할 수도 있습니다. 마지막으로 히트맵 테스트를 수행할 페이지를 선택해야 합니다.

모든 것이 준비되면(이전 스크린샷에서 볼 수 있듯이 매우 쉽습니다) 창의 오른쪽 상단 모서리에 있는 버튼을 클릭하여 테스트를 시작합니다. 방문자가 올 때까지 기다리기만 하면 Nelio A/B Testing이 페이지에서의 행동 데이터를 수집하고 결과를 처리할 수 있습니다.

히트맵 결과

우리의 경우 웹사이트에서 동시에 두 개의 히트맵 테스트를 실행했습니다. 하나는 Nelio A/B Testing의 가격 책정 페이지용이고 다른 하나는 Nelio Content의 가격 책정 페이지용입니다.

각 테스트는 약 20일 동안 데이터를 수집하고 약 500명의 방문자의 행동을 분석했습니다. 이것은 특정 결론을 도출하고 이 페이지에서 실행할 수 있는 향후 A/B 테스트에 대해 생각하기에 충분합니다.

이 페이지는 당사 웹사이트에서 더 많이 방문한 페이지가 아닙니다. 전환 유입경로의 마지막 단계이므로 트래픽이 손실됩니다. 그러나 우리는 우리 사업의 중요성 때문에 그들을 선택했음을 기억하십시오. 향후 테스트에서는 트래픽이 더 많은 다른 페이지에 대해 연구하고 다른 이유를 설명할 것입니다.

Nelio A/B 테스팅의 가격 페이지

Nelio A/B Testing의 가격 책정 페이지에서 얻은 결과부터 시작하겠습니다. 히트맵 테스트는 히트맵, 스크롤맵, 색종이 조각이라는 세 가지 관점에서 데이터를 보여줍니다. 여기에 3개의 전체 이미지를 포함하는 것은 높이가 픽셀 단위로 상당히 크기 때문에 너무 많습니다. 위아래로 스크롤해야 하는 것을 방지하기 위해 여기에 링크했습니다.

• Nelio A/B Testing의 가격 책정 페이지 히트맵.
• Nelio A/B Testing의 가격 책정 페이지 스크롤맵.
• Nelio A/B Testing의 가격 페이지에 있는 색종이 조각.

이제 이전 결과에서 가장 관련성이 높은 부분을 살펴보겠습니다.

이전 이미지에서 볼 수 있듯이 히트맵은 페이지 요소와 사용자의 상호 작용을 집계 방식으로 그리고 따뜻한 색상이 큰 관련성을 나타내는 색상 척도로 보여주는 그래픽 표현입니다.

Nelio A/B Testing의 가격 책정 페이지에서 페이지의 첫 번째 접는 부분이 더 많은 핫스팟이 있는 곳입니다. 구체적으로 분석해보면 기본계획과 전문계획 영역의 요소가 기업의 영역보다 더 관련성이 높다. 이를 감안할 때 엔터프라이즈 요금제를 먼저 표시하도록 요금제를 재정렬할 수 있습니다. 우리는 왼쪽에서 오른쪽으로 읽는 데 익숙하므로 가격 책정 페이지에 가장 비싼 요금제 를 먼저 표시하는 것이 A/B 테스트에서 시도하기에 좋은 변경이 될 수 있습니다.

많은 사용자 상호 작용을 받는 또 다른 요소는 아래로 스크롤하여 계획의 자세한 비교를 볼 수 있는 링크입니다. 이는 계획에 대한 자세한 내용을 보는 데 관심이 있다는 의미이므로 좋습니다.

그다지 좋지 않은 것은 클릭할 수 없는 요소에 많은 상호 작용이 있다는 것입니다. 방문자가 만든 모든 클릭을 볼 수 있는 그래픽 표현인 색종이 조각에서 볼 수 있습니다.

이전 스크린샷에서 볼 수 있는 전체 계획 블록에서 각 계획에 나타나는 버튼만 클릭할 수 있는 요소입니다. 다른 모든 항목을 클릭해도 아무 효과가 없다는 점에 유의하십시오. 현재 인터페이스가 혼란을 일으키고 있습니다.

방문자는 클릭할 수 없는 요소인 각 계획의 기능에 대한 텍스트와 아이콘을 클릭합니다. 여기에서 우리는 그들이 그것에 대해 더 많은 정보를 찾으려고 한다는 것을 이해할 수 있지만 대신 페이지 아래에 이 정보가 있습니다.

여기서 시도할 수 있는 또 다른 A/B 테스트는 계획의 각 기능을 변경하여 텍스트 위로 마우스를 가져갈 때 표시되고 방문자에게 더 많은 컨텍스트 정보를 제공하는 부동 요소를 갖도록 하는 것입니다. 현재 버전에 대해 상황별 도움말을 사용하여 이 버전을 테스트하여 어떤 버전이 더 많은 구매를 생성하는지 확인할 수 있습니다.

색종이 조각은 또한 방문자의 클릭에서 추출한 집계 정보를 제공합니다. Nelio A/B Testing에는 방문자의 다양한 특성을 더 잘 이해하기 위해 다음과 같이 여러 유형의 필터가 포함되어 있습니다.

이 필터에서 다음 데이터를 추출했습니다.

• Chrome과 Firefox는 지금까지 방문자가 가장 많이 사용하는 브라우저입니다. 따라서 적어도 이러한 브라우저에서는 웹이 보기 좋게 만들어야 합니다.
• 이 페이지 방문자의 절반은 미국에서 왔습니다. 이것은 우리의 판매 데이터와 일치합니다.
• 방문자는 주중 첫 3일 동안 더 많이 방문합니다. 이 정보를 아는 것은 예를 들어 다른 날에는 웹의 다른 영역에서 제안을 하여 트래픽이 적은 날에 트래픽을 유치하는 데 유용할 수 있습니다.
• 거의 100%의 방문자가 데스크톱 컴퓨터나 랩톱에서 페이지에 액세스합니다. 모바일 기기를 통한 방문은 거의 없습니다. 이것은 앞으로 공부해야 할 부분입니다.
• Windows 10 및 Mac OS X은 사람들이 우리를 방문하는 운영 체제입니다. 모바일 장치용 운영 체제에서 방문자가 없기 때문에 이전 데이터와 일치합니다.
• 근무일 동안 더 많은 방문자가 있습니다(테스트는 시카고 시간대에서 실행되었습니다). 우리의 주요 고객이 미국 출신이기 때문에 의미가 있습니다.
• 방문은 최소 너비가 1500픽셀보다 큰 화면에서 이루어집니다. 방문이 데스크톱 컴퓨터 또는 랩톱에서 발생했음을 확인하는 또 다른 사실입니다.

히트맵과 색종이 조각의 전체 버전을 확인하면 Nelio A/B Testing의 가격 책정 페이지의 다른 모든 섹션이 덜 관련성이 있음을 알 수 있습니다. 이를 염두에 두고 다음 스크롤맵을 확인해 보겠습니다.

전체 스크롤맵을 확인하면 페이지의 첫 번째 접힌 부분을 넘어서는 방문자가 거의 없음을 알 수 있습니다. 이것은 아마도 Nelio A/B Testing의 가격 페이지의 훨씬 더 짧은 버전을 사용하여 스크롤 없이 볼 수 있는 부분에 관련 정보를 압축해야 한다고 생각하게 만듭니다.

페이지의 첫 번째 접기 이후 섹션에는 많은 텍스트가 있으며 방문자는 읽지 않습니다. 웹 하단에서 찾을 수 있는 계획을 비교하는 자세한 표를 보고 상호 작용하는 사람은 20% 미만입니다. 이 모든 데이터는 scrollmap에 의해 제공됩니다.

더 많은 시각적 섹션을 포함하여 페이지의 더 짧은 버전으로 테스트하면 잠재 구매자를 설득하고 가격 책정 페이지를 훨씬 더 효과적이고 효율적으로 얻을 수 있습니다. 이것은 A/B 테스트로 시도할 수 있는 변경 사항에 대한 또 다른 아이디어입니다.

미래에 테스트할 수 있는 몇 가지 아이디어가 이미 있으므로 히트맵이 제공하는 정보는 A/B 테스트에 적용할 수 있는 아이디어를 얻는 데 매우 유용합니다.

Nelio 콘텐츠의 가격 페이지

Nelio A/B Testing의 가격 책정 페이지와 마찬가지로 Nelio Content의 가격 책정 페이지에 대한 히트맵 결과가 포함된 전체 이미지가 있습니다.

• Nelio Content의 가격 책정 페이지 히트맵.
• Nelio Content의 가격 페이지 스크롤맵.
• Nelio Content의 가격 페이지의 색종이 조각.

Nelio Content의 가격 페이지는 Nelio A/B Testing의 가격 페이지보다 간단하고 짧습니다. 다른 이유로 이 페이지에는 하나의 계획만 있는 반면 Nelio A/B Testing에는 3가지 다른 계획이 있었습니다.

전체 히트맵을 보고 Nelio A/B Testing의 히트맵과 비교하면 이 경우 첫 번째 접힌 부분 외에 페이지의 다른 부분에 더 많은 핫스팟이 있음을 알 수 있습니다.

이전 이미지에서 계획을 비교하는 테이블 내의 작업 버튼이 특별한 관련성을 갖는 것을 볼 수 있습니다. 우리가 그런 이유로 거기에 있기 때문에 이것은 좋습니다. 그러나 Nelio Content의 무료 버전에 불과한 표의 스타터 플랜은 특별한 관련이 있습니다.

여기서 질문은 방문자가 Nelio Content의 무료 버전을 다운로드할 수 있도록 가격 페이지에 WordPress 플러그인 디렉토리에 대한 링크가 있어야 하는지 여부입니다. 이제 우리는 그것을 가지고 있지만 히트맵은 아마도 몇몇 방문자가 무료 버전으로 이동하기 위해 가격 페이지를 떠나고 있음을 보여줍니다.

이 주제는 논쟁의 여지가 있으며 회의에서 긴 토론의 원천입니다. 한편으로 가격 페이지 내에서 가능한 직접 판매를 잃을 수 있기 때문에 링크를 유지하는 것은 좋지 않습니다. 그러나 방문자가 사이트를 떠나더라도 Nelio Content를 무료로 사용하는 것이 좋은 경우일 수 있습니다. 사용자는 이 도구를 좋아하고 나중에 테스트한 후 구매하게 될 수 있습니다. Nelio에서 우리는 이것을 여러 번 논의했으며 오늘이 우리가 그것을 하는 마지막 시간이 아닐 것이라고 생각합니다. 현재로서는 링크가 유지됩니다. 당신이 그것에 대해 어떻게 생각하십니까?

우리는 또한 비디오가 많은 관심을 끌고 있음을 알 수 있습니다. 우리는 아주 멋진 비디오를 만들었고 아마도 페이지에서 더 일찍 보여줄 수 있을 것입니다. A/B 테스트로 이 변경을 시도할 수 있습니다. 첫 번째 접힌 후의 섹션도 그다지 관련성이 없기 때문입니다.

반면에 페이지를 아래로 스크롤할 때 방문자 손실이 덜 갑작스러운 스크롤맵을 볼 수 있습니다. 이것은 방문자가 가능한 한 많은 콘텐츠를 볼 수 있도록 하는 것이 우리가 원하는 것이라면 가격 책정 페이지를 더 짧게 만드는 것이 더 효과적일 수 있음을 확인시켜줍니다.

또한, 이전 히트맵과 결합하여 첫 번째 접기 이후에 특정 기능에 대해 이야기하고 사람들의 의견을 보여주는 두 섹션을 재설계해야 할 수도 있음을 알 수 있습니다. 텍스트가 너무 많고 주의를 끌지 못하는 섹션입니다. 더 시각적이고 직접적인 대안 버전을 시도할 수 있습니다.

클릭의 색종이 조각 그래픽과 관련하여 페이지의 첫 번째 접힌 영역 내에서 클릭할 수 없는 영역에서 발생하는 잘못된 클릭의 양을 확인하는 것은 흥미로웠습니다.

이러한 클릭의 대부분은 피할 수 없지만(예, 사람들이 스크롤할 때 측면 영역, 특히 오른쪽을 클릭한다고 가정), 혼란스러운 방문자의 결과인 다른 클릭도 있습니다. 이전 스크린샷에서 보던 월별 가격 번호를 클릭한 경우입니다. 해당 가격은 클릭할 수 있는 항목이 아닙니다. 대신 주황색 버튼을 클릭해야 합니다. 그러나 아래에 표시된 연간 가격 번호는 적절한 링크입니다.

두 경우에 대해 동일한 상호 작용을 통해 두 가격을 표시하는 덜 혼란스러운 또 다른 방법을 찾아야 합니다. 이것은 이 페이지에서 실행할 수 있는 또 다른 A/B 테스트입니다.

그리고 지금 무엇?

우리는 웹사이트에서 실행할 수 있는 A/B 테스트에 대해 전혀 모르고 시작했습니다. 히트맵은 페이지의 A/B 테스트에서 테스트할 아이디어를 쉽게 얻는 데 도움이 됩니다. 이러한 테스트 아이디어가 있으면 필요에 따라 우선 순위를 지정해야 합니다.

페이지의 첫 번째 접기 부분의 변경 사항은 더 많은 사람들이 볼 수 있고 결과를 더 빨리 얻을 수 있으므로 테스트하기가 더 빠릅니다. 페이지의 해당 부분에서 변경을 시도하는 A/B 테스트의 우선 순위를 지정할 수 있습니다.

그리고 여기서 가장 중요한 교훈은 테스트를 시작했다면 멈추지 말라는 것입니다. 테스트 프로세스를 반복할 때마다 웹사이트와 방문자로부터 새로운 것을 배울 수 있습니다.

다음 달에 실제 결과를 분석하는 또 다른 유형의 테스트로 뵙겠습니다. 이 게시물과 여기에 설명된 모든 것에 대한 의견을 댓글로 남겨주세요. 사이트의 어느 페이지에서 히트맵을 실행하시겠습니까?

Unsplash에서 Steve Halama의 추천 이미지.