Узнайте, что ваши посетители делают на вашем сайте с тепловыми картами

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

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

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

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

Как создать тепловую карту в WordPress

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

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

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

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

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

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

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

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

Наконец, последнее представление, которое мы обычно можем найти, состоит в том, что мы видим клики, сделанные на странице, в виде облака точек или конфетти.

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

Детали тепловой карты

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

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

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

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

Детали карты прокрутки

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

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

Детали конфетти

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

Мы видим, что большинству посетителей, которые нажали, потребовалось от 5 до 10 секунд, чтобы сделать это. Знать эти данные очень интересно, поскольку у нас есть довольно приблизительное представление о том, сколько времени нам нужно, чтобы привлечь их внимание.

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

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

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

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

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

Избранное изображение Альмоса Бехтолда на Unsplash.