Тепловая карта — это визуальное представление совокупного поведения пользователей на веб-странице, использующее цветовые градиенты, обычно от холодных цветов, таких как синий, для низкой активности, до теплых цветов, таких как красный, для высокой активности, чтобы показать, куда пользователи кликают, перемещают курсор или прокручивают страницу в течение нескольких сессий, наложенные непосредственно на одно изображение страницы. Три наиболее распространенных типа — это карты кликов, показывающие, куда пользователи кликают или касаются, независимо от того, является ли это место фактически кликабельным элементом; карты перемещений, отслеживающие движение курсора как приблизительный показатель визуального внимания на настольных устройствах; и карты прокрутки, показывающие, какой процент посетителей достигает каждой вертикальной секции страницы при прокрутке вниз к нижнему колонтитулу. Четвертый, менее распространенный вариант, карта внимания или наведения курсора, иногда выделяется отдельно на мобильных устройствах, где события касания и прокрутки полностью заменяют движение курсора в качестве основного регистрируемого поведенческого сигнала.
Тепловые карты важны, потому что они преобразуют абстрактные данные о поведении пользователей в интуитивно понятный визуальный формат, который сразу же понятен дизайнерам, маркетологам и заинтересованным сторонам, не требуя при этом реального знакомства с аналитическими таблицами или отчетами о событиях. Карта прокрутки, показывающая, что только 20 процентов посетителей доходят до раздела с ценами на странице, расположенного внизу длинной страницы, гораздо эффективнее, чем аналогичный числовой отчет о глубине прокрутки, спрятанный в электронной таблице, передает четкую и действенную проблему. Именно эта визуальная доступность является одной из главных причин широкого использования тепловых карт в презентациях для заинтересованных сторон и отчетах для клиентов в рамках работы по оптимизации конверсии и пользовательскому опыту.
Тепловые карты создаются с помощью таких инструментов, как Hotjar, Microsoft Clarity или Crazy Egg, которые внедряют легковесный скрипт отслеживания, записывающий координаты курсора и касания, а также положение прокрутки в течение различных сессий посещения, а затем агрегируют эти необработанные данные в визуальное наложение после накопления достаточного объема выборки, обычно не менее 1,000–3,000 сессий на страницу, чтобы сформировать достаточно стабильную и репрезентативную картину, поскольку страницы с меньшим трафиком могут давать тепловые карты, искаженные небольшим количеством нетипичных сессий. Аналитики обычно сегментируют тепловые карты по типу устройства, поскольку модели кликов и прокрутки на мобильных устройствах существенно отличаются от моделей на настольных компьютерах, и по источнику трафика, поскольку посетители, приходящие из разных каналов, часто имеют разные намерения и демонстрируют различное поведение даже на одной и той же странице и с одинаковым макетом.
Часто встречается заблуждение, что тепловые карты показывают, на что смотрят пользователи, тогда как на самом деле карты перемещения отслеживают только положение курсора, которое коррелирует с визуальным вниманием на настольных компьютерах, но лишь несовершенно, поскольку пользователи часто держат курсор неподвижно во время чтения, переводя взгляд в другую часть экрана; для настоящего отслеживания взгляда требуется специальное оборудование для отслеживания взгляда, которое гораздо реже используется в коммерческой работе по оптимизации конверсии, чем программные тепловые карты, которые полагаются исключительно на данные о курсоре и касаниях. Еще одна распространенная ошибка — делать однозначные выводы из тепловой карты в отрыве от контекста, не сопоставляя ее с целями кликов и структурой страницы, например, ошибочно интерпретировать частые клики по неинтерактивному изображению как положительное взаимодействие, тогда как на самом деле это может указывать на непонимание пользователем, было ли это изображение вообще кликабельным.
In CRO В UX-консалтинге тепловые карты обычно используются на ранних этапах аудита для выдвижения гипотез о том, где могут возникать проблемы или путаница, например, для выявления того, что пользователи неоднократно кликают на статическое изображение баннера, ожидая, что оно приведет к ссылке куда-то еще, или для того, чтобы карта прокрутки показала, что ключевой призыв к действию находится значительно ниже точки, где большинство посетителей фактически прекращают прокрутку. Поскольку тепловые карты носят описательный, а не причинно-следственный характер, то есть они показывают, что произошло, но не объясняют, почему это произошло, их почти всегда сочетают с записями сеансов для более глубокого качественного контекста, а затем проводят контролируемое A/B-тестирование, чтобы подтвердить, действительно ли предлагаемое исправление улучшает показатель, на который оно должно было повлиять. Обновление тепловой карты после изменения дизайна также служит быстрой и недорогой проверкой того, что новый макет используется должным образом, прежде чем ждать, пока полный эксперимент достигнет статистической значимости.