В этой статье мы дадим несколько базовых рекомендаций по разработке навигации на сайте. Кстати, все примеры — это сайты, которые мы сделали для наших клиентов под ключ — от прототипа и дизайна до наполнения контентом ;)
Иногда нам встречаются сайты вообще без меню. Как правило, этим грешат одностраничные лендинги: если на сайте нет других страниц и разделов, зачем меню? Это заблуждение! Оно должно быть абсолютно на всех сайтах для удобства пользователя, просто на одностраничных его пункты будут вести на блоки лендинга, упрощая навигацию.
Рекомендованное количество пунктов меню — до 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.
Резюмируем. Для удобной навигации при разработке сайта нужно:
Разработка сайтов — сложный творческий процесс с множеством нюансов. Обращайтесь к профессионалам, и практически все из них продумают за вас!