Тепловая карта сайта

Тепловая карта кликов – это отчёт, который накладывает клики посетителей на страницу сайта и окрашивает их по частоте: тёплые цвета там, где нажимают часто, холодные там, где редко. В Яндекс Метрике он называется «Карта кликов».

На странице услуги клиники есть фото врача. Посетители нажимают на него, ждут анкету с опытом и отзывами, а ничего не происходит: фото не ссылка. В отчётах Метрики это никак не видно, зато на карте кликов фото горит красным пятном. Справка Метрики прямо называет это одной из задач карты: находить элементы, которые посетители принимают за ссылку, хотя ссылки там нет.

Какие карты есть в Метрике и как их включить

Под тепловыми картами обычно понимают несколько отчётов. В Метрике они собраны в разделе карт:

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

Все карты включаются одной опцией. В разделе «Настройки» → «Счетчик» отмечают «Вебвизор, карта скроллинга, аналитика форм» и ставят обновлённый код счётчика на все страницы сайта. Несколько деталей из справки, которые легко упустить:

• Если сервер запрещает показ сайта во фрейме заголовком X-Frame-Options, карты не откроются. Нужно добавить исключения для доменов Метрики.
• Из адреса убираются www, рекламные метки и часть после #, а обычные параметры остаются. Страницы ?id=1 и ?id=2 получат разные карты.
• Чтобы посмотреть целый раздел, в конце адреса ставят звёздочку: адрес каталога со * покажет клики по всем карточкам сразу.
• Данные карты скроллинга хранятся 15 дней, клики можно смотреть за период до года.
• Карта может отключиться, если её не открывали полгода. Тогда опцию включают снова.

Что искать на карте кликов

Начинайте со страниц, где есть целевое действие: услуга, карточка товара, посадочная страница рекламы. Главная интересна меньше, чем кажется. Дальше ищите такие признаки:

• Клики по некликабельному: фото, иконки, подчёркнутый текст, цена. Это ожидание, которое сайт не выполняет.
• Холодная кнопка заявки. Если главный призыв к действию почти не нажимают, его не видно или он непонятен.
• Клики, размазанные по меню. Человек перебирает пункты, потому что не нашёл нужное с первого раза.
• Обрыв внимания на карте скроллинга перед важным блоком: ценой, формой, условиями. Всё, что ниже этой границы, видит меньшинство посетителей.

Карта, Вебвизор и страницы с малым трафиком

Карта сводит клики многих визитов в одну картинку и показывает закономерность. Вебвизор проигрывает отдельный визит: как человек вёл курсор, кликал, прокручивал страницу и заполнял формы, записи хранятся 15 дней. По одним записям легко принять случайный визит за правило, по одной карте приходится угадывать причины. Поэтому карта находит странное место, а потом открывают визиты с кликами туда и смотрят, что человек делал до и после. Если и записи не объясняют поведение, проводят юзабилити-тестирование.

Карта кликов работает на объёме. Если страницу смотрят десятки человек в месяц, пятно из пяти кликов может оказаться случайностью. Выходов два: построить карту по группе однотипных страниц, например по всем карточкам услуг, где кликов набирается больше, или смотреть отдельные визиты.

Так было при разработке сайта сети клиник «Три Сердца». Статистики старого сайта было немного, поэтому мы изучали записи Вебвизора, а затем строили карту пути пользователя и проводили UX-аудит сайтов конкурентов. В итоге сделали новый сайт на шаблоне Aspro «Медицинский центр 2.0» с собственным поиском по врачам и услугам. Подробнее в кейсе разработки сайта «Три Сердца».

Почему выводы по карте кликов бывают ложными

• Удалять блок, по которому не кликают. Отзывы и ответы на вопросы читают, а не нажимают. Проверяйте такие блоки по карте скроллинга.
• Смотреть карту главной и делать выводы обо всём сайте.
• Сравнивать карты до и после правки за разные сезоны и с разным трафиком. Спорные изменения проверяют A/B-тестом.

Карты кликов закрывают часть работы по юзабилити, но не всю: скорость, тексты и цены на них не видны.

Карты кликов, скроллинга и записи Вебвизора разбираем в UX/UI-аудите, а найденные проблемы исправляем при UX/UI-оптимизации сайта.

Частые вопросы про тепловую карту кликов

Справка Метрики по картам кликов и скроллинга

• Справка Яндекс Метрики: «Карта кликов», «Карта ссылок», «Карта скроллинга»
• Кейс E.BAEV: разработка сайта сети медицинских клиник «Три Сердца»