안녕하세요.
서비스 기록자입니다:)

오늘은 뷰저블 핵심 기능인 히트맵을 알아보고,

뷰저블 웹사이트 UX를 사례로 분석해 보겠습니다.

데이터 분석 초보자의 UX 분석 과정과 내용을 공유해

관심 있는 uXer분들에게 도움이 되었으면 합니다.

그럼 시작해 보겠습니다!!

히트맵(Heatmap)

먼저 히트맵이란 히트(Heat) + 맵(Map)의 합성어입니다.

용어의 이미지에서 유추할 수 있듯이 열 분포 그래프와 같은 형태를 띠고 있습니다.

사용자의 마우스 움직임을 열 분포도로 변환해 분석 대상 웹사이트 화면 위에 그래프를 겹쳐 보여줍니다.

뷰저블 move / scroll 히트맵

이렇게 사용자가 분석 대상 웹사이트 화면에서 어떤 마우스 움직임이 있었는지

실제 사용자의 이용행태를 직관적으로 파악하고 분석할 수 있어요.

히트맵을 통해 기획, 디자인의 의도가 얼마나 사용자에게 전달되었는지 효율적으로 분석할 수 있습니다.

특히 사용자 경험을 해체하고 분석하는 UX 업계에서는 전통적으로 사용자가 디지털 화면을 어떻게 스캔하는지

아이 트래킹(Eye tracking)을 활용해 사용자 행태와 의도를 파악해 왔다고 합니다.

하지만 고가의 장비나, 실험 대상을 모집해 진행하게 되므로 한정적 데이터를 수집하게 되는 불편함이 있었죠.

그런데 실제로 사용자의 마우스 활동이 눈 움직임을 대체할 수 있다는 연구결과가 나오기 시작합니다.

실제 CHI 학회에서 사용자 마우스 커서가 위치한 곳의 84%가 실제 아이 트래킹에서 측정된 응시 지점에 해당했다고 발표했습니다.

따라서 뷰저블은 마우스 움직임을 통해 사용성을 평가할 수 있도록

아이트래킹의 좋은 대체 수단으로 히트맵 기능을 제공하고 있습니다.

뷰저블 히트맵 종류

뷰저블 히트맵은 크게 2가지로 볼 수 있습니다.

리포팅 히트맵(Reporting Heatmaps)과 라이브 히트맵(Live Heatmap)입니다.

리포팅 히트맵(Reporting Heatmaps)
: URL 입력을 통해 캡처된 화면 위 분석 데이터를 보여주는 히트맵 기능.
해당 페이지의 마우스 클릭, 이동, 스크롤, 패스(path)에 따라 분석된 데이터와 그래프를 볼 수 있다.

라이브 히트맵(Live Heatmap)
: 실제 운영되고 있는 웹사이트 위에 뷰저블 데이터를 얹어 볼 수 있는 히트맵 기능.
라이브 히트맵에서 제공하는 데이터는 클릭, 이동, 노출, 사용자 관심도(interest)를 제공한다.
*주의할 점은 해당 데이터는 실시간 데이터가 아닌, 리포팅 히트맵 데이터와 마찬가지로 1~2시간 전 발생한 데이터이다.

마우스 클릭 분석하기

히트맵을 통해 마우스 움직임 중 클릭(click) 데이터를 분석해 보았습니다.

마우스 클릭 히트맵을 볼 때, 그래프에서 색상 범위를 아는 것이 중요합니다.

마우스 클릭 히트맵은 클릭이 가장 많이 발생한 콘텐츠일수록 흰색 또는 빨간색에 가깝게 표현됩니다.

또 그 반대로 마우스 오버 이벤트가 적은 영역은 파랗거나 검게 표시됩니다.

뷰저블 데모 계정을 통해 메인 화면의 마우스 클릭 데이터를 볼 수 있었습니다.

아래와 같이 클릭 데이터를 다운로드해 볼 수 있는데요.

이때 데이터 수집 기간과 디바이스, 사용자 타입, 마우스 움직임의 종류, PV와 UV 데이터를 함께 확인할 수 있습니다.

뷰저블 클릭 데이터

일단 화면에서 보면 가장 많은 클릭이 일어난 곳은 최상단 메뉴 네비게이션입니다.

이 영역은 마우스 클릭 색상 범위 중 가장 높은 빨간색과 흰색으로 표시가 되고 있습니다.

클릭 이벤트가 가장 많이 발생했다는 것을 알 수 있습니다.

메뉴 중에서도 Culture 메뉴가 1위, People 메뉴가 2입니다.

클릭 카운터와 랭킹 정보

그리고 중요한 점은 다음 페이지로 전환이 일어나는 요소에 클릭 이벤트가 많이 발생했다면

이를 유효 클릭이라고 볼 수 있고, 그중에서도전환 클릭에 해당한다는 점입니다.

기획 또는 디자인 의도대로 사용자를 다음 퍼널로 전환시키게 되었다면 성공적인 개선으로 측정될 수 있습니다.

또, 해당 화면에서 빨간색으로 유효 클릭이지만 비전환 클릭도 확인할 수 있었습니다.

바로 average fold 바로 아래 4grit에 대한 소개 섹션에 사용자들의 주목도가 눈에 띄게 나타납니다.

클릭까지도 이루어졌지만 해당 영역에는 전환될 요소가 없으므로 비전환 클릭 요소가 됩니다.

이를 통해 사용자들이 포그릿에 대해 궁금해한다는 점을 알 수 있었고,

사용자가 어떤 컨텐츠에 반응하는지 파악이 가능했습니다.

이렇게 꾸준한 분석을 통해 사용자들이 관심 있는 컨텐츠의 배치를 고려하고, 개선을 위해 내용을 참고할 수 있습니다.

오늘은 이렇게 뷰저블의 핵심 기능인 히트맵을 알아보았습니다.

다양한 데이터를 제공하고 있지만, 그중에서도 클릭 데이터를 보는 방법을 공유해 보았습니다.

다음 콘텐츠도 계속해서 히트맵의 다양한 데이터를 분석하는 내용으로 돌아오겠습니다:)

뷰저블 서포터즈 1기로 제품을 무료로 제공받아 작성된 솔직한 후기입니다.

[Data-Driven UX] 뷰저블 히트맵 알아보기 (feat. 초보자)

[Data-Driven UX] 뷰저블 히트맵 알아보기 (feat. 초보자)