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

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

Разные типы карт взаимодействия

Карты взаимодействия пользователей (в западных источниках – «heatmaps») бывают нескольких видов:

Карты движения курсора
Карты кликов
Карты скроллинга

1. Карты движения курсора

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

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

Но есть и другие мнения, в частности Анна Аула из Google в своем исследовании показывает, что корреляция между тем, куда действительно смотрит пользователь и где находится его курсор – незначительна.

Известна также альтернативная модель поведения, когда пользователи, читая какую-то информацию, наоборот, убирают курсор от текста куда-то вбок, «чтобы не мешал читать».

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

2. Карты кликов

Показывают, куда пользователи кликали при взаимодействии со страницей.

3. Карты скроллинга

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

Что дают карты взаимодействия

Главная польза от карт взаимодействия разных типов в том, что они позволяют строить гипотезы о том, что «не так» с вашим сайтом, и оптимизировать эти моменты.

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

Далее, на основании этих данных, можно строить гипотезы по оптимизации сайта. Типичные примеры:

Карта движения курсора: многие посетители «кружат курсором» вокруг некого элемента на странице или прямо по нему. Вероятно, он привлекает их внимание. Нужно ли это? Не отвлекает ли он их внимание от других, более важных элементов? Стоит ли его убрать? Или раз этот элемент почему-то так важен посетителям, может быть, стоит его увеличить, перенести в более заметное место?
Карта кликов: многие посетители кликают на какой-то элемент сайта, который ссылкой не является. Это плохо, потому что это может вести к разочарованию посетителей и к тому, что они покинут сайт. Можно превратить такой элемент в ссылку на другую страницу. Можно превратить такой элемент в ссылку, вызывающую «всплывающее окно» — это позволит дать больше информации посетителю, оставляя его на той же странице.
Карта скроллинга: многие посетители не докручивают страницу и не видят информации, расположенной в нижней части страницы. Стоит ли стимулировать их прокручивать страницу больше? Например, с помощью ссылок/кнопок вверху страницы, которые прокручивают страницу до нужного места при их нажатии? Есть ли какая-то критически важная информация, которую многие посетители не видят? Может быть, стоит вынести ее выше, туда, где она заметнее? Очень хорошо работает совместное изучение карты кликов и скроллинга. Есть ли какие-то места в нижней части сайта, которые получают относительно много кликов? Тогда стоит вынести их наверх, чтобы больше людей их увидели.

«Туманные зоны»

В идеале СТА-зоны на ваших страницах должны выглядеть как сосредоточение кликов в виде яркого пятна на полях ввода и главной кнопке, как на этом примере:

Однако, часто наблюдается эффект «туманного пятна», когда много кликов рассредоточиваются вокруг СТА-кнопки, как здесь:

По мнению Криса Говарда из WideFunnel – это области, требующие повышенного внимания. Это говорит о том, что пользователи в этом месте не уверены в том, куда им надо кликнуть.

В этом случае необходимо менять дизайн, делая более заметной СТА-кнопку, работать над другими элементами (текст, картинка, заголовок), чтобы они не сбивали с толку посетителя и не давали ему ощущения, что кликнуть надо на них, а не на кнопку. Альтернативным решением в некоторых случаях может быть – сделать всю эту зону кликабельной (если подразумевалось, что клик ведет посетителя на другую страницу, например, оформления заказа).

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

1. Приложение Pair

У приложения Pair, которое недавно сменило название на Couple, был простой лендинг, рассчитанный на то, что заинтересованные посетители будут переходить по кнопкам AppStore и Google Play и загружать приложение.

Вот так выглядела карта кликов:

Лим Чен Сун, специалист по оптимизации в Pair, предположил, что на странице слишком много отвлекающих ссылок, в частности навигационное меню, кнопки соцсетей и текст «Download for free» около СТА-кнопок.

Он провел несколько раздельных тестов этих гипотез и пришел к следующим результатам:

Удаление текста «Download for free» привело к РОСТУ конверсии на 10%
Удаление навигации привело к РОСТУ конверсии на 12%
Удаление кнопок соцсетей привело к ПАДЕНИЮ конверсии на 34%
Увеличение размера надписи «Download for free» (проверка обратной теории) дало ПАДЕНИЕ конверсии на 42%

В итоге Лим Чен Сун сделал финальную версию страницы, в которой удалил текст «Download for free», перенес навигацию в футер страницы и сохранил кнопки соцсетей.

Результат? Прирост конверсии на 25% по сравнению со старой версией.

2. Компания BlueWire

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

Адам Франклин, специалист компании BlueWire, заметил, изучая карту взаимодействия на главной странице, что самая важная часть на ней – форма подписки, получала очень мало взаимодействий. Он пришел к выводу, что ей требуется изменение дизайна. В форме отказались от скучного серого цвета и черной кнопки, форма стала более контрастной и заметной.

В результате, конверсии значительно улучшились (компания не раскрывает точные данные о проценте роста).

3. Сайт ChristianPF.com

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

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

Это простое изменение удвоило процент конверсии подписчиков на данной странице.