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

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

Функции меню

Для пользователей

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

Для поисковых систем

Передаёт информацию об иерархии и важности разделов.
Помогает распределять внутренний вес (PageRank).
Обеспечивает доступ поисковых роботов к страницам.
Влияет на глубину индексации.
Показывает, какие разделы считаются основными.

Для бизнеса

Направляет пользователей к ключевым разделам (каталог, услуги, контакты).
Влияет на конверсию (удобное меню помогает быстрее найти нужное).
Формирует имидж компании (аккуратное, продуманное меню повышает доверие).

Типы меню

По расположению

Шапка сайта (верхнее меню). Самый распространённый тип. Располагается в верхней части страницы, виден сразу. Содержит основные разделы.
Боковое меню (сайдбар). Располагается слева или справа. Часто используется для навигации по категориям в интернет-магазинах.
Подвал (футер). Нижняя часть страницы. Содержит ссылки на важные, но не основные разделы (контакты, политика, доставка).
Плавающее меню. Остаётся видимым при прокрутке страницы. Удобно для длинных страниц.

По структуре

Одноуровневое. Все пункты видны сразу. Подходит для небольших сайтов с 5-7 разделами.
Выпадающее (dropdown). При наведении или клике открываются подразделы. Экономит место, позволяет строить иерархию.
Многоуровневое. Несколько уровней вложенности. Используется для сложных каталогов и порталов.
Мегаменю. Большое выпадающее окно с колонками, изображениями, описаниями. Часто используется в интернет-магазинах для отображения всех категорий.

По типу устройства

Десктопное меню. Рассчитано на управление мышью, может быть сложным и многоуровневым.
Мобильное меню. Адаптировано под сенсорный экран, часто сворачивается в «гамбургер», пункты крупнее.
Адаптивное меню. Меняет внешний вид в зависимости от устройства.

По назначению

Основное меню. Навигация по главным разделам.
Второстепенное меню. Личный кабинет, корзина, избранное.
Категорийное меню. Навигация по каталогу товаров.
Служебное меню. Контакты, о компании, доставка, оплата.

Принципы создания хорошего меню

Заметность

Меню должно быть легко обнаруживаемо. Пользователь не должен гадать, где находится навигация. Традиционное место - вверху страницы.

Понятность

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

Краткость

В основном меню не должно быть слишком много пунктов (рекомендуется 5-7). Если разделов больше, нужно группировать их в выпадающие списки.

Иерархичность

Важные разделы должны быть первыми. Логика группировки должна быть понятна пользователю.

Единообразие

Меню должно выглядеть и работать одинаково на всех страницах сайта. Нельзя менять его структуру или расположение.

Доступность

Меню должно работать с клавиатуры, быть читаемым для скринридеров, иметь достаточный контраст.

Интерактивность

Пункты меню должны реагировать на действия пользователя: менять цвет при наведении, подсвечивать активный раздел.

Меню и SEO

Передача веса

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

Анкоры

Тексты ссылок (анкоры) в меню помогают поисковым системам понимать тематику страниц. Важно использовать понятные названия, а не общие слова типа «продукты» или «услуги».

Индексация

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

Иерархия

Структура меню показывает поисковикам, какие разделы главные, а какие второстепенные. Это влияет на приоритет индексации.

ЧПУ

Желательно, чтобы ссылки в меню вели на человекопонятные URL, отражающие структуру сайта.

Микроразметка

Для меню можно использовать микроразметку Schema.org типа SiteNavigationElement, хотя это не является обязательным требованием поисковых систем.

Меню и юзабилити

Правило 5-7 пунктов

Человек может удержать в кратковременной памяти примерно 5-7 элементов. Не стоит делать меню длиннее.

Закон Фиттса

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

Последовательность

Наиболее важные пункты должны быть слева (для горизонтального меню) или сверху (для вертикального).

Подсветка текущего раздела

Пользователь должен видеть, в каком разделе он находится. Активный пункт меню выделяют цветом, жирностью или подчёркиванием.

Выпадающие меню

Должны открываться предсказуемо (при наведении или клике), не исчезать слишком быстро, позволять легко выбирать пункты.

Мобильная адаптация

На телефонах меню должно быть удобным для пальцев, пункты достаточно крупными, выпадающие списки - легко раскрываться.

Типы меню для разных сайтов

Интернет-магазин

Основное меню: каталог товаров (часто мегаменю с категориями).
Второстепенное: личный кабинет, корзина, избранное.
Служебное: доставка, оплата, контакты, о компании.

Корпоративный сайт

Основное меню: о компании, услуги, проекты, новости, контакты. Возможно выпадающее меню для списка услуг.

Информационный портал

Основное меню: рубрики, темы, новости, блог.
Дополнительно: поиск, теги, архив.

Лендинг

Чаще всего одноуровневое меню с якорными ссылками на разделы страницы. Может быть плавающим для удобства навигации.

Типичные ошибки в меню

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

Тестирование меню

Аналитика

В Яндекс.Метрике и Google Analytics 4 можно отслеживать:

Клики по пунктам меню.
Пути пользователей по сайту.
Глубину просмотра.
Страницы входа и выхода.

Тепловые карты

Тепловые карты кликов показывают, на какие пункты меню пользователи нажимают чаще всего, а какие игнорируют.

Записи сессий

В Вебвизоре можно увидеть, как пользователи взаимодействуют с меню, где застревают, какие пункты пытаются найти, но не могут.

A/B-тестирование

Можно тестировать разные варианты меню:

Расположение (слева, сверху).
Количество пунктов.
Названия пунктов.
Тип выпадающих списков.

Связанные термины

Аноним

Поиск

Меню