Навигация сайта: виды меню, иерархия и UX-принципы

Навигация сайта — одна из самых недооценённых частей интерфейса, и это хорошо видно по данным. По бенчмарку Baymard Institute, у 76% крупных интернет-магазинов США и Европы UX главной страницы и навигации по категориям оценивается как «посредственный» или хуже, а оценку «отлично» не получил ни один сайт. Исследователи вручную разобрали 343 сайта и больше 13 000 элементов навигации. Похожую картину показывают тесты Nielsen Norman Group: когда меню спрятано за иконкой, люди пользуются им заметно реже, чем видимым.

Для бизнеса неудобная навигация означает простую вещь: посетитель не нашёл нужное и ушёл. Он не пишет в поддержку и не объясняет, что пункт «Решения» ему ничего не сказал. Он просто закрывает вкладку и открывает сайт конкурента. Поэтому в YuSMP Group навигацию мы закладываем на старте, в рамках работ по проектированию UX/UI-интерфейсов, а не дорисовываем в конце, когда страницы уже готовы.

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

Что такое навигация сайта и зачем она нужна

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

Навигацию часто путают со структурой сайта, но это разные слои. Структура отвечает на вопрос «какие страницы есть и как они сгруппированы», навигация — «как между этими страницами ходить». Сначала проектируют структуру (о том, как спланировать структуру сайта, мы писали отдельно), а уже поверх неё — меню и остальные навигационные элементы. Одну и ту же структуру можно показать очень удачной навигацией и очень неудачной.

На любой странице навигация должна отвечать на три вопроса пользователя:

• Где я? Активный пункт меню, заголовок страницы и хлебные крошки показывают текущий раздел.
• Куда я могу пойти? Главное меню, ссылки внутри раздела и блоки «похожие материалы» показывают доступные направления.
• Как вернуться? Логотип ведёт на главную, крошки — на уровень выше, а кнопка «Назад» в браузере не ломает состояние фильтров.

От того, насколько хорошо навигация отвечает на эти вопросы, зависят сразу несколько бизнес-метрик:

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

Какие бывают виды навигации на сайте

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

• Глобальная навигация — главное меню, одинаковое на всех страницах. Ведёт в ключевые разделы.
• Локальная навигация — меню внутри раздела: подразделы каталога, статьи одной рубрики, шаги документации.
• Контекстная навигация — ссылки в тексте, блоки «Читайте также», «С этим товаром покупают».
• Вспомогательная навигация — хлебные крошки, поиск, фильтры, пагинация, футер.
• Утилитарная навигация — служебные действия: корзина, вход в личный кабинет, выбор языка или города, телефон.

Главное меню

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

Частая ошибка — пытаться уместить в главное меню всё. Второстепенные страницы вроде «Реквизиты» или «Вакансии» спокойно живут в футере или в выпадающем подменю «О компании».

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

Хлебные крошки (breadcrumbs) — строка ссылок вида «Главная / Каталог / Ноутбуки / Игровые», которая показывает путь от главной до текущей страницы. Они особенно полезны на сайтах с глубокой иерархией: пользователь, пришедший из поиска сразу на карточку товара, одним взглядом понимает, в каком разделе находится, и может подняться на уровень выше.

В руководстве NN/g о хлебных крошках собраны основные правила. Крошки дополняют главное меню, а не заменяют его. Показывают иерархию сайта, а не историю посещений. Начинаются с главной страницы. Текущая страница стоит последней и не является ссылкой. Ставят крошки над заголовком страницы, мелким, но читаемым шрифтом.

Боковое меню и навигация внутри раздела

Боковое меню (sidebar) — вертикальный список ссылок сбоку от контента, обычно для локальной навигации внутри раздела. Оно хорошо работает в документации, базах знаний, личных кабинетах и больших каталогах, где у раздела много подразделов. Вертикальный список легко расширяется и позволяет показать вложенность отступами.

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

Поиск по сайту и фильтры

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

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

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

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

Контекстная навигация и перелинковка

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

Виды меню сайта: сравнение форматов

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

Тип меню	Где уместно	Плюсы	Минусы
Горизонтальное	Корпоративные сайты, лендинги, сайты с 4–7 разделами	Всегда на виду, привычно, занимает мало высоты	Ограничено шириной экрана, плохо масштабируется
Вертикальное (sidebar)	Документация, личные кабинеты, админки, каталоги	Много пунктов, видна вложенность, легко расширять	Съедает ширину контента, на мобильном нужен другой вид
Выпадающее	Разделы с 3–10 подразделами	Экономит место, подразделы доступны в один клик	Подпункты скрыты, hover-меню капризны и плохо работают на тачскринах
Мега-меню	Крупные каталоги, магазины, порталы	Показывает десятки ссылок сразу, группирует их с заголовками	Сложно в проектировании, легко перегрузить
Гамбургер	Мобильные версии, второстепенные меню	Экономит место, привычно на смартфонах	Навигация скрыта, ей пользуются реже
Липкое (sticky)	Длинные страницы, лонгриды, каталоги	Меню доступно при прокрутке, не нужно возвращаться наверх	Занимает часть экрана, особенно на мобильном
Нижняя таб-панель (tab bar)	Мобильные сайты и веб-приложения с 3–5 ключевыми разделами	Разделы всегда видны, удобно для большого пальца	Вмещает максимум 5 пунктов
Off-canvas (выдвижное)	Мобильные версии, сайты с глубоким каталогом	Вмещает большую иерархию, не мешает контенту	Требует лишнего действия, легко потерять контекст

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

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

Когда нужно мега-меню

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

Чтобы мега-меню помогало, а не мешало, соблюдайте несколько правил:

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

Как выстроить иерархию меню: глубина, ширина и порядок пунктов

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

Вокруг иерархии меню ходят два устойчивых мифа:

• «В меню должно быть 7±2 пункта». Число Миллера описывает объём кратковременной памяти, а меню не нужно запоминать: пункты видны на экране. Ограничивать меню ровно семью пунктами ради этого правила не нужно. Важнее, чтобы пункты было легко просмотреть и различить.
• «Любая страница должна быть в трёх кликах». Количество кликов само по себе мало что говорит. Пользователь спокойно сделает пять кликов, если на каждом шаге уверен, что идёт правильно, и бросит сайт после двух, если заблудился.

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

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

Принципы UX для навигации: 10 правил

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

1. Навигация видима. Главные разделы должны быть видны сразу, особенно на десктопе. Скрытое меню — это компромисс для маленьких экранов, а не стандарт.
2. Названия понятны без пояснений. «Услуги», «Цены», «Доставка» лучше, чем «Решения», «Экосистема» и «Наш путь». О том, как подбирать слова для интерфейса, мы подробно писали в статье про UX-writing.
3. Навигация консистентна. Меню стоит на одном месте, выглядит одинаково и содержит те же пункты в том же порядке на всех страницах.
4. Текущее положение показано. Активный пункт меню выделен, раздел отмечен в крошках, заголовок страницы совпадает с названием пункта.
5. Переходы предсказуемы. Пользователь до клика понимает, что увидит после. Пункт «Кейсы» ведёт на кейсы, а не на форму заявки.
6. Кликабельные зоны достаточно крупные. Ориентир для касания — не меньше 44×44 pt на iOS и 48×48 dp на Android, с отступами между соседними пунктами.
7. Есть обратная связь. У пунктов есть заметные состояния наведения, фокуса и нажатия, а у раскрывающихся — индикатор (стрелка) и понятное состояние «открыто/закрыто».
8. Путь к ключевым страницам короткий. Страницы, которые приносят деньги (услуги, каталог, цены, контакты), доступны из главного меню или в один шаг от него.
9. Логотип ведёт на главную. Это соглашение, которое пользователи ожидают на любом сайте.
10. На больших сайтах есть поиск. Если страниц больше, чем помещается в меню и подменю, поиск становится обязательной частью навигации.

Как спроектировать навигацию сайта: пошаговая инструкция

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

1. Определите цели бизнеса и задачи пользователей. Запишите, какие действия важны для компании (заявка, покупка, звонок) и с какими задачами приходят посетители. Навигация должна вести к этим действиям кратчайшим путём.
2. Проведите инвентаризацию контента. Соберите список всех страниц и типов контента, которые есть или появятся на сайте. Без этого меню проектируют «на глаз», и через полгода в нём не находится места для новых разделов.
3. Проведите карточную сортировку (card sorting). Дайте пользователям карточки с названиями страниц и попросите разложить их по группам. В открытой сортировке участники сами придумывают названия групп, в закрытой — раскладывают по заранее заданным. Так вы увидите, как люди на самом деле группируют ваш контент.
4. Соберите черновую иерархию и карту сайта. На основе сортировки определите разделы первого уровня, подразделы и глубину. Зафиксируйте результат в виде дерева страниц.
5. Подберите названия пунктов. Используйте слова пользователей, а не внутренний жаргон компании. Проверьте, что названия не пересекаются по смыслу и каждое однозначно указывает на содержимое.
6. Проверьте иерархию на прототипе и tree testing. Дайте участникам задания вида «где вы будете искать условия доставки» и посмотрите, по какой ветке они идут. Затем соберите кликабельный прототип: прототипирование интерфейса позволяет проверить меню на живых людях до того, как дизайнер нарисовал первый макет, а разработчик написал первую строку.
7. Нарисуйте состояния, реализуйте и настройте аналитику. Продумайте все состояния пунктов, мобильную версию и доступность, передайте в разработку. После запуска отслеживайте клики по меню, запросы во внутреннем поиске и страницы выхода, чтобы корректировать навигацию по данным.

Как сделать удобную мобильную навигацию

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

Это хорошо видно в исследовании NN/g о мобильной навигации. В одном из сравнений на смартфоне сайтом с видимой навигацией участники пользовались меню в 89% случаев, а первый клик делали примерно через 24 секунды. На сайте со скрытой навигацией меню использовали только 44% участников, а первый клик занимал около 33 секунд. Исследователи также отметили, что подпись «Меню» рядом с иконкой и крупная кликабельная зона помогают людям находить навигацию.

Паттерны, которые хорошо работают на мобильных:

• Нижняя таб-панель на 3–5 пунктов. Подходит, если у сайта или веб-приложения есть несколько ключевых разделов, между которыми люди постоянно переключаются. Панель в зоне большого пальца удобно нажимать одной рукой.
• Гамбургер с подписью «Меню». Если без скрытого меню не обойтись, добавьте текстовую подпись и сделайте кнопку достаточно крупной.
• Приоритетное меню (priority+). Самые важные пункты видны в строке, а остальные прячутся в «Ещё». Так часть навигации остаётся на виду.
• Липкая шапка, которая прячется при прокрутке вниз. Шапка не занимает экран при чтении, но появляется, как только пользователь начинает листать вверх.
• Поиск на виду. В каталогах поле поиска лучше разместить прямо в шапке или под ней, а не прятать за иконкой в меню.

Короткое правило выбора: если ключевых разделов 3–5 и по ним постоянно переключаются — таб-панель; если разделов много и нужна иерархия — выдвижное меню с подписью и видимым поиском; если сайт небольшой — приоритетное меню. И в любом случае учитывайте зону большого пальца: основные действия удобнее размещать в нижней половине экрана.

Доступность навигации: требования WCAG 2.2

Доступность навигации — это возможность пользоваться меню без мыши, с экранным диктором и при нарушениях зрения или моторики. Основные требования описаны в стандарте WCAG 2.2, и большинство из них касается навигации напрямую.

• Ссылка «Перейти к содержимому» (критерий 2.4.1 Bypass Blocks). Первая ссылка на странице позволяет пропустить шапку и меню и сразу попасть к контенту. Без неё пользователь клавиатуры на каждой странице проходит все пункты меню заново.
• Управление с клавиатуры и видимый фокус (2.4.7 Focus Visible). По меню можно пройти клавишей Tab, раскрыть подменю клавишей Enter или пробелом, а сфокусированный пункт хорошо виден.
• Консистентная навигация (3.2.3 Consistent Navigation). Повторяющиеся навигационные блоки стоят в одном и том же порядке на всех страницах.
• Несколько способов найти страницу (2.4.5 Multiple Ways). Помимо меню у сайта есть поиск, карта сайта или список связанных страниц.
• Указание местоположения (2.4.8 Location). Пользователь понимает, где находится: помогают крошки и выделенный активный пункт.

В разметке это сводится к нескольким простым вещам: навигационный блок оборачивается в <nav> с понятным aria-label, у текущей страницы стоит aria-current="page", а у кнопки раскрытия подменю — aria-expanded. Пример:

<a class="skip-link" href="#main">Перейти к содержимому</a>
<nav aria-label="Основное меню">
  <ul>
    <li><a href="/services" aria-current="page">Услуги</a></li>
    <li><button aria-expanded="false" aria-controls="sub-about">О компании</button>
      <ul id="sub-about" hidden>...</ul></li>
  </ul>
</nav>

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

Как навигация влияет на SEO

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

• Меню должно состоять из обычных HTML-ссылок. Пункты, которые открывают страницы только через JavaScript-обработчик без <a href>, робот может не распознать как ссылки.
• Хлебные крошки размечают BreadcrumbList. Разметка по документации Google Search Central помогает поисковику понять положение страницы в иерархии сайта.
• Ключевые страницы — неглубоко. Ориентир — не дальше трёх кликов от главной для страниц, которые должны ранжироваться. Глубоко спрятанные страницы робот обходит реже, что особенно заметно при ограниченном краулинговом бюджете.
• Анкоры в меню — осмысленные. «Разработка мобильных приложений» даёт роботу и пользователю больше информации, чем «Подробнее» или «Направление 2».
• Меню не раздуто. Мега-меню на сотни ссылок на каждой странице размывает внутренний вес между всеми страницами и перегружает пользователя. Лучше вывести первый и второй уровни, а глубже вести через страницы разделов.

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

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

• Креативные названия пунктов. «Вселенная», «Мир решений», «Наша философия» — пользователь не понимает, что за ними, и не кликает.
• Разная навигация на разных страницах. Меню меняет состав или порядок пунктов в зависимости от раздела, и человек теряет ориентиры.
• Только гамбургер на десктопе. Скрывать навигацию там, где для неё есть место, почти всегда хуже, чем показать её.
• Капризные hover-меню. Подменю закрывается, как только курсор чуть сместился по диагонали, или всплывает при случайном наведении.
• Нет индикации текущего раздела. Активный пункт не выделен, крошек нет — пользователь не понимает, где находится. Baymard отмечает эту проблему как одну из частых.
• Слишком глубокая вложенность. До нужной страницы нужно пройти четыре-пять уровней со слабым информационным запахом на каждом.
• Дубли пунктов. Одна и та же страница доступна из меню под двумя разными названиями, и пользователь не понимает, в чём разница.
• Меню не работает с клавиатуры. Подменю раскрывается только наведением мыши, фокус невидим или теряется.
• Кнопка «наверх» вместо навигации. На длинных страницах пользователю приходится прокручивать или искать кнопку, чтобы добраться до меню, хотя удобнее липкая шапка.

Как проверить навигацию: методы тестирования и чек-лист

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

• Карточная сортировка (card sorting). Показывает, как пользователи группируют контент и как называют группы. Используется на этапе проектирования иерархии.
• Тестирование дерева (tree testing). Участники ищут ответы на задания в текстовом дереве разделов без дизайна. Основные метрики — доля успешно выполненных задач и прямота пути: дошёл ли человек сразу или возвращался и пробовал другие ветки.
• Юзабилити-тестирование по сценариям. Пользователи выполняют реальные задачи на прототипе или готовом сайте, а вы наблюдаете, где они ошибаются. Сценарии удобно строить на основе user flow ключевых задач.
• Аналитика после запуска. Карта кликов показывает, какими пунктами меню пользуются, а какими нет. Запросы во внутреннем поиске подсказывают, что люди не нашли в меню. Страницы выхода указывают, где навигация перестаёт вести дальше.

Для быстрой самопроверки используйте чек-лист аудита навигации:

• ☐ Главное меню видно сразу на десктопе и не спрятано в гамбургер.
• ☐ Названия пунктов понятны человеку, который впервые на сайте.
• ☐ Меню одинаково на всех страницах: состав, порядок, расположение.
• ☐ Текущий раздел выделен в меню, на внутренних страницах есть хлебные крошки.
• ☐ Логотип ведёт на главную.
• ☐ Ключевые страницы (услуги, каталог, цены, контакты) доступны в один шаг из главного меню.
• ☐ Выпадающие меню не закрываются при движении курсора и работают по клику и с клавиатуры.
• ☐ На мобильном меню доступно одной рукой, кнопка подписана, зоны касания не меньше 44×44 pt (iOS) / 48×48 dp (Android).
• ☐ Есть ссылка «Перейти к содержимому», фокус виден, у активного пункта стоит aria-current.
• ☐ Меню состоит из HTML-ссылок, крошки размечены BreadcrumbList.
• ☐ На сайте с большим каталогом есть видимый поиск и фильтры.
• ☐ Настроена аналитика кликов по меню и запросов во внутреннем поиске.

Частые вопросы (FAQ)

Чем навигация сайта отличается от структуры сайта?

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

Сколько пунктов должно быть в главном меню?

Универсального числа нет, а правило «7±2» к меню напрямую не относится. На практике в горизонтальном меню комфортно помещаются 5–7 пунктов первого уровня. Если разделов больше, их стоит сгруппировать, вынести второстепенное в футер или использовать мега-меню.

Нужны ли хлебные крошки на небольшом сайте?

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

Гамбургер-меню на десктопе — это ошибка?

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

Как понять, что навигация на сайте неудобная?

Признаки видны в аналитике: пользователи часто ищут во внутреннем поиске то, что есть в меню, уходят с первой страницы, почти не кликают по некоторым пунктам. Поддержка получает вопросы «где найти» о страницах, которые на сайте есть. Точнее всего проблему покажут tree testing и юзабилити-тесты с реальными пользователями.

Влияет ли меню сайта на SEO?

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