히트맵

화면 배치를 두고 벌어지는 다툼에는 오래 근거가 없었습니다. 이 버튼이 아래에 있으면 아무도 못 본다는 주장과 위에 있으면 오히려 방해된다는 주장이 맞붙으면, 이기는 쪽은 더 자주 말하는 사람이거나 직급이 높은 사람이었습니다.

분석 도구가 있어도 이 다툼은 안 풀렸습니다. 도구가 주는 숫자가 화면 한 장을 통째로 묶은 값이기 때문입니다. 요금제 페이지를 보고 그냥 나간 사람이 70퍼센트라는 사실은 알 수 있지만, 그 페이지의 어느 부분에서 그렇게 됐는지는 그 숫자 안에 없습니다. 고칠 자리를 찾으려면 화면을 열어 놓고 추측하는 수밖에 없었습니다.

페이지덱에서는 요금제 페이지를 두고 두 주를 끌었습니다. 현우는 문의하기 버튼이 비교표 아래로 내려가야 한다고 했고, 민서는 첫 화면에 보여야 한다고 했습니다. 둘 다 그렇게 생각하는 이유가 있었고, 둘 다 증거는 없었습니다.

히트맵은 그 자리에 기록을 올려놓습니다. 실제 방문자 수천 명이 어디를 눌렀고 어디까지 내려갔는지를 화면 그림 위에 그대로 겹쳐, 추측 두 개 대신 그림 한 장을 놓고 이야기하게 만듭니다.

히트맵 한 장은 다섯 가지로 이뤄집니다. 이 가운데 하나라도 빠지면 그림은 나오지만 읽을 수는 없습니다.

1. 바탕 화면 — 색을 겹칠 대상이 되는 화면 캡처입니다. 언제 찍은 어느 화면인지를 함께 적습니다. 그사이 배치가 바뀌었다면 색과 화면이 어긋나 아무 뜻도 없는 그림이 됩니다.
2. 색 층 — 세 종류를 따로 뽑습니다. 클릭 히트맵은 어디를 눌렀는지, 스크롤 히트맵은 어디까지 내려갔는지, 이동 히트맵은 마우스가 지나간 자리를 보여 줍니다. 앞의 둘은 행동이고 셋째는 짐작이라 무게가 다릅니다.
3. 색 눈금 — 대부분의 도구가 상대 눈금을 씁니다. 그 화면에서 가장 많이 눌린 지점을 100으로 두고 나머지를 그 비율로 칠하는 방식입니다. 그래서 다른 화면의 빨강과 이 화면의 빨강은 같은 양이 아닙니다. 그림 옆에 실제 클릭 수를 적어 두면 이 착각이 줄어듭니다.
4. 수집 조건 — 기간, 기기, 유입 경로, 로그인 여부입니다. 기기는 반드시 갈라 뽑습니다. 데스크톱과 모바일은 배치 자체가 달라서, 섞으면 두 화면의 색이 한 장에 포개져 어느 쪽 이야기인지 알 수 없게 됩니다.
5. 표본 수 — 그 그림에 몇 번의 방문이 들어갔는지입니다. 수백 건 아래에서는 사람 몇 명의 습관이 그대로 빨간 점이 되므로, 보통 1천 세션쯤 쌓인 뒤에 엽니다.

만드는 일은 도구가 합니다. 화면에 측정 코드를 한 번 심어 두면 방문 기록이 자동으로 쌓입니다. 사람이 하는 일은 어느 화면을 어느 기간에 어떤 조건으로 자를지 정하는 것이고, 히트맵의 품질은 거의 이 선택에서 갈립니다.

페이지덱에서는 제품 화면을 민서가, 랜딩 페이지를 현우가 뽑습니다. 랜딩 페이지는 행동 하나를 유도하려고 만든 단독 페이지라 보는 각도가 다릅니다. 민서는 사용자가 기능을 찾아내는지를 보고, 현우는 행동 유도 문구까지 내려오는 사람이 몇 퍼센트인지를 봅니다.

읽는 쪽은 디자이너와 그로스 마케터와 기획자이고, 읽을 때 지키는 것이 셋 있습니다.

1. 질문을 정하고 엽니다. 그냥 열어 두면 눈에 띄는 빨간 점 하나를 두고 이야기가 시작됩니다. 비교표까지 내려오는 사람이 얼마나 되는지를 묻고 열면 볼 곳이 하나로 좁혀집니다.
2. 히트맵에서 끝내지 않습니다. 이 그림은 어디를 눌렀는지만 알려 주고 왜 눌렀는지는 알려 주지 않습니다. 이상한 자리에 클릭이 몰리면 세션 리플레이로 그 사람들의 화면을 되감아 보거나 사용성 테스트로 같은 과업을 시켜 보는 것이 다음 순서입니다.
3. 결정은 다른 방법으로 확인합니다. 히트맵은 무엇을 고칠지 고르는 데 쓰고, 고친 것이 실제로 나은지는 A/B 테스트로 봅니다.

"요금제 페이지 히트맵 보니까 첫 화면 아래로 내려간 사람이 30퍼센트밖에 안 돼요. 비교표를 위로 올립시다."

스크롤 히트맵을 근거로 배치를 바꾸자는 제안입니다.

"여기 클릭이 몰리는데 버튼이 아니에요. 눌러도 아무 일도 안 일어나는 자리입니다."

사람들이 그 요소를 누를 수 있는 것으로 읽고 있다는 뜻이라, 진짜 버튼으로 만들거나 버튼처럼 보이지 않게 고쳐야 합니다.

"모바일이랑 데스크톱 따로 뽑아 주세요. 섞인 건 못 읽어요."

배치가 다른 두 화면이 한 장에 겹쳐 있어 판단할 수 없다는 뜻입니다.

두 주를 끌던 페이지덱의 요금제 페이지 논쟁은 히트맵 한 장으로 끝났습니다. 스크롤 히트맵을 보니 첫 화면 아래로 내려간 방문자가 30퍼센트였고, 그중 비교표까지 닿은 사람은 다시 절반이었습니다. 버튼을 위에 두자는 쪽도 아래에 두자는 쪽도 답이 아니었습니다. 아래쪽에 무엇을 놓든 열에 아홉은 보지 못하는 상태였기 때문입니다. 팀이 실제로 고친 것은 버튼 위치가 아니라 첫 화면의 길이였습니다.

그다음 주에 민서는 같은 페이지의 클릭 히트맵에서 표의 요금 숫자에 클릭이 몰린 것을 발견했습니다. 누를 수 있는 요소가 아니었습니다. 세션 리플레이로 열 명을 되감아 보니 숫자를 눌러 상세 조건을 보려던 사람들이었고, 그 자리는 그 뒤에 펼침 항목이 됐습니다.

진한 곳이 잘되고 있는 곳이라고 읽는 것이 가장 흔합니다. 색이 몰린 자리는 관심이 몰린 자리처럼 보이니 그렇게 읽기 쉽습니다. 클릭이 몰린다는 것은 사람들이 그 자리를 눌렀다는 사실만 말하고, 그 클릭이 원하던 결과로 이어졌는지는 말하지 않습니다. 반응 없는 요소에 클릭이 몰리는 것은 그 화면에서 가장 나쁜 신호에 속하는데도 그림에서는 가장 예쁜 빨간 점으로 보입니다. 빨간 곳을 성과로 읽고 회의에 가져가면 고쳐야 할 자리가 자랑거리로 바뀝니다.

히트맵 한 장으로 결정을 끝내려는 것도 자주 봅니다. 그림이 명확해 보이고 수천 명의 기록이라는 말이 붙으니 충분한 근거처럼 느껴집니다. 색은 그 화면 안에서만 견준 상대값이고, 사람들이 왜 그렇게 움직였는지는 담고 있지 않습니다. 그림만 보고 요소를 옮기면 옮긴 자리에서 다시 같은 모양의 그림이 나오는 일이 흔합니다. 색이 알려 주는 것은 어디를 볼지이고, 무엇을 할지는 그 뒤에 다른 방법으로 정합니다.