brunch

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

라이킷 15 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 뷰저블 Beusable Aug 23. 2017

사용자의 관심도 높은 구간을 알 수 있는 어텐션 그래프

더욱 강력해진 뷰저블의 UX 분석 기능을 소개합니다.

안녕하세요 뷰저블입니다. 뷰저블 스크롤 히트맵에 '어텐션 그래프(Attention Graph)' 기능이 새롭게 추가되어 알려드립니다. 어탠션 그래프는 2017년 8월 23일 수요일 저녁에 공개됩니다!

뷰저블은 항상 여러분들의 분석력 향상을 위해 고민하고 있으며 최적의 기능을 제공드리고자 노력합니다. 이번 어텐션 그래프 기능 또한 그중 하나입니다.

사용자가 가장 관심 깊게 지켜보는

'가치 있는 영역'을 파악할 수 있는 어텐션 그래프

스크롤 히트맵에서 이제 어탠션 그래프를 확인하실 수 있습니다.

어텐션 그래프(Attention Graph)는 사용자가 스크롤을 멈춘 지점의 체류시간을 측정하여 그래프로 표현한 기능입니다. 스크롤 히트맵 위에 '라인 그래프'로 오버레이 되어 보입니다. 스크롤 히트맵이나 무브먼트 히트맵과의 차이점은 '스크롤 또는 마우스 커서의 도달 여부뿐만 아니라 실제 체류 시간까지 반영된다는 점'입니다. 실제 체류 시간이 반영되기 때문에 사용자가 실제로 해당 위치에 도달한 후 콘텐츠를 충분히 소비할 수 있었는지를 검토할 수 있습니다.

어텐션 그래프를 확인하면 각 페이지 별로 사용자가 가장 관심 깊게 지켜보는 '가치 있는 영역'을 파악할 수 있습니다. 고객이 가장 관심 있게 지켜보는 정보(또는 무시하는 콘텐츠)가 무엇인지를 파악한다면, 사용자의 관심도를 높이기 위한 페이지 개선방안을 도출할 수 있을 것입니다. 랜딩 페이지, 상품 상세 페이지 등 고객의 모티베이션을 높여줄 다양한 정보영역들은 단순히 실무자의 추측만으로는 어느 곳이 주목도를 이끌며 무시되는지에 대해 파악하기 어려우며 뷰저블처럼 데이터를 기반으로 도출할 수 있어야 합니다.

또한, 어텐션 그래프를 사용하면 얻을 수 있는 구체적인 혜택은 다음과 같습니다.

사람들에게 어떤 정보 또는 콘텐츠가 무시되고 있는가?

어떤 정보에 우선순위를 두어야 하는가?

사람들이 어떤 부분에 주목하고 있는가?

사람들의 주의를 집중시키기 위해 어떤 정보를 제거하면 좋은가?

CTA를 두기 위한 최적의 장소는 어디인가?

배너 광고를 어느 곳에 게재해야 최대 효과를 낼 수 있는가?

뷰저블 홈페이지 메인의 어텐션 그래프 분석

어텐션 그래프는 스크롤 히트맵, 무브먼트 히트맵 등 다른 히트맵과 함께 확인하면 다양한 의미 있는 분석 방안을 도출해낼 수 있습니다. 아래 뷰저블 홈페이지의 메인 페이지를 함께 어탠션 그래프로 확인해보겠습니다.

뷰저블 메인 홈페이지의 2017년 8월 16일 ~ 8월 22일간 어탠션 그래프

CTA 버튼 바로 아래 지점에 '사용자 100%가 도달한 지점이며, 평균 9.9초 동안 머물렀습니다.'라는 정보가 표기됩니다. 마찬가지로 그래프 산도 가장 높게 나타나죠. 스크롤 도달률이 높고 어탠션 그래프의 수치 또한 높기 때문에 사용자 규모가 어텐션 그래프에 어느 정도 영향을 끼쳤음을 감안하여 데이터를 확인하면 좋습니다.

반면 사용자 도달률이 100% 임에도 불구하고 산봉우리가 낮은 곳이 많습니다. 이런 곳들은 많은 사용자들이 빠르게 SKIP 했을 가능성이 높은 곳입니다. 이 곳의 주목성을 높이기 위해서는 사용자의 빠른 스크롤 중 시선을 사로잡을 수 있도록 UI 개선이 필요합니다.

스크롤 히트맵 외에 무브먼트 히트맵과도 함께 살펴볼까요?

2017년 8월 16일 ~ 8월 22일 자 스크롤 히트맵, 어탠션 그래프, 무브먼트 히트맵

위 이미지에서 먼저 첫 번째 직사각형을 살펴보겠습니다. 어탠션 그래프와 무브먼트, 스크롤 모두 높게 나타났습니다. 이런 영역은 많은 사용자의 높은 활동 규모에 따라 어텐션이 높게 이어졌음을 감안하여 데이터를 확인해야 합니다.

반면 바로 하단에 고객사 목소리가 소개된 두 번째 직사각형 영역을 살펴보겠습니다. 스크롤 도달률이 75% 정도로 높으며 무브먼트도 높지만 어텐션은 낮게 나타납니다. 이런 영역은 많은 사용자들이 짧은 시간 내에 빠르게 탐색한 콘텐츠임을 이해할 수 있습니다. 더 많이 체류하기를 원한다면 이미지에서 글로 콘텐츠의 성격을 바꾸는 등의 개선방안을 도출할 수 있습니다.

뷰저블 문의하기 페이지의 어텐션 그래프 분석

두 번째로는 문의하기 페이지의 어텐션 그래프도 다른 히트맵들과 함께 살펴보겠습니다.

뷰저블 문의하기 페이지의 어탠션 그래프, 스크롤 히트맵, 무브먼트 히트맵

먼저 위 이미지에서 노란색 직사각형을 살펴봐주세요. '문의 내용'을 작성할 수 있는 텍스트 입력 영역입니다.

스크롤 도달률과 어텐션은 그래프는 낮지만 무브먼트는 높게 나타납니다. 이런 경우는 도달 사용자 규모는 적지만 특정 사용자에 의해 무브먼트가 집중된 결과임을 이해할 수 있습니다. 적은 도달률을 감안하여 어텐션이 낮을 수 있음을 이해하고 체류시간을 검토하면 좋습니다. 약 절반 정도의 사용자가 문의하기 내용을 작성하기 위해 긴 시간 집중하였다고 보시면 됩니다.

뷰저블의 새로운 기능 '어텐션 그래프(Attention Graph)'는 Reporting Heatmaps 메뉴의 '스크롤 히트맵'에서 함께 확인하실 수 있습니다. 여러분의 사이트를 지금 이 어텐션 그래프로 분석해보시는 건 어떨까요?

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

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

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