brunch

매거진 웹사이트 사용자의 UX 분석

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 뷰저블 Beusable Oct 11. 2017

히트맵으로 사용자의 관심 콘텐츠와 소비 흐름 파악하기

- 뷰저블 히트맵 활용 방안 : 메인 페이지 분석

안녕하세요 뷰저블입니다. 오늘은 뷰저블의 다양한 히트맵 기능들을 활용한 실전 분석 방안을 소개해드리겠습니다. 뷰저블을 활용하면 여러분 웹 사이트의 신규 콘텐츠 전략을 수립할 수 있습니다. 콘텐츠와 콘텐츠 레이블이 기획한 의도대로 사용자에게 소비되고 있는지를 파악하고, 예상하지 못했던 인기 콘텐츠를 발견함으로써 사이트 개선 및 최적화를 실시할 수 있습니다. 어떻게 할 수 있는지 자세히 알아볼까요?

1. 데이터 수집 기간 : 2017년 9월 1일 ~ 9월 30일 (30일간)

2. 페이지 특징 :

먼저 분석을 실시하기에 앞서 사이트가 지니는 특징과 목표가 무엇인지를 정의 내려야 합니다. 뷰저블 메인 페이지는 기존 뷰저블 서비스 사용자의 로그인 창구이기도 하지만, 주로 신규 방문자에게 서비스를 소개하는 역할을 담당합니다. 최종적으로는 뷰저블이 어떤 서비스인지를 파악함으로써 서비스 가입 또는 문의하기를 유도하는 것이 목표입니다. 즉, 이 메인 페이지는 '대문'입니다. 가게 앞에 서 있는 고객에게 더 들어와서 구입을 할 것인지 말 것인지를 유도하는 것과도 같다고 볼 수 있습니다. 어떤 상품을 파는 가게인지 빠른 시간 안에 캐치할 수 있어야 할 것이고, 본격적으로 들어와 쇼핑을 할 수 있도록 (다른 페이지로 전환할 수 있도록) 매우 매력적으로 보여야 하겠죠.

3. 히트맵을 통한 페이지 현황 파악 및 개선 방안 도출 :

뷰저블 메인 페이지에는 70%가 넘는 사용자가 신규 방문자이며 86.6%가 데스크톱에서 접속하고 있습니다. 이 현황에 기반하여 더욱 유의미한 결과를 도출하기 위해 ‘데스크톱 사용자’와 ‘신규 방문자’를 세그먼트로 사용하였습니다.

먼저 클릭 히트맵과 무브먼트 히트맵, 스크롤 히트맵을 살펴보도록 하겠습니다.

1. 사용자의 주요 관심 콘텐츠 영역 파악하기

클릭 히트맵, 무브먼트 히트맵, 스크롤 히트맵

(1) 클릭 히트맵을 살펴보면 대다수의 클릭이 상단 AVERAGE FOLD 영역에서 잡히는 것을 알 수 있습니다.

마찬가지로 (2) 무브 히트맵에서도 상단에 마우스 이동이 활발하게 일어나며 (3) 스크롤 히트맵 상으로도 체류시간이 가장 높게 나타납니다.

뷰저블 메인 페이지 신규 방문자의 1~5위까지 클릭 UI 컴포넌트 순위

위 이미지는 신규 방문자의 UI 컴포넌트 1~5위까지의 클릭 순위를 나타낸 표입니다. Sign in, Try it free, Try Beusable 등 상단 CTA와 GNB 메뉴가 순위에 잡혔습니다.

개선 방안 : 추후 페이지 개편 시에 가장 많은 사용자 도달과 콘텐츠 소비가 일어나는 ‘AVERAGE FOLD 상단 영역’에 중요 콘텐츠를 배치하는 것이 바람직합니다. 하나의 예시로 아래 이미지를 소개해 드립니다. 지난 9월 말 진행하였던 데이터 드리븐 UX 세미나의 이벤트 공지사항 팝업을 상단에 게재하였습니다.

뷰저블 메인 페이지에 게재하였던 세미나 홍보용 팝업

2. 기획한 의도대로 콘텐츠가 소비되는지 파악하기

AVERAGE FOLD 하단에서 일어나는 주요 클릭 콘텐츠로는 기능 소개 영역의 UX Heatmap (34 Clicks), Reporting Heatmap (6 Clicks), A/B Testing (6 Clicks)이 있습니다. 기획 의도와 다르게 UX 히트맵과 Reporting Heatmap, A/B Testing 세 가지에 사용자가 많은 관심을 갖고 있다는 것을 알 수 있습니다. 다른 기능 콘텐츠의 클릭수는 1~2에 그쳤습니다.

한 가지 더 발견한 점이 있습니다. 아래 이미지를 봐주세요. 이 기능 소개 영역보다 스크롤 도달률이 낮은 (더 하단에 있음) 뷰저블 브런치 콘텐츠의 클릭수가 배 이상 높았습니다.

뷰저블 브런치 콘텐츠의 클릭수가 기능 영역 콘텐츠의 클릭수보다 배 이상 높습니다.

이 브런치 글은 매주 콘텐츠가 꾸준히 업데이트되고 있기 때문에 사용자의 이목을 많이 끌 수 있겠으나, 페이지의 우선순위를 따져보면, 기능 영역 콘텐츠의 클릭수가 더 높은 것이 바람직합니다.

개선 방안 : 먼저 사용자가 관심 있어 하는 기능 세 가지의 UI 컴포넌트 순서를 변경하거나 소개 레이블을 더욱 강화할 필요가 있습니다. 실제로 뷰저블에서는 사용자의 관심 콘텐츠에 맞게 주요 마케팅 키워드로서 히트맵과 A/B Test를 강조하고 있습니다.

3. 사용자의 콘텐츠 소비 흐름 파악하기

다음으로는 액티비티 스트림을 살펴보겠습니다. 액티비티 스트림은 사용자의 체류시간과 이동경로를 시각화한 그래프입니다. (1) 사용자의 행동이 GNB 영역에 주로 집중되는 것을 알 수 있으며 (2) 기능 영역까지는 내려오지만 (3) 유효구간을 벗어나 (매우 소수의 사용자만이 행동을 보였으며 체류시간 또한 짧음) 사실상 사용자들은 GNB 영역에만 머무른다고 해석해도 됩니다.

이렇게 사용자의 행동이 GNB 영역에 머무르는 것이 좋을까요? 그렇기 않습니다. 어떻게 보면 기능에 매우 많은 관심을 보인다고 해석할 수 있겠지만 ‘무엇을 클릭해야 할지 망설이는 행동’으로도 해석할 수 있기 때문입니다. 특히 ‘Why Beusable?’과 ‘Features’ 메뉴를 많이 왔다 갔다 합니다. 이 두 기능의 차이가 무엇인지를 망설일 수도 있겠네요.

개선 방안 : Why Beusable? 과 Feature의 차이를 명확히 알 수 있는 메뉴명으로 개선하거나 마우스를 가져다 대었을 때 어떤 페이지인지를 유추할 수 있는 문장 등을 제공한다면 사용자 행동이 개선되고 두 메뉴에 대한 전환율이 올라갈 것이라는 가설을 수립할 수 있습니다.

뷰저블을 활용하면 여러분의 웹 사이트에서 사용자가 관심을 갖는 콘텐츠가 무엇인지, 망설이는 지점은 없는지, 의도하지 않았던 인기 콘텐츠는 없는지 등을 파악할 수 있습니다.

지난 뷰저블 브런치를 통해 활용방안 연재 글을 4회 차까지 진행했었는데요 차주부터 계속 연재를 이어나가도록 하겠습니다. 차주에는 ‘전환율 증대를 위한 GUI 개선 포인트’를 어떻게 찾아낼 수 있는지를 소개하겠습니다. 많은 기대 바랍니다. 감사합니다.

뷰저블을 통해 서비스 내 사용자 경험(UX)에 영향 끼치는 문제점을 발견하세요.

뷰저블이라면 그 많은 문제점들을 '새로운 비즈니스 기회'로 바꿔드릴 수 있습니다.

경쟁사는 이미 시작했습니다!