09.12.2017 admin

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

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

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

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

В UI/UX-дизайне используют понятие «направляющие подсказки» – это визуальные компоненты, направляющие пользователей к ключевым фрагментам посадочной страницы, как правило, к call-to-action-элементам.

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

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

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

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

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

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

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

Какие бывают визуальные подсказки

Стрелки

Наиболее часто применяемая форма визуальной подсказки – стрелка. Как правило, ее используют для акцентирования внимания на CTA-элементе либо лид-форме, и для перемещения пользователя вниз по странице.

Прямое указание

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

Треугольники

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

Стрелки в горизонтальном направлении

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

Подсказки с изображениями людей

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

Изоляция/Выделение

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

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

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

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

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

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

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