Правило «трёх кликов» давно опровергнуто, но его суть жива: пользователь уходит, когда перестаёт понимать, где находится и куда идти дальше. Разбираем, как спроектировать меню, в котором не блуждают.
Про три клика: миф и то, что за ним стоит
Идея о том, что любая страница сайта должна быть доступна за три клика, звучит убедительно, но исследования юзабилити её не подтверждают. Люди спокойно делают пять-шесть переходов, если каждый шаг очевиден и приближает к цели. И бросают сайт после второго клика, если на нём приходится гадать. Поэтому корректнее говорить не о количестве кликов, а об уверенности: на каждом шаге пользователь должен понимать, что он на правильном пути.
Эту уверенность обеспечивают три вещи: понятные названия разделов, логичная группировка и постоянные ориентиры, показывающие, где человек находится. Всё остальное — выпадающие меню, мегаменю, боковые панели — лишь способы подачи.
Начинать нужно не с меню, а со структуры
Самая частая ошибка — проектировать меню как отражение оргструктуры компании: «О компании», «Производство», «Отдел продаж», «Сервисная служба». Клиенту не важно, какой отдел за что отвечает. Он приходит с задачей: подобрать оборудование, узнать цену, найти документацию, оформить рекламацию. Меню должно отвечать на эти задачи.
Как мы собираем структуру
- Выписываем сценарии. С отделом продаж и поддержкой составляем список из 10–20 типовых задач, с которыми приходят клиенты. Например: «найти аналог снятой с производства модели», «скачать сертификат», «узнать сроки поставки в регион».
- Смотрим поисковый спрос. Как клиенты формулируют запросы, какими словами называют товары и услуги. Часто оказывается, что внутреннее название категории («изделия для ЖКХ») никто не ищет, а ищут конкретное («люки канализационные»).
- Проводим карточную сортировку. Даём 5–10 представителям целевой аудитории карточки с названиями страниц и просим сгруппировать их так, как им логично. Совпадения в группировке показывают естественную структуру, расхождения — проблемные места.
- Проверяем дерево без дизайна. Даём текстовое дерево разделов и задачу («где вы будете искать гарантийные условия?») — и смотрим, куда люди идут. Этот тест занимает час и выявляет большинство ошибок до того, как нарисован хоть один макет.
Структура сайта — фундамент не только для удобства, но и для продвижения, поэтому её закладывают на самом раннем этапе разработки сайта, ещё до прототипов.
Главное меню: сколько пунктов и как их называть
Для десктопной версии оптимальное количество пунктов верхнего уровня — от 5 до 7. Больше — и пользователь перестаёт охватывать меню одним взглядом, меньше — и пункты становятся слишком абстрактными («Продукция» с сотней подкатегорий внутри). Если пунктов объективно больше, их делят на два уровня: основное меню для продуктов и услуг и вспомогательное (обычно в верхней полосе шапки) для «О компании», «Контакты», «Вакансии», «Документы».
Правила названий:
- одно-два слова, максимум три;
- существительные, понятные без контекста: «Каталог», «Доставка», «Сервис»;
- без внутреннего жаргона и маркетинговых метафор: «Решения» и «Экспертиза» — плохие названия, потому что непонятно, что внутри;
- каждый пункт отличается от соседних по смыслу — если человек колеблется между двумя пунктами, их нужно объединить или переименовать;
- самый важный для бизнеса раздел — первым слева.
Выпадающее меню, мегаменю или отдельная страница
Выбор способа показа второго уровня зависит от количества пунктов и характера сайта.
| Формат | Когда подходит | На что обратить внимание |
|---|---|---|
| Простое выпадающее меню | До 8–10 подпунктов без третьего уровня | Задержка закрытия 300–500 мс, чтобы меню не исчезало при неточном движении мыши |
| Мегаменю | Каталоги с 3 уровнями и десятками категорий | Группировка по колонкам, заголовки групп, иногда изображения категорий |
| Страница-хаб раздела | Сложные разделы, где нужен контекст для выбора | Хаб должен быть полезной страницей, а не просто списком ссылок |
| Боковое меню внутри раздела | Документация, база знаний, длинные разделы услуг | Текущая страница выделена, соседние видны |
Мегаменю особенно хорошо работает для каталогов производителей и дистрибьюторов. В одном проекте для поставщика отделочных материалов мы заменили каскадное меню из трёх уровней (каждый выпадал из предыдущего при наведении) на мегаменю с группами. Доля посетителей, которые с главной страницы переходили сразу в нужную подкатегорию, минуя промежуточные страницы, выросла почти вдвое, а время до первого просмотра карточки товара сократилось.
Мобильная навигация — отдельная задача
Больше половины посетителей многих B2B-сайтов сегодня приходят с телефонов, особенно при первом знакомстве. Перенести десктопное меню в «гамбургер» недостаточно. Мобильная навигация проектируется отдельно:
- Самые частые действия выносятся из скрытого меню на экран: поиск, телефон или кнопка связи, корзина или заявка. В нижней части экрана они доступнее для большого пальца.
- Многоуровневое меню работает как последовательность экранов с кнопкой «Назад» и заголовком текущего уровня, а не как раскрывающиеся вложенные списки, в которых теряешься.
- Область нажатия каждого пункта — не меньше 44–48 пикселей в высоту.
- Меню не должно закрываться при случайной прокрутке и должно закрываться при нажатии на затемнённую область вокруг.
Ориентиры: где я и как вернуться
Навигация — это не только путь вперёд, но и понимание текущего положения. Для этого служат:
- Хлебные крошки — обязательны для сайтов с глубиной больше двух уровней. Они показывают путь и позволяют вернуться на любой уровень одним кликом.
- Выделение активного раздела в главном меню. Пользователь, который пришёл из поиска на глубокую страницу, должен сразу видеть, в каком разделе он оказался.
- Заголовок страницы, совпадающий с названием пункта меню или ссылки, по которой пришёл человек. Если в меню написано «Монтаж», а на странице заголовок «Инсталляционные работы», возникает сомнение, туда ли попал.
- Связанные разделы внизу страницы: «Смотрите также», соседние категории, следующий шаг сценария.
Совет студии: откройте любую страницу третьего уровня своего сайта в новой вкладке, как будто пришли из поиска. Если за пять секунд вы не можете сказать, в каком разделе находитесь и как попасть в соседний, — навигацию стоит доработать.
Поиск по сайту как часть навигации
На сайтах с каталогом больше 200–300 позиций поиск становится основным способом навигации для значительной части посетителей: люди, которые знают артикул или точное название, не хотят идти по дереву категорий. Хороший поиск понимает опечатки и неправильную раскладку клавиатуры, ищет по артикулам и синонимам, показывает подсказки с первых символов, а при пустом результате не выдаёт голое «ничего не найдено», а предлагает популярные категории или форму запроса менеджеру. Запросы, которые не дали результатов, стоит регулярно просматривать: это прямой сигнал о том, чего не хватает в каталоге или какие названия пользователи используют вместо ваших.
Чек-лист навигации
- Разделы названы словами клиентов, а не внутренним жаргоном.
- В главном меню 5–7 пунктов, самый важный — первый.
- Структура проверена тестом на дереве или карточной сортировкой.
- Для большого каталога используется мегаменю с группировкой.
- Мобильное меню спроектировано отдельно, ключевые действия вынесены на экран.
- На всех страницах глубже второго уровня есть хлебные крошки.
- Активный раздел выделен в меню.
- Заголовки страниц совпадают с названиями ссылок, по которым на них попадают.
- Поиск понимает опечатки, артикулы и синонимы.
- Запросы без результатов регулярно анализируются.
Навигация редко бывает причиной восторга, но очень часто — причиной ухода. Если по этому списку обнаружились пробелы, начните с тестирования дерева разделов: это самый быстрый способ понять, где именно пользователи сбиваются с пути.
