brunch

You can make anything
by writing

- C.S.Lewis -

by 뷰저블 Beusable Feb 16. 2017

사용자의 행동 흐름 확인하기

Gaze Plot이나 뷰저블의 Stream으로 사용자의 행동 흐름 이해


Gaze Plot이나 뷰저블의 Stream으로 사용자가 콘텐츠를 소비한 순서와 소비한 정도의 흐름을 한 눈에 파악할 수 있습니다. 이러한 인포 그래픽을 통해 콘텐츠의 소비 흐름과 정도를 이해함으로써, 의도한 전환과 이탈이 적절한 시기에 발생하였는지 검토하고 사이트의 UX를 개선할 수 있습니다.








사용자 한 명의 시선 흐름을 보여주는 Gaze Plot


'Gaze Plot' 각 단어의 사전적 의미 (출처: Oxford Advanced Learner’sEnglish-Korean Dictionary)

Gaze: (가만히) 응시하다[바라보다], 응시, (눈여겨 보는) 시선[눈길]
Plot: (소설/극/영화 등의) 구성 [플롯/줄거리]


Gaze Plot은 한 명의 사용자가 웹 사이트의 콘텐츠를 탐색한 전체 과정에 대한 정보들을 보여주는 인포 그래픽으로 이해할 수 있습니다. 주로 아이트래킹 도구로 시선의 움직임을 추적한 결과를 나타낼 때 많이 사용되며, 사용자가 응시한 위치, 순차, 각 위치 별 체류 시간을 나타낼 수 있습니다.


출처: http://www.digitalmarketing-glossary.com/What-is-Gaze-plot-definition


원을 연결 짓는 선, 원 안의 숫자: 시선 흐름의 순차

각 원의 위치: 응시한 위치

원의 크기: 체류 시간 




전체 사용자의 콘텐츠 소비 흐름을 보여주는 Stream


'Stream' 단어의 사전적 의미 (출처: Oxford Advanced Learner’sEnglish-Korean Dictionary)

Stream: (수많은 일의) 연속[이어짐]


뷰저블에서 확인할 수 있는 Stream은 Gaze Plot 인포그래픽의 개념과 같이, 사용자의 콘텐츠 소비 흐름과 정도를 나타내줍니다. 




기존 Gaze Plot을 확인하기 위해서, 소수의 표본 사용자만 모집하여 아이트래킹을 사용한 사용자 테스트를 진행해야 합니다. 또는 아이트래킹 대신 마우스 움직임 궤적을 추적한 Gaze Plot으로 전체 사용자들을 이해하기 위해서 각 개별의 Gaze Plot을 일일히 확인해야 합니다. 


이때, 서비스의 사용자 테스트를 위한 표본 사용자를 모집하는 일, 평가에 아이 트래킹 장비를 활용하는 일, 전체 사용자들의 각 Gaze Plot을 확인하는 일은 비용과 시간적 측면에 큰 어려움이 따릅니다.


하지만 뷰저블의 Stream은, 전체 사용자를 대상으로 대표할 수 있는 데이터만 선정하여 서비스 담당자들이 많은 Gaze Plot을 대표할 수 있는 하나의 Gaze Plot 애니메이션 형태로 쉽게 확인할 수 있도록 지원해줍니다.



사이트 UI의 Gaze Plot 형태의 Stream 정보

원을 연결 짓는 선, 원 안의 숫자: 마우스 포인터 이동 흐름의 순차

각 원의 위치: 각 순차 별, 마우 포인터 체류가 가장 집중된 콘텐츠의 위치

원의 크기: 체류 시간 

원의 투명도: 다른 페이지로 전환/이탈하지 않고 순차를 이어간 방문객(PV) 비율


하단 Play Bar 영역에 있는 Stream 차트 정보

가운데, 숫자 Play Bar: 각 순차 정보

초록색 숫자 Play Bar: 전체 방문객들을 대표할 수 있는 중앙 범위에 유효한 순차 종료 지점

상단 노란색 Area 차트: 해당 순차가 존재하는 방문객(PV)의 비율
ex: 3번째 순차의 70% 해석
>> 방문객 70%는 3 번째 순차가 존재하였음, 나머지 30% 방문객은 이전 순차에서 전환/이탈하여 3 번째 순차가 존재하지 않음.

하단 빨간색 막대 차트: 해당 순차의 해당 원 위치에서 체류한 시간의 평균


Stream의 각 순차별로, 사용자들이 어떤 콘텐츠를(위치) 얼마나(시간) 소비하였는지 흐름을 해석하면, 사이트에서 콘텐츠가 소비된 경험과 시나리오를 예측할 수 있을 것입니다.  




Stream에 대한 궁금증


마우스 움직임 궤적이 '아이트래킹'을 얼마나 대체할 수 있을까요?


CHI 2001 학회에 보고 된, [What can a mouse cursor tell us more? Correlation of eye/mouse movements on web browsing]에 따르면, 웹 페이지에서 사용자의 마우스 커서가 위치한 곳의 84%가 실제 아이트래킹에서 측정된 응시 지점에 해당된다는 연구 결과가 존재합니다. 


실제로 뷰저블로 마우스 Move와 같은 히트맵을 확인하면, 사용자의 마우스 움직임이

인물 사진일 경우, 얼굴 또는 시선이 가는 위치에 집중

공백과 내용(텍스트/이미지)으로 이루어진 콘텐츠일 경우, 내용에 집중. 특히 읽기를 요하는 텍스트에 집중

됨을 확인하실 수 있습니다.


참고링크: http://dl.acm.org/citation.cfm?id=634234
[What can a mouse cursor tell us more? Correlation of eye/mouse movements on web browsing] / Mon-Chu Chen, John R.Anderson, Myeong-Ho Sohn (2001). 
ACM CHI (http://www.sigchi.org/)



'의미없는 마우스 움직임'이 존재할 수 있는 리스크는 어떻게 감안/해결해야 할까요?


뷰저블은 사용자의 마우스 움직임과 궤적을 정도에 따른 분포도로 검토합니다. 이 행동의 분포 양상에서, 사용자들의 일반적인 행동 범위에서 벗어나는 사용자들을 제외하고, 실제 방문객들을 대표할 수 있는 유효한 분포의 데이터만 정제하여 Stream으로 활용하고 있습니다.

(Gaze Motion의 우측 리포트 영역에서, 사용자 행동의 자세한 분포 양상을 확인하실 수 있습니다)


이때 일반적인 행동 범위에서 벗어나는 방문객들의 예시는 다음과 같을 수 있습니다.

실제 사용자가 아닌 봇에 의한 방문 데이터

방문 후 콘텐츠 탐색 없이, 바로 페이지를 벗어난 경우

방문 후, 브라우저에서 콘텐츠 탐색 후 페이지를 종료하지 않고 자리를 이탈하거나 창내림으로 세션이 종료되기까지 의미없는 체류시간이 기록된 경우

콘텐츠 소비가 아닌 다른 목적(사이트 분석, 의미없는 행동 등)으로 페이지 내에서 마우스 이동이 매우 많이 발생 된 경우 


또한 Stream 에서 확인할 수 있는 이탈 정보(원의 투명도, 하단 Play bar 영역에 있는 노란색 Area 차트)로, Stream의 원의 의미가 어느정도 되는지 가늠할 수 있습니다. 유효 구간(초록색 순차로 표기됨) 이후 Stream 원은 해당 원 순차까지 존재한 방문객(PV)들의 비율이 어느 정도 되는지 확인하여,

Stream에서 집중된 콘텐츠를 선정하기에 적정한 방문객(PV)규모였는지, 

전체 방문객(PV)의 몇 퍼센트를 대표할 수 있는 데이터인지 

해석할 수 있습니다. 



Stream '원에 해당하지 않는 콘텐츠'에 대한 소비는 어떻게 이해해야 할까요?


Stream은 각 순차별로 마우스 포인터 체류가 가장 집중 된 위치의 원을 나타냅니다. 


사용자의 행동에 일정한 패턴이 나타 나지 않고 분산되어 제각각일 경우, 또는 방문객(PV) 데이터가 적어 행동을 대표할 수 있는 패턴이 나타나기에 부족한 경우에는 각 순차 별 선정된 Stream 원의 위치가 실제 행동을 대표하지 않을 수 있습니다.


또 순차 별로 가장 집중 된 위치를 1위만 선정하기 때문에, 2위 이하로 소비 된 콘텐츠를 Stream 에서 바로 확인할 수 없습니다.


이러한 문제점들은 뷰저블 Gaze Motion에서 제공하는 사용자의 콘텐츠 소비의 전반적인 흐름과 분산 확인을 통해서 해결할 수 있습니다. 


콘텐츠 소비에 대한 전반적인 흐름을 히트맵 애니메이션으로 확인할 수 있기 때문에, 

사용자의 행동 패턴이 집중되었는지, 혹은 분산되었는지 직접 확인

Stream 에서 선정되지 않은, 2위 이하로 소비된 콘텐츠들을 히트맵으로 파악

할 수 있습니다. 



터치 기반인 '모바일 환경'의 Stream은 어떻게 이해해야 할까요?


모바일 환경의 뷰저블에서는, 스크린에서 터치가 이루어진 위치를 기반으로 Stream이 제공되고 있습니다. 마우스 포인터 궤적이 사용자의 시선 체류와 연관이 있지만, 모바일 환경의 터치 지점은 마우스 포인터와 같이 '해당 지점이 80% 정도 시선 체류와 직접적인 연관이 있다' 와 같이 직접 해석할 수 없습니다.


다만 모바일은 데스크탑 환경과 달리 화면의 사이즈가 작습니다. 모바일 화면에 노출된 영역의 모든 콘텐츠가 실제로 사용자에게 응시/소비되었을 확률은, 데스크탑 환경에 비해(데스크탑 화면에 노출된 영역의 모든 콘텐츠가 사용자에게 응시/소비 되었을 확률보다) 높을 것이라 예상할 수 있습니다. 


터치가 이루어진 지점은 사용자에게 노출이 된 화면의 일부 영역으로 해석할 수 있습니다. 따라서 모바일 환경의 Stream은, '터치가 이루어진 지점, 각 원 위치의 상하 000px 범위의 콘텐츠는 사용자에게 노출되었다' 라고 해석하면 보다 정확하게 콘텐츠 소비를 이해할 수 있을 것입니다.






Visualize UX, Make a Move!

뷰저블에서 UX 데이터 분석을 무료로 쉽게 체험해보세요!

체험하러 가기 >>> Beusable  www.beusable.net

매거진의 이전글 마우스 커서의 정보 이해하기

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari