Что такое тепловая карта сайта и зачем она нужна

Когда бизнес вкладывает бюджет в сайт и рекламу, ожидается, что они сразу принесут заявки и клиентов. Однако поведение посетителей на сайте не всегда очевидно. Часто возникает следующая ситуация: трафик и просмотры страниц есть, а обращений мало или нет совсем. Понять, почему так происходит, помогают тепловые карты для веб-аналитики.

Тепловые карты сайта (Heatmap) — это визуальные отчёты, которые показывают, как пользователи взаимодействуют с сайтом и его отдельными элементами. С помощью тепловых карт можно увидеть, какие именно элементы сайта привлекают внимание пользователей — куда они кликают, какие блоки просматривают, насколько глубоко пролистывают (скроллят) страницу, какие области сайта не замечают или не используют. Как правило, зоны, с которыми активно взаимодействуют пользователи, выделены на картах «теплыми» цветами (от желтого к красному), менее активные зоны — «холодными» (от зеленого к синему). На рис. 1 приведен пример «Карты кликов» сервиса «Яндекс Метрика».

рис. 1 — Карта кликов в «Яндекс Метрике»

Наиболее популярным и при этом бесплатным русскоязычным сервисом для веб-аналитики является упомянутая выше «Яндекс Метрика». Далее рассмотрим все виды тепловых карт, доступных в данном сервисе.

Карта кликов

Показывает, как часто посетители сайта кликают на его элементы (в том числе на те, к которым не привязана ссылка). Помогает понять, насколько заметны важные кнопки и ссылки, а также позволяет выявить, есть ли на сайте некликабельные элементы, по которым пользователи по какой-то причине активно кликают. Примеры карты кликов в «Яндекс Метрике» можно увидеть на рис. 1 и рис. 2.

рис. 2 — Карта кликов в «Яндекс Метрике»

Карту кликов в «Яндекс Метрике» можно использовать в нескольких режимах:

1) «Тепловая карта» — чем больше кликов, тем теплее цвет, и наоборот — чем их меньше, тем холоднее цвет (рис. 3).

рис. 3 — Режим «Тепловая карта» в карте кликов «Яндекс Метрики»

2) «Монохромная карта» — для отображения данных используется один цвет: чем больше кликов по элементу, тем более насыщенным цветом он выделен (рис. 4).

рис. 4 — Режим «Монохромная карта кликов»

3) «Клики по ссылкам и кнопкам» — на карте не выводятся клики по элементам, к которым не привязана ссылка (рис. 5).

рис. 5 — Режим «Клики по ссылкам и кнопкам»

4) «Карта прозрачности» — экран в этом режиме затемнен, клики по элементам отображаются как высветленные участки на темном фоне. Соответственно, чем больше было кликов по элементу, тем более светлым этот элемент становится на затемненном фоне.

рис. 6 — Режим «Карта прозрачности» карты кликов

5) «Карта элементов» — в данном случае цветом выделены элементы сайта. Чем больше кликов было по элементу, тем более теплым цветом он выделен на карте и наоборот.

рис. 7 — Режим «Карта элементов» карты кликов

Как может пригодиться карта кликов.

С помощью карты кликов можно определить, какие области интерфейса являются наиболее популярными, а затем расположить в данных областях CTA (call to action или призыв к действию — кнопки, формы, всплывающие окна и др.) для получения конверсий. Аналогичным образом можно выявить менее кликабельные области сайта и поработать с ними — переместить CTA из этих областей в более популярные блоки сайта, либо поменять текст, размер или оформление CTA таким образом, чтобы привлечь внимание пользователей. Также с помощью карты кликов можно выявить элементы сайта без ссылок, но с большим количеством кликов от пользователей. В таком случае можно сделать элемент кликабельным или добавить к нему подсказку с объяснением.

Какие есть ограничения у карты кликов.

Карта кликов не показывает мотивы пользователей — только сам факт клика. Чтобы попытаться понять мотивы пользователя, желательно комбинировать данные карты кликов с информацией о посетителе, сессиях, в течение которых совершались клики, а также с данными по конверсиям.

Карта скроллинга

Инструмент, Карта скроллинга, показывает, как распределяется внимание посетителей на определенных областях страниц сайта — до какой глубины страницы доходят пользователи и какие блоки видят чаще всего (рис. 8).

рис. 8 — Карта скроллинга в «Яндекс Метрике»

На карте при наведении курсора на определенный участок страницы можно увидеть среднее время, которое пользователи провели на сайте, и количество просмотров данного участка (рис. 8.1).

рис. 8.1 — Карта скроллинга в «Яндекс Метрике»

Карта скроллинга представлена в двух режимах:

1) «Тепловая карта» — чем больше времени пользователи проводили на определенном участке страницы, тем более теплым цветом этот участок окрашен, и наоборот.

2) «Карта прозрачности» — чем больше времени пользователи просматривали область страницы, тем светлее затемненный фон, чем меньше — тем темнее.

Как может пригодиться карта скроллинга.

С помощью карты скроллинга можно подобрать оптимальную длину страниц сайта и правильно разместить на нем важную информацию (кнопки, формы и др.).

Какие есть ограничения у карты скроллинга.

Карта агрегирует всю аудиторию без разделения на сегменты. Чтобы не делать ошибочных выводов, нужно вручную сегментировать аудиторию по устройствам, источникам трафика и другим параметрам.

Карта ссылок

Инструмент, который измеряет и отражает статистику переходов по ссылкам на сайте. Ссылки на карте подсвечиваются разными цветами — от более теплого оттенка (красного) до наиболее холодного (синего). Соответственно, чем популярнее ссылка, тем более теплым цветом она будет выделена, и наоборот (рис. 9).

рис. 9 — Карта ссылок в «Яндекс Метрике»

Если кликнуть по одной из ссылок во время просмотра карты, то отобразятся следующие данные: сама ссылка, количество переходов по ссылке, доля переходов по этой ссылке относительно других на странице (рис. 9.1).

рис. 9.1 — Карта ссылок в «Яндекс Метрике»

Как может пригодиться карта ссылок.

Карта ссылок может быть полезна для анализа эффективности навигации сайта, оценки кликабельности конверсионных кнопок («Заказать звонок», «Оформить заявку» и др.), поиска сильных и слабых зон с CTA (если одна и та же кнопка в разных местах страницы показывает разные результаты — можно перераспределить акценты или убрать слабые зоны), проверки приоритетов пользователей для понимания их истинных интересов.

Какие есть ограничения у карты ссылок.

На карте не отображаются клики по некликабельным элементам, а также время до взаимодействия с элементом.

Помимо рассмотренных тепловых карт, представленных в «Яндекс Метрике», существуют и другие, которые доступны в сторонних сервисах веб-аналитики. Рассмотрим некоторые из них.

Карта движения курсора (Move / Hover map) — тепловая карта, отражающая траектории перемещения курсора.

Помогает понять, какие визуальные элементы привлекают внимание до того, как пользователь кликнул.

Сервисы, в которых доступна карта движения курсора: Hotjar (пример на рис. 10), Crazy Egg, Microsoft Clarity, Plerdy. В «Яндекс Метрике» есть аналогичный инструмент — Вебвизор, в котором можно изучить покадровую запись всех действий пользователя с выделением движения курсора.

рис. 10 — Пример карты движения курсора на демо-странице

рис. 10.1 — Запись визита с движением курсора на демо-странице

Карта внимания (Attention Map) — комбинирует данные о времени, проведенном в различных областях страницы, с информацией о движении курсора для оценки распределения внимания пользователя.

Сервисы, в которых доступна карта внимания: Hotjar, Crazy Egg, Microsoft Clarity (пример на рис. 11), Plerdy. В «Яндекс Метрике» есть альтернатива — сочетание карты скроллинга и вебвизора. Данное сочетание позволяет анализировать внимание, но не визуализирует его тепловой картой.

рис. 11 — Карта внимания на демо-странице

Карта взгляда (Eye Tracking Map) — это профессиональный инструмент UX-исследований (исследований пользовательского опыта), который строится на основе данных о реальном движении глаз. Для их получения используется специальное оборудование (ай-трекеры), поэтому такие карты не доступны в классических сервисах веб-аналитики. Используется научными лабораториями, крупными сайтами и разработчиками интерфейсов. Примеры платформ, которые занимаются построением таких карт, — Tobii Pro, Smart Eye / iMotions.

Карта тапов (Touch map) — отображает касания пользователей на каждом экране мобильного приложения — в каких областях интерфейса пользователи касаются экрана, свайпают, пытаются приблизить, долго или часто нажимают и т.п. Касания отображаются по шкале от наиболее холодного (касаний мало) до более теплого цветов (касаний много).

Сервисы, в которых доступна карта тапов: Hotjar, Microsoft Clarity, Smartlook (пример на рис. 12), UXCam, Appsee. В «Яндекс Метрике» карта тапов не выделена как отдельный тип отчёта, но тапы отображаются на «Картах кликов», если отфильтровать клики по мобильным устройствам.

рис. 12 — пример карты тапов с сайта демо сайта

Таким образом, существует множество тепловых карт для изучения пользовательского опыта и сервисов, которые предоставляют доступ к ним. Одним из наиболее популярных, при этом бесплатных русскоязычных сервисов является «Яндекс Метрика».

Далее резюмируем, в чем заключается польза тепловых карт для бизнеса:

1. Понимание реальных интересов аудитории.
   То, что важно с точки зрения владельца сайта, и то, что действительно замечает пользователь — часто разные вещи.
2. Рост конверсии без дополнительных вложений.
   Иногда достаточно изменить расположение кнопки или усилить заголовок, чтобы заявок стало больше.
3. Улучшение удобства сайта.
   Если посетителю сложно понять, куда нажать, он уйдет — тепловая карта показывает такие проблемные места.
4. Снижение стоимости привлечения клиента.
   Когда сайт работает эффективнее, каждая заявка обходится дешевле при тех же рекламных расходах.

На реальном примере покажем, как карта кликов помогла нам увеличить число заявок.

На сайте компании, предоставляющей услуги по дезинсекции, был некликабельный элемент с информацией о скидке (рис. 13).

рис. 13 — карта кликов «Яндекс Метрики» на сайте с услугами по дезинсекции

Анализ карты кликов показал, что пользователи нажимают на этот элемент — не очень часто, но клики есть. Тогда мы решили добавить к данному элементу форму на получение скидки, которая открывалась при клике.

В течение следующего года за счет добавления формы к некликабельному ранее элементу мы получили 178 целевых визитов дополнительно, не увеличивая при этом бюджет (рис. 14).

рис. 14 — Результаты после внесения изменений на сайт

Таким образом, тепловая карта — это простой и наглядный инструмент, который помогает понять поведение пользователей и принимать решения на основе фактов, а не интуиции. Она позволяет точечно улучшать сайт и увеличивать количество заявок без дополнительных расходов на рекламу. Главное — собрать достаточный объем данных для анализа и не забывать про сегментацию и совмещение данных разных тепловых карт, если это необходимо.