Большинство решений по дизайну сайта до сих пор основывается на интуиции или неправильной информации.
В отличие от традиционной веб-аналитики, визуальная аналитика (внутри страницы) фокусируется на движении пользователя по страницам, а не между ними. В итоге вы можете понять поведение пользователя, и на основе этих данных оптимизировать юзабилити своего сайта. Давайте поговорим о тепловых картах и анализе данных, которые они предоставляют, подробнее.
О кликах и людях
Тепловые карты отслеживания кликов представляют все клики в форме тепловой карты, помогая увидеть области, которые привлекают наибольшее внимание вашего пользователя.
Главное преимущество – для работы с картой не нужно дополнительно обучаться, она не требует больших временных и финансовых вложений.
Источник: Conversion Scientist
Компания ClickTale представила отличный кейс по использованию тепловых карт:
Интернет-магазин North Face заметил, что многие его пользователи достигают корзины на сайте, но редко оформляют заказ (результат – низкая конверсия). До этого момента воронка работала отлично, поэтому они сделали вывод, что проблема в самой корзине и провели тест, обратившись к ClickTale.
Результаты показали, что пользователи не кликали на кнопку оформления заказа, т.к. прямо над ней был размещен рекламный баннер. Он отвлекал их внимание и уводил из корзины. North Face пересмотрели дизайн баннера и заказы выросли на 21%.
Еще один кейс по оптимизации конверсии, опубликованный UsabilityTools:
OptimalEnergy (сайт сравнения цен онлайн) хотели больше узнать о воронке конверсии на их сайте. На сайте был размещен слайдер с изображениями, но ни одно из них не было кликабельным. Информация, собранная с помощью сервиса Click Tracking, и тепловые карты показали, что 24% пользователей действительно пытаются нажать на эти статические изображения. Дальнейшая проверка показала, что некоторые элементы на сайте заставляют 81% пользователей покинуть ресурс.
Тепловая карта показала, что 24% кликов приходилось на нецелевые места
OptimalEnergy сразу же сделали изображения в слайдере кликабельными и удалили проблемные элементы. Как результат – конверсия возросла на 123%.
Что из этого можно почерпнуть?
Если элементы на странице не соответствуют вашим ожиданиям и ожиданиям ваших клиентов – это проблемные зоны. Как мы показали ранее, тепловые карты – прекрасный способ выделить зоны интереса, которые привлекают внимание ваших пользователей.
Вы можете определить, какие части вашего сайта наиболее удачные, и принять обоснованное решение по поводу будущего дизайна.
1. Анализируйте, куда люди кликают
Тепловые карты в основном показывают клики, так что вы можете оценить эффективность ваших CTA-элементов (или посмотреть, например, кликают ли люди по вашему логотипу). Большинство инструментов тепловых карт позволяют переключаться в режим, который показывает только популярные зоны и помогает быстро определить основные интересы пользователей.
Светлые области – это наиболее «видимые» точки для кликов пользователя
2. Изучайте реакцию пользователей
Иногда, чтобы достичь цели, кликать не обязательно – если ваш клиент читает о том, что у вас действующая распродажа и идет дальше к покупкам, значит, текст достиг своей цели.
Но как узнать, о чем именно думают люди? Видя, где останавливается курсор, мы можем сделать вывод, какие области наиболее интересные. Многие тепловые карты оснащены инструментом “hover maps” (карта наведения мышки), который показывает, где остановился курсор заинтересованного пользователя.
Пользователи чаще наводят курсор на заголовок статьи и пустое место под ним.
3. Смотрите, как они скроллят
Некоторые сайты экспериментируют с длинной прокруткой, но иногда информация становится скрытой на нижней части страницы. Карта прокрутки показывает, как далеко пользователь заходит на страницу, и дает более точные данные о вовлеченности.
Возможно, если вы обнаружите, что пользователи не кликают на важный контент внизу страницы, то захотите передвинуть его выше (или сократить страницу).
Теплые цвета показывают области, на которые пользователи обращают больше внимания.
4. Отбирайте лучшее
У тепловых карт есть фильтры в зависимости от даты и источника трафика.
К примеру, вы публикуете статью «Как Cookies и наши инструменты могут увеличить конверсию» на другом сайте. Люди, которые приходят с этой статьи на ваш сайт, будут кликать и просматривать его с мыслью о совместном использовании ваших инструментов и cookies. Сегментирование этих пользователей покажет, какие зоны сайта интересны только им. Если вы обнаружите, что эта аудитория конвертируется хорошо, стоит изучить тепловую карту, чтобы увидеть области своего сайта, которые вы сможете лучше адаптировать для них.
Описание фото: CrazyEgg через инструмент AboutAnalytics
5. Добавьте цифры к анализу
Хоть статистика кликов и движений – чрезвычайно ценный источник информации, давайте не будем концентрироваться только на визуальном аспекте.
Используя статистику, вы можете проверить, как много кликов было совершено за просмотр. С одной стороны, большое количество кликов может сообщать о высокой вовлеченности. С другой – говорить о том, что пользователи «сражаются» с сайтом (если не получают от клика то, чего ожидают).
Вы можете отделить количество кликов за просмотр, потом исследовать поведение в этом сегменте.
Если много кликов приходится на статическую область – это знак, что вам нужно пересмотреть свой интерактивный дизайн.
Если эти клики приходятся на области с целевым контентом – значит, результаты говорят в пользу вашего дизайна.
Полезные инструменты для построения тепловых карт и тестирования юзабилити:
● Gemius Heatmap – Базовые тепловые карты в наиболее простой форме. Идеально подходят для нетребовательных клиентов.
● Crazyegg – Хорошо известная классика, на рынке достаточно давно (создан одним из основателей KISSMetrics). Можно использовать бесплатно 30 дней.
● UsabilityTools – Предлагает набор инструментов, поддерживающих card sorting (способ построения инфоструктуры сайта) веб-тестирование, тестирование кликов и опросы для пользователей.
● Digital360 – Полезен в оптимизации конверсии.
Примечание: Это платные инструменты, которые предлагают западные специалисты. Для этих целей можно использовать инструменты, предоставленные Яндексом. Найти их вы можете в Яндекс.Метрике -> Поведение:
Оригинал статьи: http://blog.uxpin.com/6625/understanding-simple-heat-maps-smarter-ui-design/