히트맵을 사용하여 방문자가 웹사이트에서 무엇을 하는지 알아보십시오.

인간은 천성적으로 호기심이 많다. 호기심은 여러 면에서 우리를 가장 진화시킨 특성 중 하나입니다. 정보는 힘이고, 다른 사람에 대한 정보를 갖는 것은 웹 페이지 개발을 비롯한 다양한 분야에서 매우 유용합니다.

개인 정보 보호 세계의 어두운 면으로 들어가지 않고 웹 페이지를 관리하고 윤리적인 방식으로 호기심을 사용하여 성능을 개선하고 방문자가 이전보다 더 많이 페이지를 즐길 수 있도록 하는 방법이 많이 있습니다.

히트맵은 방문자가 웹 페이지에서 무엇을 하는지 발견하고 방문자가 웹 페이지와 상호 작용하는 방식을 보기 위한 기술입니다. 즉, 히트맵을 사용하면 방문자의 행동을 집계되고 익명으로 분석할 수 있습니다. 히트맵은 웹 페이지에서 커서의 움직임을 분석하여 따뜻한 색상으로 칠해진 페이지의 핫스팟을 보여주는 시각적 표현입니다.

또한 히트맵을 통해 웹사이트에 적용할 개선 아이디어를 얻을 수 있습니다. 우리는 무슨 일이 일어나고 있는지, 방문자가 무엇을 하고 있는지, 웹에서 무엇이 잘못되고 있는지, 어떻게 해결할 수 있는지에 대한 결론을 내리기 위해 히트맵에서 보는 데이터를 연구하기만 하면 됩니다.

WordPress에서 히트맵을 만드는 방법

요즘은 히트맵을 만드는 것이 매우 간단합니다. WordPress에서는 히트맵을 생성할 수 있는 플러그인만 사용하면 됩니다. 실제로 히트맵은 Nelio A/B Testing 사용자가 가장 요구하는 기능 중 하나입니다.

우리는 웹사이트에서 가능한 개선 사항을 계속 연구하기 위해 오랫동안 히트맵을 만들어 왔습니다. 예를 들어 Nelio의 메인 페이지에서 만든 최신 히트맵을 여기에서 보여드리겠습니다.

첫 번째는 새 히트맵을 만드는 것입니다. 이를 위해 다음 스크린샷에서 볼 수 있듯이 Nelio A/B Testing에서 새 테스트를 선택하고 관심 있는 페이지를 선택합니다.

그런 다음 플러그인이 방문자를 추적하고 정보를 자동으로 집계하도록 테스트를 시작하기만 하면 됩니다. 이 순간부터 새로운 히트맵이 점진적으로 생성되고 결과를 그래픽으로 볼 수 있습니다.

히트맵 결과

대표 방문자 수를 추적하면 히트맵 결과를 자세히 관찰할 수 있습니다. 방문자로부터 추출된 이 데이터에 대한 다양한 관점이 있음을 명심하십시오.

가장 일반적인 유형의 시각화는 분석된 페이지 상단에 일련의 따뜻한 색상 지점을 표시하는 히트맵 자체입니다. 이러한 핫스팟은 가장 많은 상호 작용을 받은 요소 위에 배치됩니다.

반면에 방문자가 떠나기 전에 아래로 스크롤하여 페이지를 얼마나 아래로 내려왔는지 따뜻한 색상으로 보여주는 스크롤 맵이 있습니다.

마지막으로, 우리가 일반적으로 찾을 수 있는 마지막 표현은 페이지에서 발생한 클릭을 점 구름 또는 색종이 조각으로 보는 것으로 구성됩니다.

이전 갤러리에는 당사 웹사이트의 메인 페이지를 분석할 때 플러그인이 생성한 완전한 히트맵, 스크롤맵 및 cofetti가 있습니다. 다음으로 이 세 가지 표현 모두에서 추출할 수 있는 정보의 일부 세부 정보를 자세히 살펴보겠습니다.

히트맵 세부정보

히트맵은 우리 홈페이지를 방문하는 사람들의 많은 활동이 페이지의 첫 부분에서 발생함을 보여줍니다. 우리는 각 플러그인의 특정 페이지로 우리를 데려가는 버튼에서 많은 상호 작용을 발견합니다. 이는 우리가 원하는 것입니다.

그러나 우리는 또한 많은 사람들이 첫 번째 접힌 부분에서 아래로 스크롤하도록 표시하는 화살표 기호를 클릭한다는 것을 발견했습니다. 안타깝게도 이 화살표는 표시일 뿐 클릭할 수 있는 요소가 아닙니다. 따라서 여전히 클릭하는 청중을 혼란스럽게 합니다.

해결책으로 화살표를 페이지를 자동으로 아래로 스크롤하는 버튼으로 변환하도록 선택할 수 있습니다. 이를 통해 사용자의 기대치를 현실과 일치시킵니다.

한편, 푸터 역시 많은 관심을 받고 있는 모습에 귀추가 주목된다. 이것은 일부 사용자가 페이지의 끝까지 자신이 찾고 있는 것을 찾지 못한다는 것을 암시하기 때문에 중요합니다. 특히 가장 핫한 분야는 바로 연락처다. 따라서 좋은 테스트 아이디어는 이 링크를 페이지의 더 눈에 띄는 영역으로 이동하여 필요한 것을 찾지 않고 떠나는 사람이 없도록 하는 것입니다.

스크롤맵 세부정보

스크롤맵은 대부분의 방문자가 절반 페이지 이상을 보지 못한다는 것을 보여줍니다. 이 정보를 통해 우리가 도출할 수 있는 주요 결론은 해당 지점의 콘텐츠가 누락되므로 관련이 없어야 한다는 것입니다.

우리 콘텐츠를 청중에게 더 매력적으로 만들고 그들이 떠나지 못하도록 하기 위해 한 가지 가능성은 더 시각적이고 역동적인 섹션을 표시하는 것입니다. 정적 콘텐츠는 눈에 잘 띄지 않아 방문자의 관심을 잃습니다. 이러한 이유로 이러한 섹션의 변경 사항을 제안하는 것은 향후 A/B 테스트에서 테스트할 수 있는 좋은 가능성이 될 수 있습니다.

색종이 조각 세부 정보

색종이 조각의 경우 테스트가 실행 중일 때 받은 모든 클릭과 함께 포인트 클라우드를 보여줍니다. 일반 히트맵과 비교하여 색종이 조각에는 각 개별 클릭에 대한 더 많은 정보가 포함됩니다.

우리는 클릭한 대부분의 방문자가 그렇게 하는 데 5초에서 10초 사이에 걸린 방법을 봅니다. 이 데이터를 아는 것은 매우 흥미로운 일입니다. 왜냐하면 우리가 그들의 주의를 기울여야 하는 시간에 대한 대략적인 측정값이 있기 때문입니다.

페이지가 복잡하고 이해하기 어려워 보일수록 더 많은 방문자를 잃게 됩니다. 이 정보는 페이지의 훨씬 간단하고 급진적인 버전을 제안하는 데 도움이 될 수 있습니다. 예를 들어, 더 적은 정보를 표시하고 바로 요점으로 이동할 수 있습니다. 그것은 우리가 다음에 시도할 수 있는 또 다른 가능한 A/B 테스트입니다.

또한 클릭할 수 없는 요소를 클릭하는 방문자가 있음을 알 수 있습니다. 특히 관련 섹션은 당사 제품을 사용하는 회사의 로고 목록 또는 당사 고객의 평가입니다.

이 섹션에는 클릭 가능한 요소가 없지만 그럼에도 불구하고 클릭이 발생합니다. 다시 말하지만, 이것은 혼란스러울 수 있으므로 사이트의 동작이 방문자의 기대와 일치하는지 확인하는 것이 중요합니다. 이를 방지하기 위해 해당 섹션을 클릭할 필요가 없도록 이 섹션의 디자인을 수정하기로 결정할 수 있습니다. 또는 스크롤맵의 정보를 고려하여 섹션을 삭제할 수도 있습니다. 여기에서 이미 웹의 이 부분에서 사람들을 잃는 것을 확인했습니다.

히트맵에서 중요한 것은 방문자가 사이트와 상호 작용하는 방식을 분석하여 개선을 위한 아이디어를 얻는 것입니다. 이런 식으로 우리는 실패한 동작을 수정하고 나중에 A/B 테스트로 테스트할 수 있는 가능한 개선 사항을 페이지에 제안할 수 있습니다.

Nelio A/B Testing의 무료 버전을 사용하면 여기에서 설명한 것처럼 간단하게 WordPress 페이지에 히트맵을 만들 수 있습니다. 시도해보십시오. 그런 다음 방문자의 행동을 시각적으로 표현하여 귀하의 경험과 어떤 정보를 추출할 수 있는지 알려주십시오.

Unsplash에서 Almos Bechtold의 추천 이미지.