Визуальная иерархия в дизайне взаимодействия с пользователем (UX)

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

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

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

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

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

Чаще всего при создании визуальной иерархии актуально использование:

  • Цвета и контраста.
  • Масштаба.
  • Группировки.

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

Цвет и контраст

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

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

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

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

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

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

  • Обязательно учитывается насыщенность цвета. Яркие оттенки будут естественным способом бросаться пользователям в глаза, поэтому лучше использовать их при необходимости выделения важных элементов. Цвета с меньшей насыщенностью должны применяться при выделении второстепенных объектов.
  • Не стоит использовать большое количество оттенков. Да, на некоторые усложненные схемы приятно смотреть, но они способны быстро перегрузить страницу на сайте. Если будет использоваться большое количество оттенков с одинаковой насыщенностью, пользователи хуже воспринимают визуальную иерархию, расположенную между элементами дизайна. Чтобы создать простой стиль веб-страницы, достаточно наличия двух основных оттенков и двух – второстепенных.
  • Лучше не использовать много вариаций контрастов. Когда организуется сложный дизайн, достаточно не более трех вариантов контраста. Если вся информация на веб-странице будет контрастировать, не получится что-либо определенное выделить. При создании эффектного дизайна актуально использование разных шрифтовых настроек – в заголовке, подзаголовке, основном тексте.
  • Чтобы передать визуальную иерархию, не нужно полагаться только на цвет. Существуют пользователи с дальтонизмом, которые не способны найти разницу между комбинациями оттенков.

Масштаб

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

Разница элементов в масштабе на коробке из-под молока бренда Jersey Dairy Milk заставляет взгляд остановиться на важной информации о продукте. Все понятно, лаконично и по делу.

Здесь можно обратить внимание на надпись “Find yourself outside”, которая сразу привлекает внимание. Это происходит благодаря большому размеру текста и жирному выделению. 

Главные рекомендации, которых нужно придерживаться при масштабировании:

  • Стоит использовать не более 3 размеров на одной веб-странице – небольшой, средний и крупный. Такой подход позволит разнообразить информацию на сайте. Лучше заранее продумать шрифт для заголовка, подзаголовков и основного текста, но при этом сохранить четкую иерархию, которая будет понятна пользователям.  При разработке веб-дизайна используется размер 14-16 (главный текст), 18-22 (подзаголовок) и 32 (заголовок).
  • Наиболее важное всегда должно иметь крупные размеры, а менее весомые элементы обязательно уменьшаются. Стоит ограничить количество крупных деталей на странице до двух, чтобы они могли выделяться, укреплять визуальную иерархию.

Группировки и отступы в построении иерархии

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

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

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

Основные советы по группировке:

  • Больше пространства. Информация, которая отделена пустым местом, обращает на себя больше внимания. Рекомендуется выделять в дизайне важные элементы среди менее важных. Предоставьте больше пространства для таких элементов.
  • Использование дополнительных элементов: границы и фон. Чтобы более явно выделить определенные элементы, кроме отступов можно использовать границы или фон. Нежелательно перебарщивать с их внедрением, это может создать ненужный хаос.

Блюр-эффект для проверки структуры

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

Размытие в 5 — 10 пикселей на примере Spotify показывает, что группировка элементов сделана рационально. Все работает как надо. Определенные разделы, например Recently Played, выделяется даже в случае блюр-эффекта. При большем размытии, в 20 пикселей, один из элементов в данной группе выделяет сильнее всего. Этот результат достигается благодаря яркому логотипу.

На скриншотах показан оригинал, а также размытие в 5, 10 и 20 пикселей соответственно.

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

Заключение

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

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