Тепловая карта обязательно должна быть в арсенале маркетолога, UX-дизайнера и SEO-специалиста, ведь она помогает понять, как сделать сайт удобнее для пользователя. Разбираемся, какие виды heatmap существуют и как их правильно применять.
Тепловая карта сайта: виды и способы применения
Информация об активности пользователей помогает оптимизировать сайт. Узнав, на что кликают посетители, а на что нет, вы сможете сделать ресурс более удобным.
Маркетологи и дизайнеры собирают данные о поведении пользователей с помощью тепловых карт. Читайте об устройстве, эффективности и недостатках этого инструмента в нашем развернутом обзоре.
Что такое тепловая карта
Тепловая карта — это сервис, который с помощью цветовой палитры рассказывает, как ведет себя пользователь на сайте. Теплыми тонами выделяются зоны с высокой активностью, холодными тонами — с низкой.
Именно форма визуализации данных отличает его от других сервисов для сбора статистики. Heatmap экономит время. Одного взгляда достаточно, чтобы понять, какие места интересны пользователю, а какие он просто не замечает по тем или иным причинам.
Термин «тепловая карта» пришел к нам из финансовой сферы. Его автор — разработчик Кормак Кинни, который в 1991 году зарегистрировал heatmap в качестве товарного знака. Под теплокартой тогда подразумевалась программа, отображающая данные финансового рынка.
С тех пор область применения карт расширилась. Ими начали пользоваться специалисты по маркетингу, UX-дизайнеры, сеошники и аналитики. Анализ статистики кликов, движения курсора и длины прокрутки — непременные составляющие юзабилити-аудита.
С помощью heatmap можно узнать:
- на какие кнопки, изображения и ссылки чаще всего кликают пользователи;
- какие элементы они игнорируют;
- как перемещаются по сайту;
- на какие участки чаще всего наводят курсор;
- как далеко прокручивают страницу.
Для сбора столь разнообразной информации предусмотрено несколько видов теплокарт: одни отслеживают клики, другие — скроллинг, третьи — движение мыши.
Виды тепловых карт
Карта кликов
Карта кликов позволяет увидеть, на какие изображения, кнопки, тексты и другие элементы страницы нажимает пользователь, а какие участки игнорирует.
На примере использования фильтров и сортировки в Я.Метрике мы видим, что самым теплым оттенком выделяются места, которые собирают наибольшее количество кликов. Маркетолог сможет почерпнуть множество полезной информации из теплокарты такого типа. Она поможет обосновать необходимость оптимизации сайта, продемонстрирует, какие элементы не работают, что вызывает неудобство у пользователей.
Ошибки, которые поможет исправить карта кликов
- Неработающие ссылки и некликабельные элементы. Карта показывает места, которые пользователи ошибочно принимают за ссылку: изображения, выделенный текст или подзаголовоки. Это сигнал, что к элементу стоит привязать ссылку или преобразовать его, чтобы он перестал выглядеть как ссылка.
- Незаметные кнопки. Карта кликов помогает определить, на какие кнопки пользователи не обращают внимания. Скорее всего, они расположены не в том месте, и ситуацию можно исправить.
- Призывы к действию. Инструмент позволяет оценить, насколько эффективны призывы к действию. Низкий показатель частоты кликов свидетельствует о том, что призыв составлен на работает на ЦА или для него неудачно расположен на сайте.
- Всплывающие окна. Карта кликов покажет, как часто посетители кликают на поп-апы, и поможет сделать вывод об их эффективности.
Карта скроллинга
Следующий подвид heatmap — карта скроллинга. С ее помощью можно узнать глубину прокрутки страницы.
Карта скроллинга поможет:
узнать длину страницы, оптимальную для вашего ресурса;
определить, в какой точке нужно разместить баннер или СТА-кнопку;
понять, дочитывают ли посетители до конца ваши лонгриды, и где они останавливаются;
выбрать между бесконечной прокруткой и пагинацией.
Полученные данные станут отправной точкой для корректировки дизайна страницы или редактирования контента. Если карта показывает низкую активность внизу страницы, исправит ситуацию добавление дополнительных элементов, которые подскажут посетителю, что страница прокручивается дальше. Кроме того, сами тексты могут быть плохо написаны или неграмотно структурированы. Возможно, над ними стоит поработать.
Карта активности мыши
Еще один вариант heatmap — карта активности мыши. Она выделяет области, на которые наводит курсор пользователь. С ее помощью маркетологи и UX-дизайнеры могут пересмотреть подход к подаче информации.
Есть определенные сомнения по поводу того, насколько точно такой тип карты оценивает поведение пользователей. Дело в том, что посетитель может изучать информацию на сайте и при этом не наводить на нее стрелку мыши. Более того, он может направить курсор на элемент, который не привлек его внимания и оставить его в этом положении. Такие карты уступают в точности технологии eye tracking, и если вы хотите получить по-настоящему точные данные, пользуйтесь последним инструментом.
Недостатки тепловых карт
Помните: чтобы провести грамотные работы по оптимизации конверсии, одних тепловых карт недостаточно. Heatmap не определит со стопроцентной гарантией, почему пользователь нажимает на тот или иной элемент, кажется ли он ему полезным или это просто случайность. Она может помочь маркетологу и UX-дизайнеру найти проблемные зоны, но опираться в исследовании только на тепловые карты не стоит.
Какие сервисы попробовать
Яндекс Метрика
Яндекс Метрика включает бесплатный инструмент для использования тепловых карт. Работать с сервисом можно без знания английского языка. Требует установки скрипта Я.Метрики на анализируемый ресурс.
CrazyEgg
Сервис стал одним из ведущих в мире благодаря своей карте кликов, которая называется «Конфетти». Пользователю предоставляется возможность устанавливать фильтры и делить посетителей на сегменты. Сервис платный, но предусмотрена демо версия на 30 дней.
Clicktale
Сервис для крупных проектов с хорошим инструментарием. Clicktale позволяет увидеть не только, как часто пользователи кликают на ссылки, но и как часто наводят на них курсор. В комплекте также есть инструменты, которые помогут сравнить страницы сайта по выбранным показателям и оптимизировать воронку продаж.
