Тепловая карта
Тепловая карта (Heatmap) — визуализация поведения посетителей на странице: цветом показаны зоны кликов, глубина скролла и движение курсора. Красные участки означают высокую активность, синие — игнорируемые. В рунете строится через Вебвизор и карты Яндекс.Метрики.
Определение Тепловая карта
Тепловая карта (Heatmap) — это наглядная визуализация того, как посетители ведут себя на странице сайта. Поверх скриншота страницы накладываются цветные зоны: красные и жёлтые показывают участки с высокой активностью, зелёные и синие — те, что пользователи игнорируют. В отличие от обычных отчётов с цифрами, тепловая карта позволяет за секунды увидеть, куда люди кликают, до какого места дочитывают и где их внимание гаснет. В рунете тепловые карты строит Яндекс.Метрика — у неё есть карта кликов, карта скролла, карта ссылок и аналитика форм, а движение курсора и действия конкретных визитов записывает Вебвизор. Это связка инструментов для качественного анализа интерфейса, а не для подсчёта трафика.
Как работает и применение
Тепловая карта собирает обезличенные данные о действиях посетителей и агрегирует их в один слой поверх страницы. Карта кликов показывает, по каким элементам жмут чаще всего — иногда выясняется, что люди кликают по некликабельному тексту, приняв его за кнопку. Карта скролла отвечает на ключевой вопрос: какая доля аудитории доходит до оффера, формы или цены. Если 70 процентов уходят, не долистав до призыва к действию, проблема не в кнопке, а в том, что её просто не видят. Эти инсайты напрямую ведут к переделке макета при разработке и доработке сайта, а для поискового трафика помогают улучшить структуру под намерения пользователей в рамках SEO. Источник данных — карты и Вебвизор внутри Яндекс.Метрики, по запросу «тепловая карта сайта» это первый и бесплатный инструмент для рунета.
| Тип карты | Что показывает | Главный вопрос |
|---|---|---|
| Карта кликов | Зоны нажатий по странице | На что жмут и куда впустую |
| Карта скролла | Глубину прокрутки | Доходят ли до оффера и формы |
| Карта движения курсора | Траектории внимания | Где задерживается взгляд |
| Аналитика форм | Поведение в полях | На каком поле бросают форму |
Виды и форматы
Тепловые карты делят по типу отслеживаемого действия. Карта кликов (click map) — самая распространённая, показывает плотность нажатий. Карта скролла (scroll map) окрашивает страницу по доле пользователей, доскролливших до каждого уровня: критическая граница — линия, ниже которой остаётся меньше половины аудитории. Карта движения мыши (move map) приближённо отражает зоны внимания, потому что курсор у части людей следует за взглядом. Отдельно стоит запись сессий (в Метрике это Вебвизор) — не агрегированная карта, а воспроизведение конкретного визита, где видно каждое движение и клик одного посетителя. Для надёжных выводов карту строят минимум на нескольких сотнях визитов: на 20-30 посещениях картина случайна и вводит в заблуждение.
Метрики и пример
Выводы из тепловой карты проверяют через конверсию и тесты. Пример. На лендинге услуги форма заявки стояла после длинного блока с описанием процесса. Карта скролла показала: до формы доскролливают лишь 34 процента посетителей, остальные уходят раньше. Команда подняла короткую форму на первый экран и продублировала кнопку в середине страницы. По данным карты, доля дошедших до призыва выросла до 78 процентов, а конверсия в заявку поднялась с 2,1 до 3,6 процента — то есть почти в 1,7 раза при том же трафике. Карта кликов параллельно выявила, что 12 процентов пользователей жали по статичной иконке телефона, ожидая клик-звонок: иконку сделали кликабельной, и часть этих визитов превратилась в обращения.
Связанные концепции
- Яндекс.Метрика — бесплатный инструмент рунета, внутри которого работают все типы тепловых карт и Вебвизор.
- UX — пользовательский опыт; тепловая карта — один из главных способов увидеть, где интерфейс мешает человеку достичь цели.
- A/B-тест — метод проверки гипотез, которые рождаются из анализа тепловой карты, на статистической достоверности.
- Конверсия — итоговая метрика, ради роста которой тепловые карты вскрывают узкие места страницы.
- Вебвизор — запись отдельных визитов в Метрике; дополняет агрегированные карты детальным просмотром поведения конкретного человека.
- Линия сгиба — граница первого экрана без прокрутки; карта скролла показывает, как быстро аудитория тает ниже этой линии.
Частые ошибки
- Делают выводы по карте, построенной на 20-30 визитах, где картина ещё случайна и нерепрезентативна.
- Смотрят одну общую карту, не разделяя десктоп и мобильные, хотя поведение и макет на них разные.
- Анализируют только карту кликов, забывая про карту скролла, которая объясняет, почему до кнопки не доходят.
- Принимают активность движения курсора за гарантию внимания, хотя у части пользователей мышь и взгляд не связаны.
- Меняют макет по одной карте без последующего A/B-теста, выдавая гипотезу за доказанный результат.
Частые вопросы
Где построить тепловую карту сайта бесплатно?
В рунете базовый и бесплатный инструмент — Яндекс.Метрика. После установки счётчика доступны карта кликов, карта скролла, карта ссылок и аналитика форм, а Вебвизор записывает отдельные визиты. Для большинства задач малого и среднего бизнеса этих встроенных карт достаточно, отдельный платный сервис обычно не нужен.
Сколько визитов нужно для достоверной карты?
Минимум несколько сотен визитов на одну страницу, а лучше от тысячи. На 20-30 посещениях рисунок кликов случаен: один нетипичный пользователь искажает всю картину. Чем выше трафик страницы, тем быстрее карта становится репрезентативной. Для низкочастотных страниц данные собирают за более длинный период.
Чем карта скролла отличается от карты кликов?
Карта кликов показывает, по каким элементам пользователи нажимают и где промахиваются по некликабельным зонам. Карта скролла показывает, до какого уровня страницы они доскролливают. Это разные вопросы: клики объясняют, что привлекает, а скролл — доходит ли аудитория до важных блоков вроде формы, цены или призыва к действию.
Можно ли по тепловой карте улучшить конверсию?
Да, это её прямое назначение. Карта показывает, где люди теряются, куда жмут впустую и до какого места дочитывают. На основе этого формулируют гипотезы: поднять форму выше, убрать отвлекающий элемент, сделать иконку кликабельной. Такие правки макета в связке с тестами мы внедряем при доработке сайтов.
Нужно ли смотреть мобильную и десктопную карты отдельно?
Обязательно. Макет, длина страницы и поведение на смартфоне и на компьютере сильно различаются: то, что на десктопе на первом экране, на мобильном уходит вниз. Если смотреть одну усреднённую карту, выводы будут смазанными. Метрика позволяет фильтровать карты по типу устройства — этим стоит пользоваться.
Тепловая карта нарушает приватность пользователей?
Нет, при корректной настройке данные обезличены и агрегированы: карта показывает усреднённое поведение, а не личность. Вебвизор по требованиям закона должен маскировать ввод в полях с персональными данными, чтобы пароли и личная информация не записывались. При работе с записями важно настроить маскирование чувствительных полей в настройках счётчика.