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

Навигация — та часть сайта, которую замечают только тогда, когда она не работает. Человек ищет раздел «Доставка», не находит его в меню, пробует поиск, получает пустую выдачу и закрывает вкладку. В аналитике это выглядит как обычный отказ, и никто не узнает, что посетитель был готов купить. Разберём, из каких элементов состоит навигация сайта, как их проектировать и как проверить, что люди действительно находят то, что ищут.

Задачи навигации

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

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

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

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

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

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

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

Многоуровневые меню и мегаменю

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

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

Наведение или клик

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

Навигация на мобильных

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

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

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

Вспомогательная навигация

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

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

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

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

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

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

• Логотип не ведёт на главную — пользователи привыкли к этому поведению и теряются
• Активный раздел не подсвечивается в меню — непонятно, где ты сейчас
• Один и тот же раздел называется по-разному в меню, заголовке и хлебных крошках
• Важная страница доступна только из подвала или вообще из одного текста на главной
• Ссылки на внешние ресурсы в главном меню уводят посетителя с сайта
• Мегаменю закрывается, когда курсор переходит с пункта на панель
• Поиск отдаёт пустую страницу без подсказок, если запрос написан с ошибкой
• Закреплённая шапка на телефоне занимает треть экрана

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

Как проверить навигацию на людях

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

1. Сортировка карточек

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

2. Тест дерева

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

3. Тест на прототипе

   Те же задания, но на кликабельном прототипе. Здесь видно, мешает ли что-то в оформлении: незаметные пункты, неочевидные иконки.

4. Анализ после запуска

   Карта кликов, записи сессий и поисковые запросы внутри сайта показывают, что люди ищут и где застревают. Частый запрос в поиске сайта — сигнал, что раздел плохо виден в меню.

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

Что запомнить

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