Визуальная иерархия: зачем она вашему сайту и как ее создать

1. Что такое визуальная иерархия
2. Основные элементы визуальной иерархии
3. Как добиться визуальной иерархии: восемь советов
4. Паттерны: как аудитория «сканирует» страницы

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

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

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

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

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

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

К примеру, на сайте Apple вверху расположены логотип и короткое меню (информирование), а весь первый экран занимает реклама iPhone 12 с огромной цветной фотографией (эмоциональное воздействие). Ниже крупные блоки рассказывают о других продуктах компании (удобство).

Основные элементы визуальной иерархии

Приоритетность содержимого страницы можно подчеркнуть при помощи:

• крупного размера;
• ярких цветов;
• пустого пространства;
• объема;
• видео или анимации.

Структурировать эти компоненты можно, исходя из двух принципов:

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

Как добиться визуальной иерархии: восемь советов

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

1. Выберите типографику

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

• Помимо основного текста, дизайнеры советуют использовать три типа заголовков: H1 в качестве основного, H2 для подзаголовков и H3 для названий небольших блоков. Так, сервис по организации заметок Evernote ранжирует важность информации на странице при помощи разной гарнитуры.

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

2. Отрегулируйте размер и масштаб

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

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

3. Расставьте цветовые акценты

Управляйте вниманием аудитории при помощи цветов:

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

• Цветовые блоки помогают разграничить содержимое. Таким способом датский производитель шоколада Simply Chocolate выделяет разновидности продукта. Каждый блок выполнен в цветах ингредиентов: карамели, малины, мяты и т.д.

• Информация, оформленная в ярких цветах с высокой контрастностью, кажется более важной. Так, конструктор онлайн-форм Wufoo выделяет на белом фоне синюю и желтую кнопки с призывами к действию: «Зарегистрироваться бесплатно» и «Живая демонстрация».

4. Уделите внимание пробелам

Не старайтесь уместить на экране как можно больше: «воздух» между компонентами так же важен, как текст, изображения и графика:

• Чтобы выделить главный компонент, оставьте вокруг него больше пустого пространства, чем возле других. Посмотрите, сколько «воздуха» на странице по продаже электрических зубных щеток Quip: мы видим только заголовок, подзаголовок и несколько лаконичных фото.

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

5. Добавьте объем

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

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

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

6. Продумайте симметрию и асимметрию

Симметрия делает дизайн сбалансированным и простым для восприятия, а асимметрия — подчеркивает важность определенных зон. Так, онлайн-продавец аромакомпозиций Happiness Abscissa фокусирует наше внимание на логотипе из двух «разбросанных» букв и несимметрично расположенных продуктах.

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

Не хватает логотипа для сайта?

Создайте его прямо сейчас в пару кликов: просто введите название бренда!

7. Расставьте приоритеты

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

• Ваших целях. Что должен сделать человек, который придет на вашу онлайн-платформу? Составьте список компонентов, которые должны подвести его к целевому действию.
• Удобстве пользователя. Аудитория приходит к вам с конкретной задачей: развлечься, купить, получить информацию. Подумайте, какой путь будет самым коротким для удовлетворения ее потребностей.

8. Проверьте

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

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

Паттерны: как аудитория «сканирует» страницы

Заходя на сайт, люди в течение миллисекунд сканируют его и решают, остаться или уйти. Как помочь им быстро сориентироваться? Помнить, что в онлайн-пространстве существует два основных паттерна сканирования — F и Z. Именно по этим траекториям должен располагаться ключевой контент.   

Z-паттерн

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

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

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

F-паттерн

В этом случае люди сканируют экран по траектории буквы F, уделяя основное внимание шапке и левой стороне. Такой паттерн чаще всего используют платформы с большим количеством текста, например, блоги или новостные порталы, как The New York Times: главные сведения располагаются вверху страницы, а новости — слева.  

В ходе исследования F-паттерна Nielsen выяснила, что:

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

Заключение

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

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