Главное меню сайта: как сократить путь к нужному разделу

Начните с вопросов, с которыми приходят посетители

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

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

В условной сервисной компании человек ищет ремонт оборудования, а меню предлагает «Технический департамент». Сотрудникам название понятно, посетителю приходится угадывать. Пункт «Ремонт оборудования» точнее связывает задачу с разделом. Но перед переименованием нужно проверить содержание: за обещанным названием действительно должны находиться нужные услуги.

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

Назовите пункты так, чтобы содержание можно было предсказать

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

Сопоставьте похожие пункты. Если рядом стоят «Услуги», «Направления» и «Возможности», посетитель может не увидеть различия. Для каждого названия напишите короткое описание содержания. Если описания совпадают, вероятно, разделы нужно объединить, иначе назвать или развести по уровням. Не решайте эту проблему только цветом и порядком пунктов.

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

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

Выберите состав и уровни без универсального лимита пунктов

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

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

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

Опишите раскрытие на телефоне до начала разработки

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

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

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

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

Включите в приёмку управление без мыши

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

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

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

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

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

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

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

Сначала можно проверить простое дерево разделов без визуального оформления. Так легче заметить смысловую путаницу. Затем повторите важные задания на интерактивном варианте с телефона и компьютера: хорошая структура может быть испорчена неудобным раскрытием. Эти проверки отвечают на разные вопросы и дополняют друг друга.

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

Меняйте рабочее меню с учётом существующих переходов

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

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

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

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

Передайте подрядчику карту навигации и критерии

Чтобы объяснить, как сделать удобное меню сайта, подготовьте дерево разделов с названиями и адресами. Для каждого пункта укажите назначение: переход, раскрытие или сочетание двух действий. Приложите мобильное состояние, сложное название и список маршрутов, которые команда будет принимать. Это конкретнее просьбы «упростить шапку».

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

Если нужный раздел остаётся трудным для поиска, сначала определите причину: непонятное имя, неверная группа, слишком сложное раскрытие или отсутствие информации на самой странице. Исправления будут разными. Увеличение кнопки не поможет, когда клиент не узнаёт в названии свою задачу.

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