Как найти боли пользователя: полное руководство по тепловым картам

В своей работе мы опираемся строго на данные и постоянно используем их для веб-аналитики. Один из замечательных инструментов — тепловые карты, с помощью которых можно быстро увидеть частоту взаимодействий с элементами сайта.

Тепловая карта, heatmap — это графическое представление данных, где отдельные значения обозначены цветом. Популярные элементы отображаются как горячие, а менее популярные, как холодные.

Термин Heatmap был придуман и введен разработчиком программного обеспечения Кормаком Минни в 1991 году и использовался, чтобы описать дисплей, на котором в реальном времени отображалось состояние финансового рынка.

Например, на тепловой карте акций размер обозначает капитализацию на рынке, а цвет — динамику одного из показателей, которые можно выбрать самостоятельно.

Но идея тепловой карты не нова — она основана на методе окрашивания таблиц с данными. Еще в 1873 году Туссен Луа выпустил статистический атлас населения Парижа, где интенсивность цвета показывала частоту встречаемых характеристик: национальности, профессии, возраста и других.

Тепловые карты также могут использоваться в различных областях, где работают с данными, но нас интересует применение в веб-аналитике.

Тепловая карта веб-сайта — это совокупная визуализация движений мыши, прокрутки страниц, кликов и касаний пользователя. Они используются дизайнерами, UX-специалистами и маркетологами для выявления моделей поведения и последующей оптимизации сайта для повышения коэффициента конверсии и прибыли.

Тепловая карта сайта показывает наложение движения мыши и касания с цветовой кодировкой на одной странице веб-сайта. Популярность элементов страницы отображается с помощью цветовой шкалы от красного — наиболее популярных частей страницы, до синего — наименее используемых частей страницы.

Основная цель тепловых карт — визуализация поведения пользователей веб-сайта. Изучая совокупность действий пользователя, легко выявить проблемы на веб-странице и возможности для ее улучшения.

Тепловые карты также являются отличным первым шагом для дальнейших исследований поведения пользователей, таких как просмотр записей сеансов и сбор отзывов об опросах.

Тепловые карты обобщают поведение пользователей и упрощают анализ данных, потому что объединяют количественные и качественные данные. Числовые значения передаются визуально по определенной логике, что позволяет почти мгновенно получить представление о том, как ваша ЦА взаимодействует с сайтом или страницей продукта.

Этот инструмент используется, чтобы визуализировать и с легкостью считывать сложные массивы однообразных данных. То есть большую таблицу с данными можно перевести в визуальное отображение, благодаря чему вывод сделать будет намного проще и быстрее.

Слева данные в таблице, справа те же данные, но визуализированные, где видны места страницы, на которые кликают чаще всего.

С помощью тепловых карт продуктовые команды, аналитики и UX-дизайнеры могут быстро получить глубокое понимание о поведении людей на сайте.

На карте сразу понятно, какие области просматривают чаще всего, на что нажимают, а что игнорируют. Это дает возможность оценить тенденции и оптимизировать сайт, чтобы повысить вовлеченность пользователей, конверсии и продажи.

Анализируя тепловые карты, вы можете узнать:

Иначе говоря, тепловые карты позволяют вам увидеть свой сайт со стороны. Иногда то, что казалось важным и полезным может оказаться совершенно невостребованным. А те элементы, которым вы не придавали значения, могут привлекать большое количество внимания.

Также с помощью тепловых карт можно сравнивать поведение пользователей на разных устройствах, потому что страницы на них отображаются по-разному.

Это стоит учитывать при разработке дизайна, поскольку он может прекрасно работать на персональных компьютерах, но вызывать много проблем на мобильных или планшетах. Поэтому для каждого устройства стоит оптимизировать дизайн и перемещать важные элементы интерфейса в зоны высокого внимания.

Также с помощью анализа тепловых карт можно найти критические ошибки, которые вызывают массу негатива со стороны пользователей. Дальше поговорим о том, какими бывают тепловые карты и для чего предназначен каждый вид.

Тепловые карты прокрутки показывают распределение внимания на странице — чем меньшее количество пользователей дошло до определенной области, тем холоднее оттенок. Обычно это самый низ страницы, поскольку первый экран все видят при открытии страницы.

При этом сохраняются данные о количестве тех, кто дошел до конца и можно сравнить их с общим количеством посетителей — узнать точный процент тех, кто докрутил до любой точки страницы.

На тепловых картах прокрутки можно определить линию сгиба — ту часть страницы, которую пользователи видят без скроллинга. Это важно, потому что это зона повышенного внимания и здесь стоит располагать самые важные элементы.

В электронной коммерции нужно размещать коммерческие элементы и CTA до линии сгиба, чтобы посетители гарантированно обратили на них внимание.

Например, это важно для акций и специальных предложений, чтобы пользователь увидел их и как можно быстрее включился в процесс покупки. Еще один пример — если в мобильной версии CTA не попадает в первый экран, то пользователь не увидит его, а значит, с меньшей вероятностью совершит целевое действие.

Карты кликов демонстрируют элементы и места сайта, по которым чаще всего кликают пользователи. На настольных компьютерах учитывают клики мыши, а на мобильных устройствах — касания. Такие карты называются сенсорными тепловыми картами.

Карта кликов полезна тем, что позволяет мгновенно определить востребованность элементов меню и CTA — сразу можно увидеть, что пользователям действительно интересно. Например, раздел «Цены» или «Каталог» будут самыми популярными, а раздел «О компании» не будет востребован. Это также работает с кнопками и CTA — часть из них привлекает внимание, а часть остается без него.

Карты кликов показывают, на какие CTA больше всего кликов, а какие игнорируются. Вы можете обнаружить, что другие элементы страницы отвлекают пользователей от просмотра вашего основного CTA. Также можно протестировать новый CTA в области, которая привлекает больше пользователей.

В примере выше видно, что пользователи часто нажимали на изображения, считая, что они интерактивны. И только потом нажимали на CTA. Так становится понятно, что изображения стоит сделать кликабельными.

Тепловая карта движений мыши показывает, где курсор оказывался чаще всего и выделяет популярные места с помощью цвета.

Эта карта важна, поскольку считается, что взгляд движется вслед за курсором и так можно понять, куда пользователи смотрят чаще.

Исследования показывают, что существует положительная корреляция между отслеживанием глаз и тепловыми картами перемещения, поскольку люди склонны смотреть туда, где находится их курсор. Единственный недостаток этой карты — непонятно в какой последовательности пользователь смотрит.

Более точную информацию о том, как пользователи просматривают страницу, можно узнать с помощью записей сеансов.

Карта яростных кликов показывает места, где пользователи многократно нажимали на элемент или область страницы в течение короткого отрезка времени.

Это похоже на то, как люди много раз нажимают на неработающую кнопку. Области яростных кликов показывают болевые точки — элементы, которые вызывают разочарование и гнев пользователей.

Чаще всего это значит, что кнопки или ссылки не срабатывают и таким образом создают барьеры на пути пользователя.

Этот инструмент представлен в Hotjar и дает возможность взглянуть на ситуацию с разных сторон.

При этом стоит учитывать, что часть пользователей кликает повторно по привычке и при движении по странице. Поэтому не стоит делать поспешных выводов, а необходимо исследовать поведение пользователей с помощью других инструментов, например, через записи сеансов.

Яростные клики обычно сигнализируют:

Тепловую карту Rage Clicks можно использовать, чтобы:

Ошибки и сбои приводят к тому, что пользователи встречаются со сложностями, найти которые поможет тепловая карта.

Многие пользователи бросают процесс оформления заказа, если сталкиваются с неработающими элементами или ошибками. Например, некоторые поля формы могут быть непонятными или не работать, а оплата не проходить с первого раза.

Пользователи не всегда воспринимают элементы интерфейса именно так, как задумал дизайнер. Иногда подсказки в полях ввода недостаточно очевидны, кнопки слишком малы, чтобы в них попасть, а значки или изображения кажутся интерактивными, хотя и не являются таковыми.

Такие болевые точки можно обнаружить с помощью тепловых карт, а затем выяснить причину с помощью UX-аудита или онлайн-опроса пользователей.

Иногда ошибки могут быть заложены еще на этапе проектирования, если прототипы создавались без учета пользовательского опыта. Тогда ошибки будут преследовать посетителей в процессе всего пользовательского пути. Их можно также найти с помощью тепловой карты, а затем проанализировать и внедрить доработки.

Пример: выпадающее меню, которое открывается каждый раз, когда пользователь пытается перейти к фильтрам в верхней части страницы. Таким образом выпадающее меню может перекрывать часть контента и мешать использованию сайта.

Этот тип карты объединяет данные взаимодействий из тепловых карт кликов, скроллинга и движений курсора в одном визуальном представлении. Инструмент позволяет находить точки соприкосновений данных и новые инсайты, которые потом можно положить в основу продуктовых гипотез.

Карты зон взаимодействия позволяют комбинировать данные о кликах, множестве повторных кликов, перемещениях мыши и скроллинга, чтобы увидеть элементы интерфейса, с которыми взаимодействуют чаще всего.

Карта объединяет все доступные данные и накладывает на сетку, чтобы можно было увидеть части страницы, которые привлекают больше всего внимания.

Например:

Преимущества:

Недостаток всего один — тепловые карты — это инструмент для быстрого и короткого анализа. Он не дает возможности глубоко изучить проблему и докопаться до ее сути. Но он дает возможность выдвинуть продуктовые гипотезы и проверить их.

А чтобы изучить проблемы подробнее, нужно проводить глубинные интервью и онлайн-опросы пользователей.

Тепловые карты дают возможность понять, как распределяется внимание пользователей, где находятся популярные и проблемные зоны интерфейса. И уже потом двигаться вглубь изучения пользовательского опыта.

Недостатки тепловых карт устраняются совместным использованием с другими инструментами веб-аналитики.

Традиционные инструменты веб-аналитики, например, Google Analytics, дают количественные данные, которые необходимо объединить с качественными, чтобы понять причины поведения пользователей.

О том, как правильно работать с обоими типами данных, мы писали в статье: «Качественные vs количественные данные: нюансы, которые не учитывают или как увеличить ARPU на 37,28%».

Записи сеансов создаются отдельно для каждого пользователя и позволяют детализировать контекст. То есть понять, почему посетитель совершал те или иные действия: как двигался его курсор, на какие элементы он нажимал и по каким страницам переходил.

Используя их совместно с тепловыми картами, можно получить более четкое понимание пользовательского опыта.

Отзывы пользователей также позволяют уточнить контекст и получить непосредственную обратную связь от людей. Это ценный источник информации, которым не стоит пренебрегать.

Если тепловые карты могут указать на возможные проблемы, то отзывы посетителей прямо говорят в чем дело.

О типах опросах и о том, как с ними работать мы писали в статье: «Как узнать всё, о чем думают пользователи, когда бросают покупки: гайд по онлайн-опросам».

Данные, которые были получены из тепловых карт, можно использовать для разработки тестовой гипотезы. Кроме того, варианты тестовых страниц также можно изучать с помощью тепловых карт, чтобы понять какой вариант был более успешен, а какой вызвал затруднения.

Для одного из клиентов проводили анализ карточки товара и с помощью карты кликов выяснили, что самый популярный блок, с которым взаимодействуют посетители — это слайдер с изображением ковра.

Для электронной коммерции это нормально — изображение товара играет важную роль. Но в то же время обнаружили, что посетители практически не взаимодействуют с табами, в которых есть важная информация и функции. При этом основная часть трафика приходится на первый экран и чем ниже, тем меньше людей изучают представленную информацию.

Следующий важный момент — это то, что основная доля посетителей приходит с мобильных, а на экранах с небольшим размером табы еще менее заметны и востребованы.

Это приводило к тому, что очень важный момент, который мог бы закрыть подавляющее большинство сомнений, страхов и возражений — доставка и демонстрация ковров дома у покупателя — на мобильных практически не работала. Люди не кликали на элемент, а значит, сайт упускал потенциальных клиентов.

Причина крылась в том, что коммерческий блок находился ниже второго экрана, куда пользователи просто не доходили, и более того, — был спрятан в таб. В итоге на основе анализа мы предложили новую схему карточки товара, где все эти проблемы были решены.

1. При подготовке к редизайну сайта. Чтобы понять, как изменить интерфейс, чтобы лучше удовлетворять ожидания пользователей.

2. Для повышения юзабилити сайта. Чтобы знать, куда переместить блоки, кнопки и баннеры, когда мы хотим, чтобы они попали в зону активного внимания или, наоборот, ушли из нее.

3. Для увеличения коэффициента конверсии. Когда мы видим, что у пользователей есть проблемы на пути потребителя, а нам нужно его упростить и повысить вероятность целевого действия.

4. При A/B-тестировании. Когда нам нужно сравнить между собой несколько вариантов и понять, какой из них лучше сработает.

5. Для поиска и устранения ошибок. Тепловые карты дают возможность найти проблемные места, которые вызывают у пользователей сложности при использовании.

6. Для оценки качества контента. Чтобы узнать сколько людей дочитывает статьи, как реагирует на разные типы заголовков, иллюстрации и видео, сколько тратят времени на прочтения, совершают ли переходы и целевые действия.