Как сделать удобное меню
Форма и расположение меню не так важны, как содержание. Меню не должно быть логично с точки зрения системы, но должно быт удобно для пользователя. Помогает карточная сортировка, работа с текстом, использование акцентов.
Три главных предмета в фокусе внимания
-
Семь плюс-минус два
Просто забудьте про это правило. Пунктов в меню может быть столько, сколько нужно.
-
Паттерны
Гамбургер, здоровенное меню в стиле старого 1С с кучей пунктов, раскрывающееся огромное меню интернет-магазина, система из нескольких меню. Есть смысл сначала выбрать паттерн, а потом его развивать.
-
Приоритет содержания над формой
Бессмысленно обсуждать расположение меню слева, справа, сбоку или снизу. Важно не место, а то, как организована информация, и можно ли добраться до нее. Если начали обсуждать расположение меню, значит точно делаете что-то не то.
5 советов,
как делать хорошо
- Отталкивайтесь от сценариев, а не от логики
Многие пытаются сделать меню логичным, но оно должно быть не столько логичным, сколько удобным. Пользователю не нужна общая структура, он каждый раз решает частную задачу. Не нужно превращать меню в стройную карту сайта.
- Добивайтесь консистентности названий
Может потребоваться сделать несколько попыток. Кроме того, не называй рядом стоящие пункты на одну букву или похожим образом («скачать» и «закачать», «в корзину» и «в корзине»).
- Используйте акценты
Нет такого правила, чтобы все пункты меню выглядели одинаково. Используй иконки, надписи, выделение цветом. Но именно как акценты — умеренно.
- Примеряйте свое меню на вертикальное
В мобильной версии горизонтального меню быть не может. Меню должно без проблем трансформироваться из горизонтального в вертикальное и наоборот.
- Обеспечьте зону безопасности
Не ставьте опасные пункты (например, «Выйти») рядом с популярными.
Например
Сложная структура задачника потребовала разработки своей структуры меню. Но вообще лучше этого избегать.
Электронный город: Приложение для сервисных инженеров
Продумывали меню с точки зрения сценариев использования
Хороший образец
В процессе редизана полностью пересобрали меню и вынесли на первый уровень точки входа в основные сценарии.
Так делать не надо
А давайте сделаем ровно так, как у нас в системе зашито. Логично же!
Инструменты
Карточная сортировка
хотя бы для группировки по первому уровню.
Сайты конкурентов
меню эволюционирует, не грех и позаимствовать чужое.
Компоненты Figma
меню — гарантированно повторяющийся элемент.
UX-писатель
не дизайнерское это дело буквы вылизывать.
Если вы собираетесь проектировать меню до того, как начали проектировать остальной интерфейс, подумайте еще раз. Сделать меню — далеко не самая первая задача.
Наталья Прокофьева, генеральный директор «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169