4 способа использования визуальной иерархии для улучшения UX и повышения конверсии

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

Люди — существа визуальные.

Хотя в широко распространенной инфографике и сообщениях «контент-маркетинга», кричащих о том, что мы обрабатываем изображения в 60 000 раз быстрее, чем текст, нет ни капли правдивости, одно исследование показало, что презентации с использованием визуальных средств на 43% более убедительны, чем без них.

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

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

Что такое визуальная иерархия?

Прежде всего, что такое визуальная иерархия с точки зрения веб-дизайна ?

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

Мы каждый день сталкиваемся с визуальной иерархией. В качестве простого примера из повседневной жизни подумайте о том, что, когда вы просматриваете сине-белый интерфейс Facebook, что всегда бросается в глаза больше всего? Конечно же, яркий красный индикатор уведомлений!

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

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

1. Установите определенные шаблоны сканирования

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

В 2014 году компания Chartbeat сообщила, что в среднем внимание читателя в Интернете длится около 15 секунд. После этого генеральный директор компании Тони Хейл дал мудрый совет маркетологам:

«Мы долгое время использовали клики как стандарт того, читают ли что-то в Интернете, а значит, стоит ли это денег рекламодателя. На самом деле стоит измерять внимание, а внимание — это функция времени».

Мы регулярно обсуждаем миллион способов «захватить» внимание читателя. Но есть ли у нас надежные способы его «сохранить»? Исследование, проведенное Nielsen Norman Group, показало, что человеческий мозг обычно сканирует контент по двум разным шаблонам.

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

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

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

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

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

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

Как вы можете включить эту концепцию в свой веб-сайт или продукт, чтобы улучшить UX и увеличить конверсию?

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

А вот Etsy:

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

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

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

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

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

2. Экспериментируйте со свободным пространством

Свободное пространство — это, пожалуй, самый упускаемый из виду компонент дизайна в схеме визуальной иерархии.

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

Что касается неврологического воздействия, стратегическая реализация этой концепции имеет множество преимуществ…

1. Свободное пространство улучшает концентрацию внимания

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

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

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

Apple использует свободное пространство, чтобы разделить поток страниц с продуктами, удовлетворяя как сознательные, так и бессознательные мыслительные процессы, четко разделяя информационные (Узнать больше) и транзакционные (Купить) потоки:

2. Свободное пространство преодолевает беспорядок

Вы узнаете беспорядок, когда увидите его.

Такие сайты перегружают посетителей и отталкивают их.

Вот как это выглядит, когда слишком много элементов претендуют на внимание. И не стоит даже начинать с этого:

Если ваш веб-сайт выглядит так, как будто он был разработан еще в 90-х годах, потребители могут легко сделать поспешные выводы: а) вы больше не занимаетесь бизнесом и б) ваш веб-сайт не обеспечит безопасность их ценной информации. И то, и другое будет стоить вам доверия и отпугнет потенциальных покупателей.

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

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

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

3. Белое пространство создает баланс

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

Sony представляет собой феноменальный пример использования свободного пространства в макете:

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

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

3. Используйте повторение

Повторение снова и снова доказывает свою эффективность в оказании сильного воздействия на человеческий мозг.

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

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

В конце 1960-х годов психолог Роберт Зайонц провел исследование на тему «Отношение к окружающему миру, вызванное простым воздействием». Зайонц продемонстрировал двум группам испытуемых ряд китайских символов и идеограмм. Первой группе было продемонстрировано пять изображений. Второй группе дали только одно. В обеих группах демонстрация длилась около пяти миллисекунд (слишком быстро для осознанной обработки).

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

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

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

Создание приятного UX-потока в электронной коммерции — это поиск ритма, а лучший способ создать этот ритм — использовать повторение.

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

Основная цель повторения в веб-дизайне — обеспечить связность информации.

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

Основное внимание, очевидно, уделяется новому специальному выпуску красного iPhone 7.

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

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

Если Джастин Бибер может использовать повторение, чтобы продать миллионы пластинок, почему бы вам не использовать его для повышения конверсии вашего сайта?!