'/%3e%3cpath%20d='M83.8172%20112C100.688%20112%20111.886%2098.2694%20112%2083.8882H44.0245C25.8409%2083.8882%2016.001%2094.3169%2016.001%20112H83.8172Z'%20fill='url(%23paint1_linear_101_577)'/%3e%3cpath%20d='M44.1725%2044.1138H16.0008C15.9465%2051.0963%2018.504%2058.2306%2024.2977%2064.0225L44.1706%2083.8881L52.8986%2075.3569L61.7636%2066.7019C63.2767%2065.2244%2063.2786%2062.7888%2061.7636%2061.3094L44.1725%2044.1138Z'%20fill='%233A5FFF'/%3e%3cpath%20d='M83.8248%2083.8862H111.996C112.051%2076.9037%20109.493%2069.7693%20103.7%2063.9774L83.8267%2044.1118L75.0986%2052.6431L66.2337%2061.2981C64.7206%2062.7756%2064.7187%2065.2112%2066.2337%2066.6906L83.8248%2083.8862Z'%20fill='%233A5FFF'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_101_577'%20x1='16.001'%20y1='30.055'%20x2='111.998'%20y2='30.055'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2370ADFE'/%3e%3cstop%20offset='0.62'%20stop-color='%233A5FFF'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_101_577'%20x1='111.998'%20y1='97.9451'%20x2='16.001'%20y2='97.9451'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2370ADFE'/%3e%3cstop%20offset='0.62'%20stop-color='%233A5FFF'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Тепловые карты обычно собирают через аналитические скрипты: Hotjar, Clarity, Plerdy и подобные. Они отслеживают клики, движения мыши, прокрутку, а иногда и взгляд — через веб-камеру или специальное оборудование.
Типы карт
- Карта кликов — где пользователи нажимали, в том числе по неинтерактивным элементам (важная подсказка).
- Карта внимания — куда чаще наводят курсор и где проводят больше времени.
- Карта прокрутки — до какого места страницы доходит большинство пользователей.
- Карта движений — траектории курсора, которые иногда совпадают с движением глаз.
Что можно увидеть
- Картинки и подписи, которые пользователи принимают за кликабельные.
- «Холодные» главные кнопки, до которых никто не доходит.
- Блоки, которые перегружают страницу и отвлекают от целевого действия.
- Точку, ниже которой большая часть пользователей перестаёт прокручивать.
- В диагностике посадочных страниц и важных шагов воронки
- Перед запуском A/B-тестов — тепловая карта подсказывает, что менять
- В разборе резких изменений конверсии без понятной причины
- В сложных интерактивных приложениях с большим числом состояний — тепловая карта одного экрана быстро теряет смысл
- Когда трафика слишком мало: данные сильно шумят
На странице тарифов ставку делали на средний тариф — у него была подсветка «Популярный». Тепловая карта показала: чаще всего нажимают на картинку-эмблему рядом с этим тарифом, а не на кнопку «Выбрать». Картинка выглядела интерактивной, хотя ничего не делала. После замены её на текстовый акцент и переноса метки «Популярный» на сам тариф конверсия выросла на 15% — без A/B-теста, по очевидной находке.
Тепловая карта показывает «что», но не «почему». Без следующего шага — пары интервью или короткого теста юзабилити — из неё легко сделать неверные выводы. Особенно рискованно переделывать страницу «по одной карте кликов», не понимая, что эти клики значат для пользователя.