방문 페이지 히트 맵을 사용하기 전에 알아야 할 모든 것

Cormac Kinney의 소프트웨어는 월스트리트 트레이더가 주식 시장을 게임하는 데 도움이 되는 도구로 시작되었습니다. 그것은 금융 데이터를 " 히트 맵 " 이라고 하는 " 빨간색과 파란색 사각형의 빛나는 모자이크" 로 변환하여 거래자에게 색상을 사용하여 매매할 때 신호를 보냈습니다.

20여년이 지난 지금, 히트맵과 그들이 제공하는 통찰력의 혜택을 받는 것은 트레이더만이 아닙니다. 마케터(현재 Instapage 고객)도 이를 사용하고 있습니다. 그리고 그렇게 함으로써 잠재 고객이 웹 페이지에서 어떻게 행동하는지 정확히 배우고 있습니다.

히트맵이란?

히트 맵은 방문자가 색상으로 구분된 시스템을 사용하여 웹 페이지와 상호 작용하는 방식을 보여주는 데이터 시각화입니다. 예를 들어, 사람들이 웹에서 F자형 패턴으로 읽는다는 것을 보여주는 아마도 가장 잘 알려진 역대 히트맵(적어도 디지털 마케터에 의해)을 살펴보십시오.

지도의 빨간색과 노란색 부분은 많이 보이는 지역을 나타냅니다. 파란색은 방문자가 가장 적게 본 곳입니다.

이 특정 데이터는 방문자가 웹 페이지에서 텍스트를 접할 때 시선을 모니터링한 2006년 시선 추적 연구에서 Nielsen Norman Group이 수집했습니다. 그러나 이와 같은 테스트는 웹에서 흔히 볼 수 있는 테스트가 아닙니다.

시선 추적 히트 맵과 마우스 추적 히트 맵

시선 추적 실험의 히트 맵은 가장 정확하지만 가장 비용이 많이 들고 생산하기 불편합니다. 위의 Nielsen Norman과 같은 연구는 일반적으로 방문자가 웹 페이지와 상호 작용할 때 방문자의 눈 을 관찰 하는 연구 팀이나 값비싼 하드웨어와 함께 통제된 환경(실험실, 사내)에서 이루어집니다. 이것들을 실행하는 데 수천 달러 이상의 비용이 들 수 있습니다.

대부분의 기업에서 전체 연구원 팀을 고용하는 것이 불가능하기 때문에 많은 기업이 대신 마우스 추적 소프트웨어로 눈을 돌립니다. 실제 눈 움직임을 모니터링하는 것과는 대조적으로 마우스 추적 소프트웨어는 클릭, 스크롤 및 호버와 같은 방문자의 마우스 움직임을 모니터링합니다.

이 방법은 공식적인 실험실 환경이나 막대한 사업 예산을 필요로 하지 않기 때문에 훨씬 더 쉽게 접근할 수 있습니다. 오늘날에는 마우스 추적 소프트웨어를 설치하고 방문자의 행동을 즉시 모니터링하기 시작할 수 있습니다. 일부 연구에서는 공식적인 시선 추적 연구만큼 정확하게 나타납니다.

왼쪽의 히트 맵은 공식적인 시선 추적 연구에서 생성된 반면 오른쪽의 히트 맵은 마우스 추적으로 생성되었습니다. ClickTale에 따르면 두 기술을 동시에 시행한 실험에서는 결과 간에 84-88%의 상관 관계가 있음을 보여주었습니다.

기본적으로 어떤 경우에는 사람들이 마우스를 움직이는 위치와 보이는 위치가 일치하는 경향이 있습니다(나중에 자세히 설명).

다양한 유형의 마우스 추적 히트 맵 사용 가능

사람들이 "열 지도"를 참조할 때 사용자 행동을 표시하는 시각화를 참조합니다. 그러나 사용자의 행동이 항상 같은 것은 아닙니다. 일부 히트 맵은 사람들이 스크롤하는 방법을 보여 주는 반면 다른 유형은 사람들이 화면에서 마우스를 가져가는 위치를 식별할 수 있습니다. 마우스 추적 히트 맵의 기본 유형은 다음과 같습니다.

히트맵 클릭

클릭 맵은 방문자가 웹 페이지에서 클릭한 위치를 보여줍니다. 방문자가 링크 라고 생각할 수 있지만 그렇지 않은 영역 또는 인기 있는 링크를 발견하는 데 특히 유용합니다.

예를 들어 페이지에서 가장 많이 클릭된 요소가 제품 사진임을 밝혀낸 이 특정 지도를 살펴보겠습니다.

Brothers Leather Supply Company의 설립자인 Adam Kail은 이 지도가 제품 페이지 디자인과 관련하여 비즈니스의 초점을 어떻게 변화시켰는지 설명합니다.

히트 맵은 모든 제품 페이지에서 훌륭한 이미지에 대한 필요성을 강화했습니다. 우리는 올바른 사본을 위해 노예였지만 지금은 올바른 이미지를 얻는 데 시간을 보냅니다. 각 이미지는 가방의 다른 용도나 각도를 보여줍니다... 미래의 고객들은 누군가가 메고 있을 때 가방이 가득 찼을 때 가방이 내부에 어떻게 보이는지 알고 싶어합니다.

궁극적으로 히트맵 분석의 목표는 사용자 경험을 최적화하는 데 사용할 수 있는 실제 방문자 행동을 발견하는 것입니다. 설명을 위해 휴대전화 클릭 후 방문 페이지에서 발생하는 또 다른 클릭 맵을 살펴보겠습니다.

빨간색 윤곽선을 보면 가장 많이 클릭된 전화가 스크롤 없이 볼 수 있는 몇 가지 덜 인기 있는 모델 아래에 있는 것을 알 수 있습니다. 그렇다면 이 지도를 사용하여 사용자 경험을 개선하려면 어떻게 해야 할까요?

접힌 부분에서 덜 인기 있는 모델 중 하나를 빨간색 윤곽선으로 표시된 모델로 교체합니다. 그렇게 하면 사람들이 그것을 찾기 위해 사냥할 필요가 없습니다.

클릭 후 방문 페이지 디자인과 가장 관련성이 높은 히트 맵은 VWO가 클라이언트인 Pair(현재는 Couple)에 대한 사례 연구에서 나온 것일 수 있습니다.

앱의 원래 홈페이지는 다음과 같습니다.

해당 홈페이지의 클릭 히트 맵은 다음과 같습니다.

이 히트맵에서 페어의 성장 마케터인 임청순이 한 일을 눈치채셨나요? 그는 말한다:

알고 보니 전환 버튼(AppStore 및 Google Play 링크)을 클릭하는 대신 상단의 탐색 모음을 클릭하는 사람이 너무 많습니다. 그래서 나는 전환 버튼 주위에 너무 많은 "산만함"을 갖는 것은 좋은 생각이 아니라는 이론을 세웠습니다.

그래서 전환 버튼 주변의 "산만함"을 제거한다는 이론을 기반으로 몇 가지 A/B 테스트를 수행합니다.

결과는?

• 버튼 위에 "무료 다운로드" 텍스트를 숨기면 전환율이 10% 증가했습니다.
• 탐색 메뉴를 숨기면 전환율이 12% 증가했습니다.

"너무 많은 주의를 산만하게 한다"는 곧의 이론은 전혀 꾸며낸 것이 아닙니다. 다른 여러 테스트에서 알 수 있듯이 탐색 링크는 전환율을 크게 낮출 수 있습니다. 클릭 후 방문 페이지에서는 디자인에서 제외하는 것이 가장 좋습니다.

위와 같은 클릭 맵은 클릭 신호 의도 때문에 특히 가치가 있습니다. 액션은 무작위보다 의도적일 가능성이 더 큽니다. 누군가가 클릭하면 특정 요소 또는 해당 요소에 해당하는 콘텐츠(CTA 버튼, "회사 소개" 링크 등)에 대해 자세히 알고 싶기 때문입니다.

열 지도 스크롤

"당신은 이 기사를 끝내지 않을 것입니다"는 2013년 Slate에서 출판된 기사의 제목이었습니다. 이 기사에서 저자 Farhad Manjoo는 Chartbeat와 온라인 매거진 간의 공동 히트 맵 분석 결과를 밝혔습니다. 기사를 통해 방법.

인상적인 86.2%의 참여가 스크롤 없이 볼 수 있는 부분 아래에서 발생했지만 25%의 사람들만이 픽셀 수 1600(대부분의 Slate 기사 길이는 약 2,000픽셀)을 넘어 스크롤했습니다. 이와 같은 통찰력은 특히 긴 페이지에서 스크롤 맵을 발견하는 데 도움이 됩니다.

클릭 후 방문 페이지 용어로는 판매 페이지일 가능성이 가장 높습니다. 전문적으로 작성된 이러한 설득력 있는 마케팅 자료는 엄청난 규모로 성장할 수 있습니다. 예를 들어, 이것은 5,000단어 이상입니다(전체 페이지를 보려면 여기를 클릭하십시오).

이와 같은 페이지의 스크롤 맵은 작성자에게 읽기 과정에서 사람들이 어디에서 이탈하는지 알려줄 수 있습니다. 이 데이터를 사용하여 제작자는 감소의 이유를 추측할 수 있습니다. 예를 들어 사본 부족, 성가신 광고 또는 배경색 변경 등이라고 Peep Laja는 말합니다.

강한 선이나 색상 변화가 있는 경우(예: 흰색 배경이 주황색으로 변하는 경우) 이를 '논리적 끝'이라고 합니다. 종종 사람들은 다음 내용이 이전 내용과 더 이상 연결되지 않는다고 생각합니다.

거기에서 최적화 프로그램은 사람들이 전체 페이지를 읽도록 하는 잠재적인 방법을 테스트할 수 있습니다. Nielsen Norman Group의 한 실험이 분명히 가능하다는 것을 보여줍니다.

드물지만 가능합니다.

위의 지도는 스크롤 깊이가 아닌 눈의 움직임에 대한 것임을 명심하십시오. 즉, 스크롤 맵에서 볼 수 있는 것보다 더 상세하며 방문자가 페이지 아래로 진행한 정도만 표시됩니다. 다음은 RJMetrics의 웹사이트에서 수행된 테스트의 예입니다.

색상별로 이 웹 페이지에서 가장 많이 본 영역은 다음과 같습니다.

• 하얀
• 빨간색
• 노란색
• 녹색
• 파란색

우리는 당신이 생각하는 것을 알고 있습니다: 어떻게 페이지의 맨 위가 중간보다 적게 볼 수 있습니까?

Chartbeat의 연구에 따르면 많은 사람들이 페이지가 로드되기 전에 스크롤을 시작하는 경향이 있어 맨 위를 놓칠 수 있습니다.

그들의 연구에 따르면 많은 페이지의 스크롤 없이 볼 수 있는 부분 바로 아래에서 참여도가 최고조에 달한다는 사실이 밝혀졌습니다.

그리고 이는 접힌 부분 근처의 영역이 빨간색인 반면, 접힌 부분의 많은 부분이 노란색인 이유를 설명할 수 있습니다.

이 지도에서 RJMetrics의 전 프론트엔드 개발자인 Stephanie Liu는 다음과 같은 가설을 세웠습니다.

내 가설은 버튼을 흰색 핫 스크롤 맵 영역으로 이동하면 원래 가격 페이지와 비교하여 디자인의 전환율이 더 높아지게 된다는 것이었습니다. 더 많은 사람들이 버튼에 더 오래 머무를 것이기 때문에 더 많은 사람들이 버튼에 주의를 기울일 것입니다.

원래 페이지는 다음과 같았습니다.

그녀가 만든 변형은 다음과 같습니다.

그 결과 전환율이 310% 증가했습니다.

이 스크롤 맵 테스트에서 두 가지 중요한 사항은 다음과 같습니다.

1. 스크롤 맵을 사용하면 사람들이 스크롤하는 이유를 알 수 없습니다 . 당신과 당신의 팀은 그것을 알아내기 위해 몇 가지 가설 테스트를 해야 할 것입니다.

2. 사람들이 하차하는 이유를 알 필요가 없는 경우도 있습니다. 목표가 항상 사람들이 더 깊이 스크롤하도록 하는 것은 아닙니다. Stephanie의 경우 CTA 버튼을 더 잘 보이는 영역으로 옮기는 것만으로도 RJMetrics의 전환율이 크게 높아졌습니다.

호버 히트 맵(이동 히트 맵이라고도 함)

마우스 커서가 있는 곳에서 눈이 움직입니다. 이는 "움직임" 히트 맵이라고도 하는 호버 히트 맵의 기반이 되는 일반적인 가정입니다.

이 지도의 정확도는 눈 움직임과 마우스 움직임 간의 상관 관계에 의존하며, 앞서 언급한 연구에서 약 84-88%가 될 수 있음을 보여줍니다. 그러나 다른 소식통은 그것이 그렇게 높다고 확신하지 않습니다.

2010년 Google의 Anne Aula 박사는 호버 히트 맵의 정확성에 대한 연구 결과를 발표했습니다.

• 6%의 사람들은 마우스 움직임과 눈 움직임 사이에 수직적 상관관계를 보였습니다.
• 19%의 사람들은 마우스 움직임과 눈 움직임 사이에 수평적 상관관계를 보였습니다.
• 10%의 사람들은 특정 페이지 요소 위에 마우스를 올려 놓고 주변 영역을 바라보았습니다.

Google과 Carnegie Mellon의 또 다른 실험에서는 마우스 움직임과 눈 움직임 사이에 64%의 상관관계가 있음을 발견했습니다.

말할 필요도 없이 움직임 히트맵에 대한 연구가 도처에 있습니다. 그러나 실제 응용 프로그램은 어떻습니까?

글쎄요, 그것도 여기저기서.

다음은 체크아웃 페이지를 최적화하는 데 사용된 호버 히트 맵 North Face입니다.

왼쪽에서 버전 A는 오른쪽 사이드바의 배너가 그 아래의 CTA 버튼(흰색 원)보다 더 많은 관심을 받고 있는 것으로 보입니다. 버전 B는 이를 고려하고 버튼으로 배너를 전환합니다(다시, 흰색 원).

그 결과 전환율이 62% 증가했습니다.

다음은 표시되는 또 다른 호버 맵입니다... 음... 직접 확인하세요.

이 지도에서 명확한 테이크아웃이 없는 것 같습니다. 많이 떠 있습니다. 어디에나.

전반적으로 호버 히트 맵 연구 및 실제 응용 프로그램에서 가장 중요한 것은 다음과 같습니다.

호버 맵을 사용하여 디자인에 정보를 제공하십시오. 그러나 EyeQuant의 Rory Gallagher는 "과도하게 일반화하지 마십시오"라고 말했습니다.

지도가 North Face에서 생성한 지도와 같다면 다음과 같이 A/B 테스트에 대한 귀중한 가설을 세울 수 있습니다.

“우리는 호버 히트 맵에서 체크아웃 페이지 CTA 버튼 위의 영역이 방문자의 관심을 더 많이 받고 있는 것으로 보입니다. 따라서 위의 프로모션 배너가 있는 버튼을 전환하면 결제를 늘릴 수 있다고 믿습니다.”

그러나 두 번째 히트 맵에서 테스트 가설을 개발하는 경우 확증 편향에 빠지게 될 것입니다. 단순히 테스트에서 특정 결과를 찾는 것은 무언가에 대한 믿음을 확인하기 때문입니다. 잘못된 정보 스트레치는 다음과 같이 보일 수 있습니다.

“우리는 호버 히트 맵에서 'How To'라는 단어가 스크롤 없이 볼 수 있는 다른 어떤 단어보다 더 많은 관심을 끄는 것 같다는 것을 알았습니다. 따라서 앞으로 모든 블로그 게시물 헤드라인은 'How To'로 시작하여 독자를 끌어들여야 한다고 믿습니다.”

"How to"는 헤드라인을 시작하는 좋은 방법이지만 이 테스트는 그것을 나타내지 않습니다. 회의적인 사고방식으로 히트맵 결과에 접근하고 분명한 이유가 있을 때만 테스트하십시오.

책임감 있게 히트맵 사용하기

히트 맵은 사람들이 웹 페이지를 사용하는 방법을 폭로하는 데 중요한, 그러나 그들은 그렇게하는 데 사용하는 유일한 도구해서는 안됩니다. 단독으로 사용자에 대한 불완전한 그림을 그리며 잠재 고객 행동의 유일한 지표로 사용자를 의존하는 것은 사용자를 오도할 가능성이 있습니다. Optimizely 팀은 다음과 같은 예를 제공합니다.

양식의 히트맵을 볼 때 사용자가 첫 번째 필드를 클릭하고 다음 필드에 대한 클릭이 더 적은 것으로 표시될 수 있습니다.

이는 사용자가 첫 번째 필드를 채운 후 프로세스를 중단하고 있음을 시사할 수 있습니다. 그러나 히트맵에 표시되지 않는 것은 사용자가 마우스가 아닌 키보드를 사용하여 양식 필드를 탭핑한 경우입니다.

이와 같은 이유로 히트 맵을 Google Analytics 또는 Instapage Analytics와 같은 다른 도구의 통찰력과 결합하면 잠재 고객이 클릭 후 방문 페이지에서 어떻게 행동하는지에 대한 완전한 이미지를 형성할 수 있습니다.

그러나 그 "완전한 이미지"가 가치가 있습니까? 충분한 사용자 데이터를 수집하지 않으면 그렇지 않다고 Peep Laja는 말합니다.

결과를 신뢰하려면 페이지/화면당 충분한 샘플 크기가 필요합니다. 대략적인 야구장은 디자인 화면당 2000-3000 페이지뷰입니다. 히트맵이 34명의 사용자를 기반으로 하는 경우 아무 것도 믿지 마십시오.

결국 히트맵은 데이터가 아니라는 것을 기억하는 것이 중요합니다. 그들은 단순히 쉽게 소화할 수 있는 방식으로 데이터 를 구성합니다 . 클릭, 스크롤 및 호버를 표시합니다. 이러한 마우스 움직임이 의미하는 바는 사용자가 결정해야 합니다.

항상 모든 광고를 개인화된 클릭 후 방문 페이지에 연결하여 고객 획득당 비용을 낮추십시오. 지금 Instapage Enterprise 데모에 등록하여 클릭 후 전용 페이지를 만드십시오.