В этой статье мы дадим несколько базовых рекомендаций по разработке навигации на сайте. Кстати, все примеры — это сайты, которые мы сделали для наших клиентов под ключ — от прототипа и дизайна до наполнения контентом ;)
Продумать меню
Иногда нам встречаются сайты вообще без меню. Как правило, этим грешат одностраничные лендинги: если на сайте нет других страниц и разделов, зачем меню? Это заблуждение! Оно должно быть абсолютно на всех сайтах для удобства пользователя, просто на одностраничных его пункты будут вести на блоки лендинга, упрощая навигацию.
Рекомендованное количество пунктов меню — до 5. Если на сайте много подразделов, то лучше объединить их в более крупные и сделать меню многоуровневым. Например, на этом сайте пункт «Услуги» раскрывается вот таким многоуровневым списком:
Крайне желательно, чтобы меню было закрепленным, то есть чтобы оно фиксировалось вверху страницы при прокрутке. Это нужно, чтобы пользователь в любой момент мог вернуться туда, куда ему нужно, не скролля вверх.
Кстати, вариантов меню на сайте может быть несколько:
- обычное для первого экрана при открытии сайта,
- с контактами и/или призывом к действию и основным списком разделов — оно может использоваться в качестве закрепленного при прокрутке;
- лаконичное меню-гамбургер — обычно используется для мобильной версии сайта, но не только.
Сделать «хлебные крошки» или другой ориентир местоположения пользователя
На больших многостраничных сайтах, а также при создании интернет-магазинов используют навигационный элемент «хлебные крошки». Это строчка, обычно вверху страницы, которая показывает место на сайте, в котором находится пользователь и путь к нему: Главная страница > Раздел сайта > Подраздел сайта > Страница. Очень удобно, особенно если посетитель начал посещение сайта не с главной страницы, например, при переходе по рекламе.
На небольших сайтах в «хлебных крошках» нет особой необходимости. Чтобы пользователь понимал, в каком разделе или на каком блоке одностраничного сайта он находится, можно просто выделить цветом активный пункт меню: 
Добавить графические подсказки
Индикатор прокрутки укажет, в каком месте страницы или лендинга находится пользователь, а на первом экране можно сделать подсказку «прокрутите вниз». Например, на сайте bu-bu.online минималистичный первый экран с красивой анимацией, а в качестве подсказки есть стрелочка:
Кнопки с наиболее важными, ценными для вас действиями (оставить заявку, заказать обратный звонок) можно выделить цветом или анимацией. На сайте для компании по ремонту коммерческих помещений мы использовали анимацию..
Структурировать контент
Просматривать много однотипного контента — утомительно. К тому же, если человек видит целую «портянку» текста, у него есть желание просто его прокрутить, не вникая и не вчитываясь. Хороший прием для облегчения навигации — структурировать контент и частично скрыть его, оставив только заголовки.
Сделать ЧПУ
URL страницы (ссылка, которая отображается в адресной строке браузера) должна быть понятной. Есть даже такое понятие как ЧПУ — человекопонятный URL. То есть вместо https://facedigital.agency/149page/case09087 должно быть https://facedigital.agency/cases/seo/internet-magazin-otdelochnyx-materialov-kapitel/. Убрав лишнюю часть адреса, можно оказаться в более крупном разделе.
У одностраничных сайтов тоже должны быть ЧПУ: якорные ссылки для каждого блока с понятными названиями, например, #about или #contacts. Они также отображаются в адресной строке. Например, https://promo.f-okna.ru/#zamer.
Резюмируем. Для удобной навигации при разработке сайта нужно:
- Продумать меню, можно сделать несколько его вариантов: основное, для смартфонов, для скролла.
- Сократить количество пунктов меню до оптимального количества (до 5). Если нужно больше, можно создать многоуровневую структуру.
- Добавить «хлебные крошки» или продумать выделение того раздела меню, на котором сейчас находится пользователь.
- Продумать индикатор прокрутки, стрелки и другие подсказки для пользователя, чтобы он знал, где еще «скрывается» контент.
- Структурировать контент и скрыть при необходимости большие текстовые блоки, оставив их заголовки.
- Прописать понятные URL для каждой страницы.
Разработка сайтов — сложный творческий процесс с множеством нюансов. Обращайтесь к профессионалам, и практически все из них продумают за вас!
