Введение
Тепловая карта (Heatmap) – инструмент UX-аналитики, накладывающий поверх скриншота страницы цветовую визуализацию агрегированных данных о поведении пользователей. Цвет кодирует интенсивность взаимодействия: красные и жёлтые зоны – высокая активность, синие – низкая. Тепловые карты позволяют без чтения числовых отчётов интуитивно понять, куда смотрят, кликают и насколько далеко скроллят посетители.
История и контекст
Тепловые карты впервые применялись в нейромаркетинге для анализа движения взгляда (Eye Tracking) в 1990-х. В веб-аналитику метод перешёл в 2000-х: первые инструменты (ClickDensity, Crazy Egg) появились в 2005–2006 годах. В России функциональность тепловой карты popularized Яндекс.Метрика через инструмент «Карта кликов», «Карта скролла» и «Вебвизор». Сегодня популярны Hotjar, Microsoft Clarity (бесплатный), FullStory.
Как это работает
Типы тепловых карт:
- Click map (карта кликов): фиксирует все клики пользователей на странице, включая клики по некликабельным элементам (потенциальные CTA). Выявляет, на что пользователи пытаются нажать, но не могут.
- Scroll map (карта скролла): показывает, какой процент пользователей доскроллил до каждой части страницы. Помогает понять, видит ли большинство ключевой CTA или важный блок.
- Move map (карта движения мыши): отслеживает движение курсора. Приближённо коррелирует с движением взгляда (r ≈ 0,64–0,84 по исследованиям).
- Eye-tracking heatmap: точная карта взгляда (требует специального оборудования или AI-моделирования). Используется в UX-исследованиях.
Технически: JS-скрипт инструмента записывает координаты кликов/движений с временными метками. После накопления данных (обычно от 100–1000 сессий) система строит агрегированную визуализацию с помощью kernel density estimation.
Где применяется
- CRO (оптимизация конверсии): выявление «мёртвых зон» – важных элементов (CTA, форм), которые пользователи игнорируют.
- Редизайн страниц: данные о реальном поведении перед изменением страницы и A/B-тест после.
- Email-шаблоны: тепловые карты кликов в письмах показывают, на какие ссылки нажимают чаще.
- Мобильная оптимизация: отдельные карты для мобильных/десктоп пользователей выявляют различия в поведении.
- Анализ форм: drop-off map показывает, на каком поле пользователи бросают форму.
Преимущества и ограничения
Преимущества: визуальная интуитивность – маркетологи без аналитического опыта мгновенно понимают суть; выявляет инсайты, недоступные в числовых отчётах (например, клики по изображению, воспринимаемому как кнопка); помогает приоритизировать гипотезы для A/B-тестирования.
Ограничения: данные агрегированы – не видно индивидуальных сессий (для этого есть session recording); требуется достаточный объём трафика; scroll map может быть искажена длинными страницами с малым контентом.
Связь с другими понятиями
Тепловая карта дополняет веб-аналитику визуальным измерением UX. Является стартовой точкой для выработки гипотез для A/B и многовариантных тестов. В связке с сегментацией аудитории позволяет сравнивать поведение новых и повторных посетителей, мобильных и десктоп пользователей. Анализ тепловых карт часто предшествует изменениям дизайна, влияющим на коэффициент конверсии (CR).
