Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Что такое тепловая карта, как она работает и как их использовать

  1. Оглавление
  2. Что такое тепловая карта?
  3. Когда я должен использовать Heatmap на моем сайте?
  4. Тепловая карта или Нажмите Тепловую карту
  5. Свиток Тепловая карта
  6. Тепловая карта в процентах кликов
  7. Тепловая карта конфетти
  8. Различия между тепловыми картами и отслеживанием глаз
  9. Ключевые особенности программы Heatmap
  10. Увеличьте конверсию: объедините тепловые карты и A / B-тестирование
  11. Еда на вынос

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

Оглавление

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

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

Это большая ошибка. В действительности, случайные изменения на вашем сайте - это лучший способ:

  • более низкие показатели конверсии
  • потерять на продажах
  • отпугнуть посетителей

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

Что такое тепловая карта?

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

Затем вы можете использовать этот анализ, чтобы составить «карту», ​​показывающую, какие области привлекают наибольшее внимание на вашем сайте.

Давайте посмотрим на это:

Давайте посмотрим на это:

Источник: www.pixeller.co

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

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

Это отличное решение, нет?

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

Когда я должен использовать Heatmap на моем сайте?

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

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

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

Источник: Unbounce

Получение ответов на вышеупомянутые вопросы может помочь вам ответить на еще более острые вопросы:

  • Где я должен разместить свой самый важный контент?
  • Какой лучший способ использовать изображения и видео?
  • Где мои посетители отвлекаются?
  • Где мне поговорить о моем продукте / услуге?

Теперь, когда вы немного более знакомы с этой концепцией, вам может быть интересно, существует ли более одного вида? Ну, ты был прав, спросив.

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

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

Тепловая карта или Нажмите Тепловую карту

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

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

Источник: Сумо

Быстро идентифицируя «горячие точки» на вашем сайте, вы можете сразу определить, нажимают ли люди, куда вы хотите, чтобы они нажимали. На изображении выше из Sumo, мы видим, что «SHARE» и «IMAGE SHARER» являются наименее популярными областями.

Свиток Тепловая карта

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

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

источник: nguyenvincent.com

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

Тепловая карта в процентах кликов

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

Это позволяет вам:

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

Источник: nguyenvincent.com

Тепловая карта конфетти

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

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

Источник: CrazyEgg

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

Но есть еще один способ анализа поведения пользователей на вашем сайте: отслеживание глаз.

Различия между тепловыми картами и отслеживанием глаз

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

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

Источник: Нильсен Норман Групп

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

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

Если вы заинтересованы в отслеживании глаз, есть программное обеспечение на основе ИИ, например, Фэн-Гуй или же EyeQuant , что позволяет имитировать отслеживание глаз с помощью алгоритмов.

Ключевые особенности программы Heatmap

При поиске программного обеспечения для тепловых карт, имейте в виду следующие моменты:

  • Поведенческая сегментация : Инструмент теплового картографирования должен позволять вам создавать тепловые карты, специфичные для определенных аудиторий, которые вы определяете, используя определенные критерии таргетинга и сегментации (например, новые посетители, посетители, которые перешли, посетители из спонсируемых кампаний с ссылками…)
  • Сравнение карт : вы должны иметь возможность легко и наглядно сравнивать результаты разных карт из разных пользовательских сегментов.
  • Упорядочить по шаблону страницы . Наличие тепловой карты, специфичной для каждой страницы, может усложнить анализ, если ваша страница страница продукта электронной коммерции и у вас есть сотни или даже тысячи из них. Вы должны иметь возможность агрегировать результаты для всех страниц определенного типа.
  • Адаптивные тепловые карты: инструмент теплового картографирования должен работать на страницах, доступных с мобильного устройства. Действия, специфичные для этих устройств, должны быть записаны, такие как касания, прокрутки и пролистывания. Во время анализа вы должны уметь различать поведение и сеансы навигации, которые наблюдаются на мобильных и настольных устройствах, чтобы вы могли правильно интерпретировать данные.
  • Карты для экспорта : эта важная функция позволяет легко делиться результатами с товарищами по команде.
  • Динамические тепловые карты : вы должны увидеть клики на динамических элементах: раскрывающемся меню, ползунке, карусели, элементах, загруженных с помощью AJAX или с использованием инфраструктуры JavaScrip, такой как React.js или Angular.js.
  • Ретроактивные тепловые карты : изменился ли дизайн вашего сайта со времени вашей последней тепловой карты ? Программное обеспечение для тепловых карт должно сохранять предыдущие результаты, как показано на текущем дизайне веб-сайта, а не просто накладывать результаты на ваш новый дизайн - результаты не будут иметь никакого смысла.

Увеличьте конверсию: объедините тепловые карты и A / B-тестирование

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

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

Комбинируя тепловое картирование и A / B-тестирование, вы получаете трехэтапный метод:

  • Определить проблемы благодаря тепловым картам
  • Проверьте потенциальные решения благодаря A / B тестированию
  • Выберите самые эффективные решения

Прочтите наше руководство, чтобы узнать все, что нужно знать об А / Б тестировании!

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

Понимание: внимание разделено, и конверсия низка.

Понимание: внимание разделено, и конверсия низка

Источник: KissMetrics

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

Вторая тепловая карта сделана после изменений.

Понимание: внимание переходит на номер телефона, основной призыв к действию и увеличение конверсий.

Источник: KissMetrics

Еда на вынос

Используйте тепловые карты и A / B-тестирование, чтобы:

  • Анализировать поведение и вовлеченность посетителей
  • Выявить сильные и слабые места на определенных веб-страницах
  • Найдите конкретные способы повышения конверсии
  • Проверяйте эти решения, пока не увидите, как повышаются показатели конверсии

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