Технологии и потребительские предпочтения развиваются не по дням, а по часам, но в этом бурном мире стремительных трансформаций мы довольно часто забываем, что кое-какие ключевые принципы человеческой психологии и сенсорного восприятия остаются неизменными. Одной из таких функций есть то, как мы разглядываем и обрабатываем визуальную данные и, например, визуальную иерархию.
Люди — это визуальные существа.
Обширно распространенные инфографики и «контент-маркетинговые» посты вовсю трубят о том, что мы обрабатываем изображения в 60 000 раз стремительнее, чем текст. Изучение Миннесотского университета продемонстрировало, что презентации с визуальными подсказками (Visual Aids) на 43% более убедительны, чем без таковых.
Так, мы можем достаточно с уверенностью заявить, что визуальные средства воздействуют на моментальные ответы о покупке, принимаемые неосознанно. Следовательно, маркетологам принципиально важно ознакомиться с правилами применения визуальной иерархии на сайтах либо в приложениях, чтобы выяснить, как применять импульсивные потребительские реакции на различных стадиях воронки.
Определение визуальной иерархии
В первую очередь, разберемся, что такое визуальная иерархия с позиций веб-дизайна?
По сути, это метод представления страницы, помогающий визуально донести важность и порядок контента. Визуальная иерархия создается методом включения определенных сигналов, таких как размер, цвет, контраст, форма, ощущение и расположение глубины.
Мы ежедневно сталкиваемся с визуальной иерархией. Представьте, что вы пролистываете светло синий-белый интерфейс Facebook. Что привлечет ваше внимание?
Очевидно, красный индикатор уведомления!
Визуальная иерархия есть главным принципом дизайна сайтов и продуктов, но наряду с этим она достаточно несложна в понимании. Однако, дабы вы избежали неточностей, мы поведаем, как возможно включить неврологические сигналы для эмоции визуальной иерархии на вашей платформе.
Просматривайте кроме этого: Организация контента на веб-ресурсе: плоская иерархия vs. глубокая иерархия
1. Создайте определенный шаблон просмотра страницы
Независимо от культурных изюминок большая часть людей просматривает контент сверху вниз, многие просматривают слева направо. Необходимо понимать, что визитёры редко ловят каждое слово на сайте. В большинстве случаев они просто как возможно стремительнее «сканируют» контент, дабы выяснить его значимость для себя.
Изучение, совершённое Nielsen Norman Group, продемонстрировало, что человеческий мозг принимает контент в соответствии с двум различным паттернам.
Для страниц с громадным количеством текста, таких как посты в блогах, либо страниц с последовательными блоками изображений, таких как списки продуктов, просмотр происходит по шаблону F.
Посмотрите на эту тепловую карту, запечатлевшую перемещения глаз на eCommerce-сайтах, при разглядывании результатов и прочтении статей поисковой выдачи:
Левой части страницы уделено намного больше внимания, чем правой. Изучение проводилось с англоговорящими респондентами, но возможно высказать предположение, что правая территория была бы более активна для тех, чьи языки читаются справа налево.
Рост числа мобильных приложений, распространенность мобильного просмотра веб-страниц, трансформации в форматах контента, инновационное применение CTA (Call-To-Action Buttons, кнопки призыва к действиям) и полная изменение отображения результатов поиска в поисковых совокупностях стали причиной тому, что F-образный шаблон прекратил быть стандартом.
Шаблон Z используется к более визуально ориентированным страницам, к примеру, рекламным:
Такие особенности просмотра, в большинстве случаев, появляются в случаях, в то время, когда контент не представлен в последовательных блоках/параграфах. Естественным порывом для читателя делается начало работы в верхней части страницы, после этого стремительный перенос взора в противоположный угол для получения дополнительной информации, после этого спуск по диагонали для перехода к следующему блоку слева, а потом направляться повторение шаблона.
Как вы же имеете возможность включить эту концепцию в собственный сайт либо продукт для улучшения UX и получения конверсий?
Необходимо ориентироваться на обе неврологические модели поведения. Потому, что и тот, и второй шаблон начинаются одинаково, разумно будет поместить важные сведенья в левом верхнем углу, как это делают фавориты eCommerce, к примеру, Amazon:
А вот пример от Etsy:
Вы видите, что логотипы в большинстве случаев размещаются в верхнем левом углу страницы. На противоположной стороне находятся опции регистрации/входа. После этого глаза визитёра устремляются к центру, где он может отыскать товары.
В конечных точках в большинстве случаев требуется включение CTA для доступа к предстоящим действиям.
Применение этих шаблонов и тенденций просмотра не только подтолкнет пользователей к изучению вашей платформы, но и придаст направленность их подсознательному процессу принятия ответов.
У вас имеется множество инструментов для обнаружения специфики как раз вашего сайта. К ним относятся программные ответы для айтрекинга, фиксирование поведения пользователей, тепловые карты (показывающие сотрудничество с движущимися и динамическими элементами, а не только статичные кадры), прокрутки и карты кликов, и средства визуализации воронки.
Помимо этого, все полученные выводы по UX и качественные эти смогут быть после этого подвергнуты сплит-тестированию.
Просматривайте кроме этого: Как создать дизайн, поощряющий действенный просмотр страницы
2. Экспериментируйте с безлюдным пространством
Безлюдное пространство (White Space) — это, пожалуй, один из самых игнорируемых компонентов визуальной иерархии. Его применение имеет неповторимое визуальное значение для дизайна сайтов электронной коммерции. Чем больше безлюдного пространства окружает элемент, тем больше внимания он привлечет.
Что касается неврологического действия, существует большое количество обстоятельств для стратегического внедрения данной концепции.
Безлюдное пространство усиливает концентрацию внимания
Запрещено отрицать, что сегодняшние пользователи просматривают контент в воздухе сильного эмоции срочности (Urgency). Принципиально важно упростить им этот процесс.
Человеческий мозг имеет две совокупности построения умозаключений: бессознательный процесс мышления, импульсивный и зависящий от интуиции (совокупность 1), и сознательный мыслительный процесс, медленный и аналитический (совокупность 2).
Теория двойственности процесса в применении к принятию ответа. В зависимости от того, был ли определён паттерн, его осмысление будет идти или по первому, интуитивному типу (, если да), или по второму, аналитическому (, если нет)
Потому, что у нас имеется лишь пара секунд для привлечения внимания визитёров, применение безлюдного пространства — это хороший метод скоро вынудить их подметить серьёзные разделы сайта. Ко мне смогут включаться заголовки, изображения, CTA-кнопки либо ссылки на полезный контент.
Apple применяет white space для отделения продуктов друг от друга, ориентируясь в собственном дизайне как на сознательные, так и на бессознательные процессы мышления и четко разделяя информационные (Learn More, «Определить больше») и транзакционные (Buy, «Приобрести») пути:
Безлюдное пространство оказывает помощь прорваться через шум
Захламленность дизайна перегружает пользователей, и они начинают уходить. Кстати, вы видели, как выглядит нехороший сайт в мире? Вот он:
Вот что происходит, в то время, когда через чур много элементов требуют внимания. А про это кроме того сказать не хочется:
В случае если ваш сайт выглядит так, как словно бы его делали еще в 90-х, то верьте вследующих выводах потребителей: а) вы больше не занимаетесь бизнесом и б) ваш сайт не может обеспечить безопасность сохранения клиентской информации. Оба заключения будут стоить вам доверия потенциальных клиентов, каковые не начнут медлить с уходом.
Более того, устаревшие сайты в большинстве случаев не имеют прекрасных результатов в поисковых рейтингах. Google обновляет собственные поисковые методы много раз в год и оценивает опыт пользователей относительно множества факторов.
Немногие знают, что для улучшения собственных продуктов Гугл проводит нередкие исследования пользовательского опыта. Они очень без шуток относятся к UX. Ваш сайт будет похоронен в поиске, если вы продолжите проигнорировать юзабилити.
Безлюдное пространство формирует баланс
Разработка конвертирующего дизайна в значительной мере зависит от вашей способности выполнять баланс с позиций удобочитаемости и юзабилити. Поиск совершенной комбинации между пустым пространством и контентом может "настойчиво попросить" много опытов. Имейте в виду, что излишнее количество безлюдного пространства будет восприниматься как недочёт содержательности, в то время как через чур скупое его использование может дезорганизовать страницу.
Команде Сони удалось очень удачно применять white space:
В то время, когда визитёры выясняются на eCommerce-сайте, они желают как возможно стремительнее перейти к сути предложения. Посредством пустого пространства и размера Сони формирует навигационные карты, направляющие пользователей к интересующим их продуктам. Тут исключена перегрузка из-за избытка информации, а просмотр категорий делается несложным, интуитивно понятным процессом.
Безлюдное пространство есть подобием цементного раствора, соединяющего визуальную иерархию вашего сайта. Его главная цель — помогать людской памяти и вниманию и снабжать плавность направляться.
Просматривайте кроме этого: Безлюдное пространство: тайное оружие для успешных лендингов
3. Применяйте повторение
Повторение действенно воздействует на мозг человека. Быть может, как раз благодаря ему продаются самые успешные музыкальные треки.
Это явление подтверждается так называемым «принципом знакомства» (Familiarity Principle) в социальной теории и «эффектом симпатии к привычному» (Mere-Exposure Effect) в психологии. В публикации Oxford Journal of Consumer Research отмечена сильная корреляция между частотой демонстрации чего-либо и благоприятной оценкой.
Обстоятельство для того чтобы сильного влияния повторения содержится в том, что оно увеличивает отечественную скорость обработки информации. Иными словами, отечественному мозгу легче усваивать повторяющиеся моменты.
Во второй половине шестидесятых годов прошлого века психолог Роберт Зайонц (Robert Zajonc) совершил изучение на тему «Оценочный эффект симпатии к привычному». Зайонц продемонстрировал двум группам людей серии китайских иероглифов и символов. Первой группе было предоставлено пять возможностей посмотреть на изображения, второй — только один.
В обеих группах демонстрация продолжалась приблизительно пять миллисекунд (так гарантировалось, что информация не будет сознательно обработана).
Обычная реакция на фотографии в зависимости от частоты демонстрации. Горизонтальная ось — частота демонстрации. Вертикальная ось — хорошее отношение
После этого Зайонц продемонстрировал еще более широкую серию изображений, включавшую новые иероглифы и символы и дополнявшие прошлые. В этом случае испытуемые смогли просматривать изображения в течение полной секунды (время, достаточное для сознательного процесса). После этого их задали вопрос, как им понравился любой рисунок.
Испытуемым, взявшим пять маленьких подсознательных действий, изображения понравились больше, чем тем, кто видел их лишь один раз. В целом несколько с солидным числом просмотров оценивала изображения как более приятные и характеризовалась более хорошим настроением. Из чего Зайонц сделал вывод, что нахождение в присутствии привычных вещей делает нас радостнее, кроме того в то время, когда мы не поймём этого: «Повторение опыта по собственной сути есть приятным процессом.
Оно усиливает отечественное настроение, и это наслаждение мы передаем тем, кто находится поблизости».
Создание действенного UX-метода в eCommerce связано с поиском ритма, а лучший метод привить ритм — это повторение.
Не смотря на то, что повторение есть основополагающим нюансом, его применение варьируется от упрощенного до сложного. Кое-какие очевидные места, предполагающие повторение на сайте либо в приложении, — это шрифт, цветовая схема, толщина линий, фигуры и т.д. При создании темы повторение, унифицирующее пространство и расставляющее в нем выговоры, есть наиболее значимым компонентом последовательности.
Основная цель повторения в веб-дизайне — это обеспечение согласованности информации.
Что касается визуальной иерархии, то повторение — хороший метод продемонстрировать значимость отдельных элементов. Возвращаясь к основной странице Apple:
Главное внимание, разумеется, уделено особому выпуску нового красного iPhone 7. Ниже видно, что Apple продвигает другие продукты, располагая их в прямоугольниках однообразного размера. Повторяя определенные компоненты, вы предоставляете визуальные подсказки визитёрам, дабы они осознали сочетаемость и последовательность контента.
В то время, когда брендированный контент есть «легкоусвояемым», процесс принятия ответов клиентами ускоряется.
В итоге, в случае если Джастин Бибер применяет повторение, дабы реализовывать миллионы собственных записей, из-за чего бы и вам не применить его для увеличения конверсий на вашем сайте?!
Повторяемость в поп-музыке от года к году. Благодаря повторению, появляются хиты в музыке и UX
Просматривайте кроме этого: 15 психотерапевтических правил организации контента на лендинге
4. Создайте метод, а после этого сотрите с лица земли его
По окончании того, как прижились установленные вами алгоритм и шаблон просмотра, действенным способом визуальной иерархии будет нарушение этого существующего статус-кво.
К примеру, вмешавшись в ранее созданное повторение, вы в обязательном порядке остановите пользователей на их пути и привлечете внимание. Но принципиально важно применять данный подход с опаской. Через чур нередкое нарушение метода приведет к тому, что ваша платформа будет смотреться неаккуратной и не сфокусированной.
Человеческий глаз постоянно реагирует на перемещение. Потому анимация между блоками текста представляет собой простой, но действенный метод привлечь интерес к чему-то, что вы желаете выделить. Это, пожалуй, один из самых замечательных способов применения визуальной иерархии.
Посмотрите на страницу иллюстратора Мики Моттс (Miki Mottes):
Во-первых, эта страница увлекательна сама по себе, не в последнюю очередь благодаря узким сдвигам в анимации. Однако, ваши глаза неизбежно возвращаются к бизнес-части посередине.
Предостережение: в случае если ваша анимация чрезмерно кричащая, она может: a) появляться единственной, что заметит клиент, и б) отвлечь его от шопинга. И не дай всевышний, в случае если это видео с автоматическим воспроизведением!
Но примененное верно и стратегически прерывание метода может усовершенствовать UX.
Существует большое количество способов нарушения текущего метода. Все больше становятся популярны гибриды из видео и фото, либо так именуемые «синемаграфы» (Cinemagraphs). Ко мне входят видео, состоящие в первую очередь из статических элементов либо фотографий с периодическим повторяющимся перемещением одного элемента. Посмотрите, как глаза модели легко поворачиваются, дабы взглянуть на вас на сайте Bundy Bundy:
В плане визуальной иерархии применение таких «отвлекающих» факторов в вашем веб-дизайне может, в конечном итоге, оказать помощь не допустить ускользание внимания клиентов и их уход в том направлении, куда вам не требуется, и направить их в сторону CTA.
Легко будьте осмотрительны и не переборщите. Эта техника пара непредсказуема. Как неизменно, совершите тестирование.
Просматривайте кроме этого: 6 способов применения анимации без отвлечения от оффера
Заключение
В веб-дизайне вы не имеете возможность позволить себе тратить время на бездумное творчество. Визуальные элементы должны быть чем-то громадным, чем легко художественное оформление. Они должны быть стратегически (и фактически) обоснованы с позиций юзабилити-метода и вести к конверсии.
Создание визуальной иерархии с учетом работы и психологии пользователей их мозга имеет важное значение с целью достижения как целей вашего бизнеса, так и неспециализированной функциональности вашего сайта.
Высоких вам конверсий!
По данным: conversionxl.com
Случайные статьи:
- Увеличение конверсий, регистраций и подписок с помощью push-уведомлений
- Плоский дизайн: практические рекомендации
ПДД — Применение специальных сигналов. (просто о мигалках и сиренах)
Подборка похожих статей:
-
18 Примеров применения принципа дефицита для улучшения продаж
Рвение людей обладать чем-то редким и неповторимым, и поговорки наподобие «Запретный плод сладок» либо «Прекрасно в том месте, где нас нет» основаны не…
-
10 Простых способов увеличить конверсию от kissmetrics
С каждым днем борьба на рынке интернет-рекламы ужесточается все посильнее. Рекламодатели стали более умелыми в разработке маркетинговых стратегий для…
-
5 Принципов типографики для улучшения восприятия (и показателей конверсии)
Общеизвестно, что в рекламе наиболее значимая роль отводится тексту. Это утверждение в равной степени справедливо как для печатной, так и для…
-
Минимизируйте когнитивную нагрузку для оптимизации юзабилити и конверсии лендинг пейдж
Источник изображения Неспециализированная когнитивная нагрузка на пользователя лендинг пейдж — иначе говоря количество энергии, требующейся сознанию…