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

На любом экране глаз видит не всё сразу, а по очереди. Дизайнер решает, в каком порядке.

«Если выделено всё, не выделено ничего».

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

Инструменты иерархии

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

  УРОВНИ ИЕРАРХИИ НА ЭКРАНЕ

  +------------------------------+
  |   БОЛЬШОЙ ЗАГОЛОВОК          |  1-й уровень
  |   подзаголовок поменьше      |  2-й уровень
  |                              |
  |   обычный текст описания     |  3-й уровень
  |   ещё текст, ещё текст       |
  |                              |
  |        [ ГЛАВНАЯ КНОПКА ]    |  акцент = действие
  |          второстепенная      |  тише
  +------------------------------+

Одно главное на экран

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

Как делают ПЛОХО

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

Как делают ХОРОШО

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

Чек-лист

• На экране видно главное действие за секунду.
• Есть 3-4 уровня важности, а не «всё одинаково».
• Один акцент, остальное приглушено.
• Размер и контраст соответствуют важности.

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

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

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

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

Итог

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

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