Тепловые карты (Heatmaps) и Scrollmaps: как читать визуальную аналитику

Тепловые карты (Heatmaps) и Scrollmaps: Энциклопедия визуальной аналитики

Когда стандартная веб-аналитика в лице Google Analytics или Яндекс.Метрики показывает вам что произошло на сайте (например, показатель отказов составил 65%, а конверсия 1.2%), визуальная аналитика отвечает на вопрос почему это произошло. Вы видите сухие цифры: пользователи уходят со страницы оформления заказа. Но только тепловые карты покажут, что они яростно кликают на некликабельную иконку доставки, думая, что это выпадающий список, или вообще не доскролливают до кнопки «Оплатить», потому что огромный баннер создает иллюзию конца страницы.

Визуальная аналитика (Visual Analytics) — это рентгеновский снимок пользовательского опыта. Инструменты вроде Hotjar, CrazyEgg, Microsoft Clarity, VWO и Вебвизор Яндекс.Метрики собирают миллионы микро-взаимодействий (движения мыши, скроллы, клики, тапы по экрану) и агрегируют их в интуитивно понятные цветовые схемы.

В этом фундаментальном руководстве мы разберем анатомию всех типов тепловых карт, научимся их правильно интерпретировать, находить скрытые инсайты («ложное дно», яростные клики) и применять эти данные для кратного роста конверсии в B2B и E-commerce проектах.

---

1. Четыре столпа визуальной аналитики: Различия и предназначение

Многие маркетологи ошибочно называют любой визуальный отчет «хитмапом». На самом деле, существует четыре принципиально разных типа отчетов, каждый из которых решает свои задачи.

1.1 Click Heatmaps (Карты кликов)

Карта кликов показывает точки взаимодействия пользователей со страницей: клики на десктопе и тапы (касания) на мобильных устройствах. Данные накладываются поверх скриншота страницы и визуализируются в виде температурной шкалы.

• Красные/Белые зоны (Hot) — максимальная концентрация кликов.
• Синие/Зеленые зоны (Cold) — минимальное взаимодействие или единичные случайные клики.

Что искать маркетологу:

• Фокус внимания на CTA (Call to Action): Ваша главная кнопка должна быть самой «горячей» зоной. Если красное пятно находится на второстепенной ссылке, визуальная иерархия нарушена.
• Анализ навигации: Какие пункты меню реально используются, а какие только занимают место.
• Игнорирование важного контента: Если никто не кликает на видео с демонстрацией продукта, возможно, его превью выглядит непривлекательно или не похоже на видеоплеер.

1.2 Hover / Move Maps (Карты движения мыши)

Эти карты отслеживают траекторию движения курсора мыши на десктопе. Исследования в области юзабилити доказывают сильную корреляцию (до 80-88%) между движением курсора мыши и направлением взгляда пользователя (Eye-tracking). Люди часто водят мышкой вдоль строк, которые читают.

Что искать маркетологу:

• Паттерны чтения: Читают ли пользователи текст вдумчиво (сплошное «теплое» покрытие абзаца) или просто сканируют заголовки (пятна только на H1/H2).
• Зоны колебаний: Если курсор долго задерживается между двумя тарифными планами, это означает этап сложного когнитивного выбора.

Совет

Важно: Move Maps неприменимы для мобильных устройств, так как там отсутствует понятие “наведения курсора” (hover), есть только скролл и тап.

1.3 Scrollmaps (Карты скроллинга)

Карта скроллинга показывает, как глубоко пользователи прокручивают страницу вниз. Отчет выглядит как горизонтальный градиент: в самом верху цвет ярко-красный (эту зону, называемую Above the Fold, видели 100% посетителей), а по мере прокрутки вниз цвет плавно остывает до желтого, зеленого и темно-синего.

Что искать маркетологу:

• The Fold (Линия сгиба): Где находится средняя линия экрана, которую люди видят без прокрутки. В этой зоне должно располагаться уникальное торговое предложение (УТП) и главный призыв к действию.
• Идеальная длина страницы: На каком блоке страница теряет более 50% аудитории.
• Поиск “Ложного дна” (False Bottom) — резкого обрыва внимания (см. подробный разбор ниже).

1.4 Confetti Reports (Отчеты Конфетти)

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

Что искать маркетологу:

• Поведенческая сегментация: Вы можете обнаружить, что посетители из ВКонтакте кликают преимущественно на развлекательный контент и отзывы, в то время как трафик из Яндекс.Директа сразу идет к прайс-листам.
• Выявление фрода/ботов: Неестественно ровные линии кликов (буквально по линейке) или огромные скопления кликов в пустых зонах часто свидетельствуют о бот-трафике или скликивании рекламы.

---

2. Анатомия проблем: Как “читать” тепловые карты

Опытный UX-исследователь не просто смотрит на красивые картинки, он ищет конкретные поведенческие аномалии. Рассмотрим главные симптомы плохой конверсии, которые легко диагностировать с помощью визуальной аналитики.

Паттерн 1: Ложное дно (False Bottom)

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

• Как это выглядит на Scrollmap: Вы видите резкую границу, где цвет меняется с горячего желтого на ледяной синий (отвал с 70% просмотров до 15% за пару пикселей).
• Причины возникновения: Огромные пустые белые пространства (negative space) между блоками; горизонтальные линии-разделители на всю ширину экрана; темный футер-подобный блок посреди светлой страницы; крупный баннер, упирающийся нижним краем ровно в границу экрана (The Fold).
• Как лечить: Добавьте визуальные подсказки для скроллинга (стрелки вниз, текст «Узнать больше»); сделайте так, чтобы следующий блок контента “выглядывал” из-за нижнего края экрана, провоцируя прокрутку.

Паттерн 2: Яростные клики (Rage Clicks)

Rage Clicks — это серия быстрых, многократных кликов по одному и тому же элементу (обычно 3-5 кликов в течение пары секунд). Это индикатор сильного раздражения (фрустрации) пользователя.

• Как это выглядит на Click Heatmap: Небольшие, но очень яркие, концентрированные красные точки, часто сконцентрированные в зонах, не подразумевающих интерактивности. Microsoft Clarity даже выделяет их специальными тегами.
• Причины возникновения:
  1. Неработающая кнопка (ошибка скрипта или мертвая ссылка).
  2. Медленная загрузка (пользователь нажал “Оплатить”, ничего не происходит, он начинает кликать еще раз).
  3. Элемент кажется кнопкой, но является просто картинкой.
• Как лечить: Исправить технические баги, добавить индикаторы загрузки (спиннеры) после нажатия на кнопки, убрать стилизацию “под кнопку” с некликабельных элементов.

Паттерн 3: Мертвые клики (Dead Clicks / Dead Links)

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

• Причины возникновения: Иконки преимуществ, которые выглядят интерактивными; слова, подчеркнутые линией (которую принимают за ссылку); картинки товаров, которые не увеличиваются по клику.
• Как лечить: Если пользователи упорно пытаются кликнуть на какой-то элемент — дайте им то, что они хотят. Сделайте элемент кликабельным (откройте попап с подробным описанием, увеличьте изображение).

Паттерн 4: Баннерная слепота (Banner Blindness)

Симптом, при котором пользователи полностью игнорируют любые элементы, напоминающие рекламу, даже если это важная внутренняя навигация или спецпредложение вашего собственного магазина.

• Как это выглядит на Move/Click map: Вокруг “баннера” кипит жизнь (красные и желтые зоны), а сам баннер — это огромное прямоугольное синее или прозрачное пятно. Пользователи буквально обходят его стороной.
• Как лечить: Измените дизайн блока. Уберите рамки, стандартные размеры баннеров (например, 728x90 или 300x250) и “рекламные” цвета. Интегрируйте предложение нативно (Native UI) в контент страницы.

---

3. Визуальное сравнение: Scrollmap с “Ложным дном” и Click Heatmap

На диаграмме ниже наглядно показано, как выглядит критическая проблема «Ложного дна» на карте скроллинга, и типичные паттерны кликов на Click Heatmap.

<svg width="800" height="500" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Градиент для Scrollmap, иллюстрирующий обрыв просмотров -->
    <linearGradient id="scrollMapGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#dc2626" /> <!-- Красный: 100% видят -->
      <stop offset="25%" stop-color="#ea580c" /> <!-- Оранжевый: 80% видят -->
      <stop offset="45%" stop-color="#eab308" /> <!-- Желтый: 60% видят -->
      <stop offset="48%" stop-color="#eab308" /> <!-- Ложное дно здесь -->
      <stop offset="50%" stop-color="#2563eb" /> <!-- Синий: Резкий обрыв до 15% -->
      <stop offset="100%" stop-color="#1e3a8a" /> <!-- Темно-синий: 5% видят -->
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect width="800" height="500" fill="#f8fafc" rx="12" stroke="#e2e8f0" stroke-width="2"/>

  <text x="400" y="45" font-family="system-ui, -apple-system, sans-serif" font-size="24" font-weight="800" text-anchor="middle" fill="#0f172a">Визуальная аналитика: Scrollmap vs Click Heatmap</text>
  <text x="400" y="70" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="400" text-anchor="middle" fill="#64748b">Сравнение типичных паттернов пользовательского поведения</text>

  <!-- ЛЕВАЯ ЧАСТЬ: Scrollmap -->
  <g transform="translate(60, 100)">
    <rect width="320" height="360" fill="url(#scrollMapGrad)" rx="8" stroke="#cbd5e1" stroke-width="2"/>
    <rect width="320" height="30" fill="#f1f5f9" rx="8" opacity="0.9"/>
    <text x="160" y="20" font-family="system-ui, sans-serif" font-size="14" font-weight="600" text-anchor="middle" fill="#334155">Карта скроллинга (Scrollmap)</text>

    <!-- Интерфейс сайта (скелет) -->
    <rect x="30" y="50" width="260" height="40" fill="rgba(255,255,255,0.4)" rx="4" />
    <rect x="30" y="110" width="260" height="80" fill="rgba(255,255,255,0.4)" rx="4" />

    <!-- Индикатор Ложного дна -->
    <line x1="0" y1="180" x2="320" y2="180" stroke="#000" stroke-width="2" stroke-dasharray="6,4" />
    <rect x="50" y="165" width="220" height="30" fill="#fff" rx="4" opacity="0.9" stroke="#ef4444" stroke-width="2"/>
    <text x="160" y="185" font-family="system-ui, sans-serif" font-size="14" font-weight="700" text-anchor="middle" fill="#ef4444">FALSE BOTTOM (Обрыв)</text>

    <text x="160" y="220" font-family="system-ui, sans-serif" font-size="12" font-weight="500" text-anchor="middle" fill="#e0e7ff">Здесь дизайн создает иллюзию</text>
    <text x="160" y="235" font-family="system-ui, sans-serif" font-size="12" font-weight="500" text-anchor="middle" fill="#e0e7ff">конца страницы. Пользователи уходят.</text>

    <!-- Непросмотренный контент -->
    <rect x="30" y="260" width="260" height="80" fill="rgba(255,255,255,0.1)" rx="4" />
    <text x="160" y="305" font-family="system-ui, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#fff" opacity="0.6">Мертвая зона (Никто не видит)</text>
  </g>

  <!-- ПРАВАЯ ЧАСТЬ: Click Heatmap -->
  <g transform="translate(420, 100)">
    <rect width="320" height="360" fill="#f1f5f9" rx="8" stroke="#cbd5e1" stroke-width="2"/>
    <rect width="320" height="30" fill="#e2e8f0" rx="8"/>
    <text x="160" y="20" font-family="system-ui, sans-serif" font-size="14" font-weight="600" text-anchor="middle" fill="#334155">Карта кликов (Click Heatmap)</text>

    <!-- Интерфейс сайта (скелет) -->
    <!-- Хедер -->
    <rect x="30" y="50" width="260" height="40" fill="#fff" rx="4" stroke="#cbd5e1" />
    <!-- Логотип -->
    <rect x="40" y="60" width="60" height="20" fill="#e2e8f0" rx="2" />
    <!-- Главный баннер -->
    <rect x="30" y="110" width="260" height="100" fill="#fff" rx="4" stroke="#cbd5e1" />
    <!-- Кнопка CTA -->
    <rect x="110" y="160" width="100" height="30" fill="#3b82f6" rx="4" />
    <!-- Текстовый блок с иконкой -->
    <rect x="30" y="230" width="260" height="60" fill="#fff" rx="4" stroke="#cbd5e1" />
    <circle cx="60" cy="260" r="15" fill="#e2e8f0" /> <!-- Иконка, похожая на кнопку -->
    <!-- Форма подписки -->
    <rect x="30" y="310" width="260" height="40" fill="#fff" rx="4" stroke="#cbd5e1" />

    <!-- ==== ПЯТНА КЛИКОВ (HEAT SPOTS) ==== -->

    <!-- 1. Идеальный клик (CTA) -->
    <circle cx="160" cy="175" r="35" fill="#ef4444" opacity="0.7" filter="url(#glow)" />
    <circle cx="160" cy="175" r="20" fill="#f59e0b" opacity="0.9" />
    <circle cx="160" cy="175" r="8" fill="#fff" opacity="1" />
    <text x="255" y="178" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#059669">← Здоровый клик (CTA)</text>

    <!-- 2. Мертвый клик по иконке -->
    <circle cx="60" cy="260" r="25" fill="#f59e0b" opacity="0.7" filter="url(#glow)" />
    <circle cx="60" cy="260" r="10" fill="#ef4444" opacity="0.8" />
    <text x="90" y="265" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#d97706">← Мертвый клик (Иконка)</text>

    <!-- 3. Rage Clicks по логотипу (пытаются обновить страницу/вернуться домой) -->
    <!-- Серия множественных точек рядом -->
    <circle cx="65" cy="70" r="15" fill="#ef4444" opacity="0.8" filter="url(#glow)" />
    <circle cx="50" cy="65" r="12" fill="#ef4444" opacity="0.7" filter="url(#glow)" />
    <circle cx="75" cy="60" r="10" fill="#f59e0b" opacity="0.9" />
    <circle cx="55" cy="75" r="10" fill="#f59e0b" opacity="0.9" />
    <path d="M 50 40 Q 60 20 80 40" stroke="#ef4444" stroke-width="1.5" fill="none" marker-end="url(#arrow)" />
    <text x="90" y="35" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ef4444">Rage Clicks</text>
  </g>
</svg>

---

4. Отраслевая специфика: B2B против E-commerce

Поведение пользователей кардинально меняется в зависимости от ниши. То, что является аномалией для интернет-магазина, может быть нормой для сложного SaaS-продукта.

Таблица 1. Различия в интерпретации тепловых карт

Параметр анализа	B2B (Услуги, SaaS, Оборудование)	E-commerce (Интернет-магазины)
Scrollmap (Глубина)	Глубокий скроллинг — норма. Пользователи вчитываются в характеристики, кейсы и условия SLA.	Страницы товаров скроллят мало. Если описание или отзывы находятся ниже “экрана 3”, их пропустят.
Click Heatmap	Фокус на ссылках “Скачать прайс”, “Спецификации”, “О компании”. Клики размазаны по тексту (люди выделяют текст мышкой при чтении).	Концентрированные горячие точки: Кнопка “В корзину”, Галерея изображений, Фильтры, Выбор размера/цвета.
Hover Map	Полезна для оценки прочтения длинных абзацев и таблиц сравнения тарифов.	Практически бесполезна, так как покупка — это импульсивное действие (сразу клик).
Dead Clicks	Часто кликают на лица сотрудников или логотипы клиентов (хотят проверить подлинность отзывов).	Кликают на неинтерактивные элементы, похожие на ярлыки (“Хит”, “Скидка”), или на иконки доставки в карточке.
Формы заявок	Страдают от “Form Abandonment” на полях “Номер телефона” или “Название компании”.	Бросают корзину при внезапном появлении обязательной регистрации или на этапе ввода промокода.

Примеры из практики

E-commerce Кейс: В интернет-магазине одежды тепловая карта показала огромное скопление кликов на главном фото товара, но очень мало кликов на иконку “лупы” для зума в правом нижнем углу картинки. Пользователи пытались увеличить фото, просто нажимая на него по центру (паттерн Instagram), но галерея не реагировала. Решение: Иконка лупы была убрана, а увеличение (lightbox) стало срабатывать при клике на любую область фотографии. Конверсия в добавление в корзину выросла на 12%.

B2B Кейс: SaaS-компания разместила сложную таблицу сравнения тарифов в самом низу лендинга. Scrollmap показал, что до таблицы доходит только 18% трафика, так как перед ней стоял блок с отзывами, оформленный на темно-сером фоне (сработало Ложное дно). Решение: Таблицу тарифов перенесли выше (под блок преимуществ), а фон отзывов сделали белым. Доходимость до тарифов составила 65%, количество регистраций увеличилось на 24%.

---

5. Чек-лист маркетолога: Алгоритм UX-аудита посадочной страницы

Не открывайте тепловые карты “просто посмотреть”. Используйте системный подход.

1. Сегментация устройств: ВСЕГДА разделяйте данные на Desktop и Mobile. Мобильный интерфейс — это вертикальная труба, десктопный — широкое полотно. Поведение там различается в 100% случаев. 2. Проверка первого экрана (Above the Fold): Откройте Scrollmap. Попадает ли ваш оффер (H1) и главная кнопка в красную зону на всех разрешениях экранов? 3. Поиск Ложного дна: Ищите резкие обрывы на карте скроллинга. Если отток аудитории между соседними блоками составляет более 15-20% — блок визуально “рубит” страницу пополам. 4. Аудит интерактивности: Откройте Click Heatmap.

Сравните количество кликов по главному CTA-элементу с количеством кликов по “мусорным” (второстепенным) элементам. 5. Охота за Яростными и Мертвыми кликами: Отфильтруйте сессии с тегом Rage Clicks (в Microsoft Clarity). Найдите элементы, которые бесят пользователей, и передайте баг-репорт разработчикам. 6. Анализ полей ввода: В формах заявок проверьте, после клика в какое поле форма навсегда «остывает» (Form Drop-off). Чаще всего это поле с требованием ввести сложный пароль или обязательно указать телефон.

---

6. Популярные инструменты на рынке

Инструмент	Главная фишка	Стоимость для старта
Microsoft Clarity	Выявление Rage Clicks, Dead Clicks, запись сессий, анализ JavaScript-ошибок. Идеален для глубокого тех-анализа.	Абсолютно бесплатно (без лимитов).
Hotjar	Комбайн: тепловые карты + опросы пользователей (Surveys) прямо на сайте. Отличный UX.	Есть бесплатный тариф (до 35 сессий/день).
Яндекс.Метрика	Карта кликов, скроллинга, аналитика форм + Вебвизор. Интеграция с директом.	Бесплатно.
CrazyEgg	Мощные Конфетти-отчеты с глубокой сегментацией по кастомным параметрам (A/B тесты).	От $29/мес (нет бесплатного плана).

Заключение

Визуальная аналитика устраняет слепоту в маркетинге. Вместо того чтобы гадать, почему трафик не конвертируется и проводить ресурсоемкие A/B тесты “вслепую”, тепловые карты (Heatmaps) и карты скроллинга (Scrollmaps) дают вам точный диагноз.

Найдите ложное дно, успокойте яростные клики, сделайте мертвые зоны интерактивными — и вы увидите, как конверсия (CR) начнет расти без увеличения рекламного бюджета. Главное правило: не верьте интуиции дизайнера, верьте тепловому следу, который оставляют ваши клиенты.