Управление вниманием: как создать визуальную доминанту
На макете нужно управлять вниманием пользователя. На каждом экране показывать первое, второе, третье и четвёртое. Польза этого в том, что ты ведёшь человека к нужному действию:
Первый шаг в управлении вниманием — создание визуальной доминанты. Это большой объект на экране. У него простая задача — привлечь взгляд и объяснить суть. Чтобы сделать доминанту, достаточно пройти 4 шага.
Шаг 1. Поставить объект на якорную точку
Визуальная доминанта заметна, если расположена на якорной точке: по центру или в углах прямоугольника.
Вот «ваза» на якорных точках:
Если расположить объекты там, где кажется красивым — будет неразбериха:
Шаг 2. Увеличить размер
Размер определяет порядок иерархии: сначала человек изучает крупный объект, и только потом мелкие. Поэтому доминанта должна быть большой и важной:
Доминанта на макете должна быть одной, иначе непонятно откуда смотреть:
Шаг 3. Добавить контраста
Человеческий глаз замечает яркие цвета на фоне блеклых. Когда нужно акцентировать внимание на конкретном объекте — используй цветовой контраст:
Без дополнительного акцента пользователь может пропустить важную информацию:
Шаг 4. Добавь «воздуха»
«Воздух» — это пустота вокруг объекта. Чем меньше элементов соседствует с объектом, тем больше к нему внимания:
Без воздуха доминанту труднее считать:
Что должно быть визуальной доминантой?
Визуальная доминанта — это самое важное, что должен увидеть человек на странице. Ему нужно объяснить, куда он попал и чем полезен блок. Для этого не годятся второсортные подробности вроде логотипа или нудных описаний. В доминанте всё четко и по-делу.
Инструментов для раскрытия смыслов много, вот пара из них.
- Лаконичный заголовок о продукте:
- Фотография, которая демонстрирует продукт:
Используй доминанту, чтобы создать точку входа. Человек сразу поймет, куда попал. Чтобы раскрыть подробности, веди взгляд от крупных объектов к мелким, от контрастных к менее контрастным.
Управляй вниманием
Для тех, кто любит шпаргалки
- Поставить объект на якорную точку
- Увеличить в размере
- Добавить цветовой контраст, если нужно
- Добавить «воздуха»
Главред WDI
Роман Вотинцев
Открыт набор на курс Интенсив от WDi. Поступай, пока остались свободные места.
