태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'heat map'에 해당되는 글 2건

  1. 2017.07.03 Heat map 스터디 (2) by SEUNGYOON LEE
  2. 2015.04.22 아이트래커의 활용 1편 - 아이트래커의 역사와 분석 방법 by hanwong
2017.07.03 07:50

Heat map 스터디

pxd에서 진행하는 대부분 프로젝트는 사용자 조사를 기본으로 합니다. 사용자의 목소리를 바탕으로 사용자가 진정으로 원하는 경험을 설계하는 것이 저희의 목표이기 때문이지요. 대부분 프로젝트에서는 10명 내외의 사용자를 인터뷰하게 되고 수집된 VOC를 토대로 인사이트를 발굴하게 됩니다.


웹사이트나 모바일 앱을 기획하거나 개선하는 프로젝트를 진행하게 되면 기존의 사용자들이 어떤 패턴으로 이 사이트/앱을 사용하고 있는지를 파악하게 되는데요, 대부분 엄청난 숫자의 사용자 로그 데이터를 받아보고 그 데이터를 토대로 해석하게 됩니다. 저는 숫자와 기호(특히 수학같이 생긴...)라면 일단 겁부터 먹기 때문에 큰 숨을 들이쉬고 나서 데이터를 열어볼 수 있는데요, 시각화된 데이터라면 조금 얘기가 달라집니다.


이 글에서는 로그 데이터를 시각화하는 방법 중 Heat map(히트맵)을 스터디한 내용을 다루려고 합니다.



1. 히트맵이란?

히트맵은 데이터의 값을 컬러로 변환시켜 시각적인 분석을 가능하게 하는 데이터 시각화 기법의 하나입니다. 원래는 금융시장의 정보를 보여주기 위해서 만들어졌다고 하는데 (https://en.wikipedia.org/wiki/Heat_map) 그 외에 생물학적 정보, 지리적 밀도를 보여주는 정보 등 다양한 분야에 사용됩니다.



<다양한 히트맵의 예>

염색체의 밀도를 보여주는 히트맵. 붉은 색일수록 높은 밀도를 나타낸다. (출처)



트위터 사용자들이 기상하자마자 Good Morning을 트윗하는 숫자를 보여주는 히트맵. (출처)



여객기의 항로분석을 통해 실종된 말레이시아 여객기가 있을법한 지역을 보여준다. (출처)



2. 웹/모바일에서의 히트맵

웹이나 모바일 앱에서는 사용자의 로그 데이터로 히트맵을 만듭니다. 사용자의 로그 데이터 분석을 시스템화한 것을 애널리틱스(analytics)라고 하는데 이 데이터를 시각적 형태로 변환하여 직관적인 분석을 가능하게 하는 것을 비주얼 애널리틱스(visual analytics)라고 합니다. 히트맵은 비주얼 애널리틱스의 한 방법으로, 데이터를 열 분포 형태로 보여줍니다. 뜨거운 난색 계열은 데이터가 밀집된 부분을 나타내며, 차가운 한색 계열은 그 반대의 경우를 나타냅니다.

애널리틱스와 같은 데이터 분석 방식은 페이지 단위의 정보 분석인 데 비하여 히트맵의 시각화 방식은 사용자들이 페이지의 어디를 클릭해서 접근하는지에 대한 공간적인 정보를 알 수 있다는 점이 유용합니다.

Google 이미지 검색 결과



3. 히트맵 활용해 보기

히트맵이 어떤 것인지 알았으니, 실제로 어떻게 활용할 수 있는지 한번 알아보도록 합니다.


pxd 블로그에서 사용자들이 가장 많이 클릭하는 곳은 어디일까?

아래 이미지는 pxd 블로그 첫페이지의 히트맵입니다.

story.pxd.co.kr의 히트맵 : 블로그 가장 최상단 글과 검색 영역의 클릭수가 많다.


조사 기간이 짧아서 드라마틱한 히트맵이 그려지지는 않았지만, 사용자들이 많이 클릭하는 지점을 쉽게 알 수 있습니다. pxd 블로그의 첫 페이지에서 제일 많이 클릭하는 곳은 ‘블로그 가장 상단 글', ‘검색 영역', ‘pxd 홈페이지로 연결되는 로고 영역'으로 보입니다. 예상외로 우측의 여백을 클릭하시는 분들도 많네요.


그런데 단순히 많은 클릭 수를 보여준다고 해서 우리가 알고 싶은 내용을 모두 알 수는 없습니다. 위의 결과를 두고 아래와 같은 질문을 떠올릴 수도 있습니다.

  • 사람들은 최신 글을 클릭한 것일까, 아니면 pxd 인턴살이를 클릭한 것일까?
  • 우측의 큰 여백은 사용자에게 불필요한 클릭을 유도하는 것일까? 왜 클릭한 것일까?

위 질문에 답은 지금 상태로는 전혀 내릴 수가 없어, 인터뷰나 관찰 등 정성적 사용자 조사가 보완되어야겠지요.


사용자에게 가장 인기있는 블로그 카테고리는 무엇일까?

저희 블로그 우측 하단에 보면 글의 카테고리 영역이 있습니다. 이 카테고리가 만들어진 지 꽤 오랜 시간이 지났는데요, 과연 우리 블로그 독자들께서는 이 카테고리를 어떻게 이용하고 있을지에 대해, 아니 이용을 하고 계시는지도 궁금해집니다.

  • 블로그 방문자들은 카테고리를 통해 글에 접근하고 있을까?
  • 어떤 카테고리의 글을 많이 찾을까?
  • 우리는 방문자들이 많이 찾는 카테고리의 글을 쓰고 있는 것일까?
  • 반대로 우리가 자주 올리는 글이 방문자들이 관심 있어 하는 주제일까?

story.pxd.co.kr의 히트맵: UI 가벼운 이야기와 스터디를 많이 클릭하고 있다.


블로그에는 총 11개의 카테고리가 있는데요, 그중에서 ‘UI 가벼운 이야기’ 그리고 ‘스터디' 카테고리로 접근하는 사용자들이 많은 것을 알 수 있습니다. 일단 첫 번째, 두 번째 질문에 대한 답은 찾은 것 같습니다. 카테고리를 통해 글에 접근하는 사용자들이 상당수 있고, 그중 두 카테고리가 특히 인기(?)가 있다는 것을 추측해 볼 수 있습니다.


그렇다면 과연 우리는 방문자분들이 찾는 카테고리의 글을 쓰고 있는 걸까요?

음….앗…. 스터디 카테고리의 최신 글은 2012년이네요… 사용자들이 메뉴를 클릭하기 전의 기대와 클릭한 이후의 결과가 상이하여 인지적 불편함을 야기시킬 수도 있겠다고 추측해 볼 수 있습니다. 혹은 반대로 예전 스터디 자료에 대한 꾸준한 니즈가 존재한다고 볼 수도 있겠지요. 이 역시 페이지뷰나 사용자 조사 등을 통해서 UX에 대한 기본자료를 제공하는 메뉴가 따로 필요한 것인지, 스터디 관련 글의 카테고리 명을 개선할 필요는 없는지 등, 개선을 위한 좀 더 세분화된 가설을 세워볼 수 있습니다.


사용자들이 가장 관심있어 하는 pxd 홈페이지 메뉴는 무엇일까?

pxd의 홈페이지도 히트맵으로 간단하게 살펴보았습니다.

pxd 홈페이지 상단 부분


홈페이지에 최상단에는 메뉴가 있어서 방문자들이 어떤 메뉴를 주로 이용하는지 알아볼 수가 있는데요, ‘Service’, ‘Work’ 등 저희가 진행했던 프로젝트에 대한 내용, 또 구인 내용이 있는 ‘Job’ 메뉴를 많이 클릭하고 있는 것을 알 수 있습니다. 상단의 이미지 영역에서는 일곱 개의 이미지가 롤링이 되고 있는데요, 많은 분이 우측 화살표나 이미지 하단의 도트 버튼을 눌러 다음 이미지를 확인하고 있을 것이라는 추측이 가능합니다. 저도 롤링 되는 것을 기다리지 못하고 우측의 화살표를 마구 마구 누르곤 하는데요, 이미지가 애초에 기획한 의도대로의 역할을 하고 있는 것인지 고민해 볼 필요가 있습니다.


pxd 홈페이지는 싱글 페이지로 구성되어 있는데요, 내용을 따라 스크롤 하다 보면 생각보다 긴 길이의 콘텐츠가 상단의 메뉴를 자연스레 찾게 만듭니다. 따라서 클릭 수가 특정 메뉴에 대한 선호도를 보여준다는 것에 대해 연관성이 있다고 크게 확신할 수는 없는 상황인 것이지요.


이때 사용자들이 페이지의 어느 지점에 오래 머물고 있는지, 어느 지점까지 스크롤을 많이 하는지 등에 대한 정보를 토대로 스크롤 맵을 그려볼 수도 있습니다.

pxd 홈페이지의 스크롤맵(Scroll map)


위 그림에서 푸른색으로 표시된 부분은 사용자가 오래 머물지 않은 영역이고 흰색 영역은 사용자들이 오래 머물며 스크롤을 많이 발생시키는 영역을 나타냅니다. 저희 홈페이지에서는 상단의 이미지 영역과 포트폴리오 영역에서 사용자들이 오래 머물고 스크롤도 하고 있는데, 프로세스 이후로는 내용을 잠깐 확인하고 떠나는 사용자들이 많을 것이라는 추측해 볼 수 있습니다.

  • 사용자들이 주의력과 인내를 가지고 스크롤을 해 나가는 범위가 어디까지인가?
  • 싱글 페이지에서 콘텐츠의 배치는 중요도에 따라 순차적으로 배치하는 것이 적합한 것인지?

등과 같은 질문과 가설을 끌어낼 수 있고, 향후 프로토타입이나 A/B test를 통해 사용성에 대한 검증을 해 볼 수도 있겠지요.



4. 데이터 해석하기

히트맵 스터디를 위해 저희 블로그와 홈페이지를 아주 짧은 기간 노출시킨 결과를 위와 같이 보여드렸습니다. 처음에는 히트맵 한번 써보자… 로 단순하게 시작했습니다. 히트맵이 보여주는 결과를 가지고 어느 정도 기존의 업무에 연결을 시킬 수 있는지를 파악하고자 했던 것인데요, 명쾌한 시각화로 유추해 낼 수 있는 결과에 이어 ‘왜 이런 결과가 나왔을까?’, ‘사이트 방문자 모두가 같은 생각일까?’ 등의 의문이 생기면서 실제 방문자들의 목소리를 듣고 싶은 유혹이 강하게 생겨났습니다.


제가 위에서 히트맵을 통해 얻은 결과를 설명할 때는 모두 ‘추측'한다는 단어를 사용했습니다. 사용자의 목소리를 ‘추측’해 보는 것을 통해 사전에 좀 더 디테일한 가설을 세우는 것이 가능하고, 따라서 실제 조사과정에서 보다 정확하고 깊이 있는 사용자 조사에 힘을 실을 수 있다는 점은 확신이 들었습니다.


그러나, 데이터 시각화 결과물은 좀 더 쉽게 해석이 되는 데이터이지 분석자료가 아니기 때문에 이 데이터만을 가지고 우리가 가진 질문에 대한 답을 단정 지어 낼 수는 없었습니다. 따라서 데이터를 해석하는 과정이 다시 필요하고 정성적 사용자 조사 과정을 밟아 데이터를 보완해야만 유의미한 결과를 낼 수 있을 것입니다.



5. 마무리하며...

사용자의 니즈를 파악하는데 있어서 다수의 의견/행동 패턴과 의미 있는 소수의 의견은 모두 중요하며 이 둘의 균형을 이루게 하는 것이 저희 연구자의 역할이기도 합니다. 프로젝트의 목표와 성격에 따라 정량적, 정성적 데이터를 수집해야 하지만

  • 로그 데이터를 통해 다수의 행동 패턴을 수집하고,
  • 데이터 시각화를 통해 빠르게 해석해 보며,
  • 그 결과를 가지고 보다 세분화된 가설을 세우고,
  • 디테일한 가설에 기반한 정성 조사가 진행한다면,

좀 더 명확한 인사이트를 도출하는 데 도움이 될 수 있지 않을까… 라는 생각을 해보며 마무리합니다.


덧붙이는 말

pxd 블로그나 홈페이지 개선에 대해서 이 글을 보고 문득 떠오르는 아이디어가 있으면 마음껏 댓글로 남겨주세요. :-)



--

참고자료

https://en.wikipedia.org/wiki/Heat_map

https://www.crazyegg.com/

https://www.uxpin.com/studio/blog/understanding-simple-heat-maps-smarter-ui-design/

https://conversionxl.com/heat-maps/



[참고##데이터 분석##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...
2015.04.22 07:50

아이트래커의 활용 1편 - 아이트래커의 역사와 분석 방법

아이트래커란 사람의 시선이 어느 곳을 바라보는지 추적해주는 장치를 말합니다. 사람의 시선이 오랫동안 머무는 곳, 자주 머무는 곳, 자극에 따라 가장 먼저 바라보는 곳 등 시선이 머무는 곳을 의미있다고 생각했기 때문에 이런 장치가 만들어진 것 같습니다. 그리고 심리학, 마케팅, 스포츠, HCI 등 다양한 분야에서 시선의 움직임과 그 뒤에 숨겨진 의미를 찾기 위해 활용되고 있습니다.
이번 아이트래커 관련 시리즈에서는 아이트래커에 대한 개념들과 어떻게 하면 실무에서도 쉽게 활용 할 수 있을지 고민하며 실험한 내용들에 대해서 소개해 드리고자 합니다.

첫번째 포스팅에서는 아이트래커의 역사와 분석 방법들에 대해서 알아보겠습니다.

아이트래커의 활용 1편 - 아이트래커의 역사와 분석 방법
아이트래커의 활용 2편 - 아이트래커로 스마트폰 내비게이션 관찰하기
아이트래커의 활용 3편 - (미정)


아이트래커의 역사


아이트래커의 역사는 읽기에 관한 연구로부터 시작됩니다. 1900년대 초기에 Edmund Huey는 사람들이 글을 읽을 때 어디를 바라보고 어디에서 멈추는지를 관찰 할 수 있는 콘택트 렌즈 형태의 아이트래커를 발명했습니다. 정확한 형태의 사진 자료는 없지만 그 시대에 렌즈라면 착용하기 힘들고 실험하기에도 굉장히 부자연스렵지 않았을까 하는 생각이 듭니다.
이 렌즈 같은 아이트래커를 활용해서 1908년에 The Psychology and Pedagogy of Reading 라는 논문을 발표했고 이 논문이 읽기 연구에 많은 영향을 주었다고 합니다. 그리고 1950년 대에 Alfred L. Yarbus는 거대한 형태의 아이트래커를 제작하여 이미지를 보는 시선의 움직임이 보는 목적에 따라 눈의 움직임이 많이 달라진다는 연구를 하였습니다. 이 연구에서는 시선의 움직임을 따라 선으로 표현해주었는데요. 이방법은 요즘 쓰이는 분석 방법들과도 크게 달라보이지 않습니다.

Yarbus의 아이트래커와 연구내용 (이미지 출처: Wikipedia)

이 외에도 여러 형태의 연구들이 있었고 20세기 말부터는 적외선을 활용한 아이트래커들이 개발되기 시작했습니다. 그리고 최근에는 적외선 센서를 활용한 작고 정확한 성능의 아이트래커들이 많이 개발되고 있습니다. 그 중에서도 디스플레이 장치에 부착하여 사용하는 고정형 바 형태의 아이트래커들이 저렴하고 분석하기도 쉬워 많이 활용 되고 있습니다. 2013년에는 킥스타터에서 펀딩을 받은 제품중에 Kinect를 아이트래킹 가능하게 만들어주는 eyeCharm이라는 미들웨어 제품도 있었습니다. eyeCharm은 시선의 움직임으로 PC를 조작 할 수 있도록 만들어주는 기능을 가지고 있습니다. 그리고 이번 2015 CES에서 소개된 The Eye Tribe Tracker는 세계 최초로 99달러라는 가격의 아이트래커 완제품으로 소개되어 혁신상까지 수상하였다고 합니다. 불과 몇 년 전까지만해도 수천만원을 ;호가하던 아이트래커가 지금은 관심있는 사람이라면 누구나 쉽게 구매하여 사용 할 수 있는 수준까지 온 것 같습니다.

eyeCharm

The Eye Tribe Tracker


아이트래커를 활용한 분석 방법


아이트래커를 활용한 분석은 특정 영역에 대한 시선의 빈도나 머무르는 시간을 정량적으로 측정해주고 시각적으로 한 눈에 알아보기 쉽게 표현해주는 것입니다. 측정된 데이터는 분석하는 목적이나 대상에 따라 적절한 방법을 활용해야 합니다. 학술 관련 분야에서는 세세한 눈의 움직임 까지 측정하고 분석하는 경우도 있지만 아래에 소개할 방법들은 대체로 여러 산업 분야에서 쉽게 활용 할 수 있는 분석 방법들 입니다.


1. Heat Map


Heat Map은 사용자가 어디를 가장 많이 보는지를 색의 구분으로 쉽게 확인 할 수 있는 맵입니다. 웹사이트 분석 방법으로 가장 흔히 활용되고 있고 F형태로 웹사이트를 읽어 내려가는 것과 같은 사용자 패턴을 가장 잘 보여주는 방법이기도 합니다.

Heat Map (이미지 출처 : eyetracking.ch)


2. Focus Map


Focus Map은 사용자 시선의 위치와 바라본 화면의 내용이 무엇인지를 함께 확인 할 수 있는 맵입니다. 다른 분석 방법들은 대부분 화면 내에서 시선의 위치를 표시하기 위해 뒤의 내용이 가려지는데 Focus Map은 그 내용이 보여지는것이 장점이기 때문에 다른 분석 방법들과 함께 활용하면 좋을것 같습니다.

Focus Map (이미지 출처 : searchenginewatch.com)




3. Bee Swarm


Bee Swarm은 이미지를 볼 때 사용자들이 집중해서 보는 곳이 어디인지를 점 형태로 모아서 보여주는 방법입니다. 광고 매체와 같은 마케팅 분야에서 사용자들이 이미지를 볼 때 시선이 어디에 집중 되는지를 찾아내기 위해 많이 활용되는 방법입니다.
 Bee Swarm (이미지 출처 : YouTube영상)



4. AOI (Area of Interests)


AOI는 이미지 내에서 특정한 영역을 지정해 오브젝트로 설정해주고 그 오브젝트에 대한 시선의 정보를 보여주는 방법입니다. AOI는 정보의 특성에 따라 영역 별로 중요도 및 우선순위 등을 구별하고자 할 때 사용하면 유용한 방법일것 입니다.

AOI (이미지 출처 : YouTube영상)


5. Scan Path


Scan Path는 Gaze Plot 이라고 부르기도 하고, 시선 흐름의 순서를 원과 선을 이어서 표시하고 시선이 머무른 정도를 원의 크기로 나타내주는 방법입니다. 사용자가 어떤 순서로 정보를 탐색하는지 알고자 할 때 유용한 방법입니다.


Scan Path (이미지 출처 : personal.cis.strath.ac.uk)

마치며


시선을 분석하기 위한 목적과 이유는 다양하겠지만 분석 할 수 있는 방법은 다소 제한적입니다. 얼핏 보면 그 방법이 그 방법인것 같이 보이기도 하구요. 그래서 분석을 할 때는 한 가지 방법이 아니라 여러 방법을 잘 조합하여 다각도로 분석해본다면 좀 더 의미있는 결과를 얻을 수 있지 않을까 생각합니다.

다음글에서는 pxd가 보유하고 있는 이동형 아이트래커로 "운전중에 스마트폰 네비게이션의 적절한 위치는 어디일까?"라는 질문을 가지고 진행한 실험의 과정과 결과에 대해서 소개해드리겠습니다.

[참고##아이트래커##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...