[웹기획 / UX 툴 소개] 핫자(Hotjar)_시각적인 데이터분석 툴로 데이터드리븐 UX(Data-Driven UX)

[웹기획 / UX 툴 소개] 핫자(Hotjar)

시각적인 데이터분석 툴로 데이터 브리븐 UX(Data-Driven UX)

 

 

예전에는 히트맵이라고해서 사이트의 클릭을 시각화해서 보여주는 툴 정도는 알고 있었는데, 핫자(hotjar)는 조금 더 고도화된 시각자료를 보여주는 툴이라고 생각됩니다. 

 

히트맵 혹은 웹페이지를 시각적으로 보여주는 툴들이 많이 있지만 그 중에서 우선 핫자(Hotjar)를 소개해보려고 합니다. 

 

히트 맵(heat map)

히트 맵(heat map)은 열을 뜻하는 히트(heat)와 지도를 뜻하는 맵(map)을 결합시킨 단어로, 색상으로 표현할 수 있는 다양한 정보를 일정한 이미지위에 열분포 형태의 비쥬얼한 그래픽으로 출력하는 것이 특징이다. 주로 웹사이트의 방문자를 분석하는 웹로그분석에 많이 사용하는 분석 기법으로 웹페이지에서 발생하는 방문자의 마우스 클릭을 열분포 형태의 이미지로 변환하여 사이트 이미지위에 겹쳐서 보여주며, 클릭이 많이 발생하는 영역은 붉은색으로 클릭이 적게 발생하는 영역은 푸른색으로 표현한다.

-위키백과 - 

 

ㅣ 핫자(hotjar) 소개

 

 

'핫자는 빠르고 시각적인 방법을 통한 여러분의 사용자를 이해할 수 있도록 도와줍니다. 그리고 팀원들이 통찰력을 얻는데 필요한 모든 것 그리고 올바른 변화를 만들어 낼 수 있습니다'라고 홈페이지에서 소개하고 있습니다. 

확실히 시각적으로 보여주는 것은 직관적이기 때문에 모두가 이해하기 쉬운 것 같습니다. 그렇기 때문에 특별한 지식이 없이도 눈으로 보고 이해하기 쉬운것 같습니다. 그래서 이렇게 시각적으로 보여주는 툴이 모두에게 인기를 받는 듯합니다. 

 

 

핫자는 다음과 같은 직무에서 유용하게 사용할 수 있다고 설명하고 있습니다. 

• 마케터 ㅣ  고객만족도추적(CSAT), 순추천지수(NPS), 고객의목소리(VOC)
• 프로덕트 매니져 ㅣ 세션기록을 보며 추측성으로 하는 작업을 없애고,  사람들이 실제로 제품을 어떻게 사용하고 있는지 확인을 할 수 있습니다. 
• UX 디자이너 ㅣ 사용자와 공감하고 어디에서 장애가 발생하는지 확인을 할 수 있습니다. 사용자 행동을 보고 적절한 타이밍에 적절한 질문을 할 수 있도록 합니다. 

실제 기업들의 활용사례들을 사이트에서도 확인이 가능합니다. 

핫자의 홍보자료로 쓰이는 사례들이기 때문에 어느정도 과장된 측면이 없지 않아 있겠지만은 어떤식으로 핫자를 활용해서 사용했는지 알아 볼 수 있는 곳이기 때문에 참고사례정도로 살펴보면 좋을거 같습니다. 

 

사례 보는 곳 : https://www.hotjar.com/customers

 

 

ㅣ 핫자(hotjar)의 기능소개

 

① 행동시각화

방문자의 동기 부여와 욕구를 나타내는 가장 강력한 지표인 클릭, 탭 및 스크롤 동작을 시각적으로 표현하여 사용자가 원하는 사이트에 대한 관심, 관심 및 행동을 파악합니다. 

 

• 클릭 히트맵

 

• 커서 이동 히트맵

 

• 스크룰 히트맵

 

• 히트맵 다운로드와 공유하기

 

• 디바이스별로 나눠서 보기

 

② 방문자 기록

사용자가 보는 것들을 확인 합니다. - 사이트에서 실제 방문자 행동을 기록을 통해 추측을 제거하십시오. 방문자의 클릭, 탭, 및 마우스 움직을 보고 사용편의성 관련해 발생하는 문제를 식별 할 수 있습니다. 

 

• 실제 사이트 방문자의 세션을 재생합니다. (실제 사용자의 움직임을 재생함)

 

• 태그 기록하기

 

• 사용자 작업을 보고 메모 가능

 

• 다른사람과 기록 공유

 

• 기록을 쉽게 필터링 가능

 

• 키 입력 및 텍스트 숨기기(보안관련 이슈 제어)

 

③  전환 유입 경로

방문자가 어디로 들리고 있는가? 대부분의 방문자가 사이트를 떠나는 페이지와 단계를 파악하여 개선 및 테스트의 가장 큰 기회를 찾을 수 있습니다. 

 

 

• 무제한 단계 정의 가능

퍼널타입설계예시 

 

E-commerce: Homepage > Product Pages > Cart > Checkout > Thank You Page
News/Blog: Homepage > Article Pages > Subscribe Page > Success Page
Web App: Homepage > Trial Signup Page > Interface > Upgrade Page > Thank you page
Lead Generation: Category pages > Landing page with form > Thank you page

 

 

• 퍼널과정 녹화 보기

 

⑤ 피드백 설문

행동의 이유 이해- 웹사이트의 성과와 경험을 향상시키는 것은 방문자들이 무엇을 원하는지 그리고 무엇이 그것을 성취하는 것을 방해하고 있는지를 이해하는 것에서 시작됩니다. 웹 및 모바일 사이트의 특정 방문자를 타겟으로 질문을 할 수 있습니다. 

 

• 사이트 방문자로부터 직접 피드백 받기

 

• 추천고객지수(NPS)를 포함한 여러 질문 유형

 

• 피드백 및 결과 시각화

 

 

• 사용자 지정 가능한 위젯

 

⑥ 피드백 수신 가능

즉각적인 시각적 피드백 - 방문자에게 웹 사이트 또는 앱에 즉각적인 시각적 피드백을 남길 수 있는 쉬운 방법을 제공하십시오. 사람들이 무엇을 사랑하고 미워하는지 확인하고, 문제를 파악하고, 성장 기회를 찾으십시오. 

 

• 상황에 따른 피드백

 

• 시각적 피드백 대시보드

 

• 모든 페이지에 대한 감정 모니터링

 

• 사용자 지정 가능한 위젯

 

⑦ 설문조사 

고객을 더 잘파하기 - 간편한 편집기를 사용하여 응답이 가능한 자체 설문조사를 작성하십시오. 모든 장치에서 실시간으로 응답을 수집하십시오. 웹 링크, 이메일 또는 방문자가 사이트를 포기하기 직전에 설문조사를 배포하여 반대의견이나 우려사항을 발견하십시오.

 

• 사용하기 쉬운 기기간 설문조사 만들기

 

• 추천고객지수(NPS)를 포함한 여러 질문 유형

 

• 쉽게 사이트 방문자를 초대

 

• 질문별 결과 시각화

 

ㅣ 핫자(hotjar) 이용 가격

 

① 개인사용자 : 개인프로젝트와 낮은트래픽의 사이트 사용

BASIC

1일 2,000 페이지뷰까지 지원

- 리미티드 리포트 제한 : 300개의 녹화와 각 3개씩의 히트맵, 퍼널, 서식, 투표, 설문자를 지원함

- 사용자의 제한은 없음

- 365일 동안 데이터 보관 : 자동 삭제 프로세스를 시작하기 전에 데이터가 캡처 된 날짜부터 365일 동안 데이터 유지

 

PLUS

1일 10,000 페이지뷰까지 지원

- 30일간 환불 가능

- 리포트 제한 없음

- 사용자의 제한은 없음

- 365일 동안 데이터 보관 : 자동 삭제 프로세스를 시작하기 전에 데이터가 캡처 된 날짜부터 365일 동안 데이터 유지

- 15일간 무료 시험 버전 사용 가능

 

② 기업사용자 : 기업을 위한 모든사이즈의 기능 제공

 

1일 / 20,000페이지 뷰 / 89달러

1일 / 50,000페이지 뷰 / 189달러

1일 / 120,000페이지 뷰 / 289달러

1일 / 400,000페이지 뷰 / 589달러

1일 / 800,000페이지 뷰 / 989달러

1일 / 2,000,000페이지 뷰 / 별도 연락 진행

 

- 30일간 환불 가능

- 핫자 로고 삭제 가능(설문조사, 투표, 히트맵 공유, 녹화공유)

- 제한없는 팀 사용자

- 진보된 기능 접근 허용 : 자동 녹화 태그, 페이지 타겟팅 및 JavaScript를 사용한 트리거, 페이지 타겟팅 및 레코딩 노트

- 리포트 제한 없음

- 15일간 무료 시험 버전 사용 가능

- 365일 동안 데이터 보관 : 자동 삭제 프로세스를 시작하기 전에 데이터가 캡처 된 날짜부터 365일 동안 데이터 유지

 

② 에이젼시 : 클라이언트사를 다루는 에이젼시와 컨설턴트사

 

- 하나의 중앙 계정에 무제한 클라이언트 사이트

- 클라이언트 사용자에게 데이터 보기 및 관리 초대

- 할인 가격 제공 : 비즈니스 계획에 사이트를 2개이상 추가할 경우 10% 할인 혜택

- 로고로 Hotjar 인터페이스 브랜드 변경

 

지금까지 핫자에 관해서 알아보았습니다. 

이번 글은 소개에 관한 글 중심이었기에 스크립트 설치등에 관한 글은 적지 않았습니다. 

저도 이렇게 핫자 사이트를 보면서 하나하나 정리하다보니 몰랐던 기능들까지 알게 된거 같습니다. 

단순히 히트맵만을 사용하는게 아니라 퍼널까지 보면서 핫자의 기능을 사용한다면 더 고도화된 데이터 드리븐이 가능할거 같다는 생각이 들었습니다. 

 

모두들 얘기하는 말이 있습니다. 

툴은 툴일뿐입니다. 툴을 어떻게 사용하냐가 더 중요합니다!

 

아래는 핫자 사이트 주소입니다!

https://www.hotjar.com/

Hotjar | Behavior Analytics Made Easy | Website Heatmaps & More