Визуальные ориентиры: что лучше управляет вниманием пользователя

визуальные ориентиры
Статьи
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Чтобы создавать эффективные страницы, необходимо знать, какие элементы захватывают и управляют вниманием пользователя, а какие, наоборот, отвлекают. Рассказываем, какие графические элементы лучше управляют вниманием пользователя.»

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

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

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

Результаты исследования кратко 

  • Визуальные ориентиры определяют, сколько внимания пользователь уделит акцентируемому элементу. Так, нарисованная стрелка заставляет пользователя уделить больше внимания форме:

визуальные ориентиры стрелка

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

визуальные ориентиры человек

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

Какие визуальные ориентиры эффективнее управляют вниманием пользователя 

Подготовка к исследованию

Для сбора данных применялась методика ай-трекинга (eye-tracking), чтобы получить количественные данные о распределении внимания пользователей на главной странице сайта юридической компании Lemon Law Group. В исследовании тестировались 6 версий главной страницы: 5 вариантов с разными визуальными ориентирами и контрольная страница без визуального ориентира.

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

Пользователи изучали страницу в течении 15 секунд по сценарию: человеку нужны юридические услуги, надо выбрать компанию.

Вопросы задания:

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

Пользователям предлагались следующие варианты страниц:

визуальные ориентиры человек

Изображение человека, смотрящего в противоположную от формы сторону

визуальные ориентиры человек

Изображение человека, смотрящего на форму обратной связи

визуальные ориентиры стрелка

Нарисованная стрелка

визуальные ориентиры треугольная стрелка

Треугольная стрелка

визуальные ориентиры горизонтальная линия

Горизонтальная линия

визуальные ориентиры горизонтальная рамка

Форма, выделенная рамкой

визуальные ориентиры контрольная

Контрольная страница без визуальных ориентиров

Eye-tracking анализ показал, сколько внимания пользователи уделяли каждой форме и как коэффициент внимания зависел от типа применяемого ориентира.

Какие данные фиксировались:

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

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

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

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

таблица количества участников

Выводы исследования: какие визуальные ориентиры эффективнее

Визуальные ориентиры на влияют на скорость обнаружения формы обратной связи пользователями

Простой ANOVA анализ (дисперсионный анализ, направленный на поиск зависимостей в экспериментальных данных путем исследования значимости различий в средних значения) показывает, что среднее время до первой зрительной фиксации на форме не изменялось в зависимости от применяемого визуального триггера. [F(6, 237) = 0.7947, p = 0.5748].

Однако разница все таки есть.

среднее время

Следует учесть вот что. Человеку необходимо определенное время, чтобы обработать/интерпретировать сам визуальный ориентир. Контрольная страница без каких-либо визуальных ориентиров показало самый короткий интервал до обнаружения формы обратной связи и фиксации взгляда. На втором месте стоит наиболее привычный элемент — треугольная стрелка (данный знак моментально ассоциируется в сознании пользователей с указателем).

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

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

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

среднее затраченное время

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

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

график распределения внимания

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

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

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

тепловые карты внимания

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

Треугольная стрелка также направляет внимание пользователей к форме, но ее эффективность несколько ниже.

Визуальные ориентиры не влияют на запоминаемость элемента пользователями

После исследования участники проходили тестирование краткосрочной памяти. Они отвечали на вопрос, как связаться с компанией.

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

таблица запоминаемости

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

Ограничения исследования

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

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

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

Поэтому важно проводить А/В тестирования и определять, что сработает лучше в каждом конкретном случае. Оценить, насколько ваш сайт понятен и прост для пользователей вы можете при помощи GetGoodRank.

Добавить комментарий

Войти с помощью: 

Статьи по теме

ранжирование постов в ВКонтакте
Статьи
Ранжирование постов в ВКонтакте: базовые рекомендации
В июне 2016 года социальная сеть ВКонтакте запустила умную ленту новостей, в которой по...
голосовой поиск
Статьи
Голосовой поиск: как подготовить сайт
Голосовой поиск — технология распознания и перевода речи в текст, понятный алгоритмам, ...