Навигация на сайте: меню, хлебные крошки и поиск

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

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

Из чего состоит навигация сайта

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

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

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

Начните с задач посетителей

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

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

Задача человека	Возможный маршрут	Что проверить
Узнать об обслуживании тормозов	Услуги → Тормоза → Условия обслуживания	Понятно ли название раздела и есть ли актуальные условия
Найти мастерскую	Контакты → Адрес и часы работы	Виден ли раздел на телефоне и понятен ли адрес
Найти ответ по симптомам	Поиск → Статья о диагностике	Находит ли поиск материал по словам посетителя

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

Как сделать понятное основное меню

Сгруппируйте страницы по тому, как их ищут посетители, а не только по внутреннему устройству компании. Названия «Услуги», «Цены» и «Контакты» могут быть яснее внутренних названий отделов. Но конкретные подписи нужно проверять в контексте: одинаковое слово в разных сферах может означать разные вещи.

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

Выпадающие разделы

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

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

Мобильное меню: что проверить

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

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

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

Хлебные крошки: когда они полезны

Хлебные крошки показывают путь в структуре: например, «Главная → Каталог → Велосипеды → Городские велосипеды». Обычно промежуточные уровни ведут к соответствующим разделам, а текущая страница обозначена отдельно. Если у сайта нет глубокой иерархии, такой элемент может быть необязательным: он не должен занимать место только ради галочки.

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

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

Поиск по сайту: от запроса до результата

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

Поле и результаты

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

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

Фильтры и сортировка

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

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

Связи между меню и содержимым

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

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

Как проверить навигацию на практике

1. Выберите основные задачи. Запишите конкретные сценарии: найти условия услуги, адрес, инструкцию или товар. Не подсказывайте участнику название нужного пункта меню.
2. Проведите проверку с представителями аудитории. Попросите их выполнить задачу и вслух объяснять ожидания. Отмечайте неверные переходы, моменты сомнения и непонятные подписи.
3. Проверьте клавиатуру. Пройдите по интерактивным элементам без мыши: виден ли фокус, можно ли открыть и закрыть меню, не попадает ли фокус в скрытый элемент.
4. Проверьте мобильный экран. Попробуйте касания, длинные названия, увеличение текста и возврат к результатам поиска.
5. Проверьте вспомогательные технологии. Убедитесь, что названия элементов и их состояние понятны при использовании программы чтения с экрана; при возможности привлеките пользователей таких технологий.
6. Исправьте и повторите сценарии. Зафиксируйте изменения, затем проверьте, исчезла ли конкретная трудность и не появилась ли новая.

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

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

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

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