Визуальная иерархия: зачем она вашему сайту и как ее создать
Loading...- Что такое визуальная иерархия
- Основные элементы визуальной иерархии
- Как добиться визуальной иерархии: восемь советов
- Паттерны: как аудитория «сканирует» страницы
Сейчас вы, скорее всего, сканируете эту статью по траектории буквы 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 выяснила, что:
- первые два абзаца вверху экрана — самые важные, чтобы захватить внимание пользователей;
- начинать абзацы, подзаголовки и строки стоит с ключевых слов;
- люди редко читают каждое слово в тексте.
Заключение
Визуальная иерархия — это возможность создать на сайте увлекательную историю и подвести потенциальных клиентов к целевому действию: купить товар, подписаться на рассылку, прочитать статью. Каждый элемент в дизайне должен улучшать опыт пользователей и транслировать ваше сообщение. Подытожим шаги, которые помогут этого добиться:
- сформулируйте основную цель дизайна: поделиться информацией, увеличить число пользователей, продать товар;
- расставьте приоритеты, определив основные компоненты страницы, например, слоган, заголовок, фото, призыв к действию;
- подумайте, с помощью каких инструментов выделить контент: цвета, размера, асимметрия и другие;
- определите, какой тип паттерна вам больше подходит, и расположите компоненты по этой схеме.
