Меню

Что это

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

Зачем это нужно

Без меню пользователь оказывается в пустом пространстве: он не понимает, что можно сделать и куда идти. Меню решает сразу несколько задач — структурирует контент, снижает когнитивную нагрузку и ускоряет путь к цели. Исследования Nielsen Norman Group показывают, что пользователи тратят до 80% времени на сканирование навигации, прежде чем начать взаимодействие с контентом. Хорошо спроектированное меню сокращает это время и уменьшает количество ошибок при работе с продуктом.

Как это работает

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

• Горизонтальное (навбар) — полоса ссылок в верхней части страницы, стандарт для большинства сайтов с 2000-х годов.
• Вертикальное (сайдбар) — боковая панель с разделами, типична для административных панелей и дашбордов.
• Выпадающее (dropdown) — появляется при наведении или клике на пункт верхнего уровня, раскрывая подкатегории.
• Гамбургер-меню — скрытая панель, вызываемая иконкой из трёх горизонтальных линий; популярна в мобильных интерфейсах с 2012 года.
• Контекстное меню — появляется по правому клику мыши и предлагает действия, актуальные именно для выбранного объекта.
• Таб-бар — нижняя панель с 3–5 иконками в мобильных приложениях (iOS, Android).

Примеры

• Главное меню macOS — горизонтальная строка в верхней части экрана с пунктами «Файл», «Правка», «Вид» и другими, присутствует в системе с 1984 года.
• Навигация Wildberries — горизонтальное меню с категориями товаров и выпадающими подкатегориями при наведении.
• Таб-бар в приложении ВКонтакте — нижняя панель с иконками «Лента», «Мессенджер», «Сервисы», «Профиль».
• Контекстное меню в Google Docs — появляется по правому клику на выделенный текст и предлагает «Копировать», «Вставить», «Комментировать» и другие действия.
• Гамбургер-меню на мобильной версии РБК — скрывает разделы «Политика», «Экономика», «Технологии» за иконкой в левом верхнем углу.

Связанные понятия

• Навигация — более широкое понятие, включающее все способы перемещения по интерфейсу.
• Хлебные крошки (breadcrumbs) — вспомогательный элемент, показывающий путь пользователя внутри иерархии.
• Информационная архитектура — дисциплина, которая определяет структуру и логику меню.
• UX-проектирование — процесс создания интерфейсов, в котором меню занимает центральное место.
• Sitemap — карта сайта, которая часто служит основой для построения структуры меню.

Частые ошибки

Самая распространённая ошибка — перегруженное меню. Когда в верхнем уровне больше 7 пунктов, пользователь теряется: исследования Джорджа Миллера ещё в 1956 году показали, что рабочая память удерживает 7 ± 2 элемента. Вторая ошибка — непонятные названия пунктов: «Решения», «Экосистема», «Платформа» ничего не говорят о содержимом. Третья — скрывать ключевые действия в гамбургер-меню на десктопе: это снижает конверсию, потому что пользователи просто не находят нужный раздел. Хорошее меню — короткое, конкретное и предсказуемое.