Использование тепловых карт на странице с ценами

Давайте начнем «А/Б-тест месяца» с теста, который не является А/В-тестом. Прежде чем вы убежите в другой уголок Интернета, позвольте мне объяснить вам, почему мы начнем с тепловых карт.

Одна из основных причин того, что вы не используете A/B-тестирование на регулярной основе на своем веб-сайте, заключается в том, что вы не знаете, с чего начать: какие изменения я пробую, где и почему? Это ключевые вопросы, которые вы себе зададите. Если вы не знаете, как на них ответить, вы откажетесь от тестирования.

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

В сегодняшнем примере мы решили начать со страниц цен наших премиальных плагинов: Nelio A/B Testing и Nelio Content. Эти страницы являются ключевыми для нашего бизнеса, так как доход нашей компании поступает через них обоих.

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

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

Как создать тест тепловой карты в WordPress

Создать тест тепловой карты для страницы WordPress очень просто. Вам просто нужно выбрать выбранную страницу и начать тест.

В Nelio A/B Testing создайте новый тест тепловой карты, выбрав этот тип теста в диалоговом окне, которое открывается при нажатии на кнопку добавления нового теста.

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

Когда у вас все будет готово (как вы видите на предыдущем скриншоте, это очень просто), нажмите на кнопку в правом верхнем углу окна, чтобы начать тест. Вам просто нужно дождаться прихода ваших посетителей, чтобы Nelio A/B Testing собирал данные об их поведении на странице и обрабатывал результаты.

Результаты тепловой карты

В нашем случае на нашем веб-сайте одновременно выполнялись два теста тепловых карт: один для страницы цен Nelio A/B Testing, а другой — для страницы цен Nelio Content.

Каждый тест собирал данные около 20 дней и анализировал поведение около 500 посетителей. Этого более чем достаточно, чтобы сделать определенные выводы и подумать о будущих A/B-тестах, которые мы можем запустить на этих страницах.

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

Страница с ценами на Nelio A/B Testing

Начнем с результатов, полученных для страницы с ценами Nelio A/B Testing. Тест тепловой карты показывает нам данные с трех разных точек зрения: тепловая карта, карта прокрутки и конфетти. Вставлять сюда 3 полных изображения — это слишком много, потому что они довольно большие по высоте в пикселях. Чтобы не заставлять вас постоянно прокручивать вверх и вниз, я просто связал их здесь:

• Тепловая карта страницы с ценами Nelio A/B Testing.
• Карта прокрутки страницы с ценами Nelio A/B Testing.
• Конфетти со страницы цен Nelio A/B Testing.

Давайте теперь посмотрим на наиболее актуальные фрагменты предыдущих результатов:

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

На странице цен Nelio A/B Testing первый сгиб страницы — это место, где больше горячих точек. Если мы проанализируем его подробно, то элементы в области базового плана и профессионального плана приобретут большее значение, чем предприятие. Учитывая это, возможно, мы могли бы переупорядочить тарифные планы, чтобы сначала отображался корпоративный план. Обратите внимание, что мы привыкли читать слева направо, поэтому отображение самого дорогого плана на странице с ценами может быть хорошим изменением, которое можно попробовать в A/B-тестировании.

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

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

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

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

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

Конфетти также дает нам сводную информацию о посетителях, полученную из сделанных ими кликов. Nelio A/B Testing включает в себя несколько типов фильтров для лучшего понимания различных характеристик посетителей, как вы можете видеть здесь:

Из этих фильтров мы извлекли следующие данные:

• Chrome и Firefox на сегодняшний день являются наиболее часто используемыми браузерами среди наших посетителей. Поэтому мы должны сделать так, чтобы веб хорошо выглядел, по крайней мере, в этих браузерах.
• Половина посетителей этой страницы из США. Это соответствует нашим данным о продажах.
• Посетители посещают нас чаще в первые 3 дня недели. Знание этой информации может быть полезно, например, для размещения предложений в другие дни в других областях сети и, таким образом, для привлечения трафика в дни с низким трафиком.
• Почти 100% посетителей заходят на страницу с настольного компьютера или ноутбука. У нас почти нет посещений с мобильных устройств. Это то, что нужно изучить в будущем.
• Windows 10 и Mac OS X — это операционные системы, с которых к нам приходят люди. Совпадает с предыдущими данными, так как у нас нет посетителей с операционных систем для мобильных устройств.
• У нас больше посетителей в течение рабочего дня (тест проводился в часовом поясе Чикаго). Это логично, так как наш основной клиент из США.
• Посещения осуществляются на экранах с минимальной шириной более 1500 пикселей. Еще один факт, подтверждающий, что посещения происходят с настольных компьютеров или ноутбуков.

Если вы проверите полные версии тепловой карты и конфетти, вы увидите, что все остальные разделы страницы с ценами Nelio A/B Testing менее актуальны. Имея это в виду, давайте проверим следующую карту прокрутки:

Если вы посмотрите на полную карту прокрутки, то увидите, что очень немногие посетители выходят за пределы первого сгиба страницы. Это наводит меня на мысль, что, возможно, нам следует использовать гораздо более короткую версию страницы с ценами на Nelio A/B Testing, сконцентрировав соответствующую информацию в верхней части страницы.

Разделы после первого сгиба страницы содержат много текста, и посетители его не читают. Менее 20% приходят посмотреть и поработать с подробной таблицей сравнения планов, которую вы можете найти в нижней части Интернета. Все эти данные предоставляет карта прокрутки:

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

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

Страница с ценами на Nelio Content

Как и на странице цен Nelio A/B Testing, здесь у вас есть полные изображения с результатами тепловой карты для страницы цен Nelio Content:

• Тепловая карта страницы с ценами Nelio Content.
• Карта прокрутки страницы с ценами Nelio Content.
• Конфетти страницы с ценами Nelio Content.

Страница с ценами Nelio Content проще и короче, чем страница Nelio A/B Testing. Помимо прочего, у этой страницы только один план, в то время как с Nelio A/B Testing у нас было 3 разных плана.

Если вы посмотрите на полную тепловую карту и сравните ее с картой Nelio A/B Testing, вы увидите, что в этом случае горячих точек больше в других частях страницы, кроме первого сгиба.

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

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

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

Мы также видим, что видео привлекает много внимания. Мы создали очень классное видео, и, возможно, мы могли бы показать его ранее на странице. Мы могли бы попробовать это изменение с помощью A/B-теста, потому что раздел после первого сгиба также не имеет большого значения.

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

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

Что касается графика кликов конфетти, интересно посмотреть количество неправильных кликов, сделанных в неактивных областях в пределах первого сгиба страницы:

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

Мы должны искать другой, менее запутанный способ показать две цены с одинаковым взаимодействием в обоих случаях. Это еще один A/B-тест, который мы могли бы запустить на этой странице.

И что теперь?

Мы начали, не имея ни малейшего представления о том, какие A/B-тесты мы можем провести на нашем веб-сайте. Мы видели, что тепловые карты помогают нам легко получать идеи для тестирования в A/B-тестах на наших страницах. Как только у нас появятся эти идеи тестирования, нам нужно расставить приоритеты в соответствии с нашими потребностями.

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

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

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

Избранное изображение Стива Халамы на Unsplash.