GA와 UX 히트맵으로 정보 제공형 웹사이트 최적화하기

안녕하세요 뷰저블입니다. 오늘은 정보 제공형 웹사이트의 특징과 어떻게 하면 데이터를 올바르게 분석할 수 있는지에 대해 알아보고자 합니다. 

정보 제공형 웹 사이트란 무엇일까요? 말 그대로 고객에게 ‘정보’를 제공하는 웹 사이트입니다. 예를 들면 뉴스나 일간지 웹사이트, 특정 제품, 아이디어, 개인을 알리는 웹 사이트가 될 수도 있습니다. 고객에게 자신이 누구이며 무엇을 하는지를 알리는 데 목적을 두며 중소기업 홈페이지 나 브랜드 사이트가 가장 대표적입니다. 회사에 대한 텍스트와 이미지, 서비스 제공 목록, 자세한 상세 연락처 정보가 5~8개 페이지 분량으로 구성되어있으며 보통 이커머스와 달리 ‘구매’ 과정이 일어나지 않습니다.

위 이미지는 대표적인 정보형 웹사이트라 볼 수 있는 포그리트 홈페이지(뷰저블과 뷰저블리 개발사)입니다. 회사 미션과 주요 제품, 연락처를 소개하는 COMPANY, 구성원을 소개하는 TEAM, 언론보도 내용을 소개하는 PRESS RELEASE, 인사이트 블로그 (현 브런치) 링크로 구성되어 있습니다.

위 이미지는 일본의 여성복 메이커 earth music & ecology의 브랜드 사이트입니다. 이 브랜드 사이트도 정보형 웹사이트라고 볼 수 있습니다. CF와 갤러리, 뉴스, 공지사항, 스태프 블로그, 인터넷 샵 링크로 메뉴가 구성되어 있으며 브랜드 스토리를 중심으로 홈페이지 정보가 크게 구성되어 있는 것을 알 수 있습니다. ‘구매’를 할 수 있는 샵은 도메인을 분리하여 해당 웹 사이트에서는 오로지 브랜드에 대한 ‘정보’만을 전달하고 있습니다. 

정보형 웹사이트는 얼마나 사용자에게 정확하고 충분하면서도 흥미를 끌만한 정보를 제공하는지가 가장 중요합니다. 그렇기 때문에 반복적으로 페이지에 방문하는 것이 ‘정보에 대해 긍정적으로 생각’한다는 신호가 되고, UV 당 PV 수, 이탈률(Bounce Rate) 등을 KPI로 삼곤 합니다.

그럼, 정보 제공형 웹사이트는 어떻게 데이터를 분석하여 최적화해나가면 좋을까요?

STEP 1. 구글 애널리틱스로 KPI (이탈률, UV 당 PV 수 등) 확인하기

STEP 2. UX 히트맵으로 심리/인지 관련 데이터 파악하기

STEP 3. 가설 수립을 통해 웹 사이트 UI 최적화하기

STEP1. 구글 애널리틱스(GA)로 이탈률 확인하기 

구글 애널리틱스로 먼저 이탈률을 파악할 차례입니다. 이탈률 외에 다른 KPI를 설정하였다면 해당 KPI에 맞게 지표를 파악할 수 있습니다. 저는 이탈률을 KPI로 삼았기 때문에 이탈률을 확인할 예정입니다. 구글 애널리틱스의 [행동 > 사이트 콘텐츠 > 방문 페이지] 리포트로 이동하여 주요 랜딩 페이지 별 이탈률을 확인합니다. 

*하단 스크린숏은 구글에서 제공하는 데모 계정 페이지입니다. 

가장 세션 수가 많은 페이지의 이탈률을 확인합니다. 그런 다음 세그먼트별 이탈률을 확인합니다. 유입 키워드별로도 확인하면 좋습니다. 여기까지 확인하면 어떤 페이지에서 주로 이탈률이 높은지 병목 대상을 발견할 수 있었을 것입니다. 그럼 여기서 한 가지 질문이 생길 것입니다.

왜 사용자는 이 페이지에서 이탈할까?

그리고 사용자가 이탈하는지는 어떻게 알 수 있을까요? 구글 애널리틱스만으로는 사용자의 심리적인 측면 또는 인지적 측면까지는 알 수 없습니다. 네, 그렇습니다. 다음으로는 UX 히트맵 데이터를 종합적으로 살펴볼 차례입니다.

STEP2. UX 히트맵으로 정성적인 인지/심리 데이터 파악하기 

UX 히트맵으로 이탈률이 왜 낮은 지를 알아보기 위해서는 다음 질문들이 필요합니다.

질문 1. 사용자의 관심을 끄는 정보를 제공하는가? 
질문 2. 사용자의 불안감 또는 의문점들을 해소하는가? 

그리고 다음 UX 히트맵으로 질문들에 대한 답을 찾아볼 수 있습니다.

질문 1. 사용자의 관심을 끄는 정보인가? 

ㄱ. 콘텐츠가 올바르게 전달되고 있는가? 뷰저블리의 노출 히트맵
ㄴ. 콘텐츠를 사용자가 올바르게 인지하는가? : 뷰저블리의 무브 히트맵과 관심 히트맵
ㄷ. 사용자가 콘텐츠를 충분히 숙독하는가? : 뷰저블의 Activity Stream, 스크롤 히트맵 내 어텐션 그래프

질문 2. 사용자의 의문과 불안감을 해소하는가? 

ㄱ. 불안감 또는 의문을 해소할 콘텐츠가 존재하는가? : 뷰저블리의 무브 히트맵과 관심 히트맵
ㄴ. 사용자가 콘텐츠를 충분히 숙독하는가? : 뷰저블 스크롤 히트맵 내 어텐션 그래프

뷰저블리의 클릭 히트맵으로는 사용자의 최종 목적지와 콘텐츠 소비 규모 (Click PV Rate)을 파악할 수 있습니다. 무브 히트맵과 함께 확인한다면 사용자의 관심이 실제 소비로 이어졌는지를 파악할 수 있습니다.

뷰저블리의 무브 히트맵으로는 사용자의 응시 지점을 알 수 있습니다. CHI 논문에 의하면 사용자의 응시 지점이 마우스 커서 움직임과 약 84% 일치한다고 합니다. 사용자가 어떤 콘텐츠를 확인하였는지 아이트래킹을 대신하여 파악할 수 있습니다.

다음으로는 뷰저블리의 노출 히트맵으로 콘텐츠가 사용자에게 실제로 얼마나 노출되었는지 해당 비율을 파악할 수 있습니다. 뷰저블에서는 스크롤 히트맵의 PV 도달률로 해당 정보를 대체할 수 있습니다. 

뷰저블리의 관심 히트맵은 노출된 콘텐츠 중 사용자가 실제 마우스 커서를 호버 한 정보입니다. 어떤 콘텐츠를 실제로 얼마나 관심을 갖고 확인하였는지 관심도를 정량적으로 측정할 수 있습니다.

이 외에도 아래 뷰저블의 스크롤 히트맵에서는 실선으로 보이는 어텐션 그래프(Attention Graph)라는 것을 확인할 수 있습니다. 구간별 체류시간에 따른 사용자 숙독 정보를 파악할 수 있습니다.

STEP 3. 가설 수립을 통해 웹 사이트 UI 최적화하기

다음으로는 분석한 데이터를 바탕으로 왜 이탈률이 높은지에 대해 가설을 수립한 후 UI를 최적화할 타이밍입니다. 가설 수립 방안에 대해서는 본 인사이트 블로그에서 다수 소개한 적이 있습니다. 글을 참고하여 가설을 수립해보세요.

참고자료
https://brunch.co.kr/@beusable/144
https://brunch.co.kr/@beusable/142
https://brunch.co.kr/@beusable/143

정보형 웹 사이트는 정보의 질을 단순 KPI, 즉 지표만으로는 파악할 수 없습니다.
제공하는 콘텐츠 또는 정보에 대한 사용자의 반응이 어떠한지를 파악할 필요가 있습니다. 

질문 1. 사용자의 관심을 끄는 정보를 제공하는가? 
질문 2. 사용자의 불안감 또는 의문점들을 해소하는가? 

위 두 가지 질문을 UX 히트맵으로 확인해보세요.
그리고 여러분의 웹 사이트를 효과적으로 최적화해보세요.