Как использовать тепловые карты для улучшения веб-сайта (примеры, инструменты, etc.)

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

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

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

Начнем.

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

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

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

Хотя вы можете быть в состоянии собирать данные, как то, что ссылки люди нажимают на с программами, как Google Analytics, тепловые карты обеспечивают способ визуально изучить эти данные. Затем вы можете внести коррективы в зависимости от того, что люди нажав, глядя на, и зависания.

Но как именно они работают? Как они могут собирать такие данные?

Как они работают?

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

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

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

Затем эти данные впревращаются в отчет и выходные данные в виде читаемой диаграммы.

Типы тепловых карт

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

• Нажмите карты — Как следует из названия, эти трек, где пользователи нажимают на экран. Это в основном показывает, какие связи люди тяготеют к, и которые идут незамеченными. Тем не менее, он также отслеживает клики на изображения и другие части экрана. Это означает, что вы можете сказать, какие другие элементы они, кроме ссылки где-то или когда они путают в uI.
• Нависшие карты — Ищите подражать глаз отслеживания технологии, показывая, где люди чаще всего отдыхают их курсор, но это может быть немного хитом или пропустить. Люди, как правило, смотрят, где их курсор парит, так что это может быть полезно, но данные не являются совершенно точными.
• Прокрутка карт — Запись, как далеко пользователи прокрутки вниз страницы перед отъездом. Это огромная помощь, поскольку она поможет вам понять, что содержание большинство пользователей упустить. Если большинство людей даже не достигают вашего призыва к действию, пришло время переместить его вверх или перепроектировать свою страницу.
• Карты внимания – это вроде как прокрутки, щелкните и нависают карты вместе взятые. Они показывают, какие части страницы получили наибольшее участие, а также количество времени, проведенного пользователями там. Это все о указывая, какие области являются наиболее просматриваемых.

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

Как читать тепловые карты

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

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

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

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

Что они не могут сказать вам

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

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

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

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

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

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

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

Прежде всего, будьте осторожны

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

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

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

Возьмите один шаг в то время,

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

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

• Они игнорируют мой CTA или что-то еще — Является ли ваш CTA «выше раза», или видимые без прокрутки? Вы должны иметь по крайней мере одну кнопку CTA выше раза. В противном случае, возможно, потребуется изменить цвет кнопки, размер или стиль, чтобы сделать его более заметным.
• Они не прокрутки вниз достаточно далеко — Есть люди вдруг снижается со страницы, или не прокрутки вниз на всех? Это может быть признаком проблемы с содержанием прямо в точке отсечения. В противном случае, вы можете переместить важное содержание дальше вверх по странице.
• Они нажимают на изображения или значки — Пользователь, кажется, думает, что изображение является интерактивным. Это может быть проблемой с макетом uI. Вы можете исправить это, просто используя изображение для ссылки на страницу, которую вы думаете, что они пытаются достичь.
• Они не нажав то, что я хочу, чтобы нажать на — Часто это можно исправить, просто перекладывая вещи вокруг. Переместите содержимое дальше вверх по странице, или попробуйте тонко размещения элементов по-разному, чтобы выделить ссылку, вы хотите, чтобы люди нажать.

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

Как добавить тепловые карты на ваш веб-сайт

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

1. Хотджар

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

Hotjar имеет бесплатную версию для очень маленьких веб-сайтов, недорогой план ($ 29/month) для стартапов, и доступные ежемесячные сборы для крупных предприятий (начиная с $ 89/month за 20000 ежедневных просмотров страниц).

2. Crazyegg

С Crazyegg вы можете использовать три типа heatmapping, диктофон, и встроенный A / B тестирования, чтобы выяснить, где именно дела идут не так.

С дешевой ежемесячной платы, начиная с $ 24 /month за один веб-сайт, Crazyegg поставляется с почти все функции, которые вам понадобятся. Он также интегрируется с WordPress и Shopify.

3. Поток мышей

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

Mouseflow является более дорогим (начиная с $ 29/month), но у него есть бесплатный план для небольших веб-сайтов.

4. Инспектлет

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

5. Счастливый оранжевый

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

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

Lucky Orange имеет очень доступные цены, особенно если вы идете с ежегодными планами. Вы можете начать работу всего за $ 7 в месяц.

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

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

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

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

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

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

Какое ваше любимое приложение для нагрева? Что заставило вас принять решение придерживаться его? Препятствуйте нам знать о вашем опыте с heatmaps в комментариях!