Статья
Визуальная иерархия: как вести взгляд по странице
Визуальная иерархия — порядок, в котором человек замечает элементы страницы: сначала главное, потом детали. Дизайнер управляет этим порядком через размер, контраст, цвет и пустое место. Разбираем, из чего складывается иерархия, как проверить её за пять секунд и почему страница, на которой важно всё, не работает.
Что это такое
На странице одновременно десятки элементов: заголовок, фото, цены, кнопки, мелкий текст. Человек не может увидеть всё сразу, и глаз выбирает, куда смотреть первым. Визуальная иерархия — способ сделать этот выбор за него: главное заметно сразу, второстепенное — потом, детали — когда до них дошли.
Без иерархии на странице «всё важно», а значит, не важно ничего: взгляд мечется, и человек уходит, не поняв главного.
Чем управляет дизайнер
- Размер. Крупное замечают первым: главный заголовок больше подзаголовков, подзаголовки — больше текста.
- Контраст. Тёмное на светлом, жирное рядом с обычным притягивают взгляд.
- Цвет. Один акцентный цвет для главного действия работает, пять акцентов — спорят друг с другом. О цвете — статья «Цвета для сайта».
- Пустое место. Чем больше воздуха вокруг элемента, тем он заметнее.
- Положение. Верх страницы и первый экран видят все, низ — только те, кто долистал.
- Группировка. Связанное стоит рядом: цена — у названия тарифа, кнопка — под предложением.
Три уровня
- Первый — то, что нужно увидеть за секунду: главное предложение и кнопка действия.
- Второй — подзаголовки, выгоды, цены: по ним человек решает, читать ли дальше.
- Третий — подробности, условия, подписи: их читают те, кто уже заинтересовался.
На каждом экране — один элемент первого уровня. Если их три, это уже не иерархия.
Шрифты и текст
Иерархию держит и типографика: разные размеры и насыщенность заголовков, короткие абзацы, выделение только главного. Если жирным выделено полстраницы, выделение перестаёт работать. Подробнее — в статье «Типографика на сайте».
Как проверить
- Тест пяти секунд. Покажите страницу человеку на пять секунд и спросите, что он запомнил. Если не главное — иерархия не работает.
- Прищурьтесь. Когда детали расплываются, видно, что на странице самое заметное.
- Чёрно-белый режим. Без цвета сразу видно, хватает ли контраста по размеру и насыщенности.
- Телефон. На маленьком экране иерархия ломается первой: проверьте, не потерялась ли кнопка.
Частые ошибки
- Всё крупное и жирное — ничего не выделяется.
- Много акцентных цветов — взгляд не знает, куда смотреть.
- Кнопка теряется среди картинок и текста. Какой должна быть кнопка, — в статье «Кнопка призыва к действию».
- Заголовки почти не отличаются от текста — страницу невозможно пробежать глазами.
- Текст поверх фото без подложки — красиво, но не читается.
Как это делаем мы
Лендинг мы начинаем со схемы блоков в том порядке, в котором посетитель принимает решение, и только потом рисуем дизайн — собственный, без шаблонов, для компьютера и отдельно для телефона. Макет показываем и правим до начала вёрстки, поэтому иерархию можно проверить ещё на картинке, а не на готовом сайте.