Навигация — то, из-за чего чаще всего теряют посетителей на в целом нормальном сайте. Человек пришёл по нужному запросу, увидел приличное оформление, но не нашёл раздел с ответом на свой вопрос и вернулся в поиск. Ниже разобрано, как мы проектируем структуру сайта и меню: с чего начинаем, какие правила соблюдаем и как проверяем, что получилось понятно не только команде проекта.
Структура важнее меню
Меню — это отображение структуры, а не сама структура. Пока не решено, из каких разделов состоит сайт и как они соотносятся, рисовать шапку рано: получится набор кнопок, куда потом будут дописывать пункты по мере появления новых услуг.
Мы начинаем с описи содержимого: выписываем всё, что должно быть на сайте, — услуги, разделы каталога, информационные страницы, документы, отраслевые решения. Затем группируем по смыслу и проверяем, что каждая группа имеет понятное название и не пересекается с соседними.
Группировать нужно от задач посетителя, а не от организационной структуры компании. Разделы вида «Департамент комплексных решений» понятны внутри компании и бесполезны снаружи. Признак правильной группировки — человек со стороны, глядя на название раздела, может предположить, что внутри, и не ошибается.
Иерархия и глубина
Иерархия должна быть предсказуемой: разделы, подразделы, страницы. Каждая страница имеет одно основное место в структуре, и адрес отражает это место.
Практические ориентиры, которых мы придерживаемся:
- любая значимая страница достижима за два-три перехода с главной;
- в одном уровне меню не больше семи-девяти пунктов — длинный список перестаёт читаться;
- больше трёх уровней вложенности — повод пересмотреть группировку, а не строить трёхэтажное выпадающее меню;
- у раздела есть собственная страница с описанием, а не только выпадающий список;
- если подразделов очень много, вместо меню используется страница-указатель с плиткой или списком.
Отдельная типичная проблема — раздел, существующий только как пункт меню с выпадающим списком. При нажатии на него ничего не происходит, а на телефоне он вообще не открывается. Такой раздел не собирает поисковый трафик и путает посетителя.
Названия разделов
Название пункта меню — самый дешёвый и самый недооценённый элемент навигации. Понятное слово экономит человеку переход, непонятное стоит визита.
Правила простые: использовать слова, которыми пользуется аудитория, а не внутренний жаргон компании; избегать выдуманных названий разделов и игры слов; не смешивать в одном ряду сущности разного типа; держать формулировки короткими, чтобы пункт помещался в одну строку.
Проверить названия можно поисковыми подсказками и запросами, по которым люди приходят на сайт: если аудитория ищет «техподдержка сайта», а в меню написано «сервисное сопровождение цифровых активов», раздел будут находить хуже.
Основные элементы навигации
| Элемент | Задача | Частая ошибка |
|---|---|---|
| Главное меню | Показать основные разделы и структуру сайта | Пункты добавляют годами, пока строка не переполнится |
| Логотип | Возврат на главную с любой страницы | Логотип не кликабельный |
| Хлебные крошки | Показать, где человек находится, и дать шаг назад | Отсутствуют на страницах глубокой вложенности |
| Подвал | Собрать всё, что не поместилось в шапку | Дублирует главное меню и ничего не добавляет |
| Поиск по сайту | Короткий путь для тех, кто знает, что ищет | Спрятан за иконкой и ничего не находит |
| Фильтры каталога | Сузить выбор по параметрам | Сбрасываются при переходе назад |
| Перелинковка в тексте | Перевести на смежные разделы по ходу чтения | Анкор «подробнее» вместо названия темы |
| Меню на мобильных | Дать доступ ко всем разделам с телефона | Третий уровень недоступен нажатием |
Единообразие
Навигация должна работать одинаково на всех страницах: то же расположение меню, тот же порядок пунктов, то же оформление активного раздела. Каждое отклонение заставляет человека заново разбираться, где он находится.
Сюда же относится подсветка текущего раздела. Человек, попавший на страницу из поиска, не знает, в какой части сайта оказался. Активный пункт меню и хлебные крошки отвечают на этот вопрос без усилий с его стороны.
Простота без потери полноты
Требование «сделайте меню проще» часто понимают как «уберите половину пунктов». В результате разделы не исчезают, а становятся недостижимыми: страницы есть, ссылок на них нет, поисковые роботы их не обходят.
Правильный подход — не сокращать содержимое, а перераспределять его по уровням. В шапке остаются основные направления, внутри разделов появляются страницы-указатели со списками, в подвале собирается всё остальное: документы, реквизиты, политика, карта сайта.
Полезный приём для крупных сайтов — раздел с полным перечнем услуг или разделов. Он одновременно помогает посетителю, который не нашёл нужное в меню, и обеспечивает внутренние ссылки на страницы, до которых иначе не добраться.
Поиск по сайту
Поиск нужен там, где содержимого много: каталог, база статей, документация. На сайте из десяти страниц он лишний.
Если поиск есть, он должен работать: находить по части слова, прощать опечатки и раскладку, показывать подсказки, выдавать понятный результат при отсутствии совпадений — с предложением перейти в каталог или связаться с менеджером, а не с пустым экраном.
Отдельная ценность поиска — статистика запросов. Она показывает, что люди не нашли в меню, и это лучший источник идей по перестройке структуры.
Навигация на мобильных устройствах
На телефоне меню обычно скрыто за иконкой, и это накладывает дополнительные требования.
- Пункты достаточно крупные, чтобы попадать пальцем без прицеливания.
- Все уровни вложенности доступны: раздел с подразделами открывается нажатием, а не только наведением.
- У раздела есть отдельная ссылка на его собственную страницу, помимо кнопки раскрытия списка.
- Меню закрывается понятным способом — крестиком, нажатием вне области, кнопкой «назад».
- Ключевое действие — звонок, заявка, корзина — доступно без открытия меню.
- Фиксированная шапка не занимает половину экрана.
Проверять всё это нужно на реальном телефоне: в браузере на компьютере часть проблем с касаниями просто не воспроизводится.
Как проверить структуру до вёрстки
- Тест на сортировку. Дайте нескольким людям со стороны список страниц и попросите разложить по группам и назвать группы. Совпадения покажут естественную структуру, расхождения — спорные места.
- Тест на поиск раздела. Покажите только меню и спросите, куда человек нажмёт, чтобы решить конкретную задачу. Если большинство выбирает не тот пункт, дело в названии.
- Проверка глубины. Возьмите десять важных страниц и посчитайте число переходов с главной до каждой.
- Проверка сиротства. Найдите страницы, на которые нет ни одной внутренней ссылки.
- Проверка на телефоне. Пройдите основные сценарии одной рукой.
Все пять проверок делаются на прототипе, до дизайна и разработки. Перестроить структуру в схеме занимает часы, на готовом сайте — недели, плюс настройка переадресаций.
Что делать с уже работающим сайтом
Перестройка навигации на живом сайте почти всегда меняет адреса страниц. Это нормально, но требует аккуратности: нужна карта соответствия старых и новых адресов, постоянная переадресация и обновление внутренних ссылок. Без этого обновлённая структура обойдётся потерей позиций.
Если нужно навести порядок в разделах и меню, мы начинаем с описи содержимого и прототипа структуры, проверяем её на людях и только потом переходим к оформлению. Посмотрите проектирование пользовательских интерфейсов и напишите нам — разберём структуру вашего сайта.
