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