Создание навигации сайта – это одна из важных составляющих в юзабилити сайта. Сайт должен быть удобен, эргономичен и прост в использовании. В этой статье мы поговорим о навигации.
📍 Меню — один из главных инструментов навигации на сайте. И первое, что следует учесть – это лаконичность. При создании меню постарайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если же пунктов все-таки больше, как вариант, можно использовать гамбургер-меню.
📍 Пункт «Главная» в меню — это пережитки 90-х. Лучше поставить ссылку на главную страницу на логотип. Это вполне привычный вариант для пользователя, потому что уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы.
📍 Не пренебрегайте меню на лендингах. Оно также может быть навигатором внутри одной страницы, особенно если информации много, то меню с ссылками на разделы страницы упростит навигацию. Так что не забывайте использовать якорные ссылки.
📍 Для удобства можно зафиксировать меню. Фиксированное меню всегда будет оставаться в поле зрения при скролле., чтобы посетитель в любой момент мог найти нужный раздел.
📍 Хорошим решением в создание навигации сайта будет выделить активный пункт меню для постраничной навигации, так меню будет показывать в каком разделе сайта находится пользователь.
📍 Добавить индикаторы (точки) для определения местоположения. Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель. Они находятся в левой или правой части страницы, используются в поэкранном дизайне и чаще всего на ленднгах.
Кнопки в навигации
📍 Разберемся с кнопками. Самое простое при создании навигации сайта – это выделить кнопку с более важным действием. Из двух соседних кнопок более важная должна визуально выделяться. Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает». Очевидное – это использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветную обводку без заливки, либо фон нейтрального цвета.
📍 Что же делать при большом количестве контента? – скрыть его часть. Много однотипных элементов просматривать утомительно. Используйте кнопку, которая скроет часть элементов и покажет их только по клику.
📍 Добавить кнопку навигации «Наверх». Она помогает пользователю из любого места страницы быстро попасть в ее начало. Особенно полезна для удобной навигации на страницах со статьями и большим количеством контента.
⠀
Итоги:
- Уделите внимание структуре и дизайну меню сайта. Не загромождайте его большим количеством элементов и выделяйте активные пункты меню;
- Акцентируйте внимание пользователя на значимых кнопках;
- Используйте индикатор прокрутки на длинных страницах или блок с точками;
- Не забывайте о кнопке «Наверх» .
