При нахождении на сайте Вы соглашаетесь с политикой обработки персональных данных.
Всё понятно!
Heatmap: тепловая карта сайта
Тепловая карта (Heatmap) — это визуальный инструмент, который показывает, какие области веб-страницы привлекают наибольшее внимание пользователей через клики, просмотры или взаимодействия. Цвет отражает плотность или величину значений: тёплые зоны означают больше действий, холодные — меньше.
Кратко
- Тепловая карта окрашивает страницу по плотности действий посетителей. На сайтах чаще всего используют карты кликов, прокрутки, движения мыши и взгляда.
- В Microsoft Clarity цвета теплеют по мере роста числа кликов; на карте прокрутки горячие зоны — популярные части страницы, холодные — непопулярные.
- Карта показывает, где посетители действуют, но не объясняет, почему. Выводы проверяйте записями сессий, опросами или тестом.
- Страница, которую изучают, должна иметь код счётчика: карта строится только по собранным данным.
Кому и зачем это знать
С запросом «heatmap» приходят с разными задачами. Найдите свою ситуацию.
Владелец сайтаСитуация: Посетители заходят, но заявок мало, и непонятно, что не так со страницей.Зачем: Карта кликов и прокрутки за несколько минут показывает, куда нажимают и докуда доходят, без догадок.Что сделать: Попросите специалиста показать карту главной страницы и страницы услуги. Задайте три вопроса: нажимают ли на кнопку заявки, докуда доходят до конца страницы, нет ли кликов по элементам, которые не являются ссылками.
Маркетолог, SEO-специалистСитуация: Нужно решить, что менять на посадочной странице, и объяснить это клиенту.Зачем: Карта даёт наглядный довод: вместо «мне кажется» вы показываете, где внимание, а где его нет.Что сделать: Соберите карту за период с достаточным числом визитов, отдельно по компьютерам и телефонам. Переносите важные элементы туда, где посетители доходят в большинстве, и сравнивайте карту до и после правок.
Дизайнер, разработчикСитуация: После редизайна нужно понять, не потерялись ли ключевые элементы.Зачем: Click-карта выявляет элементы, которые пользователи принимают за ссылки, и кнопки, которые остаются незамеченными.Что сделать: Проверьте «мёртвые» и «яростные» клики, затем исправьте элемент: сделайте его кликабельным или уберите внешний вид ссылки. После выпуска сверьте карту с прежней.
Новичок, студентСитуация: Встретили слово heatmap в аналитике и не поняли, что это.Зачем: Это один из самых простых способов увидеть поведение посетителей без сложной статистики.Что сделать: Откройте демо любого сервиса карт, найдите красные и синие зоны и объясните их своими словами. Затем прочитайте раздел о подводных камнях.
Виды тепловых карт для сайта
Для сайтов чаще всего сравнивают карты кликов и прокрутки: первая показывает нажатия, вторая — глубину просмотра. Каждый вид отвечает на свой вопрос.
| Вид | Что показывает | Для какого вопроса |
|---|---|---|
| Карта кликов | Где пользователи нажимают, включая элементы, которые не являются ссылками (на телефонах — касания) | Замечают ли кнопку, что принимают за ссылку |
| Карта прокрутки | Как далеко прокручивают страницу и какие части видят чаще | Докуда доходят, где разместить важное |
| Карта движения мыши (hover) | Где курсор задерживается | Что привлекает внимание на компьютере |
| Карта взгляда (eye tracking) | Где и сколько времени фиксируется взгляд | Что читают и в каком порядке |
| Карта областей (Clarity) | Сумма кликов по всем элементам внутри выбранной области | Сколько действий приходится на блок целиком |
Clarity также строит карты конверсий (какие клики ведут к покупке) и внимания (сколько времени пользователи провели на каждой части страницы).
Как читать цвета и клики на тепловой карте
В Clarity цвета теплеют по мере роста популярности участка: чем теплее, тем плотнее клики. На карте прокрутки горячие зоны — популярные части страницы, холодные — непопулярные, а «средний сгиб» показывает, что в среднем видно до начала прокрутки.
| Что видите | Что это значит | Что проверить |
|---|---|---|
| Горячая зона на кнопке заявки | Кнопку видят и нажимают | Растут ли заявки, а не только клики |
| Горячая зона на картинке или тексте без ссылки | Посетители принимают элемент за ссылку | Сделать элемент ссылкой или изменить оформление |
| Мёртвые клики (страница не отреагировала) | Посетитель ожидал реакции, а её не было | Исправить кнопку или скрипт |
| Яростные клики (быстрые повторы в одной области) | Посетитель не получает ответа | Проверить скорость отклика и ошибки |
| Холодная зона у важного блока на карте прокрутки | До блока доходят немногие | Поднять блок выше или сократить предшествующий текст |
По исследованию NN/g 2018 года (120 участников, более 130 000 фиксаций взгляда), 57% времени просмотра страницы приходится на часть выше сгиба; в аналогичном исследовании 2010 года было 80%. Вывод NN/g: главное размещайте ближе к верху, а продолжение страницы подсказывайте, например обрезанным текстом.
Что делать с результатом: типичные решения
| Ситуация | Решение |
|---|---|
| Основная кнопка в холодной зоне | Переместите её в место, куда доходит большинство, или продублируйте выше |
| Клики по заголовку или картинке без ссылки | Добавьте ссылку, если она нужна посетителю, или уберите ложный намёк на кликабельность |
| Мобильная карта сильно отличается от десктопной | Оптимизируйте экраны отдельно, не копируйте решения |
| Правки внесены | Соберите новую карту за сопоставимый период и сравните с прежней; в Clarity для этого есть режим сравнения |
Один показатель не доказывает причину: сопоставьте карту с записями сессий и вашей целью страницы.
Ограничения и подводные камни
- Данные только со страниц с кодом. Карта Clarity показывается на страницах, где установлен код отслеживания. Сначала подключите счётчик, затем собирайте данные.
- Объём выборки. В Clarity карта строится максимум по 100 000 просмотров страницы. Порога снизу нет, но по малому числу визитов выводы ненадёжны.
- Позиция клика. Clarity строит карты кликов по элементам, а не по абсолютной позиции мыши, поэтому при разных размерах экрана оценка точнее. Но отображение отдельного просмотра может не показать элемент, по которому кликнули.
- Цвета. Радужная шкала привычна, но плохо читается людьми с нарушением цветового зрения, а её цвета неравномерны и могут создавать ложные границы. Лучше подходят однородные по восприятию палитры, например Viridis.
- Причины. Карта показывает, что произошло, но не объясняет, почему. Сочетайте её с записями сессий, опросами и тестами.
Типичные ошибки
- Делать выводы по карте с небольшим числом визитов.
- Смотреть компьютерную и мобильную версии как одну: страницы на разных экранах устроены по-разному.
- Принимать «горячую» зону за успех: клики по неработающему элементу тоже дают тепло.
- Объяснять причины поведения только по карте, без записей сессий и опросов.
- Менять сразу много элементов, после чего нельзя понять, что сработало.
Частые вопросы
Что такое heatmap простыми словами?
Цветная «подсветка» страницы по действиям посетителей: чем теплее цвет, тем больше кликов или внимания в этой зоне.
Какие бывают виды тепловых карт?
Для сайтов обычно используют карты кликов, прокрутки, движения мыши (hover) и взгляда (eye tracking). В Microsoft Clarity также есть карты областей, конверсий и внимания.
Как читать тепловую карту?
Тёплые цвета означают больше действий, холодные — меньше. На карте прокрутки горячие зоны — части страницы, которые видят чаще, холодные — те, до которых доходят реже. Сверяйте это с целью страницы: заявкой, звонком, покупкой.
Что такое «мёртвые» и «яростные» клики?
По определению Clarity, мёртвые клики — это клики, на которые страница не отреагировала, яростные — быстрые повторные клики в одной небольшой области за короткое время.
Сколько трафика нужно для тепловой карты?
Clarity строит карту без минимального порога трафика. Но по небольшому числу визитов выводы ненадёжны: ориентируйтесь на устойчивые закономерности, а не на единичные клики.
Чем тепловая карта отличается от карты кликов?
Тепловая карта — общее название визуализации, а карта кликов — её вид, где окрашены места нажатий. Есть и другие виды: прокрутка, наведение, взгляд.
Откуда появился термин heat map?
Разработчик Кормак Кинни в 1991 году зарегистрировал торговую марку «heat map» для программы, показывавшей данные финансовых рынков в реальном времени. Сам приём старше: в 1873 году Туссен Луа раскрасил матрицу социальной статистики Парижа.
Связанные термины
- Clickmap: карта кликов — один из видов тепловой карты, а не вся категория
- Eye-tracking: измеряет положение взгляда специальным оборудованием, а не клики на сайте
- Вебвизор: показывает отдельные визиты посетителей, а тепловая карта — сводную картину по многим
- Below the fold: часть страницы ниже первого экрана; карта прокрутки показывает, кто до неё доходит
- A/B-тестирование: сравнивает две версии страницы по результату, а карта описывает поведение на одной