Навигация на сайте: меню, хлебные крошки, поиск

Почему навигация — основа UX

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

Типы навигации

Главное меню (header navigation)

Горизонтальное меню в шапке — стандарт. 5–7 пунктов максимум. Больше — пользователь теряется. Если разделов больше, используйте группировку с выпадающими подменю. Логотип — слева, меню — по центру или справа, CTA-кнопка — крайняя справа.

Мега-меню

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

Бургер-меню

Три горизонтальные линии (☰) — стандарт для мобильных. На десктопе используйте только если пунктов меню слишком много. По клику — выдвижная панель (drawer) слева или справа.

Боковая панель (sidebar)

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

Хлебные крошки (breadcrumbs)

Главная → Категория → Подкатегория → Текущая страница. Обязательны для сайтов с глубиной более 2 уровней. Помогают понять, где ты находишься, и быстро вернуться на уровень выше.

Футер-навигация

Все основные разделы, контакты, юридическая информация, ссылки на соцсети. Футер — второе место, куда смотрят пользователи, если не нашли нужное в шапке.

Поиск

Для сайтов с 50+ страницами поиск обязателен. Для интернет-магазинов — критически важен: 30% покупателей используют поиск, и они конвертируются в 2 раза чаще.

Правила хорошего поиска

• Видимое поле ввода (не скрытое за иконкой) — для контент-тяжёлых сайтов
• Автоподсказки при вводе — показывают релевантные результаты до нажатия Enter
• Поиск по товарам, категориям и страницам одновременно
• Толерантность к опечаткам: «телифон» → «телефон»
• Пустой результат — не тупик, а предложение: «Попробуйте другой запрос» + популярные категории

Паттерны навигации

Sticky header

Шапка, которая остаётся видимой при прокрутке. Два варианта: всегда видна (занимает место) или появляется при скролле вверх (экономит место). Второй — современнее и удобнее.

Кнопка «Наверх»

Появляется после прокрутки на 2+ экрана. Плавный скролл наверх. Простое микровзаимодействие, которое экономит время.

Якорная навигация

Для длинных страниц: меню с ссылками на секции внутри страницы. Плавный скролл к нужному разделу. Эффективно для лендингов и FAQ-страниц.

Tab-навигация

Переключение между вкладками внутри секции: «Описание | Характеристики | Отзывы» на карточке товара. Экономит место, но скрывает контент.

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

• Бургер-меню — стандарт для основного меню
• Bottom navigation — панель с 4–5 иконками внизу экрана. Удобно для приложений и PWA
• Размер touch-target — минимум 44×44px
• Вложенность — не глубже 2 уровней. Глубокие подменю неудобны на мобильных
• Хлебные крошки — сокращать до «← Каталог» на мобильных

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

• Слишком много пунктов — больше 7 в главном меню перегружает
• Непонятные названия — «Решения» вместо «Услуги», «Экосистема» вместо «Продукты»
• Нет активного состояния — пользователь не видит, где он находится
• Скрытый поиск — иконка лупы без видимого поля ввода. Многие не догадываются кликнуть
• Бургер на десктопе — если место позволяет, показывайте меню развёрнутым

Навигация на вашем сайте неудобна? Обратитесь к нам — проведём UX-аудит и улучшим структуру для удобства пользователей и конверсии.