Визуальная иерархия: как вести взгляд посетителя по странице

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

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

В материале разберём принципы, на которых строится иерархия, схемы движения взгляда, конкретные приёмы для типовых блоков и ошибки, из-за которых красивый дизайн не продаёт.

Как люди на самом деле смотрят на страницу

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

• Сначала крупное и контрастное. Взгляд цепляется за самые большие и яркие пятна: заголовок, изображение, кнопку.
• Лица и направление взгляда. Человек на фотографии притягивает внимание, и посетители смотрят туда, куда смотрит он. Если модель глядит на кнопку, внимание переносится туда же.
• Верх и левый край. В языках с письмом слева направо внимание начинается с верхнего левого угла и движется вниз и вправо.
• Схема F. На текстовых страницах глаз читает первые строки целиком, затем перемещается ниже и читает короче, потом просто скользит вдоль левого края.
• Схема Z. На страницах с небольшим количеством текста взгляд идёт от логотипа к навигации, затем по диагонали к нижнему левому углу и вправо к кнопке. Это удобный каркас для лендингов и первых экранов.
• Пропуск похожего на рекламу. Блоки, оформленные как баннеры, часто игнорируются автоматически.

Инструменты управления вниманием

Размер

Чем крупнее элемент, тем выше он в иерархии. Заголовок первого уровня должен быть явно больше заголовков второго. Различие должно быть заметным, а не «на пиксель». Также размер работает для изображений: большая фотография становится главным событием блока, малая играет поддерживающую роль. О шрифтовых шкалах мы подробно рассказывали в статье про типографику на сайте.

Контраст

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

Цвет

Акцентный цвет работает, пока его мало. Один контрастный оттенок на фоне нейтральных мгновенно создаёт центр притяжения. Если акцентных цветов несколько и все равны по яркости, иерархия пропадает. Принципы выбора цветов описаны в материале «Как выбрать цветовую палитру для сайта компании».

Начертание

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

Пространство и группировка

Элементы, расположенные близко, воспринимаются как связанные. Отступы показывают структуру: пространство между блоками больше, чем внутри блока. Свободное место вокруг объекта повышает его значимость. Подробнее — в статье о роли пустого пространства на странице.

Положение

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

Выравнивание и сетка

Общие линии выравнивания создают порядок и позволяют взгляду двигаться без остановок. Нарушение сетки, наоборот, привлекает внимание, поэтому его используют как осознанный приём для акцента. Как строить сетку, мы разбирали в материале «Сетка в веб-дизайне».

Повтор и стиль

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

Три уровня иерархии на странице

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

1. Первый уровень: одна главная мысль и одно главное действие. То, что человек должен увидеть, даже если пробежит страницу за секунды. Обычно это заголовок предложения и основная кнопка.
2. Второй уровень: доказательства и разъяснения. Преимущества, этапы, примеры работ, цифры. Они поддерживают главную мысль и отвечают на вопросы «почему вам и как это работает».
3. Третий уровень: детали и справочная информация. Условия, технические параметры, ссылки, юридические сведения. Они нужны тем, кто решил копнуть глубже.

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

Иерархия на разных типах страниц

Первый экран

Здесь иерархия самая жёсткая: заголовок, подзаголовок, кнопка, изображение. Всё остальное, вроде навигации и логотипа, работает на втором плане. Подробный разбор — в статье «Первый экран сайта: как удержать посетителя за три секунды».

Карточка услуги или товара

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

Блок с тарифами

Рекомендуемый тариф должен выделяться визуально: цветом подложки, рамкой, плашкой «популярный». Остальные варианты остаются спокойнее. Как оформлять такие блоки, мы рассказали в статье «Как оформить блок с ценами и тарифами».

Длинная статья

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

Форма заявки

Название формы, поля, подсказки, кнопка. Самое заметное — кнопка отправки, самое тихое — пояснения. Ошибки подсвечиваются отдельно и не конкурируют с основными элементами. Подробности про формы — в статье «Формы обратной связи».

Типичные ошибки визуальной иерархии

1. Всё важно. Все блоки одинакового размера, веса и цвета. Глазу не за что зацепиться, и он уходит.
2. Несколько главных кнопок. Три одинаково яркие кнопки на экране заставляют выбирать, а выбор откладывает действие. Делайте одно главное действие и вторичные, менее заметные.
3. Декор перетягивает внимание. Анимированная иллюстрация или яркий баннер сильнее заголовка и кнопки.
4. Слабый контраст важных элементов. Кнопка того же оттенка, что и фон, или серая на светло-сером.
5. Одинаковые отступы. Когда расстояния между всеми элементами равны, структура не читается. Группировка пропадает.
6. Много уровней заголовков. Пять-шесть вариантов размеров без чёткой логики путают сильнее, чем помогают.
7. Главное внизу. Ключевая информация или контакты размещены в самом конце страницы, и до них доходят единицы.
8. Иерархия на десктопе не переносится на мобильные. На узком экране блоки выстраиваются в колонку, и порядок может стать нелогичным.

Как проверить иерархию макета

• Тест прищуривания. Сузьте глаза или размойте макет. Оставшиеся пятна — это реальная иерархия. Совпадают ли они с вашими приоритетами?
• Чёрно-белая версия. Уберите цвет. Если структура пропала, иерархия держалась на оттенках, а не на размерах и светлоте.
• Тепловые карты и записи сессий. После запуска они показывают, куда реально смотрят и кликают люди. Эти данные особенно полезны, когда страница не приводит к заявкам. Метрики описаны в статье про веб-аналитику.
• Тест пяти секунд. Покажите страницу и спросите, что человек запомнил и куда бы нажал.
• Сравнение с мобильной версией. Проверьте, остаётся ли главное действие заметным и в нужном месте.

Иерархия и мобильные устройства

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

Подходы к такому проектированию описаны в материалах про mobile first и адаптивную вёрстку. Хорошая практика — сразу рисовать мобильный макет главных страниц, чтобы принимать решения о приоритетах осознанно.

Иерархия в навигации и структуре сайта

Иерархия действует не только внутри страницы, но и на уровне сайта. Главные разделы должны быть заметнее второстепенных, а количество пунктов меню ограничено. Если в шапке одиннадцать равнозначных ссылок, посетитель не понимает, куда идти. Мы советуем выделять один пункт-действие (например, «Контакты» кнопкой) и группировать остальное по смыслу. Больше об этом — в статье про навигацию по сайту.

Каркас структуры закладывается ещё на стадии wireframe и прототипирования: именно там проще всего решить, какие блоки главные, и не тратить время на оформление, которое потом придётся переделывать.

Пошаговый метод построения иерархии

1. Сформулируйте цель страницы. Одно действие, которое вы хотите получить: заявка, звонок, покупка.
2. Выпишите контент и расставьте приоритеты. Что обязательно должен увидеть каждый? Что нужно тем, кто готов к покупке? Что нужно сомневающимся?
3. Распределите по трём уровням. Главное, доказательства, детали.
4. Определите маршрут взгляда. Используйте схему F или Z как основу, расставьте точки внимания.
5. Назначьте инструменты. Какие размеры, цвета, отступы создают нужный порядок.
6. Проверьте на пользователях. Короткие тесты и разбор поведения.
7. Закрепите в системе. Зафиксируйте стили заголовков, кнопок, карточек в дизайн-системе, чтобы иерархия сохранялась при росте сайта. См. статью про дизайн-систему.

Пример: перестройка страницы услуги

Представим страницу услуги, где заказчик жалуется на малое число заявок. Что обычно обнаруживается при разборе?

• Заголовок такого же размера, как и подзаголовки ниже. Главная мысль теряется.
• Кнопка заявки сливается с фоном и появляется только в самом конце.
• Преимущества оформлены в виде десяти одинаковых строк без группировки.
• Фотографии стоковые, перетягивают внимание, но не несут информации.
• Цены спрятаны в длинном тексте.

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

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

Чек-лист визуальной иерархии

• На странице можно назвать одну главную мысль и одно главное действие.
• Главная кнопка контрастнее любого другого элемента рядом.
• Заголовки разных уровней заметно отличаются размерами.
• Акцентный цвет используется экономно и по назначению.
• Отступы показывают группировку, а не одинаковы везде.
• Страница читается по заголовкам и выделениям даже без чтения абзацев.
• Изображения поддерживают смысл и не перетягивают внимание.
• Мобильная версия сохраняет порядок приоритетов.

Итоги

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

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