Создание удобной навигации на сайте

Создание навигации сайта

Создание навигации сайта – это одна из важных составляющих в юзабилити сайта. Сайт должен быть удобен, эргономичен и прост в использовании. В этой статье мы поговорим о навигации.

📍 Меню — один из главных инструментов навигации на сайте. И первое, что следует учесть – это лаконичность. При создании меню постарайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если же пунктов все-таки больше, как вариант, можно использовать гамбургер-меню.

📍 Пункт «Главная» в меню — это пережитки 90-х. Лучше поставить ссылку на главную страницу на логотип. Это вполне привычный вариант для пользователя, потому что уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы.

📍 Не пренебрегайте меню на лендингах. Оно также может быть навигатором внутри одной страницы, особенно если информации много, то меню с ссылками на разделы страницы упростит навигацию. Так что не забывайте использовать якорные ссылки.

📍 Для удобства можно зафиксировать меню. Фиксированное меню всегда будет оставаться в поле зрения при скролле., чтобы посетитель в любой момент мог найти нужный раздел.

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

📍 Добавить индикаторы (точки) для определения местоположения. Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель. Они находятся в левой или правой части страницы, используются в поэкранном дизайне и чаще всего на ленднгах.

Кнопки в навигации

📍 Разберемся с кнопками. Самое простое при создании навигации сайта – это выделить кнопку с более важным действием. Из двух соседних кнопок более важная должна визуально выделяться. Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает». Очевидное – это использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветную обводку без заливки, либо фон нейтрального цвета.

📍 Что же делать при большом количестве контента? – скрыть его часть. Много однотипных элементов просматривать утомительно. Используйте кнопку, которая скроет часть элементов и покажет их только по клику.

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

Итоги:

  • Уделите внимание структуре и дизайну меню сайта. Не загромождайте его большим количеством элементов и выделяйте активные пункты меню;
  • Акцентируйте внимание пользователя на значимых кнопках;
  • Используйте индикатор прокрутки на длинных страницах или блок с точками;
  • Не забывайте о кнопке «Наверх» .
Загрузка ...
Davinci Plus