Тепловая карта
Синонимы: heatmap, карта кликов, карта скроллинга, тепловая карта сайта, click map
NAME
Тепловая карта — аналитика и метрики
DESCRIPTION
Тепловая карта (heatmap) — визуализация поведения пользователей на сайте, где разные цвета показывают интенсивность взаимодействий: красные зоны — самое популярное, синие — игнорируемое. Помогает понять, куда смотрят и кликают посетители, не спрашивая их напрямую.
Типы тепловых карт:
| Тип | Что показывает | Когда использовать |
|---|---|---|
| Click map | Куда кликают пользователи | Анализ CTA, навигации |
| Move map | Движение курсора (proxy для взгляда) | Десктоп-юзабилити |
| Scroll map | Докуда скроллят страницу | Оптимизация длины контента |
| Attention map | Время пребывания в зоне | Оценка видимости блоков |
| Eye-tracking | Реальное движение глаз | Лабораторные исследования |
Что можно узнать из тепловых карт:
- CTA не видят — кнопка в «холодной» зоне (синяя)
- Кликают по некликовым элементам — картинки без ссылок
- Форма слишком длинная — скролл-карта обрывается на 40%
- Баннерная слепота — правый сайдбар игнорируется
- F-паттерн чтения — внимание в левом верхнем углу
- Важный контент ниже сгиба — 70% не доскролливают
Паттерны поведения на страницах:
| Паттерн | Описание | Рекомендация |
|---|---|---|
| F-паттерн | Чтение слева-направо, сверху-вниз (текстовые страницы) | Ключевое — в начале строк |
| Z-паттерн | Зигзагом (лендинги с малым контентом) | CTA в правом нижнем углу |
| Gutenberg | Верх-лево → Низ-право (равномерный контент) | Логотип в верх-лево, CTA в низ-право |
| Banner blindness | Игнорирование боковых панелей и шапок | Важное — в центре контента |
Инструменты тепловых карт:
| Инструмент | Цена | Особенности |
|---|---|---|
| Яндекс.Метрика (Вебвизор) | Бесплатно | Записи сессий + карты |
| Hotjar | От $32/мес | Лидер рынка |
| Crazy Egg | От $11/мес | A/B тесты + карты |
| Microsoft Clarity | Бесплатно | Аналог Hotjar от MS |
| Hotbox | От 2 900 ₽/мес | Российский аналог |
| Plerdy | От $29/мес | SEO + UX аналитика |
Процесс работы с тепловой картой:
- Установить код на сайт (10 минут)
- Набрать 1 000+ сессий (1-2 недели)
- Проанализировать 4 типа карт
- Сформировать гипотезы
- Запустить A/B тесты
- Измерить результат
Частые инсайты из практики:
- 65% пользователей не доскролливают до середины страницы
- Кнопки в форме «капсулы» кликают на 21% чаще, чем прямоугольные
- Красный цвет CTA конвертит лучше зелёного в B2B на 18%
- Изображения людей «смотрят» на CTA — ведут взгляд пользователя
- Поля формы без label имеют +30% ошибок заполнения
Кейс WEBVISUAL: Клиент — интернет-магазин косметики. Было: CR карточки товара 1.8%. Установили Hotjar, собрали 5 000 сессий. Что показала тепловая карта:
- Кнопку «В корзину» не видели (она была в «холодной» зоне)
- Кликали по фото товара, ожидая увеличения (функции не было)
- До описания доскролливали только 38% посетителей
- На отзывы смотрели 72% (но они были внизу)
Внесли изменения: увеличили кнопку «В корзину», перенесли отзывы под фото, добавили lightbox для фото, закрепили CTA на мобилке. Результат: CR карточки вырос с 1.8% до 4.1% (+128%), средний чек +22%. Бюджет исследования и внедрения: 35 000 ₽, окупаемость — 10 дней.