brunch

라이킷 57 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 유저해빗 Nov 03. 2016

[데이터 분석] 링크가 없는데 클릭하는 사람들

히트맵 분석을 통한 유저해빗 UX개선 후기

*유저해빗은 Hotjar와 Crazyegg를 사용합니다. 해당 포스트는 Crazyegg 데이터를 활용해 히트맵 비교분석에 대한 내용을 작성하였습니다.

우리 서비스의 사용자가

가장 관심 갖는 콘텐츠는 무엇일까?

사용자가 어디를 많이 클릭했는지 어디에서 많이 머물렀는지를 아는 것은 결국 사용자가 서비스 내의 어느 부분에 관심이 많은지를 쉽게 파악할 수 있다는 것인데요. 사용자가 우리가 만든 서비스를 어떻게 탐색하는지 혹은 어느 부분에 관심이 많은지 보는 것은 의미가 있습니다. 더 나아가 히트맵이 보여주는 현상에 대해 왜 그런지 한 번 더 생각해보고 인사이트를 발견해낸다면 더욱 유용해질 것입니다.

분석 툴에서 제공하는 기능을 어떻게 활용하는지는 분석하는 대상이나 분석가에 따라 다른 인사이트를 발견하곤 할 텐데요. 유저해빗에서는 어떻게 히트맵/스크롤 분석을 어떻게 활용하고 있는지 소개해드리고자 포스트를 작성하였습니다. 유저해빗은 서비스를 개선하면서 사용자가 어떻게 반응했을지 궁금했던 점을 확인하고 데이터를 확인하면서 이상한 패턴을 발견해 개선 포인트를 도출하는 과정으로 진행하였습니다. 저희 유저해빗은 히트맵 데이터를 통해 어떻게 개선점을 파악하고 있는지 살펴보실까요?

Crazyegg가 제공하고 있는 Heatmap, Scrollmap, Confetti, Overlay 데이터를 통해 유저해빗의 UX 개선점을 파악해보도록 하겠습니다. Heatmap과 Scrollmap 페이지를 통해 사용자의 관심도를 전반적으로 살펴보고, 좀 더 정확한 클릭 데이터 확인을 위해 Confetti와 Overlay 페이지를 참고하였습니다.

클릭 히트맵/스크롤 분석을 통해 쉽게 알 수 있었던 내용

- 사용자가 페이지 내의 어느 부분을 가장 많이 클릭했는지 한눈에 알 수 있다.

- 사용자가 페이지 내의 어느 영역에 많이 머물렀는지 한눈에 알 수 있다.

- 링크가 없는 곳을 클릭하는 이상한 행동을 쉽게 알아낼 수 있다.

유저해빗의

개편 전-후 히트맵 비교분석

지난 2015년과 현재 개편된 2016년 유저해빗의 서비스는 어떤 차이가 있었을까요? 개편 후 효과 측정 및 개편 후에도 다음 개선을 위한 개선 포인트 도출하는 작업까지 진행해 보았습니다. 특히 페이지 내에 액션이 없는 텍스트나 이미지에 대해 사용자가 클릭하는 행위에 대한 개선점이 가장 쉽게 발견할 수 있는 것들이었는데요. 링크가 없는 곳에 클릭이 많았던 부분 먼저 살펴보도록 하겠습니다.

링크가 없는 곳에 클릭이?! (1)

[좌- Heatmap 메뉴에서 확인한 이상 클릭 | 우- Confetti 메뉴에서 확인한 여러 사용자의 클릭수]

우리 서비스의 사용자들은 첫 페이지에 들어와서 가격에 대한 정보, 기능 소개, 언론 속 유저해빗의 홍보기사 내용 등 두루두루 관심을 가지고 살펴보고 있었습니다. 특이했던 점은 '종합적인 UX 데이터 수집’이라는 문구에 클릭이 많았다는 것인데요. 링크도 없고 버튼도 아닌 텍스트에 클릭이 많았던 이유는 무엇이었을까요? 한 사용자가 반복해서 클릭했다면 한 사용자의 이상 행동일 수 있으므로 여러 사용자의 클릭인지 확인해보기 위해 Confetti 메뉴에서 고객을 구분해 사용자의 클릭을 점으로 표시하는 기능을 확인해보았습니다. UX라는 문구에 대한 사용자의 관심이라고 볼 수 있을까요? 우리 사용자는 UX 데이터에 대한 내용이 추가로 궁금했던 것일까요?

개선 포인트 01: '종합적인 UX 데이터 수집’과 관련한 콘텐츠 추가

링크가 없는 곳에 클릭이?! (2)

링크가 없는 이미지, 테이블 헤더를 클릭하는 사용자

개별 사용 흐름 페이지에서도 앞에서와 마찬가지로 어떤 링크나 액션이 없는 텍스트와 이미지를 클릭하고 있는 사용자들을 살펴볼 수 있었습니다. 테이블 헤더를 클릭하는 사용자들을 위해 정렬 기능을 추가하고, 평균 이동수 컬러를 클릭해보는 사용자를 위해 추가 정보 확인 기능을 추가하였습니다. 평균 이동수와 같은 경우, 추가 정보 확인뿐만 아니라 색을 구분해 필터를 거는 방법 등의 액션을 추가하는 방법을 고려해야겠습니다.

개선 포인트 02: 클릭에 대한 기대 액션 추가

링크가 없는 곳에 클릭이?! (3)

대시보드에서도 최하단까지 내려서 국가정보 테이블을 확인하는 사용자가 많지는 않지만 상단에 많은 사용자가 확인하는 영역에 비해 국가정보 테이블에 클릭수가 많다는 것을 의미 있게 볼 수 있습니다. 많은 사용자가 아무런 반응이 없는 테이블 위에서 1위 국가 정보와 기타 국가 정보를 클릭하고 있었습니다. 세부 지역 정보일 수도 있고, 지도정보와 연동해서 보고 싶어 했을 수도 있고, 1위 국가에 대한 필터링 걸린 데이터 분석을 원했을 수도 있습니다.

개선 포인트 03: 제공하는 테이블 정보에 대해 추가 기획

링크가 없는 곳에 클릭이?! (4)

앞서 말한 경우처럼 히트맵 데이터를 살펴보며 이상 행동을 발견해 인사이트를 제시할 수도 있고, 스스로 질문지를 만들어 데이터를 보며 확인하는 경우도 있었습니다. 제공하고 있는 우리의 서비스 내에서 사용자가 어떤 액션을 할까라고 고민을 하게 되는데요.

Q: 사용자는 지원 플랫폼에 소개된 로고를 클릭해서 SDK 설치 정보를 보고자 하지 않을까?

Q: 사용자는 고객사 로고를 클릭해서 어떤 고객사들이 유저해빗 서비스를 사용하고 있는지 고객사 정보를 얻고자 하지 않을까?

다음과 같은 질문에서 사용자의 클릭 행동이 있음을 발견했고 링크가 걸려있지 않은 이미지를 누르고 있는 사용자의 클릭 히트맵을 통해 사용자가 누르고 싶어 하는 욕구 뒤에 상세 정보 페이지 링크를 추가 개선하였습니다.

개선 포인트 04: 상세 정보 페이지로의 링크 연결

유저해빗의 사라진 기능 설명 페이지, 효과는?

개편을 하면서 기능 설명에 대한 별도의 페이지가 빠지고 메인화면에 간단히 설명하는 방식으로 업데이트를 했는데요. 개편 후의 메인 홈 화면의 스크롤 맵 살펴보면 개편된 2016년의 랜딩페이지를 사용자가 더 많은 콘텐츠를 살펴봤음을 알 수 있었습니다. 하단에 있는 콘텐츠까지의 도달률이 높아졌고, 콘텐츠의 구성이 이전에 비해 좋은 반응을 이끌어냈음을 짐작할 수 있습니다. 또한 개편 이전 feature페이지에서도 페이지 전반을 모두 살펴보았고, 개선된 메인화면에 포함된 기능 설명에 대한 부분 전반을 살펴보았다는 것으로 미루어 보아, 기능 설명 페이지의 보완이 필요할 것 같습니다.

개선 포인트 05: feature 페이지 재구성

풍성해진 대시보드, 끝까지 확인할까?

개편 후 대시보드에서 제공하는 분석 내용이 더 많아졌습니다. 풍성해진 대시보드를 사용자는 얼마나 보고 있을까요. 개편 이전과 비교하여 두배 정도 콘텐츠를 더 많이 보고 있기는 하지만, 하단의 정보까지는 많이 확인하고 있지는 않고 있습니다. 접속하자마자 보이는 유저해빗의 기본지표와 사용자가 얼마나 접속하는지에 대한 앱 활성도에 대한 데이터를 가장 많이 확인하고 다른 페이지로 넘어가는 것을 알 수 있었습니다. 페이지를 쪼갠다던지, 대시보드에서의 액션을 유도하는 방법을 고려하는 등의 고민이 필요할 것 같습니다.

개선 포인트 06: 콘텐츠를 더 많이 보도록 사용자의 액션을 유도

Pricing 컨텐츠는 충분한가?

[좌-요금테이블에 가장 많이 머무름 | 우-물음표 툴팁에 가장 많은 클릭 액션을 함]

요금 플랜이 추가된 pricing 페이지를 살펴보겠습니다. 사용자가 처음 보이는 페이지의 영역보다 스크롤을 내려 아래에 있는 요금 테이블에 가장 오래 머물렀던 것으로 보아 pricing페이지에서 보고자 목표했던 콘텐츠는 역시나 요금 테이블이었음을 알 수 있습니다. 테이블까지 탐색하기 위해 기꺼이 스크롤해 보는 것을 확인했으니 테이블 상단에 이벤트나 가입을 유도하는 콘텐츠를 배치하여 한 번 더 살펴보게끔 개선해볼 수 있을 것 같습니다.

개선 포인트 07: 콘텐츠 추가 및 재배치 고려

또한 사용자가 pricing 페이지에서 가장 많이 한 액션은 물음표 아이콘이었습니다. 테이블 전반을 둘러보며 클릭했지만 구체적인 정보 확인을 위해 물음표에 액션을 많이 한 것을 볼 수 있는데, 사용자가 액션을 하면서 정보를 습득할 수 있게 하는 측면에서 물음표의 활용을 추가해보는 것도 방법이 될 것 같습니다.

개선 포인트 08: 사용자의 액션을 유도하는 툴팁 추가

화면보다 많이 클릭하는 정렬 기준 타이틀

랭킹 화면에서는 유저해빗이 선정한 8가지 지표에 대해 높은 순서대로 화면을 정렬해서 사용자가 쉽게 화면을 선택해 분석 페이지로 접속할 수 있도록 도와주는 페이지입니다. 지표 타이틀을 클릭하면 사용자는 바로 지표를 기준으로 정렬된 전체 화면 페이지로 이동하게 되고 화면을 누르면 화면 상세분석 페이지로 이동합니다.

그런데 화면을 선택하는 비중보다 지표별 박스의 영역 중 타이틀에 많은 클릭이 있는 것을 확인할 수 있는데요. 특히 세션에 대해 액션이 많은 것을 볼 수 있습니다. 사용자는 화면을 선택해서 보기 전에 정렬 기준에 대한 정보에 관심을 더 많이 보이는 것 같은데요. 이를 확인하기 위해 몇 가지 확인이 필요할 것 같습니다.

지표에 대한 설명을 물음표 툴팁으로 달아 정보를 제공하는 것과 해당 지표를 기준으로 정렬되는 전체 화면 페이지로 넘어가기 전에 확인하는 팝업을 띄워 바로 페이지 이탈하지 않도록 해 해당 페이지 내에 랭킹 지표 정보탐색에 대한 니즈를 확인할 필요가 있을 것 같습니다.

개선 포인트 09: 카테고리 정렬에 대한 니즈 확인을 위해 몇 가지 개선 필요

히트맵 컨트롤러의 개선 비교

(우측의 이미지는 기본 분석 페이지와 히트맵 페이지가 통합된 데이터입니다 ㅜㅜ 아래 설명 있음.)

히트맵을 조작하는 컨트롤러와 관련해 UI에 변화가 있었습니다. 제공하는 기능은 같지만, 개편 이전에는 히트맵과 붙어있는 하단의 영역에 개편 이후에는 우측 별도의 영역에서 히트맵을 조작할 수 있도록 개선하였는데요. 개편 이전의 히트맵에서 컨트롤러 조작에 대한 액션이 활발했음을 알 수 있었습니다. UI가 상대적으로 불편했다고 추측해볼 수 있는데요. 이전 컨트롤러의 스타일을 고려하여 개선이 필요할 것 같습니다.

개선 포인트 10: 컨트롤러 개선

정확한 분석을 위한 페이지 구분 필요

유저해빗의 화면 분석은 핵심 기능인 히트맵 페이지를 포함하여 화면 내 구성요소, 사용자의 액션을 분석해볼 수 있는 페이지입니다. 개편을 하면서 기본 분석과 히트맵 페이지를 별도로 구분해 제공하고 있는데 url이 같아 히트맵과 스크롤 데이터가 통합되어 보여 정확한 분석이 어려웠습니다.

마찬가지로 리플레이의 리스트 페이지와 리플레이의 영상이 보이는 페이지가 하나의 url으로 이루어져 별도의 분석이 불가해 별도의 url로 구분해서 볼 필요가 있습니다.

개선 포인트 11: 분석을 위한 페이지 url 구분 필요

필터와 정렬, 지표 선택과 같은 상세 옵션들, 사용할까?

화면 분석의 전체 화면 페이지는 분석해보고자 하는 앱 화면들을 볼 수 있는 화면 리스트를 보여주는 페이지입니다. 원하는 화면을 잘 고를 수 있도록 개편하면서 필터, 정렬, 화면 지표 선택, 뷰 모드와 같은 옵션들을 추가하게 되었는데요. 새롭게 추가된 이러한 옵션들을 제대로 사용하는지 확인해보고 싶었습니다. 생소하게 느껴질 수 있던 지표 선택 기능을 활발히 사용해보고 있었고, 뷰 모드와 정렬, 필터 등의 옵션을 두루두루 잘 사용하고 있었습니다. 화면을 선택하는 클릭보다 옵션을 조작하는 클릭 비율이 높았다는 점에서 화면 선택에 대한 정보를 꼼꼼히 살펴본다는 것을 알 수 있었습니다. (물론 이해하고 있는지, 잘 활용하고 있는지와는 별개로 사용자가 페이지 내에서 액션 하는 것들만 보고 판단)

결론: 개편 후 기능들 대체로 잘 사용하고 있음.

방문당 클릭수가 가장 높은 리플레이에서의 이상 패턴은?

유저해빗이 제공하고 있는 페이지 중에 가장 많은 방문당 클릭수(14.15)를 기록하고 있는 리플레이! 다른 페이지의 평균 액션수가 4.96인 것을 감안해 봤을 때도 2배 이상의 액션을 하고 있는 페이지로 사용자가 활발하게 기능을 사용하고 있다고 추측해볼 수 있습니다. 리플레이에서 UI와 기능의 변화가 크게 있지는 않았지만 특이했던 점은 크래시 필터를 사용하는 비율이 높아졌다는 점입니다. UI는 변하지 않았는데 말이죠. 이렇게 문제에 대한 발견, 궁금증은 찾아냈지만 히트맵 데이터만으로는 그 이유에 대한 답을 찾기 어려운 경우도 있었습니다.

히트맵 분석 정리하며

좋은 점, 불편한 점 몇 가지 요약정리

좋은 점

사용자들의 전체 행동 트렌드를 쉽게 확인할 수 있음.

별도의 복잡한 분석 노력이 필요하지 않고 누구나 쉽게 확인할 수 있음.

버튼이나 영역에 대한 클릭, 사용에 대한 내용에 대해서는 쉬운 확인이 가능함.

결국 쉽게 확인할 수 있고 시간이 많이 들지 않는다는 것이 히트맵 분석을 하는 가장 강력한 이유!

불편한 점

클릭수라던가 정확한 클릭 비율은 따로 찾아 매칭 해봐야 함. (히트맵의 컬러가 상대적인 비율로 표시되기 때문에 절대적인 클릭수 비교가 어려움 )

데이터의 부정확함. 1) 스크린샷이 변경되는 페이지의 경우, 2) 같은 URL안에서 여러 화면 구성이 있는 경우 구분 불가.

페이지 내의 간단한 사용자 행동은 확인할 수 있지만 페이지간 이동 흐름이라던지 사용자 행동 심층 분석은 어려움.

정리하면서...

Crazyegg의 히트맵, 스크롤 분석은 직관적인 시각화 정보로 전체적인 사용자의 행동 트렌드를 파악하기 쉽다는 장점이 있었습니다. 실제로 데이터를 보는 데는 5분 내외로 확인이 가능하고, 사용자의 예상 패턴이나 이상행동을 살펴보고 개선 포인트를 정리하는 데에도 1시간을 채 넘기지 않았습니다.

콘텐츠를 확인하는 비율, 사용자의 이동이 어디까지인지, 콘텐츠의 재배치, 서비스의 UI/UX 개선과 관련하여 시각화 분석 툴은 시간과 비용을 줄여주며 의사결정을 빨리할 수 있도록 도와줍니다. 하지만 히트맵 분석이 가져다줄 수 있는 간편한 스토리텔링의 함정에 빠질 수도 있으니 정확한 원인 파악을 위해서 추가적인 고민과 분석을 해볼 필요가 있습니다. ([번역] 히트맵의 허와 실 포스트에서도 설명하고 있죠.)

히트맵이나 스크롤 분석에서 사용자의 행동을 살펴보고 이상한 행동에 대해 왜 그런 행동을 했는지 궁금증을 계속해서 만들어보는 것이 필요합니다. 히트맵과 스크롤 분석은 현상을 쉽게 보여줄 뿐! 가설을 만들고 검증하고 비교 분석하는 것은 우리의 몫이니까요. :)