라이브 클릭 히트맵으로 뷰저블 소개 페이지 분석하기
뷰저블리(Beusably)로 패럴렉스 페이지와 캐러셀 UI 분석해보기
안녕하세요 뷰저블입니다. 오늘은 지난 3월 5일 론칭한 뷰저블리(Beusably)로 패럴렉스 페이지의 UX 데이터를 함께 분석해보고자 합니다. 뷰저블리는 데스크톱, 태블릿, 모바일 디바이스에 최적화된 웹 사이트를 모두 지원할 뿐만 아니라 반응형 및 적응형, SPA, 패럴렉스 웹 사이트와 같은 Rich UI도 분석할 수 있습니다.
뷰저블리에 대해 자세히 알아보기
뷰저블리 공식 홈페이지
뷰저블의 강점을 소구 하는 Why Beusable? 페이지
https://www.beusable.net/why'Why Beusable?' 페이지를 함께 분석해보겠습니다. 뷰저블리의 클릭 히트맵으로 실제 뷰저블 페이지를 둘러보았습니다. 영상을 재생해주세요. (*음악이 재생됩니다.)
기획자의 의도와 맞아떨어지는 사용자 행동 흐름
Why Beusable?은 뷰저블 서비스의 강점을 소구 하는 페이지로 기획 의도대로라면 사용자는 메인을 본 후 이 'Why Beusable?' 페이지로 유입되어, 더욱 상세한 기능을 알아볼 수 있는 'Features' 페이지로 이동해야 합니다. 패럴렉스 페이지인 것이 특징이고 캐러셀 UI가 있습니다.
위 이미지에서 1번을 봐주세요. 클릭 히트맵에서 가장 클릭수가 높은 UI 영역입니다. 클릭은 사용자가 링크를 통해 다른 페이지로 '전환'하였다고 해석할 수 있는데요, 이 페이지에서 사용자가 기획자의 의도대로 'Features'로 많이 이동하고 있다고 볼 수 있습니다. 그럼 사용자는 어디에서 이 페이지를 방문한 것일까요? 2번은 유입경로와 %를 알 수 있는 드롭다운 리스트입니다. 해당 유입 경로별 사용자 행동도 분석할 수 있죠. 절반 가까운 사용자가 뷰저블 메인에서 들어왔습니다. 역시 기획자의 의도대로 사용자의 행동 흐름이 보였네요.
이 외에 가격정보를 알려주는 Pricing 페이지에서도 꽤 높은 비율로 들어왔는데요, 왜 사용자가 Why Beusable? 페이지로 이동했는지를 살펴볼 필요가 있습니다.
클릭이 일어나지 않는 패럴렉스 페이지
다음으로는 마우스를 스크롤하여 상세 페이지를 살펴보겠습니다. 다른 페이지로 바로 이동할 수 있는 '원' 아이콘에는 클릭 히트맵이 잡히지만, 콘텐츠 영역에는 클릭이 거의 일어나지 않았다고 볼 수 있습니다.
클릭을 유발하는 콘텐츠가 없기 때문에 클릭 없이 마우스 스크롤만 사용하여 페이지를 보거나, 특정 페이지를 다시 보고 싶을 경우 오른쪽에 있는 원형 아이콘을 직접 클릭하여 확인한다고 볼 수 있겠네요.
맨 마지막 페이지에는 캐러셀 영역이 있고 다양한 고객 사례를 클릭하여 확인할 수 있습니다. 클리커블한 요소가 있다 보니 아무래도 명확히 사용자가 클릭하고 있음을 클릭 히트맵으로 확인할 수 있죠. 오른쪽 화살표 버튼을 이용하여 콘텐츠를 확인한다는 것을 알 수 있네요. 또 자세한 클릭수를 보아 사용자는 다양한 고객사례 중에서도 삼성전자를 제외하고 '제일기획' 사례를 많이 클릭한 것으로 보아, 제일기획 콘텐츠를 궁금해한다고 해석할 수 있습니다.
마우스 무브 히트맵과 교차 분석하여
사용자의 관심과 목적이 일치하는지 파악하기
클릭 히트맵으로 살펴본 고객사례 페이지클릭 히트맵을 마우스 무브 히트맵과 함께 분석하면, 사용자가 관심은 가졌으나 전환하지 않은 콘텐츠가 무엇인지, 사용자의 목적과 관심이 일치하는 콘텐츠가 무엇인지, 관심도 없으며 목적에도 맞지 않는 콘텐츠는 무엇인지 등을 알 수 있습니다. 위 마지막 고객 사례 페이지를 마우스 무브 히트맵으로도 살펴보겠습니다.
마우스 무브 히트맵으로 살펴본 고객사례 페이지위 이미지는 같은 페이지를 무브 히트맵으로 전환한 예시입니다. 1번을 봐주세요. 대학교 로고가 있는데요, 클릭 히트맵은 저조하지만 사용자가 마우스를 올려 Hover 한 것을 알 수 있습니다. 이 경우 사용자가 관심은 가졌지만 결국 전환하지는 않았다고 해석할 수 있습니다. 2번 제일기획 로고를 봐주세요. 사용자가 적은 규모이지만 마우스도 어느 정도 Hover 하였으며 또한 클릭도 발생하였습니다. 사용자의 관심과 목적에 일치하는 콘텐츠라 해석할 수 있습니다.
뷰저블 또는 GA와 함께 분석하여 사용자 퍼소나 완성하기
페이지에서 사용자 이탈률이 어떠한지, 신규 방문자와 재방문 사용자의 비율은 어떤지 등을 알려면 어떻게 해야 할까요? 뷰저블리의 자매 서비스인 뷰저블 애널리틱스 또는 GA로 분석할 수 있습니다. 이미 뷰저블리에 스크립트 코드가 삽입되었다면 별도의 뷰저블 스크립트 코드를 추가로 삽입할 필요 없이 바로 페이지를 등록하실 수 있습니다.
뷰저블 애널리틱스의 PV 및 UV 정보예를 들어 이 Why Beusable? 페이지는 월요일에 사용자가 많이 유입되기 시작하여 화요일에 정점을 찍습니다. 신규 사용자의 비율이 재방문 사용자보다 훨씬 더 높습니다. PV, UV 정보 외에도 사용자의 행동 흐름과 환경 정보를 알 수 있어 퍼소나를 완성하는 데 도움됩니다.
뷰저블리는 가볍고, 쉬우며 빠르게 '사용자 행동 정보'를 분석하는데 탁월한 서비스라고 말할 수 있습니다.
뷰저블 또는 구글 애널리틱스와 함께 사용한다면 그 시너지 효과는 배가 될 것입니다. 지금 바로 등록하여 쉽고 빠른 UX 데이터 분석을 시작하세요.
뷰저블을 통해 서비스 내 사용자 경험(UX)에 영향 끼치는 문제점을 발견하세요.
뷰저블이라면 그 많은 문제점들을 '새로운 비즈니스 기회'로 바꿔드릴 수 있습니다.
경쟁사는 이미 시작했습니다!
UX 데이터 분석을 위한 All in one 툴 : 뷰저블 홈페이지
https://www.beusable.net/
실제 웹 사이트 위에 UX 데이터를 시각화합니다 : 뷰저블리 홈페이지
