Анализ тепловой карты запросов: распределение кликов, глубина прокрутки и точки отказа от формы
1. Тепловая карта кликов: на что покупатель кликает и на что, как вы думаете, он кликает
Тепловая карта кликов накладывает позиции кликов всех посетителей на скриншот страницы: чем краснее точка, тем больше кликов. Те, кто впервые смотрит тепловую карту своего сайта, часто сильно удивляются: оказывается, пользователи вообще не идут по спроектированному вами пути. Они кликают там, где вы считали неважным, а по тщательно продуманной кнопке CTA может быть совсем мало кликов.
Контринтуитивный вывод здесь такой:Самая горячая по кликам зона — часто не ваша кнопка конверсии, а такие входы для ознакомления, как “посмотреть фото завода”, “скачать каталог продукции”, “посмотреть больше кейсов”. Это значит, что большинство посетителей ещё на этапе исследования и не готовы с вами связаться. Правильная реакция — не делать кнопку CTA больше и краснее, а, следуя их намерению, сделать эти входы для ознакомления удобнее.
| Сигнал тепловой карты | Значение | Что делать |
|---|---|---|
| Кликов по кнопке CTA гораздо меньше ожидаемого | Покупатель ещё на этапе ознакомления | Добавить над CTA низкопороговый вход для скачивания |
| По одному пункту навигации кликают бешено | Пользователь не находит нужную информацию | Поднять этот пункт на первый экран или добавить выпадающее меню |
| На изображении много кликов | Пользователь думает, что изображение кликабельно | Сделать изображение кликабельным или добавить увеличение |
| Большая зона без кликов (мёртвая зона) | Этот контент никто не смотрит | Сократить или удалить этот блок |
| Повторные ошибочные клики в одном месте | Визуальный обман | Изменить текст или стиль, чтобы устранить непонимание |
Пример из практики: сайт промышленных клапанов. Тепловая карта показала, что кнопка «Запросить цену» на первом экране собирает всего 2% кликов, а маленькая иконка «Фото с производства» — 8%. Маркетолог сначала хотел увеличить кнопку запроса, но, посмотрев тепловую карту, вместо этого встроил в раздел с фотографиями производства блок «Кейсы отрасли». В результате поток заявок вырос: покупатели посмотрели фото и кейсы, прониклись доверием и сами заполнили форму.
II. Глубина прокрутки: на каком уровне теряется контент
Тепловая карта кликов показывает, куда нажимают, а глубина прокрутки — докуда дочитывают. Многие команды пишут длинные описания продуктов, технические характеристики, кейсы клиентов, но не знают, до какого места покупатель реально доходит. Карта глубины прокрутки в процентах от высоты страницы показывает, сколько посетителей добралось до каждого экрана.
Здоровая глубина прокрутки снижается постепенно, но кривая должна быть плавной. Если на каком-то уровне происходит обрыв, значит, этот экран потерял интерес покупателя: возможно, он слишком длинный, сухой или не имеет отношения к делу. Ориентиры для B2B-страниц — в таблице ниже.
| Глубина прокрутки | Здоровый показатель | Что значит отклонение |
|---|---|---|
| 25% (примерно низ первого экрана) | 70%-80% | Первый экран не цепляет, высокий показатель отказов |
| 50% (середина страницы) | 45%-55% | Первая половина слишком растянута, нужно сократить |
| 75% (над формой) | 25%-35% | Большие потери в середине: кейсы и характеристики не убеждают |
| 100% (подвал) | 10%-15% | Большинство не доходит до CTA внизу |
Обратите внимание на последнюю строку: только 10-15% людей прокручивают страницу до самого низа. Это значит, что если разместить основную форму только в самом низу, 85% посетителей её просто не увидят. Поэтому форму стоит показать один раз в середине и ещё раз внизу, а не только в конце. Общая логика проектирования полей формы — в разделе Проектирование полей формы заявки и конверсия.
Глубина прокрутки также показывает, какой контент действительно читают. Если в блоке кейсов на отметке 75% остаётся 30% людей, значит, кейсы работают и их стоит добавлять. Если в блоке технических характеристик на отметке 50% уже никого нет, значит, текст слишком длинный и наукообразный, его нужно переделать в список тезисов. О том, как устроены поиск и фильтры в каталоге товаров, читайте в разделе удобству поиска по каталогу товаров.
III. Точки отказа в форме: на каком поле покупатель уходит
Процент отказов при заполнении формы — самая болезненная цифра для собственного сайта. В B2B общий процент отказов обычно составляет 60-80%: из каждых 10 человек, начавших заполнять форму, до конца доходят только 2-4. Тепловые карты и инструменты анализа форм показывают, на каком именно поле люди сдаются.
Есть три типичные точки отказа. Первая — самое первое поле. Если покупатель уходит, едва увидев первый пункт формы, значит форма появилась слишком неожиданно или над ней не хватает доверия. Вторая — скопление обязательных полей: если подряд три-четыре поля помечены красной звёздочкой, покупатель сочтёт это хлопотным и просто уйдёт. Третья — капча: многие бросают всё именно на этом шаге.
| Где бросают | Типичный отвал | Причина | Действие |
|---|---|---|---|
| Только увидели первое поле | 20%-30% | Мало доверия или форма слишком неожиданна | Добавьте над формой кейс или обещание |
| Середина — обязательные поля | 25%-35% | Слишком много полей, слишком нудно | Сократите до 5-7 обязательных, остальные — по желанию |
| Шаг с капчей | 10%-20% | Капча слишком хлопотная | Поставьте невидимую капчу или вход через соцсети |
| Перед кнопкой отправки | 5%-10% | Боятся, что после отправки начнут доставать | Рядом добавьте обещание о приватности и срок ответа |
| Ошибка после отправки | Менее 5% | Технический сбой формы | Чините немедленно, это реальная потеря заказов |
Пример из практики: на одном сайте в форме было 11 полей. Тепловая карта показала, что отвал резко растёт на шестом поле, а к девятому остаётся всего 20% людей. Маркетолог сократил форму до 6 обязательных полей (имя, компания, email, модель продукта, объём, комментарий), а остальные 5 сделал «необязательными — это поможет нам быстрее посчитать цену».
В результате конверсия отправки выросла с 22% до 38%. Сокращение полей — это не потеря информации, а разделение ключевых данных и необязательных. О надёжности формы и проблемах с доставкой читайте в разделе Надёжность формы запроса.
4. Как выбрать инструмент для тепловых карт
Для тепловых карт не нужно ничего разрабатывать самим — на рынке есть готовые инструменты. При выборе смотрят на три вещи: хватает ли данных, сильно ли страдает производительность страницы и по карману ли цена. У B2B-сайтов трафик небольшой, так что бесплатной или дешёвой версии обычно достаточно.
| Инструмент | Возможности бесплатной версии | Цена платной от | Кому подходит |
|---|---|---|---|
| Microsoft Clarity | Тепловые карты + запись экрана + клики, бесплатно | Бесплатно | Любым сайтам, лучший старт |
| Hotjar | 2000 сессий в день, ограниченно | от ~32 $/мес | Сайтам, которым нужен более детальный анализ |
| Crazy Egg | 3000 визитов/мес, ограниченно | от ~24 $/мес | В основном тепловые карты кликов |
| Тепловые карты Plausible | Нужна установленная статистика Plausible | Входит в основной тариф | Сайтам, которые уже используют Plausible |
Советуем начать с Microsoft Clarity — он полностью бесплатный, есть тепловые карты, запись экрана и распределение кликов, достаточно вставить один скрипт. Запустите на месяц, наберите данных, а потом решайте, нужен ли апгрейд. Устанавливая любой сторонний скрипт тепловых карт, следите за влиянием на производительность: если из-за инструмента LCP вырос на 1 секунду, игра не стоит свеч. Это совпадает с принципами оптимизации из раздела Core Web Vitals.
О работе с поисковыми запросами внутри сайта читайте в разделе поисковые запросы внутри сайта. Вместе с тепловыми картами это помогает полнее восстановить намерения покупателя.
5. Частые ошибки при анализе тепловых карт
| Заблуждение | Что делают | Что получают | Правильный подход |
|---|---|---|---|
| Посмотрели один раз и сразу правят | Делают выводы по 200 визитам | Выборка слишком мала, выводы ошибочны | Наберите минимум 2000 визитов, потом анализируйте |
| Смотрят только тепловую карту кликов | Не смотрят глубину прокрутки и записи экрана | Упускают ключевые точки отвала | Смотрите все три типа данных вместе |
| Используют тепловую карту как основу для дизайна | Куда все кликают, туда и контент | Страница обрастает лишним | Тепловая карта находит проблему, A/B-тест её подтверждает |
| Игнорировать тепловые карты для мобильных | Смотреть только на десктоп | Пропустить реальные проблемы на телефонах | Смотреть мобильную версию отдельно |
| Поставили и забыли | Скрипт установили и больше не открывали | Данные потрачены впустую | Раз в месяц заглядывать в тепловую карту |
Третий пункт самый важный: тепловая карта показывает, где проблема, но не говорит, как её исправить. Например, она показывает, что на кнопку CTA никто не кликает, — но вы же не станете растягивать кнопку на весь экран. Правильный порядок такой: тепловая карта находит место проблемы, вы выдвигаете гипотезу и проверяете её с помощью A/B-тест формы. Тепловая карта — это диагностика, а не рецепт. Общая логика оптимизации лендинга — в статье Оптимизация конверсии лендинга под заявки.
FAQ: частые вопросы
Как правильно установить тепловую карту и каким инструментом?
Какая глубина прокрутки считается нормой, а какая говорит о проблемах?
Какой процент отказа от формы считается нормой и как найти проблему?
Тепловая карта показывает, что на кнопку никто не кликает, — может, она недостаточно заметная?
Как часто смотреть тепловые карты и что делать после просмотра?
Стоит ли смотреть тепловые карты мобильной версии отдельно?
В заключение
Ценность тепловых карт не в том, красива ли пёстрая картинка, а в том, что они заставляют отказаться от иллюзии «я думаю, пользователь будет делать так» и посмотреть, как он делает на самом деле. Многие интернет-магазины работают два-три года, а между представлением команды о своём сайте и реальным поведением пользователей лежит толстый слой самоуверенности. Тепловая карта — инструмент, который пробивает эту стену.
Три шага на практике: сначала установите бесплатный инструмент вроде Microsoft Clarity и накопите данные за месяц; затем разберите их по трём категориям — клики, прокрутка, формы — и запишите каждое расхождение с ожиданиями; наконец превратите каждое сомнение в проверяемую гипотезу и подтвердите её A/B-тестом или интервью с пользователями. Не переделывайте всё сразу после просмотра тепловой карты — сначала диагностика, потом лечение.
Одна фраза, которую стоит запомнить: тепловая карта не говорит, что пользователи должны делать, — она показывает, что они делают на самом деле. Сначала посмотрите, куда они кликают, до чего доскролливают и где уходят, и только потом решайте, что менять, а не наоборот.