UX 디자인 - 히트맵 데이터로 사용자 행동 분석하기

히트맵 이해하기

히트맵이란 무엇일까

히트맵은 특정 정보를 이미지 위에 열 분포 형태의 그래픽으로 표현하는 것을 의미하고, 시각화된 화면을 통해 설명해주며, 웹 사이트와 중첩해서 보여주기 때문에 사용자의 입장에서 사고할 수 있도록 도와준다.

보통 웹 서비스를 만들 때, 사용자가 사이트를 차근차근 훑어보고, 제공되는 기능을 전부 확인하며 자신에게 필요한 옵션을 선택한다고 상정한다. 하지만, 실제 사용자의 이용 행태는 전혀 그렇지 않고, 생각보다 포기가 빠르며 눈에 띄는 요소들을 단숨에 선택하고 꼼꼼히 보지 않는다.

따라서, UX 디자이너는 실제 사용자의 이용 행태를 제대로 관찰하고 분석해야 하는데, 히트맵은 디자이너의 의도가 얼마나 사용자에게 전달되었는지를 파악하는 효율적인 도구가 된다.

아이트래킹을 대체할 수 있는 히트맵

UX에서는 전통적으로 아이 트래킹을 확용하여 웹 사이트상 사용자의 행태와 의도를 파악해왔다. 하지만, 고가의 장비가 필요하고 참가 대상 사용자를 모집해야 하므로 사용하기 어렵고, 이를 위해 마우스 움직임이 아이 트래킹의 정보를 대체할 수 있어 마우스는 사용성을 평가하는 아이트래킹의 좋은 대체 수단이 될 수 있다.

---

{😎마우스 클릭 분석하기} - 여기부터!

마우스 클릭은 클릭의 대상이 어떤 요소이며 어떤 기능을 하는지에 따라 크게 무효 클릭, 유효 클릭, 전환 클릭, 비전환 클릭으로 분류된다. 마우스 클릭 히트맵은 클릭이 가장 많이 발생한 콘텐츠일수록 흰색 또는 빨간색에 가깝게 표시된다.

반면, 클릭이 발생하지 않은 영역은 화면 위에 표시되지 않거나 파란색 또는 검은색에 가깝게 표시된다.

마우스 무브 히트맵의 범주 또한 클릭 히트맵과 동일하다.

 

무효 클릭 (대상 : 클릭커블 하지 않은 요소)

무효 클릭은 클릭 또는 이벤트 대상이 아니기 때문에 기능적으로 의미가 없다고 볼 수 있는 영역을 클릭한 경우를 가리킨다.  사용자가 무의식적으로 빈 곳을 클릭하는 무효 클릭은 의미 없는 클릭이라서 분석에서 걸러내야 하지만, 때로는 클리커블한 요소라고 오해하고 클릭하지 않은지를 살펴 보아야 한다.

 

요소의 정보가 서비스 목적이나 의도와 무관할 때

무효 클릭이 발생하면 사용자의 행동 흐름이 중단될 우려가 있을 뿐아니라 사용자가 실패감을 느낄 수 있고, 클리커블한 요소라고 오해하지 않도록 UI를 검토하고 사용자가 무효 클릭 발생 없이 행동을 이어나갈 수 있도록 디자인 개선이 필요하다.

 

요소의 정보가 서비스 목적이나 의도와 연관 있을 때

클릭 영역에 대한 콘텐츠 상세 페이지를 마련하고 페이지로 연결할 수 있는 버튼을 두면 사용자 경험은 물론 전환율을 함께 개선할 수 있다. 또한, 콘텐츠 상세 페이지가 아직 마련되지 않은 사이트라면, 콘텐츠 정보를 보완함으로써 궁금증을 해소할 수 있는 장치를 제공해야 한다.

 

유효클릭 (대상 : 클릭커블 한 요소)

페이지 이동처럼 기능이 제공되는 클리커블한 요소를 클릭하는 것을 가리킨다. 유효 클릭은 전환 클릭과 비 전환 클릭으로 다시 분류된다. 유효 클릭 데이터를 "마우스 이동" 데이터와 함께 비교하여 확인하면, 콘텐츠를 확인한 사용자 가운데 어느 정도 규모의 사용자가 기능 및 콘텐츠 탐색을 지속했는지 그 비율을 파악할 수 있다.

유효 클릭 비율과 마우스 이동 모두 높음

콘텐츠 접근성과 주목도가 높을 뿐만 아니라 사용자 목적에 가장 부합한 콘텐츠, 실제 기획 의도를 담고 있는 콘텐츠일수록 좋음

 

유효 클릭 비율이 낮으나 마우스 이동은 높음

콘텐츠 접근성과 주목도는 높지만 사용자 목적에 부합하지 않는 콘텐츠라고 할 수 있다. 해당 콘텐츠가 설계상에서 더욱 강조되어야 한다면 레이블명을 변경하는 등 사용자가 원하도록 소구해야 한다.

 

유효클릭 비율은 높으나 마우스 이동은 낮음

콘텐츠 접근성과 주목도는 낮지만, 해당 콘텐츠를 확인한 사용자 입장에서 높은 비율로 선택받았다고 할 수 있다. 레이아웃을 변경하거나 페이지 상단으로 올려 접근성을 개선하면 전환율이 개선된다.

 

유효클릭 비율과 마우스 이동 모두 낮음

콘텐츠에 대한 접근성과 주목성이 낮을뿐더러 전환으로 이어지는 사용자의 목적과 연관도 낮다. 따라서, 너무 많은 정보가 강조되는 산만한 페이지가 되지 않도록 해당 콘텐츠가 페이지의 목적과 관련이 있을 경우에만 개선 대상으로 삼고, 그렇지 않다면 유지해도 괜찮다.

전환 클릭 (대상 : 클릭커블한 요소, 기능 : 있음(페이지 이동, 새 창 열림))

전환 클릭에서 말하는 전환의 기준은 페이지 URL의 이동 또는 변경에 따라 달라지고 다른 페이지나 탭, 창으로 이동되는 링크, 버튼의 클릭을 전환 클릭이라고 한다. 전환 클릭은 사용자가 페이지 내 가장 마지막으로 체류한 위치이자 마지막으로 소비한 콘텐츠라고 할 수 있다.

예를 들어, 스크롤 데이터를 통해 스크롤을 중단한 원인이 원하는 콘텐츠가 없거나 마음에 들지 않아서가 아니라 마음에 드는 콘텐츠로 전환해서 더는 스크롤 하지 않음으로 해석할 수 있다. 

전환율 데이터와 함께 살펴보면 사용자가 실제 어떤 콘텐츠를 가장 많이 클릭해서 전환했는지, 어느 위치를 주로 클릭했는지 등을 알 수 있다.

 

비전환 클릭 (대상 : 클릭커블한 요소, 기능 : 있음(페이지 및 새 창으로 이동하지 않는 기능, 레이어 열림, 옵션 등)

비전환 클릭은 페이지 URL이 변경되지 않지만, 디자이너가 설계한 인터랙션이 제공되는 경우를 가리킨다. 비전환 클릭 데이터는 사용자가 어떤 콘텐츠에 관심을 가지며 어떤 인터랙션에 시간을 할애하는지 알 수 있고, 비전환 클릭 요소는 클릭이라는 이벤트 이후에 추가적인 정보가 제공되기에 전환 클릭과 달리 사용자가 이후 페이지 내에서 어떤 행동을 이어나갔는지 계속 관찰할 필요가 있다.

😎여기까지!

---

사용자의 전반적인 관심도 이해하기

콘텐츠의 클릭 수로 사용자의 관심도를 확인할 수 있다. 전체 클릭 수 대비 요소의 클릭 수 비율로 콘텐츠가 사이트 내 차지하는 중요도를 이해할 수 있는데 콘텐츠 클릭수의 절댓값 수치만으로는 판단기준이 주관적일 수 있으므로 꼭 전체 수치와 함께 살펴보아야 한다. 하지만, 클릭 자체를 사용자의 목적과 관심으로 이해하고 이를 기준으로 한 비중값과 순위를 통해 사용자의 관심과 목적이 어떻게 분산되었는지 확인할 수 있다는 점에서 유용하다.

UI는 위치나 디자인에 따라 사용자의 접근성과 주목도에 큰 영향을 미친다. 예를 들어, 콘텐츠 사이즈가 크거나 페이지 상단에 위치할수록 사용자가 콘텐츠를 확인할 확률은 더욱 높아진다. 또한 이미지처럼 시선을 끄는 강렬한 요소에 따라 사용자의 접근성과 주목도가 영향을 받는다.

페이지 내 콘텐츠별 관심 분산도 이해하기 - UI 요소의 면적당 평균 클릭 수 확인하기

크기 정보를 배제하기 위해 콘텐츠별 클릭 수가 아닌 면적당 평균 클릭 수를 비교한다. 이를 통해, 콘텐츠 면적이나 위치와 상관없이 사용자가 선택한 요소의 순위를 파악할 수 있다. 일반적으로, 클릭 수 자체는 큰 요소가 더 많겠지만, 작은 요소의 면적당 평균 클릭 수가 더 많다면 성과가 훨씬 좋다는 것을 나타낸다.

단순히 면적당 평균 클릭 수의 높고 낮음을 판별하는 것이 아니라 총면적은 좁으나 평균 클릭 수가 높은 콘텐츠, 총면적은 넓으나 평균 클릭 수가 낮은 콘텐츠로 선별하여 검토하는 것이 중요하다.

페이지 내 콘텐츠별 관심 분산도 이해하기 : 실제 도달 사용자 대비 클릭 비율 확인하기

사용자는 스크롤로 이동하며 긴 페이지를 탐색하며, 각 사용자의 스크롤 이동 범위는 다양하게 나타난다. 따라서, 동일한 페이지라 하더라도 배치된 위치에 따라서 콘텐츠에 도달한 사용자의 규모 또한 상이하다. UX디자이너는 중요한 콘텐츠를 주로 상단에 배치함으로써 사용자가 스크롤 하지 않고도 쉽고 빠르게 해당 콘텐츠를 확인할 수 있도록 유도해야 하는데, 한정된 화면 때문에 가려지는 콘텐츠가 생기기도 한다. 따라서, 사용자의 스크롤 도달률을 사전에 파악해서 도달률에 따라 적절한 콘텐츠를 배치한다.

마우스 스크롤 이동 분석하기

사용자의 기본화면 높이 고려하기

웹 사이트에서 스크롤로 가려지지 않은 채 사용자에게 가장 먼저 보이는 영역을 "Above the Fold"라고 불리고, 반대로 스크롤로 가려진 영역은 "Below the Fold"라고 한다. 사용자의 기본 화면 높이를 파악하면 콘텐츠 개선기준을 설정할 수 있고 강조해야 하는 콘텐츠를 기본 화면 높이 내에 배치하면 전환율 향상에 도움이 된다.

사용자가 스크롤을 얼마나 이동했는지에 대한 스크롤 도다률을 파악하면 얼마나 많은 사용자가 하단 콘텐츠를 확인했는지 알 수 있다.

마우스 스크롤 데이터 교차 분석하기

서로 다른 히트맵을 교차 분석하면 단편적인 현황을 벗어나 깊이 있는 사용자 행동 및 원인을 발견할 수 있다. 스크롤 히트맵과 마우스 무브 히트맵, 클릭 히트맵을 교차 분석하면 사용자가 왜 스크롤을 중단하거나 진행했는지 그 의도를 밝혀낼 수 있다.

스크롤 도달률을 체류 시간과 함께 분석해야 하는 이유

스크롤 도달률 만으로는 사용자가 그저 훑어보는 것인지, 자세히 읽고 지나갔는지 알 수 없다. 해당 영역에서의 체류 시간과 함께 분석하면, 도달된 콘텐츠가 실제로 어떻게 소비되었는지를 알 수 있다. 뷰저블은 체류 시간을 어텐션 그래프(Attention Graph)로 시각화해서 스크롤 히트맵 위에 표시한다. (어텐션은 말 그대로 사용자의 주목도를 의미 - x축은 체류시간, y축은 사용자의 페이지 내 도달 위치)

스크롤 도달률과 어텐션 그래프 교차 분석하기

스크롤 히트맵과 어텐션 그래프를 함께 분석하면 사용자가 스킵했는지, 콘텐츠를 천천히 훑었는지를 판단할 수 있다. 사용자가 관심 있게 살핀 콘텐츠가 충분한 시간 동안 소비되었는지 확인하기 위해 스크롤 도달률과 어텐션 그래프에 더해 무브 히트맵을 교차 분석해야 한다.

사용자가 좀 더 콘텐츠에 집중하게 하기 위해서는 애니메이션이나 동영상 등을 삽입하거나 이미지를 개선하여 사용자의 시선이 머무르도록 유도해야 한다.

{Average Fold 분석하여 서비스 개선하기}

Above the Fold 이해하기

마우스를 스크롤하지 않아도 볼 수 있는 기본 화면을 UX에서는 "Above the Fold"라고 부른다. UX 디자인에는 3-second rule이라는 법칙이 있듯, Above the Fold에서도 3-second rule이 적용된다. 웹 사이트의 Above the Fold에 대해 UX 디자이너는 어떻게 짧은 시간내에 사용자에게 중요한 정보를 전달하고 관심을 끌 수 있을지, 다음 행동으로 유도할 수 있을지를 고민해야 한다.

 

Above the Fold의 역할

Above the Fold는 사용자의 추가 탐색을 유도하는 기준이 되고, 추가 탐색이란 웹 페이지에서 콘텐츠를 더 둘러보거나 목적지를 향해 하단으로 스크롤을 내리는 등의 적극적인 탐색 활동 등을 의미한다. 따라서, 제한된 기회 속에서 얼마나 사용자의 목적에 부합되는 정보를 제공할 것인지, 눈길을 사로 잡을 것인지가 매우 중요하다.

즉, Above the Fold는 사용자의 목표를 달성시키기 위한 가장 중요한 영역이면서 페이지 탐색을 유도하는 첫 관문이다.

{Fold 정보를 UX디자인 개선에 활용하기}

Fold값 선정하기

Fold 값을 가장 쉽게 선정하는 방법은 평균을 의미하는 Average Fold값을 활용하는 것, 다만 Average Fold 영역은 다양한 사용자의 해상도에 따라 일부 사용자에게 적용되지 않을 수 있어서 절반 이상의 사용자에게 최소한의 Fold값을 찾고자 한다면 다음 항목들을 검토하여야 한다.

1. 평균 해상도와 Average Fold를 비교하여 "작업 표시줄"처럼 제외되는 높이가 얼마인지 확인해야 한다.

2. 해상도 분포 및 순위를 검토해서 최대한 많은 사용자가 보장되는 최소 해상도 높이를 찾는다.

3. 최소 해상도에서 빠지는 높이를 고려한다. 이 높이가 바로 가장 많은 사용자를 보장 가능한 Above the Fold이다.

 

사이트 목적 및 사용자의 흥미 요소에 가장 부합하는 콘텐츠 위치 선정하기

사용자는 Above the Fold 영역 내 콘텐츠를 통해 추가 탐색을 진행할 것인지 판단한다. 따라서, 영역 내에서 주요 CTA나 콘텐츠, 흥미를 유발할 수 있는 요소를 효율적으로 배치해야 한다.

만약, 중요 콘텐츠가 스크롤을 해야 나온다면 사용자는 매우 번거롭다고 느낄 것이다.

콘텐츠가 계속되고 있음을 암시하기

만약, 페이지의 Fold 경계에 여백이 있다면, Above the Fold 영역을 확인한 사용자는 Below the Fold로 이어지는 콘텐츠를 예상하지 못할 것임, 따라서 Fold에 여백을 두지 않고 하단 콘텐츠의 일부가 걸쳐지도록 배치하여 사용자가 하단을 의식하도록 유도한다.

 

패스 플롯으로 사용자 탐색 순차 분석하기

UX 분석에서는 아이트래킹으로 사용자의 탐색 순차를 파악하기 위해 사용자의 응시 지점과 지점별 체류 시간을 산출하여 이 흐름을 게이즈 플롯으로 표현한다.

게이즈 플롯이 개별 사용자의 흐름을 파악한다면, 패스 플롯은 저체 사용자는 물론 다양한 세그먼트별 사용자의 평균 행동 흐름을 파악한다.

패스 플롯은 평균 사용자의 콘텐츠 소비 흐름을 파악할 수 있는데, 구체적으로는 다음과 같은 의미를 지닌다.

1. 원을 연결 짓는 선, 원 안의 숫자 : 마우스 포인터 이동 흐름의 순차

2. 각 원의 위치 : 순차별, 마우스 포인터 체류가 가장 집중된 콘텐츠의 위치

패스 플롯은 개별 사용자의 행동 흐름 정보를 추적한 다음 전체 사용자 행동 흐름을 통계 처리한다.