Улучшаем UX: визуальные подсказки

03 апрель

Время чтения: 20 минут

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

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

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

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

Визуальные подсказки делятся на два типа: явные и завуалированные. Явные подсказки – это всевозможные стрелки и указатели, очевидные и однозначные. Завуалированные подсказки не так заметны и больше обращаются к подсознанию аудитории.

Подсказки в контексте дизайна страниц

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

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

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

Способы определения участков для размещения визуальных подсказок

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

Карта прокрутки: посетители страницы резко теряют мотивацию к прокрутке страницы вскоре после просмотра шапки.

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

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

Разновидности визуальных подсказок

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

СТРЕЛКИ

Самая простая и прямолинейная подсказка, которую широко используют для привлечения внимания к CTA-элементам и формам. Также с помощью стрелок управляют продвижением посетителя по странице:

Подобное направление пользователя с помощью указателей решает сразу несколько проблем:

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

Однозначный ответ на вопрос «будет ли содержимое интересным?»

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

Без маленькой и аккуратно стрелки можно решить, что за линией сгиба контента нет.

ПРЯМОЕ УКАЗАНИЕ

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

«Вы теряете ДЕНЬГИ» – и известный маркетолог указывает вам на это. Подобное указание в сочетании с силой авторитета может быть очень эффективным.

Еще один пример, который уже стал классическим – на старой версии страницы Basecamp, предлагающей триальный доступ к сервису, нарисованный персонаж указывал на лид-форму:

ТРЕУГОЛЬНИКИ

Похожий на стрелки, но более тонкий способ направления внимания посетителя:

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

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

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

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

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

ВИЗУАЛЬНЫЕ ПОДСКАЗКИ С ЧЕЛОВЕЧЕСКИМ ЛИЦОМ

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

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

Простое направление взгляда к форме.

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

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

Сайт противников Дональда Трампа.

Изображения животных также могут вызывать эффект следования за взглядом:

ИЗОЛЯЦИЯ И АКЦЕНТ

Изолирование важного блока от остального пространства страницы может быть очень эффективным. Эта неявная визуальная подсказка сосредотачивает все внимание пользователя на акцентированном участке.

ЭФФЕКТ СТРАХА ПУСТОТЫ

Визуальная подсказка в виде пустоты также может быть мощным обращением к пользовательскому бессознательному. Пустое незаполненное пространство на контрастном фоне – это мощный и однозначный посыл.

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

Усилить этот эффект можно с помощью выделения того поля, по которому кликнул пользователь, решивший заполнить форму:

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

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

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

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

Результаты айтрекинг-тестирования были однозначны – стрелка обращала все внимание человека на себя и на лид-форму:

Наихудший результат продемонстрировал вариант с человеком, смотрящим в сторону от формы:

Результаты этого небольшого исследования говорят о том, что визуальные подсказки нужно как минимум тестировать в рамках A/B тестов. Кроме того, изображения людей (или животных) должны обращать взгляд точно в сторону УТП, лид-формы или CTA-кнопки.

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

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

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

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

Выводы

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

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