5 признаков удобной и правильной навигации по сайту

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

Что такое навигация по сайту?

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

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

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

Как создается навигация?

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

• иерархия страниц,
• карта сайта.

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

Лучшие практики создания навигации по сайту

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

Соблюдайте принцип единства и последовательности

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

Кроме навигации в подвале и шапке, рассмотрите вопрос использования “липкой навигации” (sticky navigation), которая будет оставаться в рабочей области экрана по мере того, как пользователь будет прокручивать содержимое страницы.

Добавьте логотип в навигацию

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

Добавьте в навигацию форму поиска

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

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

Используйте адаптивную навигацию

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

Самым удобным и – опять же – наиболее ожидаемым вариантом реализации адаптивной навигации является использование для мобильных экранов так называемой кнопки-гамбургера (hamburger button). Клик по ней раскрывает иерархическое меню навигации, делая возможным ее полноценный просмотр на мобильных устройствах.

Принцип mobile first хотя и не является обязательным, но всегда помогает правильно построить навигацию по сайту.

В качестве более экзотического решения можно порекомендовать вариант с горизонтальной прокруткой (side-scroll). В некоторых ситуациях такое решение может стать не только уместным, но и удобным.

Обязательно размещайте на страницах хлебные крошки

“Хлебные крошки” или навигационная цепочка (breadcrumbs) – это вообще тема для отдельной статьи. Целью этого элемента является вывод последовательности размещения страницы, на которой вы находитесь. Главная его задача – помочь вам вернуться в некий промежуточный пункт, например раздел или подраздел каталога товаров и заново начать навигацию по сайту уже оттуда.

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

Выводы и заключение

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

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

Не делайте навигацию исключительно для себя и в режиме “а вот я так хочу”, и тогда результат ваших усилий не заставит себя долго ждать!