Как размещать элементы навигации в веб-приложениях
Оптимальный дизайн и расположение элементов
Есть причина, по которой на большинстве сайтах панель навигации находится сверху. На сайте главное — контент, поэтому необходимо как можно больше места в ширину, чтобы всё отобразить. Но в веб-приложении главную роль играет навигация.
Пользователи пытаются не столько изучить контент, сколько эффективно выполнять задачи. Если в приложении нет оптимальной навигации, люди будут недовольны. Выполнение задач потребует больше времени и усилий, чем обычно.
Чтобы сделать навигацию в веб-приложении удобной, необходимо разместить элементы в ожидаемых местах. Так пользователи будут находить и запоминать их быстрее (источник). В результате вы получите структуру навигации, которая выглядит следующим образом.
Структура навигации
Структура навигации состоит из верхней и боковой панелей, которые всегда на виду. Внутри этой структуры есть область контента, которая постоянно меняется в зависимости от действий пользователя.
Боковая панель — основная навигация, а верхняя панель — дополнительная. Для достижения наилучшего пользовательского опыта в веб-приложении должны быть обе панели. На панелях есть определённые места, которые лучше всего подходят для конкретных элементов навигации. Пользователи будут ориентироваться на них при навигации.
Группировка элементов боковой панели
Чаще всего на боковой панели все элементы навигации объединяют в одну группу. Но не все элементы имеют одинаковую природу. Их можно разделить на три группы:
Элементы контента включают данные, которые связаны с целью приложения. Это действия, которые соответствуют целям и потребностям пользователя.
Административные элементы включают данные, связанные с запуском и управлением приложением. К ним относятся функциональные возможности приложения (например, Настройки, Сообщить об ошибке) и любая информация об использовании приложения (например, FAQ, Поддержка).
Обратите внимание, что четыре элемента на боковой панели относятся к административным, а остальные связаны с контентом. Поскольку эти элементы отличаются по характеру, не стоит группировать их вместе.
Вместо этого поместите административные элементы в нижнюю часть боковой панели, а элементы контента — в верхнюю. Разделение на две группы позволит пользователям быстрее находить то, что они ищут.
Если людям нужно будет выполнить административные задачи, они смогут без особых раздумий посмотреть в левую нижнюю часть приложения. Административные элементы никогда не помешают им при поиске элементов контента.
Группировка элементов верхней панели
Ещё одна плохая практика, которой следует избегать, — группировка персональных элементов на боковой панели. Персональные элементы включают данные, связанные с деятельностью пользователя в приложении и его учётной записью.
Первоначальная идея состоит в том, чтобы создать отдельную группу на боковой панели для этих элементов, в результате чего получится три группы. Однако так будет сложнее определить характер каждой группы.
При наличии трёх групп элементов на боковой панели пользователям придётся запоминать слишком много. Кроме того, визуальное разделение труднее заметить без достаточного вертикального пространства. Придётся сделать боковую панель выше, что удлинит область контента.
Лучшее место для персональных элементов — правый верхний угол верхней панели. Обычно пользователи тяготеют к этой области, чтобы получить доступ к элементам, связанным с учётной записью.
Ещё одна причина, по которой верхняя панель лучше подходит для персональных элементов, заключается в том, что она позволяет отображать выпадающие списки. Например, три элемента в примере ниже представляют собой «Сохранённое», «Уведомления» и «Аккаунт». Все они спроектированы в виде выпадающего списка, который открывается при нажатии, что было бы сложнее отобразить на боковой панели.
Поле поиска
Размещение поля поиска на боковой панели — ещё одна плохая практика, которой следует избегать. Его легко пропустить, если оно не выделяется и конкурирует с соседними элементами. Кроме того, создаётся впечатление, что пользователь ищет элементы на боковой панели, когда на самом деле он ищет контент.
Лучше расположить поле поиска в левом верхнем углу верхней панели, потому что его легко заметить и оно свободно от визуальной конкуренции. Кроме того, оно находится в том месте, где пользователи обычно ожидают его найти. Оно также занимает всю ширину панели, что позволяет вводить более длинные текстовые запросы.
Оптимальный дизайн и расположение
Как видите, элементы контента, административные элементы, персональные элементы и поле поиска находятся там, где их ожидают увидеть пользователи. Теперь при следующей навигации людям легче находить и запоминать их.
Перевод статьи The Best Location for Navigation Items on Web Apps из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!