Тепловые карты сайта: как их читать и использовать

Что такое тепловая карта

Технически heatmap — это наложение на скриншот страницы данных о поведении сотен или тысяч посетителей: где они кликали, как двигали курсором, до какой точки долистали страницу. Чем ярче зона, тем больше внимания она получила. В отличие от обычной аналитики (цифры и графики), heatmap считывается визуально за несколько секунд — сразу видно, какой блок игнорируют, а какой перегружен кликами.

В CRO heatmap чаще всего используют как первый шаг диагностики — до того, как формулировать гипотезу и запускать полноценный A/B-тест. Одного взгляда на карту достаточно, чтобы понять, стоит ли вообще копать в эту сторону, или проблема явно находится на другом участке страницы.

Термин «тепловая» карта возник из аналогии с термографией: чем «горячее» (краснее) зона, тем больше внимания или взаимодействия она получила, а холодные синие зоны остаются практически незамеченными. Такое цветовое кодирование интуитивно понятно даже человеку без опыта в аналитике — не нужно объяснять, что означают красные и синие участки карты.

Стоит иметь в виду и статистическую сторону вопроса: тепловая карта — это агрегация поведения многих разных людей, а не одного пользователя. Два визуально похожих элемента на странице могут получать разное число кликов не потому, что один из них хуже оформлен, а потому что аудитория, доскроллившая до второго элемента, уже отличается по составу от аудитории, увидевшей первый — часть людей уходит по дороге, и оставшиеся до конца страницы посетители обычно более заинтересованы и лояльны изначально. Эта особенность важна при сравнении показателей разных блоков одной и той же страницы между собой.

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

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

Виды тепловых карт

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

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

Как читать карту кликов

Ищите два типа сигналов: «мёртвые зоны» — важные элементы (CTA, форма), которые не получают кликов, и «ложные клики» — по элементам, которые выглядят кликабельными, но ими не являются (например, подчёркнутый текст без ссылки, иконки без действия). Второй случай особенно вреден: пользователь ждёт реакции, не получает её и уходит с раздражением.

Отдельная категория сигналов — «клики отчаяния»: повторные быстрые клики по одному и тому же элементу за короткое время. Обычно это означает, что элемент выглядит интерактивным, но не реагирует — либо из-за технической ошибки, либо потому что визуально похож на кнопку, но ей не является.

Показательный пример: на карточке товара интернет-магазина карта кликов показала, что 18% посетителей кликают по названию бренда рядом с товаром, ожидая перейти на страницу всех товаров этого бренда — но ссылки там не было. После добавления ссылки конверсия в переход по каталогу бренда выросла в несколько раз без единого изменения дизайна, просто за счёт добавления ожидаемого действия.

Как читать карту скролла

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

Полезно сопоставлять карту скролла с длиной блоков контента: если резкое падение процента долистывания происходит сразу после конкретного блока, это часто означает, что именно этот блок воспринимается как логическое завершение страницы — например, слишком раннее размещение футера или визуально «тяжёлого» финального изображения, после которого страница выглядит законченной.

Полезно сравнивать карту скролла разных сегментов трафика — например, отдельно для тех, кто пришёл из органического поиска, и отдельно для тех, кто пришёл из платной рекламы. Разница в глубине скролла между сегментами часто указывает на разницу в готовности аудитории к покупке ещё до анализа итоговой конверсии.

Инструменты для тепловых карт

В России и СНГ основной бесплатный инструмент — Вебвизор в Яндекс.Метрике, который совмещает карты кликов, скролла и записи сессий в одном интерфейсе. Из международных решений популярны Hotjar и Microsoft Clarity (тоже бесплатный вариант с картами и записями). Для большинства сайтов достаточно одного инструмента — не нужно ставить сразу несколько счётчиков heatmap.

При выборе инструмента стоит обратить внимание на лимиты бесплатного тарифа — некоторые сервисы ограничивают число визитов или страниц, попадающих в анализ, в месяц. Для сайта со стабильно высоким трафиком лимит может закончиться в середине месяца, и часть данных просто не попадёт в карту, что исказит итоговую картину, если не учитывать это заранее.

Ещё один практический момент — скорость внедрения. Инструменты heatmap обычно подключаются через один общий счётчик или скрипт на сайте, без правок в коде отдельных страниц, поэтому запуск занимает от нескольких минут до пары часов даже на сайтах без выделенного разработчика в команде.

Как применять heatmap в работе над конверсией

Тепловая карта редко даёт готовый ответ сама по себе — она подсказывает, где искать проблему, а причину нужно уточнять через записи сессий или опросы. Типичный процесс: увидели мёртвую зону на карте кликов → посмотрели 10-15 записей сессий, как ведут себя люди в этом месте → сформулировали гипотезу → проверили через A/B-тест.

Тепловая карта показывает, что происходит. Записи сессий и опросы объясняют, почему это происходит. Для полноценной гипотезы нужны оба источника данных.

Ограничения тепловых карт

• Карта строится по всем визитам сразу — без сегментации можно не увидеть разницу между мобильным и десктопным поведением
• Не показывает причину поведения, только факт — нужны дополнительные данные
• Динамический контент (карусели, попапы) искажает карту, если она строится без учёта состояний страницы
• На страницах с низким трафиком карта статистически ненадёжна — нужно накопить достаточно визитов
• Карта не учитывает контекст визита — один и тот же клик может означать интерес или, наоборот, попытку закрыть мешающий элемент

Именно поэтому heatmap лучше воспринимать как инструмент генерации гипотез, а не как источник окончательных выводов о том, что нужно менять на странице.