Кнопка «Назад» и навигация на сайте: как проверить, что посетитель не потеряется

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

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

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

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

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

Три типичных маршрута посетителя на сайте малого бизнеса

Чтобы проверять навигацию предметно, возьмите три сценария. Условный пример: небольшой сайт услуг с разделами «Услуги», «Цены» и «Контакты». Это иллюстрация, а не реальный проект и не кейс клиента.

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

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

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

Какие из этих маршрутов самые частые именно у вашего сайта, мы по анонсам утверждать не можем. Это подтверждается вашей статистикой посещений и поведением клиентов.

Что проверить: меню, хлебные крошки, возврат из карточек

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

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

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

Внутренние ссылки «вернуться». Если на странице есть своя стрелка или ссылка «Назад к услугам», проверьте, что она ведёт туда же, куда ожидается, и не спорит с поведением браузерной кнопки.

Мёртвые концы. Пройдите по сайту и найдите страницы, с которых нельзя никуда пойти дальше, кроме как закрыть вкладку. На таких страницах стоит добавить путь к соседним разделам и к контактам.

Ошибки навигации на телефоне

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

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

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

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

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

Как принять прототип структуры до начала разработки

Структуру удобнее согласовывать до дизайна и вёрстки, пока правки стоят дёшево. Идея, структура и прототип первого экрана на этом этапе — то, что можно обсудить бесплатно; сама разработка начинается от 25 000 ₽, а точная стоимость и сроки согласуются отдельно.

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

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

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

Чек-лист перед началом

• Открыть сайт и пройти маршрут «главная — услуга — контакты», на каждом шаге ответив: где я и как вернуться.
• Зайти на внутреннюю страницу напрямую (как из поиска) и проверить, есть ли оттуда путь к другим разделам и к контактам.
• Нажать «Назад» в браузере после открытия карточки из списка: список должен остаться на прежнем месте с прежним фильтром.
• Проверить, что названия пунктов меню понятны клиенту, а текущий раздел как-то обозначен.
• Если используются хлебные крошки, убедиться, что каждое звено кликабельно и ведёт на существующую страницу.
• Найти страницы-тупики, с которых нельзя перейти никуда, кроме закрытия вкладки.
• Проверить меню и всплывающие окна на реальном телефоне: открытие, закрытие, системная кнопка или жест «Назад».
• Убедиться, что плавающие кнопки и баннеры не закрывают меню, контакты и возврат.
• Сверить свои предположения о телефонных посетителях и внутренних входах со статистикой, а не принимать их на веру.
• Зафиксировать письменно структуру разделов и правила возврата до начала дизайна и вёрстки.