Сильная визуальная иерархия работает лучше всего

Сильная визуальная иерархия — это когда пользователю понятно, в каком порядке следует рассматривать визуальные элементы на экране.

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

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

Толковая организация снижает когнитивную нагрузку

Как говорит Джон Маэда в своей книге Законы простоты, когда элементы на экране организованы с умом, то даже если их много, все выглядит очень лаконично.

Организация элементов в дизайне — это иллюстрация их взаимосвязей. Благодаря этому люди смогут проще и быстрее понять ваш интерфейс.

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

Используйте цвет для расстановки акцентов — но не как главную отличительную черту

Цвета физических объектов могут меняться в зависимости от освещения. Дерево при дневном цвете и дерево на закате воспринимается совершенно по-разному.

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

Если вы знаете, что пользователь будет долго взаимодействовать с дизайном (например, читать) — используйте приглушенный фоновый цвет, а яркими оттенками расставляйте акценты. Конечно, иногда насыщенный фон тоже может быть уместным — только убедитесь, что это подходит вашей аудитории.

Поэтапное раскрытие информации

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

Не стоит пускаться в лишние подробности или стараться рассказать все и сразу.

Если это возможно, перенесите момент принятия решения на один из последующих экранов. Так ваши взаимодействия станут более понятными.

Органично встройте помощь в интерфейс

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

Решающий момент: пустое состояние

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

Пустое состояние — это не просто пустой экран … на этом этапе важно направить пользователя, подсказать, как использовать дизайн максимально эффективно.

Очень часто у пользователей бывают проблемы именно на этапе пустого состояния … зато если люди сразу понимают правила игры, их шансы на успех повышаются.

Отличный дизайн невидим

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

Для дизайнера это может быть сложным испытанием: чем лучше дизайн, тем меньше его замечают. Но вот что отличает отличных дизайнеров: им главное, чтобы интерфейс был удобным … а еще они знают, что счастливые пользователи обычно молчат.