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