<aside> ℹ️ Примерное время на прочтение: 20 минут. Не забывайте о полезных ссылках для самостоятельного изучения темы.

</aside>

Иерархия

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

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

Чтобы дать пользователю чёткое представление, о чём говорит продукт, важно определить основные элементы, которые позволят удобнее сканировать контент.

Расстановка приоритетов — это не только вопрос эстетики, но и важная часть пользовательского опыта. В графическом дизайне уже давно используется иерархия элементов, в то время как в продуктовом дизайне добавляется ещё и взаимодействие с ними, что делает этот вопрос более актуальным при разработке интуитивно понятного интерфейса.

Семь основных принципов создания правильной иерархии

1. Размер

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

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

2. Цвет

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

С помощью цвета можно создать иерархию тремя способами:

1. Насыщенность. Насыщенные цвета сильнее выделяются на оттенках серого, что создаёт у пользователя ощущение близости элемента.
2. Оттенок. С помощью цветовых тонов можно создавать конфликты цветов для человеческого глаза: желтый и синий, красный и зеленый и др.
3. Яркость. Яркие цвета выделяются над тёмными и наоборот. Яркие элементы на тёмном фоне создают прямую иерархию, так же это работает с тёмными элементами на белом фоне.

Злоупотребление цветом может запутать пользователя, создав ложную иллюзию важности всех элементов.

3. Расстояние