Большая часть оптимизации целевой страницы фокусирует внимание ваших посетителей на том, что имеет значение.
Существует множество теорий дизайна о том, как именно это сделать. Большинство из них будет включать использование так называемого визуального сигнала, чтобы обратить внимание на желаемый объект.
Визуальные сигналы имеют сильные корни в исследованиях эмпирической психологии и в практических исследованиях. На данный момент есть много данных о том, почему они работают, как они работают и как вы должны использовать их в зависимости от вашего конкретного варианта использования.
Что такое Visual Cue?
Визуальные сигналы, в широком смысле, представляют собой тип сенсорной метки, обрабатываемой глазом. Они предоставляют информацию и понимание того, как воспринимается мир или определенный опыт.
Когда вы разговариваете с продавцами в реальном мире, есть несколько визуальных сигналов — как миниатюрные выражения лица, язык тела и тонкие тики — которые говорят вам, являются ли они подлинными или просто пытаются сделать тире для вашего кошелька ,
Эти «микро-эмоции», как их называют Малькольм Гладуэлл , являются метаданными человеческого взаимодействия. Независимо от того, понимаете вы это или нет, вы выбираете самые тонкие сигналы, получая «вибрации» от всех вокруг вас. В последний раз, когда вы, возможно, почувствовали это сильно после дружеской беседы с новым человеком, подумав: «Да, я не думаю, что они мне нравились».
В контексте цифрового маркетинга визуальные сигналы — это элементы, используемые для прямого или тонкого отображения сообщения с использованием визуальных методов коммуникации.
Эти определения звучат довольно академично, но вы наверняка знаете визуальный сигнал, если вы его увидите. Вот пример:
Визуальные подсказки — это своего рода широкий термин, но если вы проектировщик UI / UX, вы можете быть знакомы с термином «направленная метка». Unbounce определяет направленные сигналы как «визуальный элемент, который направляет посетителей к стратегическим областям целевой страницы , Чаще всего ваш призыв к действию ».
Обычно существуют два типа направленных сигналов:
— Явный
— Неявный (или рекомендательный)
«Явные подсказки принимают форму стрелок или линий, в то время как наводящие подсказки используют образы, чтобы тонко направить взгляд вашей перспективы», объясняет Unbounce.
Зачем нужны визуальные подсказки?
Когда кто-то приземляется на вашу страницу, они делают очень быстрое первое суждение, осознают ли они это сознательно или нет.
Люди делают внезапные суждения. Для формирования первого впечатления о человеке требуется всего 1/10 секунды , а сайты ничем не отличаются. Для пользователей требуется около 50 миллисекунд (это 0,05 секунды), чтобы составить мнение о вашем веб-сайте, определяющее, нравится ли вам ваш сайт или нет, останутся ли они или уйдут.
Это первое впечатление зависит от многих факторов: структуры, цвета, интервала, симметрии, количества текста, шрифтов и т. Д.
Дизайн — это ключ к бессознательному восприятию
Первые впечатления связаны с дизайном 94%. Это то, что британские исследователи обнаружили , во всяком случае, при анализе того, как различные факторы дизайна и информационного контента влияют на доверие онлайн-сайтов здоровья.
Исследование ясно показало, что внешний вид веб-сайта является основным драйвером первых впечатлений. Визуальная привлекательность и навигация по сайту оказали самое большое влияние на первые впечатления людей от сайта.
Аналогичные результаты были найдены в исследовании Consumer WebWatch , проведенном экспертами по авторитету Стэнфордского университета. Они обнаружили, что люди говорят о том, как они оценивают доверие к веб-сайту и как они это делают, разные.
Данные показали, что средний потребитель уделял гораздо больше внимания поверхностным аспектам сайта, таким как визуальные сигналы, а не его содержимому. Например, почти половина всех потребителей (или 46,1%) в исследовании оценили достоверность сайтов, частично основанных на привлекательности общего визуального дизайна сайта, включая макет, типографию, размер шрифта и цветовые схемы.
Теория сверху вниз от зрительного восприятия является ключом к пониманию значения визуальных подсказок в дизайне.
Мы — информаторы , и в поисках необходимой информации мы используем знакомые подсказки и значки, чтобы направить наши пути.
По сути, мы обрабатываем визуальные стимулы с использованием нашего прошлого опыта и эвристики, чтобы сформировать наше восприятие. Поскольку « Просто психология» подытожила принцип «мы требуем более высокой познавательной информации либо из прошлого опыта, либо для хранения знаний, чтобы делать выводы о том, что мы воспринимаем».
Поэтому, когда вы воспринимаете элемент целевой страницы, как стрелка, подчеркнутое текстовое поле, контрастный элемент или кто-то указывающий или смотрящий на CTA, вы обрабатываете эти элементы через свой прошлый опыт. Стрелка, указывающая, как правило, указывает на то, чтобы направить ваше внимание на что-то, поэтому оно также переводится в онлайн-режиме.
Как использовать Visual Cues для улучшения UX
Визуальные подсказки улучшают работу пользователей, оптимизируя внимание. Вот и все.
Они работают тонко или не так тонко, приводят пользователя к желаемому действию. Как вы можете определить, где реализовать визуальные сигналы? Доверенные старые исследования конверсии. А именно, именно здесь карты тепла могут оказаться весьма полезными. Карта прокрутки отлично говорит вам, где самые тяжелые точки выпадения на странице:
Визуальные подсказки также полезны для того, что известно как «ложное дно».
Ложное дно также часто называют в качестве логического конца и иллюзии полноты. По сути, ложное дно — это точка на странице, где посетитель полагает, что страница не будет прокручиваться дальше, несмотря на то, что контент ниже этого.
Обычно в складке будет естественная точка выпадения, но любые другие жесткие остановки должны быть исследованы. Вы также можете фильтровать пользователей, чтобы не анализировать нежелательный трафик, который отскакивает сразу.
Другой способ, немного более дорогой и трудоемкий, — запустить тесты отслеживания глаз . Наблюдение, где сосредоточен взгляд людей, позволяет вывести точки привязки в дизайн страницы и потенциально реализовать визуальные сигналы, чтобы пройти мимо них.
После того, как вы найдете области, которые нуждаются в улучшении, у вас все еще есть сложная задача выбрать, какой тип визуального инструмента реализовать и как это сделать. Вот несколько примеров популярной тактики визуальных сигналов …
Примеры визуальных сигналов
Большинство из нижеперечисленных будут направленными репликами, такими как стрелки, показывающие, что в определенном направлении больше контента. Некоторые из них будут более утонченными, например, инкапсулировать форму, чтобы привлечь к ней внимание.
Но все они эффективны для привлечения внимания к желаемому поведению пользователя.
Кнопка «возврат к вершине» — популярная итерация для блогов и контента в виде длинной формы.
Когда вы хотите вернуться к вершине? Обычно, когда вы попали в нижнюю часть страницы. Может быть полезно использовать кнопку возврата к вершине, которая прокручивается вместе с посетителем, но она может легко сигнализировать о завершении страницы, если вы не будете осторожны. Переходные сигналы становятся еще более важными.
Если вы регулярно читаете CXL, вы знакомы с нашей кнопкой возврата к началу, которая следует за вами, когда вы читаете …
Поскольку большинство наших статей составляет от 1500 до 50000 слов, кнопка возврата к вершине имеет смысл.
Кроме того, учитывая природу нашего сайта, относительно сложно предположить, что вы дошли до конца страницы, когда вы этого не сделали. Если вы сканируете, вы можете увидеть, сколько контента осталось с помощью полосы прокрутки. Если вы читаете, вы не будете считать, что статья заканчивается на «Хорошо ли выглядит сайт во всех браузерах? На всех устройствах? »Поскольку это блог, вы будете ожидать, что страница подходит к концу, когда вы достигнете биографии автора и комментариев.
Треугольники часто используются довольно тонко для удобства использования. WordPress использует его как отступ, чтобы вы знали, на какой вкладке вы сейчас находитесь:
Горизонтальные навигационные сигналы
Согласно исследованию NN / g , даже сильные сигналы, такие как стрелки, часто остаются незамеченными в случае горизонтальной прокрутки. Люди ожидают прокрутки по вертикали, а не сбоку. Боковая прокрутка идет вразрез с их принятой парадигмой содержания и поведения веб-сайта.
Это может развиваться при увеличении использования мобильных и планшетов, но, несмотря ни на что, это может быть связано с использованием сильных визуальных сигналов.
Человеческие визуальные сигналы
Маркетологи знают, что использование изображений людей в их рекламных объявлениях помогает увеличить вовлеченность и, как правило, эмоциональную реакцию на объявление.
Это также известно как деиктический взгляд, и это работает, потому что, как сказал Instapage, «когда мы видим кого-то, кто смотрит на что-то, наши мозги действуют рефлексивно, и мы тоже начинаем смотреть на этот объект».
Невилл Мехора учит людей быть прекрасными копирайтерами , и на своем веб-сайте он использует свой собственный образ как героя, который также является отличным примером направленной реплики (он смотрит прямо на отправку электронной почты) …
Ванесса Ван Эдвардс очень хорошо использует свой образ героя , стоя в одиночестве перед толпой и смотря на (очень актуальное) ценностное предложение :
Вот еще один недавний пример из ACLU , который, несмотря на то, что использовал Trump как призыв к действию в борьбе с ним, использует изображение Трампа, смотрящего на кнопку donate:
Тогда есть пример из BarkBox , который на самом деле не человек, но делает тот же трюк:
Как написала Элиза Сильверман в блоге Pagewiz , «инкапсуляция важной копии в отдельную область также подчеркивает эту область для особого внимания».
Инкапсуляция — еще один пример более тонкой визуальной подсказки. Это не так бросается в глаза, как рисованная стрелка, но при правильном исполнении может быть невероятно эффективной при обращении внимания на формы и при движении конверсий.
Какие визуальные подсказки работают лучше всего?
Там у вас есть: визуальные подсказки, сделанные правильно, могут улучшить пользовательский интерфейс и, в свою очередь, увеличить количество конверсий. Но когда вы рассматриваете огромное количество различных визуальных сигналов, которые доступны, все становится сложным.
Вы можете использовать стрелки, линии, фотографии людей, границы, указательные пальцы, яркие баннеры, восклицательные знаки, галочки … список можно продолжить. Итак, какие визуальные подсказки лучше всего работают?
Нам было любопытно, поэтому мы провели исследование через Институт CXL .
Для проведения этого исследования мы проверили тесты отслеживания глаз на шести измененных изображениях:
Мы рассмотрели как среднее время, потраченное на фиксацию формы, так и среднее время первой фиксации на форме. Мы также задали вопрос после теста: «Учитывая веб-страницу, которую вы только что видели, каким будет ваш следующий шаг, чтобы связаться с этой юридической фирмой?»
Если участники ответили, что они заполнят форму, чтобы связаться с фирмой, визуальная подсказка считалась эффективной, направляя внимание на форму и тем самым увеличивая вероятность отзыва.
Итак, что случилось?
Визуальные сигналы повлияли на то, насколько пользователь обращает внимание на форму.
Ручная стрелка привела к длительному времени на форме.3. Стрелка, указывающая на форму (см) водяного знака
Человек, смотрящий в сторону от формы, оказался в кратчайшем.2. Человек, смотрящий прямо в глаза (см) с водяными знаками
Таким образом, в то время как каждый сайт отличается, вот некоторые эмпирические данные, в которых говорится, что вы, возможно, должны тестировать направленные направленные объекты (например, стрелку) для привлечения внимания пользователей.
Кроме того, если вы используете изображение человека как визуальный сигнал, попросите этого человека смотреть в направлении CTA или ключевой функции. Человек, смотрящий в сторону, был худшим с точки зрения времени фиксации.
Когда отказы в Best Practices (или что их избегают)
Существует только одна эвристика, хотя и сложная и, возможно, субъективная: визуальные сигналы, которые не помогают пользователю в желаемом действии, только отвлекают его.
Это похоже на старый принцип: «Совершенство достигается не тогда, когда больше нечего добавить, но когда ничего не остается, чтобы отнять».
При реализации визуальных сигналов не сходите с ума: пусть ваши цели ведут ваш дизайн. И не всегда следуйте «лучшим практикам».
В то время как изображения или визуальные реплики могут привлечь больше внимания, если они не имеют значения или отвлекают от основной цели страницы, они могут повредить.
Исследования показали, что люди смотрят, где другие смотрят , но эффект меньше присутствует у людей в разных частях шкалы аутизма, а также зависит от пола и даже политического темперамента . Кроме того, исследование Eyetracking от EyeQuant показало, что взгляд и лица взгляда не так сильны, как маркетологи склонны верить.
Визуальная обработка сложна и должна быть проверена. Нет серебряной пули (даже серебряная стрелка, нарисованная рукой).
Поскольку мы обрабатываем изображения намного быстрее, чем текст, вы можете передавать много информации с помощью фотографий, но их нужно тщательно и тщательно использовать, потому что магнетизм фотографии, используемой неправильно, может оказаться отвлекающим фактором.
При выборе фотографий подумайте о том, как изображения усиливают или отвлекают от вашего уникального ценностного предложения. Если ваше ценностное предложение связано с эмоциями, лица могут работать хорошо. Если нет, рассмотрите изображение продукта или информационную графику.
Вывод
Визуальные сигналы являются важной частью эффективного дизайна. Их можно использовать для направления внимания в определенном направлении, подчеркивания ключевых элементов и вдохновляющих действий.
Как и во многих аспектах UX или CRO, это часть искусства и частичная наука. Существует много творчества, которое идет на эффективный дизайн целевой страницы, но у нас есть хороший объем данных, чтобы предлагать лучшие практики (например, исследования выше).
И, конечно же, вы должны проверить все это на себе (ни одна аудитория не является точно такой же и не реагирует одинаково).