히트맵의 허와 실
히트맵을 어떻게 잘 활용할 수 있을까? 매력과 효과 자세히 살펴보기
데이터와 분석, 디자인을 키워드로 하는 좋은 글을 찾아 번역해서 소개하고 있습니다.
다섯 번째 소개글은 ConversionXL의 그로스 마케터 Alex Birkett이 쓴
원문은 링크를 클릭해 확인하실 수 있습니다. (매끄러운 전개를 위해 의역된 부분이 있습니다.)
-----
마우스 트래킹 히트맵은 분석도구 중에서는 이미 유명한 편입니다. 히트맵이 가진 진정한 장점은 무엇일까요?
히트맵을 이용해 유저들이 당신의 사이트에서 어떤 행동을 하는지 관찰하기는 쉽습니다. 물론, 다른 방식으로도 사용자 관찰이 가능하고 아마 정확도가 더 높을지도 모릅니다.
그러니까, 히트맵이 '어떻게' 높은 전환율을 추구하는데 유용하게 쓰인다는 걸까요?
히트맵(Heat Map)이 뭐예요?
히트맵은 데이터를 시각적으로 표현한 것입니다. 90년대 중반 Cormac Kinney에 의해 개발되었으며 당시 트레이더들이 금융 시장을 공략하는 데 사용되었죠. 기본적으로 히트맵은 사람들이 마우스나 트랙패드로 무엇을 하는지 기록하고 정량화한 다음 시각적으로 이해하기 쉬운 방법으로 표현합니다.
히트맵은 아래와 같이 세부 카테고리로 나눌 수 있습니다:
• (마우스의 움직임을 추적하는) 호버 맵
• 클릭 맵
• 스크롤 맵
위 히트맵 유형 중 어떤 것이라도, 데이터를 통한 정확한 추론을 해내기 위해서는 결과를 내기 전에 페이지/화면당 충분한 수의 샘플 데이터를 확보해야 합니다. 경험에 따르면 디자인된 화면 혹은 디바이스 당 2000~3000 페이지뷰 정도가 적절합니다. (모바일과 데스크톱은 따로 구분해야 합니다.) 50명 정도의 유저 데이터 모수에 기반한 히트맵이라면 신뢰하기 어렵죠. 다양한 유형의 히트맵이 있으니 각각 살펴보고 제공하는 가치를 파악해보도록 합시다.
호버 맵(Hover Maps)
사람들이 ‘히트맵’이라고 할 때 주로 이 호버 맵을 가리켜 말합니다. 호버 맵은 사람들이 마우스 커서를 이용해 돌아다닌 영역을 보여줍니다. 사람들이 어딘가를 볼 때 마우스를 갖다 대기 때문에, 어떻게 웹페이지를 읽는지 보여줄 수 있다는 아이디어에 기반합니다.
호버 맵은 시표추적검사(eye tracking; 이하 아이트래킹)라는 고전적인 사용성 테스트 기술에서 발전된 유형입니다. 아이트래킹은 유저들이 사이트를 어떻게 돌아다니는지 이해하기 유용한 데 반해, 마우스 트래킹은 몇몇 극단적인 추론 때문에 다소 부족한 점이 있습니다.
마우스 포인터 트래킹의 정확성은 항상 의문의 여지가 있습니다. 사람들은 아마 마우스 포인터를 갖다 댄 곳과 다른 곳을 보고 있을지도 모릅니다. 마찬가지로 그다지 주의를 기울이지 않는 부분 위에 마우스를 대고 있을 가능성도 있죠. 그러니까 히트맵이 정확한지, 정확하지 않았는지 결코 알 수 없다는 말입니다.
2010년에 Google의 선임 사용자 경험 연구원 Anne Aula 박사가 발표한 연구에 따르면 마우스 트래킹에 대한 몇 가지 실망스러운 부분은 다음과 같습니다:
• 오직 6%만이 마우스의 움직임과 눈동자 움직임 간의 수직적인 상관관계를 보였다.
• 19%는 마우스의 움직임과 눈동자 움직임 간의 수평적인 상관관계를 보였다.
• 10%는 어떤 링크 위에 마우스를 올려두었지만 다른 것을 보면서 페이지를 읽어 나갔다.
우리는 보통 이런 유형의 히트맵을 무시합니다. 설령 당신의 생각이나 특정한 의심을 지지하기 위해 히트맵을 보더라도, 너무 신뢰하지는 마세요. Simple Usability의 Guy redwood도 마우스 트래킹에 관해 비슷한 생각을 가지고 있습니다:
5년 넘게 아이 트래킹에 관한 연구를 진행했지만, 사용자 경험 연구원의 관점에서 솔직히 말해 눈동자의 움직임과 마우스 움직임 사이에는 유용한 상관관계가 없습니다ㅡ단, 당신이 어딘가를 "클릭"했을 때는 그곳을 분명히 보고 있다고 할 수 있지만요.
만약 상관관계가 있었다면, 진작 아이 트래킹 장비를 사는데 쓰는 돈을 줄이고 웹사이트와 세션으로부터 얻은 마우스 트래킹 데이터를 사용했을 겁니다.
따라서 Peep(ConversionXL 대표)은 히트맵을 "불쌍한 아이 트래킹 툴"이라고 부르기도 했습니다.
히트맵이 보여주는 것과 사용자들의 행동 간 겹치는 부분이 많지 않기 때문에 실제적인 인사이트를 유추해내는 것은 상당히 어렵습니다. 당신은 아마 이미지를 설명하기 위해 실제 사실보다 더 많은 스토리를 지어낼 것입니다. 아래 글의 경우 축구 해설에 사용된 히트맵에 대한 얘기인데, 꽤 의미가 있어 보입니다:
히트맵이 하는 일이 뭔가요? 그건 선수들이 경기 중 어떻게 이동하는지에 관해 모호한 인상만 줄 뿐이에요. 글쎄, 그냥 관련 신문기사 일부만 봐도 선수들이 어떻게 움직였는지 대략적으로 파악하는 게 어렵지 않죠.
어떤 연구는 실제 응시한 지점과 커서의 위치 간의 더 높은 상관관계를 암시하는 연구를 하기도 했지만, 데이터를 잘못 해석하거나 모호한 인사이트를 통해 편견으로 치우친 인사이트를 도출할 가능성을 감내할 만큼 가치가 있는지 자문해보아야 할 것입니다.
알고리즘으로 그린 히트맵(Algorithm generated heatmaps)
히트맵과 유사한 방식으로, 유저 인터페이스를 분석하기 위한 알고리즘을 사용해 만들어내는 히트맵 도구들도 있습니다. 이런 툴들은 색, 대비, 시각적 계층, 크기 등 다양한 특성을 고려합니다. 신뢰할 수 있냐고요? Aura.org에서 어떻게 사용했는지 살펴봅시다:
소프트웨어가 이미지 안의 다른 요소들의 가시성을 계산하는 '시각적 집중 알고리즘(Visual Attention algorithms)’은 종종 가격이 저렴한 대안품으로 판매되었죠. 하지만 PRS의 연구에 따르면 해당 알고리즘이 디자인 간 차이를 감지할 만큼 충분히 민감하지 않고, 특히 텍스트 메시지의 시각적인 예측까지 하기엔 아직 부족한 단계입니다.
(필자: PRS는 별도로 아이 트래킹 조사 서비스를 판매하고 있으므로 연구가 편향되었을 가능성이 있습니다.)
알고리즘에 기반해 만들어진 지도를 충분히 신뢰할 수 없다는 게 확실한 반면, 호버 맵이 더 낫다는 보장도 없습니다. 특별히 확보할 수 있는 트래픽이 낮다면, 오히려 알고리즘 툴이 사용성 조사를 위한 시각적 데이터를 일부 제공할 수 있을 것입니다. 즉각적이면서도 꽤 쓸만하죠. 다음과 같은 툴이 있습니다:
• EyeQuant
• Feng GUI
명심하세요. 뭔가 마법 같은 일이 발생하는 건 아닙니다. 이건 알고리즘에 기반해 그린 이미지고 실제 사용자 행동에 기반한 것이 아님을 기억하세요.
클릭 맵 (Click Maps)
클릭 맵은 클릭 데이터의 합계로 구성된 히트맵을 보여줍니다. 파랑은 상대적으로 적은 클릭을, 난색인 붉은 계열로 갈수록 클릭이 더 많아진다는 것을 의미하며 가장 많은 클릭은 밝은 하얀색과 노란색 점으로 표현되죠.
꽤 근사해 보이면서도 분명히 맵 안에 가치 있는 이야깃거리가 많습니다. 또 팀 간에 최적화의 중요성과 어떤 것이 작동하고 안 하는지 설명하는 것을 도와줍니다. 사람들이 클릭을 많이 하는데 링크가 걸려있지 않은 부분을 포함한 이미지를 발견하셨나요? 그렇다면 해당 부분을 링크로 만들든 무엇이든 조치를 취해야 합니다.
사람들이 어디를 클릭하는지는 (일반적으로 선호하는) Google Analytics를 통해서도 볼 수 있습니다. 강화된 링크 속성을 설정했다면 Google Analytics와의 협업은 훌륭합니다. (하지만 어떤 사람들은 클릭 맵을 시각적인 방식으로 보는 것을 더 좋아합니다.)
만약 Google Analytics 메뉴에서 방문형태(Behavior) > 사이트 콘텐츠(Site Contents) > 모든 페이지(All Pages)를 선택하고 특정 URL을 클릭하면 각 URL에 대한 이동 흐름 요약ㅡ어디서 사람들이 들어오고 다음에 어디로 이동하는지ㅡ을 볼 수 있습니다. 꽤 유용한 기능이죠.
위에서 말했듯이 클릭 맵의 유용한 점은 사람들이 링크가 없는 곳을 클릭할 때 쉽게 알아챌 수 있다는 것입니다. 만약 사람들이 누르고 싶어 하는데 링크가 아닌 무언가(이미지, 문장 혹은 어떤 것이든)를 발견한다면:
1. 그 ‘무언가’를 링크로 만드세요.
2. 단 ‘무언가’를 너무 링크 같아 보이지 않게 만들어야 합니다.
이것은 집계된 클릭 데이터를 받아들이고 전체적인 트렌드를 보기에 쉽고 빠른 방식입니다. 주의할 점은, 간편한 스토리텔링의 함정에 넘어가지 않아야 합니다.
주의력 맵(Attention maps)
주의력 맵은 사용자가 브라우저를 수평 혹은 수직으로 스크롤할 때 페이지의 어떤 영역을 가장 많이 보았는지 보여주는 히트맵의 종류입니다. 즉, 사용자들이 얼마나 스크롤을 많이 내리는지, 페이지에서 얼마나 오랜 시간을 보내는지를 고려해 페이지의 어떤 영역을 가장 많이 보는지 총괄적으로 보여줍니다.
Peep은 이것이 다른 마우스 움직임이나 클릭 히트맵보다 훨씬 유용하다고 생각합니다. 어떤 중요한 정보(텍스트나 시각적인 요소)가 일부 포함된 영역이라면 거의 대부분의 사용자들이 해당 영역을 보고 있다는 게 명확하기 때문입니다. 이 방식이 사용자를 고려해 페이지 디자인하는 것을 훨씬 쉽게 만듭니다.
Peep이 어떻게 말했는지 볼까요:
주의력 맵을 정말 유용하게 만드는 건 서로 다른 화면 사이즈와 해상도를 고려해 유저의 브라우저 안에서 어떤 부분이 많이 보이는지 알려준다는 것입니다. 유저의 관심도를 이해하는 것은 페이지 디자인의 효율성을 가져오죠. 특히 펼쳐지지 않은 부분에 관해서는요.
스크롤 맵 (Scroll maps)
스크롤 맵은 사람들이 페이지를 얼마나 많이 스크롤해서 내려보는지 보여주는 히트맵의 종류입니다. 사람들은 유저들이 어느 지점에서 떨어져 나가는지 궁금해하기 때문에 꽤나 유용하게 쓰일 수 있습니다.
어떤 길이의 페이지건 스크롤 맵을 쓸 수 있지만, 특히 길이가 긴 형태의 판매 페이지나 랜딩 페이지를 디자인할 때 적절합니다. 일반적으로, 페이지가 길수록 사람들은 끝까지 스크롤을 내리지 않습니다. 일반적인 행태이므로 콘텐츠의 우선순위를 정할 때, 무엇을 반드시 포함해야 하고 어떤 것은 넣으면 좋은 정도인지 정할 수 있도록 도와줍니다. 중요도가 높은 콘텐츠일수록 사람들의 주의를 끌 수 있도록 화면 상단에 놓아두세요.
스크롤 맵은 또한 당신의 디자인을 살짝 비트는 것을 돕기도 합니다. 스크롤 맵에서 강한 색상 변화가 있다면, 흔히 “논리적인 종료”라고 부르는데 다음에 어떤 내용이 오든지 간에 사람들이 이전의 내용에 더 이상 연결되어 있지 않다는 것을 의미합니다. 이건 꽤 정확한 이탈 시점을 알려주는 것으로 Google Analytics 만으로는 알기 어려운 정보입니다. 따라서, 길이가 긴 랜딩페이지의 경우 내비게이션에 관한 단서를 추가하거나 스크롤 액션이 어디에서 멈추는지에 대한 좀 더 가시적인 단서를 줘야 할 것입니다.
세션 리플레이(Session Replay)를 사용하세요
세션 리플레이를 ‘히트맵’이라고 하기는 애매하지만, 히트맵을 제공하는 대부분의 도구에서 가장 가치 있는 부분 중 하나이기에 소개합니다. 세션 리플레이는 사용자들이 사이트 내를 어떻게 돌아다니는지 비디오 녹화해서 보는 것과 같은 효과를 제공합니다. 유저 테스팅과 흡사하지만 대본이나 오디오가 없습니다. 하지만 대게 돈을 쓰는데 소극적이기 때문에 리플레이가 (경제적인 측면에서도) 매우 효과적인 대안이 될 수 있습니다.
세션 리플레이는 질적인 데이터에 가깝습니다. 당신은 아마 병목이 발생하는 부분이나 사용성 이슈를 감지하기 위해 노력하고 있을 것입니다. "사람들이 원하는 행동을 제대로 완료하지 못하는 곳이 어디일까? 어디쯤에서 포기해버리는가?"과 같은 질문을 던질 것입니다.
최고의 사례 중 하나는 사람들이 입력 칸을 어떻게 채우는지 지켜보는 것입니다. Google Analytics의 이벤트 트래킹을 통해서도 환경을 설정할 수 있지만, 유저의 세션 리플레이만큼 좋은 인사이트를 제공해주진 못할 것입니다. 또한, Google Analytics를 통해 성과가 좋지 않은 페이지를 발견했다 하더라도 '왜 그런지'는 알기 어렵습니다. 따라서 해결 가능한 문제점이 무엇인지 찾아내기 위해 세션 리플레이를 사용할 수 있습니다.
또, 당신은 사용자들이 페이지에서 얼마나 빨리 읽고 스크롤을 내리는지 등을 관찰할 수도 있습니다. 물론 리플레이를 분석하는 것 또한 타이밍 문제로 볼 수 있습니다. (역자: 리플레이 여러 개를 가지고 종합적인 판단을 내려야 하거나 특정 세션을 관찰하다가 얻어걸리는 경우가 많기 때문에 '타이밍'이라는 용어를 쓴 것 같습니다.) 하지만 확실히 유효한 점이 있기 때문에 저희의 경우 하루의 절반 정도를 새로운 의뢰인 사이트에 대한 비디오를 관찰하는데 씁니다.
히트맵과 관련된 잘못들
히트맵은 의심스러울 수 있습니다. 종종 사람들은 해몽 같은 주장을 지지하는 근거로 히트맵을 사용합니다.
다시 말해, 위에서 토론했던 데이터의 부정확성에 관한 부분을 무시하면서 전환율 조사에 관한 중요한 부분에서 잠재적인 편견에 빠지게 되어 버리기도 합니다. Malwarebytes의 최적화 부서 담당자 Andrew Anderson이 다음과 얘기했습니다:
사람들이 어디를 클릭하는지 쫓는 것보다 비율, 가치에 대한 이해 부족을 보여주는 사례가 없어요. 사람들이 더 클릭하거나 덜 클릭하는 것이 좋음 혹은 나쁨을 말하나요? 가장 많이 클릭된 것이 제일 중요하다고요? 두 배 이상의 사람들이 한 곳을 클릭하게 되면 무슨 일이 발생하겠어요? 어떤 것이 더 영향력을 갖기 위해 많이 클릭되어야만 할까요? 어떤 건 조금도 클릭되지 않는다면요? 히트맵은 의미 있는 명확한 답을 제공하지도 않으면서 수천 가지 질문만 제공할 뿐이에요.
우리가 알아야 하는 것은 대부분의 사람들이 아이템의 가치를 결정하기 위해 그들의 편견을 가지고 받아들이는 정보를 걸러 낸다는 거예요. 이런 방식은 가장 가치 있는 정보와 적극적인 활동에 대한 판단을 혼란스럽게 만들어요. 아마 어떤 사람들은 최소한 모델 유형 중 대표적인 선형 비율 모델도 따르지 않을걸요. 아마 가치 있는 인사이트와 상관없이 페이지의 특정 아이템에 접근하도록 사람들을 부추길 것입니다. 최악의 경우 히트맵 혹은 클릭에 기반한 메트릭을 스토리 텔링에 활용하거나 어떤 것이 사이트에 가장 좋을지 자신이 의도한 대로 유도하는데 사용할 거예요.
반면, 히트맵은 부서 내 분석 경험에 대해 전문적이지 못한 사람들에게 문제에 관해 소통하기에는 꽤 유용합니다. 하지만 그들이 가져오는 대부분의 인사이트는 다른 도구에서도 조금씩 수집할 수 있으며, 오히려 Google Analytics의 경우 편견에 관한 스토리 텔링이나 해석에 관해서는 덜 흔들리는 편이죠.
다시 말해, 히트맵은 최적화의 무기고에서 훌륭한 도구이지만, 프로젝트를 결정하거나 실험을 계획할 때 전부 혹은 최종결정자가 되어서는 안 됩니다.
결론
히트맵들은 보기에 꽤 멋진 도구입니다. 뿐만 아니라 (제대로만 사용한다면) 상당한 가치를 제공하죠.
• 알고리즘 히트맵(Algorithmic heat maps)은 적은 사이트 트래픽으로도 사용자들이 사이트를 어떻게 사용하는지 아이디어를 제공합니다.
• 클릭 맵(Click maps)은 사람들이 어디를 클릭하고 클릭하지 않는지 높은 단계의 시각화를 제공합니다.
• 주의력 지도(Attention maps)는 사람들이 웹사이트의 어느 부분을 많이 보고 모든 사용자들에게 가장 눈에 띄는 부분이 어디인지
모든 브라우저와 디바이스를 대상으로 분석할 수 있도록 도와줍니다. 즉, 가장 가치 있게 생각하는 것이나 중요한 요소를 어디에 둘 지 결정할 수 있도록 합니다.
• 스크롤 맵(Scroll maps)은 긴 랜딩 페이지를 디자인할 때 유용하고, 콘텐츠의 우선순위에 따라 배치하고 사람들이 계속 페이지 스크롤을 내릴 수 있도록 디자인하는 것을 도와줍니다.
• 사용자 세션 리플레이(User session replays)는 당신의 무기고에서 대체할 수 없는 도구입니다.
하지만 전환율 조사에 있어 히트맵을 너무 과신해서는 안됩니다. 결과가 잘해야 제한적인 데 머물거나 최악의 경우 편견과 착각한 인사이트의 조합에 따라 잘못된 판단을 내릴 수도 있기 때문입니다.
---
히트맵에 대한 공부에 도움이 되었나요?
전체적인 트렌드와 인사이트를 얻기 편리한 히트맵, 사용자 관찰을 위한 최고의 도구 세션 리플레이를 간단한 코드 삽입으로 추적할 수 있는 유저해빗을 사용해 보세요!
Behavioral Insight를 위한 UX기반 모바일 애널리틱스, 유저해빗
