Тепловая карта для проверки гипотезы: от “видно ли” до “работает ли” за 7 дней

Тепловая карта для проверки гипотезы: от “видно ли” до “работает ли” за 7 дней

Чтобы heatmap-инструмент (Hotjar/FullStory/ Microsoft Clarity) перестал быть “картинкой” и стал проверкой гипотезы, действуйте как аналитик: фиксируете зону, формулируете критерий успеха, запускаете измерение и закрываете цикл сравнением. Ниже — план, который реально сделать за эту неделю.

1) Выберите одну страницу и одну задачу
— Страница: посадочная под основное действие (например, демо/консультация в B2B или экран карточки/переход к оплате в e-com).
— Задача: что должно произойти (клик в CTA, заполнение формы, прокрутка до блока “цены”, добавление в корзину и т.д.).
Важно: не пытайтесь “покрыть всё” — heatmap лучше всего работает на конкретной механике.

2) Зафиксируйте “эталон” поведения до правок
Сейчас цель — не улучшать, а измерить baseline.
— В инструменте включите запись сесcий на выбранной странице.
— Если доступно, настройте фильтры по устройству/новизне (новый пользователь vs вернувшийся) — иначе данные будут грязнить сравнение.
— Соберите минимум 30–50 записей и смотрите не только heatmap, а путь: где начинается интерес и где “провисает” действие.

3) Сформируйте 2 слоя тепловых карт, а не одну
Смысл в том, чтобы отделить “внимание” от “действия”.
— Layer A (внимание): heatmap по кликам и/или перемещениям мыши + тепловая карта прокрутки.
— Layer B (действие): события (event) вокруг CTA/формы (например, “start_form”, “submit”, “click_price”, “open_chat”).
Если в вашем инструменте есть только клики и прокрутка — используйте их как Layer A, а Layer B замените на список событий, которые должны коррелировать с поведением.

4) Поставьте критерий успеха в числах
Пример для B2B:
— “После первого скролла до блока с ценой (или выгодой) доля кликов в CTA должна вырасти относительно текущего baseline на +15%.”
Пример для e-com:
— “Доля пользователей, которые дошли до блока с доставкой/оплатой и нажали ‘перейти к оплате’, должна увеличиться на +10%.”
Критерий лучше сформулировать один. Он должен быть связан именно с тем, что вы покажете на heatmap.

5) Сформулируйте гипотезу так, чтобы её было видно на карте
Плохая формулировка: “Сделаем страницу лучше”.
Нормальная: “Сдвинем блок с ценой выше на 1 экран и сделаем CTA заметнее — если причина в видимости, то растёт прокрутка до блока и клики по CTA в той же области”.

6) Привяжите изменения к конкретной области экрана
Перед правкой отметьте на странице:
— где CTA сейчас,
— какая зона “притягивает взгляд”,
— где пользователи чаще “останавливаются” (по прокрутке/кликам).
Дальше меняйте только то, что влияет на эту зону: текст, порядок блоков, контраст кнопки, расстояние до скролла.

7) Запустите короткое A/B без “вкусовщины”
Если вы делаете A/B:
— используйте одинаковые фильтры сегментов как в baseline;
— держите длительность так, чтобы накопить сравнимый объём записей (обычно неделя в стабильном трафике).
Если A/B нет:
— хотя бы разделите данные по времени “до/после” и не мешайте их с другими параллельными правками.

8) Закройте цикл сравнением heatmap + событий
Когда появились результаты:
— Сравните heatmap A (внимание): растёт ли покрытие прокрутки и кликов в целевой зоне?
— Затем сравните heatmap B (действие): растёт ли фактическое событие (submit/переход)?
Частая ошибка: клики “кажется” стали выше, но submit не растёт. Тогда проблема, скорее всего, не в видимости, а в трении формы (валидация, длина, ошибки, ожидания загрузки).

9) Документируйте вывод в формате “что увидели → что сделали → что изменилось”
Один лист на задачу:
— наблюдение на тепловой карте,
— конкретная правка,
— эффект на целевое событие (в процентах относительно baseline),
— что оставляем/что отменяем.
В следующей задаче вы будете копировать не “красивые картинки”, а работающую схему проверки.
…