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

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

Что должно получиться

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

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

Из чего это складывается

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

Как это сделать по шагам

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

Как выбирать названия разделов

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

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

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

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

Как показать текущее место

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

В меню различайте текущую страницу и раздел, внутри которого она находится. Не помечайте родительскую ссылку как текущую страницу, если она ведёт в список рубрики. В разметке aria-current='page' используют для обозначения именно открытой страницы; способ обозначения родительского раздела согласуйте отдельно.

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

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

Что проверить в раскрывающемся меню

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

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

Состояние раскрытия должно соответствовать реальности. Если используется aria-expanded, его значение меняется вместе с показом подменю. Атрибут сам не создаёт поведение: открытие, закрытие и порядок переходов задаются логикой интерфейса и требуют проверки.

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

Как сохранить навигацию на телефоне

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

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

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

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

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

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

Как проверить

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

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

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

Чтобы посетитель понимал приоритеты страницы, проверьте визуальную иерархию. Дополните меню внутренним поиском и понятной страницей контактов.

Вопросы и ответы

Нужно ли помещать все страницы в главное меню?

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

Всегда ли сайту нужны хлебные крошки?

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

Можно ли менять меню для телефона?

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

Почему пользователи выбирают не тот раздел?

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

Должен ли родительский пункт открывать подменю или страницу?

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

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

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

С чего начать исправление перегруженной навигации?

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