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