Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Студия мобильной и веб-разработки
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
44
Битрикс24

Битрикс24

www.bitrix24.ru

15
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
GIFTD

GIFTD

giftd.tech

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Aword

Aword

Приложение для изучения английских слов

11
Eczo.bike

Eczo.bike

www.eczo.bike

11
Flowlu

Flowlu

flowlu.ru

8
KEPLER LEADS

KEPLER LEADS

keplerleads.com

7
Convead

Convead

convead.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Следим за глазами: конверсия на сайте и тепловые карты — что надо знать об удержании внимания аудитории

1 489 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Студия VWO опубликовала ряд рекомендаций касательно отслеживания наиболее активных зон на страницах сайтов и построения дизайна таким образом, чтобы применить данные от исследований eye-tracking с пользой для будущего проекта. Мы не просто согласны с коллегами по цеху, но и перевели ключевые советы из их публикации.

1. Не бойтесь скроллинга и не злоупотребляйте вкладками

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

Полевое тестирование, проведенное проектом Marketing Experiments, показало, что не всегда «припрятывание» ключевой информации, побуждающей пользователя принять окончательное решение о покупке, служит эффективным инструментом удержания внимания и увеличения времени на сайте. То же касается и размещение кнопок и ссылок с призывами к действию. Кнопка с call-to-action должна размещаться там и так, где у пользователей будет доступ к полной информации и к необходимости принять решение, что с этой информацией делать — не раньше.

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

2. Используйте привлекательность медиаконтента

Графика и видео на странице автоматически приковывают к себе внимание пользователей. Согласно данным исследования от Moz с применением технологии eye–tracking, для страницы поисковой выдачи Google наблюдается следующая картина:

b_53d7ad890161f.jpg

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

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

Опыт стартапа Crazy Egg пригодится тем, кто продает продукты и услуги, которые можно продемонстрировать при помощи видеороликов. Размещение этой компанией видео о продуктах принесло прирост выручки на $21 тыс. ежемесячно.

Релевантность используемого медиаконтента — ключевое правило. Не стоит «забивать» страницу фотостоковыми картинками, лишь бы «разбавить» текст. Если на странице есть графика или видеоролик, то они должны решать определенную задачу.

3. Применяйте принцип контрастности

Роберт Стивенс из стартапа ThinkEyeTracking.com провел следующий эксперимент. Одной группе пользователей он демонстрировал только продвигаемые товары из каталога (которые предлагались в интернет-магазине по специальной цене), а другой — акционные товары вместе с обычным ассортиментом.

b_53d7add66d054.jpg

Результаты исследования поведения обеих групп с применением технологии eye-tracking показали, что пользователи из второй группы были более удовлетворены покупкой, полную стоимость которой они видели с самого начала. А вот те, кто ориентировался по акционным товарам и предполагал заниженную стоимость у остального ассортимента, чаще испытывали разочарование и были склонны изменить своё мнение касательно потенциальной покупки.

4. Новые страницы сайтов верстайте согласно «принципу F-чтения»

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

b_53d7adf6799cb.jpg

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

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

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

5. Задавайте визуальные подсказки для направлений перехода по странице / сайту

Свойство человеческого зрения — следить за заданным направлением. Поскольку кнопки и ссылки call-to-action — ключевой элемент на странице интернет-магазина или онлайн-сервиса, то применение стрелок и других направляющих элементов позволяет переключить внимание пользователей именно на призыв к действию.

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

b_53d7afb24ea39.jpg
Поменяли направление зрачка — и тепловая карта меняется.

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

b_53d7afcc0dc58.jpg

Исследования с применением технологии eye-tracking показали, что направление взгляда на картинках с людьми и другими одушевленными объектами на сайтеs позволяет задать направление, в котором пользователь подсознательно будет смотреть и сам:

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

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

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

b_53d7af0a10d97.jpg

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

b_53d7afe71c7b9.jpg

b_53d7b02f5332b.jpg

b_53d7b04889ebb.jpg

b_53d7b069300af.jpg

b_53d7b07db6a96.jpg

7. Разумно распоряжайтесь «белыми полями» и свободным пространством

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

b_53d7aecdc56d9.jpg

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

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

8. Настройте типографику на сайте

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

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

b_53d7aeb625001.jpg

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

9. Выделите важные ссылки и фрагменты контента

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

b_53d7aea108f55.jpg

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

Проверьте, усвоили ли вы рекомендации, изложенные выше:

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

Как правило, для большей части текущих элементов дизайна ответ на вопрос о совпадении будет отрицательным. Так что проведите серию сплит-тестов, а затем переделайте бэк-энд сайта так, чтобы фронт-энд и визуальные элементы соответствовали упомянутым в статье принципам оптимизации.
+1
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать