Лучший подход к проектированию многоуровневого бокового меню

Улучшаем дизайн боковой панели

Дизайнерам стоит перестать использовать многоуровневое боковое меню. Группировка большого количества пунктов и подпунктов в небольшом пространстве создаёт визуальный беспорядок. В результате пользователям трудно искать пункты меню.

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

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

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

Лучше ограничить уровень навигации до одного. Второй уровень следует переместить в верхнюю часть страницы, а третий уровень убрать совсем.

Второй уровень навигации необходимо разместить в верхней части, под заголовком главной страницы. Используйте вкладки для представления каждого подпункта. Когда пользователи будут нажимать на вкладку подпункта, она будет выделяться подчёркиванием, чтобы пользователи понимали, где они находятся. Линейный разделитель выделит строку со вкладками и отделит её от контента.

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

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

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

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

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

Перевод статьи A Better Approach to Multi-Level Sidebar Navigation из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!