안녕하세요, 뷰저블 UX Reseacher입니다.

지난 포스트( https://forum.beusable.net/ko/post/456 )에서는 웹페이지 UX 분석을 위한 첫 단계로 '페이지 등록 절차' 대해 다뤘다면,

오늘은 분석 목적에 따라 활용할 수 있는 다양한 기능들과 지표 활용 방법에 대해 설명해 보려고 해요.

일반 가이드에는 없는, UX Researcher만의 해석 꿀팁들이 담겨있으니 주목해 주세요! :)

1. PC/Mobile : Click/Tap Heatmap

유효클릭/탭 : 사용자의 전환율 파악 가능
무효클릭/탭 : 사용자의 pain-point 파악 가능
- 무효 클릭이란, 링크가 아닌 곳에 클릭이 발생한 경우를 말함

☻ 분석 팁!

분석에 활용되는 주요 유효 클릭 지표와 해석 방법

지표	정의	분석 Tip
Click(Tap) Rate	Clicks/페이지 내 전체 clicks(%): 전체 페이지 내 클릭(탭) 비중	전체 관심 중, 해당 콘텐츠에 대한 비중으로 해석
Click/(Tap) PV Rate(%)	Click PV(Unique Click)/전체 PV(%): 해당 콘텐츠를 클릭한 PV의 규모	도달률/노출률 대비 Click PV Rate를 확인하면, 실제 해당 콘텐츠의 전환 성과로 볼 수 있음
Hover to Click Rate	Clicks / Hover (%): 관심을 가진 사람 중 클릭으로 이어진 비중	낮다면? 왜 관심으로 이어지지 않았을지 검토 필요 높다면? 고객의 니즈에 부합한 콘텐츠로 해석
Hover to Click time	Hover한 사람이 클릭까지 걸린 시간	짧다면? 결정까지 어려움이 없었다고 해석 길다면? 사용자가 망설였거나, 이해하지 못했을 가능성
Scroll to Click/Tap(%)	특정 콘텐츠/영역에 도달한 사용자 대비 해당 요소를 클릭한 사용자의 비율	사용자 도달 대비 전환 효율
Double tap rate	전체 더블 클릭 대비 해당 요소에 발생한 더블 클릭 비중	100%라면? 해당 요소에만 더블 클릭이 발생했다고 해석 로딩 속도가 느리진 않은지 클릭이 원활하게 이뤄졌는지 점검 필요

2. PC : Move Heatmap

- 사용자들의 관심도 파악 가능

Move 히트맵을 Click/Scroll 히트맵 지표들과 교차 분석하면 인사이트를 쉽게 얻을 수 있어요!

클릭 vs 호버
- 호버 > 클릭 : 관심이 많으나 전환으로 이어지지 않은 콘텐츠
- 호버 < 클릭 : 관심이 적으나 많은 전환으로 이어진 콘텐츠
- 클릭 = 호버 : 관심도 많고 전환도 높은 콘텐츠

도달 vs 호버
- 사용자 도달률이 낮은데 높은 관심의 콘텐츠 확인
- 사용자 도달률이 높은데 낮은 관심의 콘텐츠 확인

3. PC/Mobile: Scroll Heatmap

(1) 히트맵 색상

컨텐츠 영역까지 얼마나 많은 사용자가 도달했는지 파악 가능
- 주요 컨텐츠까지의 도달률이 너무 낮다면, 위치 조정 등을 통해 우선 스크롤 노출률/도달률 자체를 높이는 방안 검토 필요

(2) Attention Graph (도달률X체류시간)

구간별로 얼마나 숙독/주목했는지(체류시간) 파악 가능
- 캐러셀이나 자동 애니매이션처럼 컨텐츠가 많은 구간인데 오히려 주목도가 낮아지거나 비슷하다면, 컨텐츠 개수나 영상 길이를 줄이는 방안 검토 필요
신규/재방문, 유입경로별 주목도를 비교해보면 각 그룹별 관심도 차이를 확인할 수 있음
- 페이지 내 상대적인 주목도를 표현한 것이기 때문에, 다른 두 그룹의 체류시간을 비교할 땐 각각의 구체적인 수치를 계산하여 비교가 필요함

[Desktop] Scroll Heatmap내 주목도 그래프 > 주목도가 낮아지는 구간

(3) 페이지 효율

Average Fold를 기준으로 상/하단 영역의 클릭/호버수 비교를 통해 페이지 효율을 파악
- 만약 페이지 하단의 길이가 더 짧은데 클릭/호버 인터랙션이 더 많다면, 하단의 효율이 더 좋다고 판단할 수 있음

(4) 스크롤 중단율

사용자가 어느 구간에서 가장 많이 중단하는지, 이탈률이 가장 높은 콘텐츠 구간을 구체적인 픽셀로 확인이 가능함
- 구간별 막대 길이(도달률)의 차이가 클 수록 중단율이 큰 구간으로 해석할 수 있음

4. Mobile: Zoom/Swipe Heatmap

(1) Zoom

어떤 컨텐츠/영역에서 더 자세히 또는 확대해 보고싶은 니즈가 있었는지 파악 가능
- 이커머스 사이트에서 특정 상품 상세 이미지에 Zoom in 인터랙션이 발생했다면 추가 이미지 제공이 필요하진 않을지 검토 필요

(2) Swipe

어떤 컨텐츠/영역에서 여러번 스와이프가 일어났는지 파악 가능
- 상/하 스와이프: 화살표가 수가 많다면 해당 영역을 여러번 재탐색 했다고 해석할 수 있음
- 좌/우 스와이프 : 스와이프가 일어날 곳이 아닌데 발생했다면? 착각을 주고 있진 않은지 UI 점검 필요

5. Path Plot

사용자 그룹별 탐색 과정, 경로를 비교할 수 있음
- 평균 사용자 그룹: 평균적인 활동 범위를 가진 그룹
- FANs 사용자 그룹 : 적극적으로 페이지(서비스)를 탐색한 그룹
  - 상위 25%의 높은 활동률을 보이는 그룹으로 ‘잠재 고객’으로 이해할 수 있음
- 전환한 사용자 그룹 : 설정한 그룹 중 전환한 사용자의 탐색 흐름
  - 어떤 콘텐츠를 살피고 전환했는가 파악
- 전환하지 않은 사용자 그룹 : 설정한 그룹 중 전환하지 않은 사용자의 탐색 흐름
  - 사용자들의 pain-point 파악

☻ 분석 팁!

Fans group & Non-Conversion로 세그멘팅하여,

충성도는 높지만 전환하지 않은 유저들의 특징 파악하고자 할 때 활용할 수 있음

6. Live Heatmap

SPA 구조의 페이지 혹은 햄버거 메뉴와 같이 동적인 요소, 페이지 길이가 가변적일 때 데이터 확인 & 컨텐츠의 효율 측정 가능

[Desktop] Live Heatmap > 숨어있는 레이어와 햄버거 메뉴의 노출 및 클릭 지표

(1) 노출률

요소가 사용자 화면에 노출된 비율
- 만약 페이지 길이가 가변적이라 스크롤 데이터 확인이 어려운 경우 라이브 히트맵의 Click PV Rate/노출값으로 대체 가능
- 노출 자체가 너무 적다면, 레이아웃 변경 등을 통해 노출 자체를 늘리는 것을 먼저 검토

(2) 관심율

호버 PV/노출 PV (%)
해당 콘텐츠를 본 사용자가 어느정도의 관심을 보였는가
- 컨텐츠에 대한 소비 효율을 확인할 수 있음

7. User Analytics

(1) 유입경로(직전 URL로 구분)

사용자의 특성과 니즈 파악 가능
도메인 상이 여부에 따라 내부/외부로 구분
- 외부 유입 중 각 유입(검색/SNS 등) 채널별 비중은 어떤지 확인
- 각 유입(검색/소셜)이 전체 중 차지하는 비중은 얼마인지 확인 가능

(2) 전환경로

내부 유입이 많은 경우
- 내부에서 어떤 정보를 획득하고 다른 페이지로 전환된 유저인지 파악 가능
외부 유입이 많은 경우
- 어떤 곳에 관심을 보이는지, 외부 사용자 특성 파악 가능

8. Segmentation

(1) Referrer(유입경로)

직전 URL로 구분됨
유입 경로별로 사용자의 특징 비교 가능

(2) 신규/재방문 사용자

신규/재방문 사용자 별로 히트맵의 특징 비교 가능
콘텐츠 제공 목적, 타겟에 따라 신규/재방문 유저를 구분하여 볼 수 있음

(3) Segmenting CTA

CTA를 클릭한/클릭하지 않은 사용자에 따른 특징 비교 가능
구매로 전환한 사용자와 그렇지 않은 사용자 비교 분석
클릭한 사용자가 유입된 직전 URL
- 마케팅 효과 측정 or 마케팅을 집행할 채널을 정할때 활용

9. Funnel / Session 리포트

(1) Funnel 분석

개선하고자 하는 프로세스를 퍼널로 등록하여 페이지별 전환율 확인
- ‘최종 목적지까지의 전환율’ 향상을 위한 개선점 파악 가능
- 각 페이지별 이탈률을 계산하여 이탈률이 가장 높은 구간의 페이지를 발견하고 개선점 찾아보기
- 경로별 User Flow를 확인하여 예상대로 유저들이 움직이는지 파악 가능

뷰저블 홈페이지 Funnel 등록 : 메인 > Features > Pricing(최종 목적지)

(2) Session Report

개별 사용자 상세 탐색 분석
- 전환된, 전환되지 않은 유저들의 개별 흐름을 확인하여 pain-point 분석 가능

[Session Report] Features 페이지에 방문한 한 고객의 탐색 흐름

오늘은 다양한 뷰저블의 기능들을 지표 해석에 실제로 활용하는 꿀팁들을 알려 드렸는데요,

직접 한번 활용해보시고 분석 결과 해석에 어려움이 있거나, 다른 현업자들의 의견이 궁금하다면 댓글과 포럼 게시판에 남겨주세요! :)

UX Case Study [2] : 분석 목적에 따라 히트맵 / 주요 지표 활용하기

UX Case Study [2] : 분석 목적에 따라 히트맵 / 주요 지표 활용하기