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

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

Мобильная версия Williams-Sonoma.com: Куда нам смотреть? За исключением бордового блока Cyber Monday, все элементы на этой странице относительно равны по размеру и цвету и не имеют воздуха вокруг себя. Поскольку большая часть текста написана заглавными буквами - все сливается. Немногие пользователи захотят потратить время на разбор этого визуального беспорядка.

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

1. Цвет и контрастность

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

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

MoMA.org использует цвет для передачи иерархии — зеленые ссылки в правом верхнем углу выделяются на фоне черных ссылок под логотипом.

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

Лучшие практики использования цвета и контраста:

• Учитывайте насыщенность цвета. Яркие цвета естественным образом выделяются, поэтому используйте их для важных элементов. Менее насыщенные цвета можно использовать для элементов меньшей важности. Используйте теплые яркие цвета, такие как красный, для предупреждений или ошибок.
• Не используйте слишком много цветов. Хоть некоторые цветовые сочетания и выглядят красиво, они могут быть слишком навязчивыми на веб-странице. Когда используется слишком много цветов схожей яркости или насыщенности, восприятие иерархии элементов у людей часто снижается. В обычных, несложных дизайнах ограничьте использование цветов двумя основными и двумя дополнительными цветами.
• Не используйте слишком много вариаций контраста. Используйте не более трех вариаций контраста для сложных дизайнов. Если все контрастирует, то ничего не выделяется. В успешных дизайнах часто используются разные оформления для заголовка, подзаголовка и основного текста.
• Не полагайтесь только на цвет для передачи визуальной иерархии. Люди с дальтонизмом могут не различать некоторые сочетания цветов.

2. Масштаб

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

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

Hipcamp.com: Визуальная иерархия передается через размер шрифта (и контраст). Взгляд в первую очередь привлекает текст «Find yourself outside» из-за его большого размера и жирного шрифта. Этот текст дает вам общее представление о том, что вы можете делать на этом сайте.

Лучшие практики использования масштаба:

• Используйте не более 3 размеров: маленький, средний и большой. Три размера сохраняют четко определенную и ясную иерархию. Как правило, в веб-дизайне размеры могут варьироваться от 14px до 16px для основного текста, от 18px до 22px для подзаголовка и до 32px для заголовка.
• Сделайте самый важный элемент самым большим. Подчеркните самый важный аспект вашего дизайна, сделав его самым большим. Так же сделайте менее важные элементы меньше. Количество больших элементов ограничьте максимум двумя, чтобы они выделялись и усиливали иерархию.

3. Группировка: Близость и общие области

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

Группировка обычно передается неявно через близость элементов и использование пустого пространства или явно через объединение элементов в общую область.

Spotify on iPhone: На этом экране сразу видно 3 разные группы. Намеренно увеличенное расстояние между группами делает каждую из них отдельной и индивидуальной. Также важным является уменьшенное белое пространство между заголовками и соответствующим контентом. Это уменьшенное расстояние создает иерархическую связь между ними.

Shopify checkout form fields: Принцип близости очевиден в хорошем дизайне форм. Минимальное количество пустого пространства между заголовками разделов и соответствующими полями формы делает связь между ними очевидной — они относятся к одной группе. Увеличенное расстояние между каждой группой полей дополнительно помогает глазу воспринимать эту иерархическую пространственную структуру. Обратите внимание, также, на рамку вокруг двух кнопок "Express checkout" (пример принципа общей области), которая отделяет их от формы оформления заказа ниже.

Лучшие практики группировки:

• Дайте элементам пространство. Элемент, вокруг которого больше свободного пространства, воспринимается как отдельная группа и привлекает больше внимания. Если группа содержит много элементов, внимание может рассеиваться. Чтобы подчеркнуть наиболее важный аспект вашего дизайна, выделите его большим пространством.
• Используйте контейнеры. Если простого увеличения отступов недостаточно, добавьте обводку или фон. Но не переусердствуйте, чтобы избежать визуального беспорядка.

4. Тест на прищуривание

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

В примере с Spotify, размытие дизайна с радиусом 5 или 10 px показывает, что группировки работают как задумано, и что раздел «Недавно играло» все равно выделяется, даже когда текст не читаем. Размытие на 20px показывает, что один из элементов в этом разделе становится слишком заметным из-за яркого цвета.

Spotify: Оригинал (слева вверху) и размытый с радиусами 5 (справа вверху), 10 (слева внизу) и 20 пикселей (внизу справа)

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

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

Вывод

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

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

Источник: Nielsen Norman Group