Навигация и меню: как не запутать пользователя

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

Навигация начинается со структуры, а не с меню

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

Самый надёжный способ — смотреть на сайт глазами посетителя. Какие задачи он пришёл решить? Найти товар, узнать цену, понять условия доставки, записаться на услугу, посмотреть примеры работ, связаться с компанией. Структура должна отвечать на эти задачи, а не повторять внутреннюю организацию компании. Отделы, филиалы и юридические названия подразделений посетителю неинтересны, а вот «Доставка и оплата» или «Цены» он ищет каждый раз.

Как собрать структуру

Главное меню: сколько пунктов и как их называть

Количество пунктов

Классический ориентир — от пяти до семи основных пунктов. Человек способен удержать в голове ограниченное число вариантов, и чем длиннее список, тем дольше он выбирает. Это не жёсткое правило: у интернет-магазина с широким ассортиментом пунктов бывает больше, но тогда на помощь приходят категории, поиск и мегаменю. Главное — чтобы список был упорядочен и сгруппирован.

Названия пунктов

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

Порядок пунктов

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

Типы меню и когда их применять

Выпадающие меню без боли

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

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

Мобильное меню

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

Навигация в интернет-магазине

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

Категории и каталог

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

Поиск

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

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

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

Хлебные крошки

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

Элементы, которые помогают ориентироваться

• Логотип в шапке всегда ведёт на главную страницу.
• Текущий раздел подсвечен в меню, чтобы было видно, где вы находитесь.
• Ссылки отличаются от обычного текста внешним видом.
• У каждой страницы есть понятный заголовок, совпадающий с пунктом меню, по которому пришёл посетитель.
• Контакты и важные действия доступны с любой страницы.
• В подвале повторены основные разделы и служебные ссылки: доставка, оплата, возврат, политика обработки данных.
• Есть возможность вернуться назад, не потеряв выбранные фильтры и введённые данные.
• Страница 404 предлагает полезные ссылки, а не просто сообщение об ошибке.

Типичные ошибки навигации

Слишком много пунктов

Попытка показать «всё и сразу» приводит к тому, что человек не видит главного. Лучше убрать редкие пункты в подвал или в дополнительные разделы.

Непонятные названия

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

Скрытые разделы

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

Разная навигация на разных страницах

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

Нет пути назад

Окна, которые нельзя закрыть, тупиковые страницы без ссылок и кнопки, ломающие поведение кнопки «Назад» браузера, вызывают сильное раздражение. Любое действие должно быть обратимым.

Только иконки без подписей

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

Навигация и SEO

Структура сайта влияет и на поисковое продвижение. Чёткая иерархия помогает роботам обходить страницы и понимать, какие из них главные. Внутренние ссылки передают вес важным разделам. Меню на обычных ссылках индексируется надёжно, а навигация, построенная только на скриптах, может остаться невидимой для поисковиков. Адреса страниц должны быть понятными и отражать иерархию, а названия пунктов — содержать слова, по которым люди ищут. Подробнее о том, как структура связана с позициями, рассказываем в разделе SEO-продвижение.

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

Самые надёжные методы простые и недорогие.

1. Тест задач. Попросите пять человек найти конкретный товар или информацию и наблюдайте, не подсказывая. Отмечайте, где они сомневаются и возвращаются.
2. Сортировка карточек. Дайте названия страниц на карточках и попросите разложить их по группам. Расхождения с вашей структурой покажут слабые места.
3. Аналитика. Изучите, какие пункты меню нажимают, какие поисковые запросы вводят и на каких страницах уходят.
4. Записи сессий. Посмотрите, как посетители двигаются по сайту, где мечутся и открывают одни и те же страницы по кругу.
5. Запросы без результата. Список поисковых фраз, по которым ничего не найдено, подскажет, чего не хватает в каталоге или как называются товары в речи клиентов.

Итоги

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