7 важных принципов проектирования визуальной иерархии 2023

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

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

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

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

Почему важна визуальная иерархия?

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

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

Но как мозг выбирает, на что обратить внимание в первую очередь? Чтобы ответить на вопрос, взгляните на эти два лендинга:

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

• Что пользователи могут пожертвовать?
• Кому помогает благотворительная организация?
• Как она помогает людям?

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

Какие же принципы были здесь применены:

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

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

1. Масштабирование элементов

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

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

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

• Заголовки и призывы к действию, как правило, больше по размеру, чем основной текст.
• Самые важные кнопки в интерфейсах (например, «Запросить поездку» и «Подтвердить поездку» в приложении Uber) имеют больший размер и более заметны.
• На новостных сайтах анонсы популярных статей занимают больше пространства, чем анонсы непопулярных.

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

2. Создание фокусных точек

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

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

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

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

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

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

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

3. Паттерны чтения

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

По данным исследования, проведенного Nielsen Norman Group, 79% пользователей сканируют веб-сайты. Людям не хватает терпения читать каждое слово. Вы должны учитывать это при проектировании.

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

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

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

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

• «Слоеный пирог». В этом паттерне ключевую роль играют заголовки и подзаголовки. Когда пользователь находит релевантный фрагмент, он останавливается и тратит время на его изучение.

Есть и другие шаблоны, например, Z-паттерн, паттерн приверженности и другие. Вы можете почитать о них дополнительно.

4. Типографская иерархия

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

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

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

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

5. Негативное пространство

Многие клиенты хотят уместить на странице/экране как можно больше контента. Чем больше, тем лучше для потребителя, верно? Нет.

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

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

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

6. Близость

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

А CTA-кнопки в некоторых приложениях располагаются близко друг к другу и отделены от остальных элементов негативным пространством.

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

7. Повторение

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

Как видите, и сайт, и приложение Spotify отличаются единообразным дизайном. Изображения, цвета, шрифты, иконки — все это повторяется во всех продуктах компании. Такой подход существенно упрощает процесс взаимодействия на всех устройствах.

Заключение

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