Меню сайта: какие пункты нужны и как их расположить

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

Какие бывают меню сайта?

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

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

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

Где разместить меню и как показать, где находится посетитель

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

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

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

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

Факт. В количественном исследовании Nielsen Norman Group скрытая навигация почти вдвое снизила находимость контента на сайте.

Какие пункты нужны в главном меню?

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

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

• Услуги или каталог — главный раздел; если направлений несколько, они раскрываются в подменю.
• Цены — отдельным пунктом, если клиенты часто спрашивают стоимость до звонка.
• Работы или кейсы — доказательство того, что вы умеете делать то, что обещаете.
• О компании — реквизиты, команда, лицензии; его читают реже, но перед сделкой проверяют.
• Контакты — последний пункт по привычке пользователей, плюс телефон в служебной зоне шапки.

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

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

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

Жёсткого лимита нет. Часто ссылаются на правило «семь плюс-минус два», но NN/g в разборе вертикальной навигации отвечает на вопрос, можно ли иметь больше 7–9 разделов верхнего уровня, коротко: можно, если заранее спланировать, как их показать.

Опаснее обратная ошибка. Хуже всего, по словам NN/g, — урезать структуру до числа разделов, которое влезает в горизонтальное меню. Тогда в один пункт «Услуги» прячут десяток разных направлений, и посетителю приходится открывать каждый раздел, чтобы найти своё.

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

Мнение. Если в меню не помещаются нужные пункты, меняйте форму меню, а не структуру сайта. Мега-меню на большом каталоге честнее, чем пункт «Ещё», в котором прячется половина услуг.

Как назвать пункты меню?

Подписи пунктов меню должны быть понятными, конкретными и привычными. Это правило NN/g звучит банально, но нарушается постоянно: «Решения», «Экосистема», «Компетенции» ничего не говорят клиенту, который ищет ремонт кровли.

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

Иконки могут помочь, но не заменить слова. Значок без подписи понятен только тем, кто уже знает сайт, а для нового посетителя это загадка.

Выпадающие и мега-меню: как не потерять посетителя

Выпадающее меню экономит место, но добавляет действие: чтобы увидеть подразделы, их нужно открыть. Отсюда несколько правил NN/g.

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

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

Мега-меню — большая панель, где все подразделы видны сразу, сгруппированные под заголовками. NN/g считает его отличным решением для большого числа пунктов. Чтобы оно работало, группы подписывают, а длинные списки не делают одинаковыми по первому слову — иначе их трудно различить.

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

Меню на телефоне

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

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

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

Как проверить меню до запуска

Меню проверяют на людях, причём до дизайна и вёрстки. NN/g описывает два метода, которые для этого и придуманы.

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

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

После запуска поведение в меню видно по карте кликов в Яндекс Метрике: какие пункты открывают чаще, а какие почти никто не трогает. Пункт, который почти никто не нажимает, — кандидат на перенос в подвал.

С чего начать

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

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

Источники

• Menu-Design Checklist: 17 UX Guidelines — Nielsen Norman Group
• Hamburger Menus and Hidden Navigation Hurt UX Metrics — Nielsen Norman Group
• Mega Menus Work Well for Site Navigation — Nielsen Norman Group
• Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan — Nielsen Norman Group
• Utility Navigation: What It Is and How to Design It — Nielsen Norman Group
• Card Sorting: Uncover Users' Mental Models — Nielsen Norman Group
• Tree Testing: Evaluate Menu Labels and Categories — Nielsen Norman Group