Как сделать удобную навигацию на сайте

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

Главные правила для создания навигации на сайте

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

Важное правило: любая страница сайта должна быть доступна максимум за три клика.

В дизайне элементов навигации желательно придерживаться следующих рекомендаций:

• Хорошая видимость. 
  Навигационные блоки должны визуально выделяться, чтобы их было легко найти при беглом сканировании страницы. 
• Лаконичные тексты. 
  Желательно избегать сложных слов и описаний, всё должно быть четко и по делу.
• Доступный интерфейс.
  Текст должен легко читаться, а кнопки и ссылки — быть достаточно большими для клика на любом устройстве.
• Интуитивный UX. 
  Пользователю должно быть сразу понятно, для чего служит каждый элемент навигации. Для похожих действий используйте одинаковые по дизайну элементы, чтобы не было путаницы. Пользуйтесь привычным в интернете визуальным языком: например, ссылки обычно подчеркнутые, а для мобильного меню используется символ «гамбургер».
• Гармоничный дизайн. 
  Элементы навигации должны хорошо вписываться в дизайн сайта и совпадать по стилю с другими блоками.

Далее рассмотрим основные виды навигации — от крупных блоков до маленьких элементов, делающих передвижение по сайту удобнее.

 

Навигация в шапке страницы

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

Рекомендации по созданию главного меню

Делайте максимально 7 пунктов, но оптимально не более 5.
Выбирайте только самые важные ссылки. Например, информацию о компании, услуги или товары, цены, контакты. Можно добавить в шапку кнопку обратного звонка или заявки, а также ссылки на социальные сети.

Название пунктов ограничьте 1–2 словами.
Слишком длинные названия пунктов займут много места и запутают пользователей.

Не делайте больше 2 уровней.
Слишком перегруженное меню с несколькими уровнями выпадающих списков будет сложно для восприятия. Если у вас много страниц или разделов, некоторые ссылки можно перенести в подвал сайта.

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

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

Выделяйте текущий пункт.
Визуальный акцент на активном пункте поможет пользователю понять, на каком разделе он находится.

Ставьте на логотип ссылку на главную страницу.
Кликабельный логотип даст посетителям возможность быстро вернуться к началу с любой страницы сайта.

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

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

Как сделать верхнее меню в конструкторе Taptop

Создаем меню

Для начала перетащите на холст виджет Menu.

При этом будет добавлено стандартное меню, которое нужно подстроить под свои задачи — поменять названия пунктов и настройки дизайна.

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

Добавить или удалить пункты можно на вкладке Настройки в разделе Структура меню.

Для каждого пункта можно настроить действие — переход на другую страницу, переход по якорю, отправку e-mail или звонок по телефону.

Адаптируем меню для мобильных устройств

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

Фиксируем меню

Чтобы навигация оставалась фиксированной при прокрутке страницы, нужно настроить позиционирование блока на вкладке Дизайн. Для это выберите параметр Позиционирование — Липкое и координаты отступов слева и сверху установите в значение 0. Таким образом вы привязали меню к верхнему левому углу страницы. Также нужно поменять значение Z-индекс с auto на число, большее 1, чтобы меню отображалось поверх прокручиваемого текста страницы.

Добавляем эффекты при наведении на пункты

Чтобы добавить эффект для пункта меню, нужно выбрать элемент ссылки Menu Link и добавить для него селектор При наведении.

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

Также для более плавного эффекта можно настроить опцию Переходы в разделе Внешний вид. А чтобы курсор менял отображение при наведении — для параметра Курсор можно установить значение Указатель.

 

Навигация в подвале страницы

Зачем нужно нижнее меню

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

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

Как сделать нижнее колоночное меню в конструкторе Taptop

Для начала нужно перетащить в блок подвала виджет Menu, а затем настроить его отображение. Для этого на вкладке Настройки выберите Расположение →Колонками и установите желаемое количество колонок. Далее добавьте нужные пункты и настройте дизайн.

Внешний вид можно настроить на вкладке Дизайн. Например, вы можете установить расстояние между столбцами.

 

Боковая навигация 

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

Вертикальное меню также может быть необычным дизайнерским решением вместо стандартной навигации в шапке страницы.

Как сделать боковое меню в конструкторе Taptop

Для начала нужно добавить на холст виджет Menu, а затем в Настройках выбрать опцию Расположение → Вертикально. Далее вы можете настроить дизайн так же, как для меню других типов.

 

«Хлебные крошки»

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

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

 

Кнопка «Наверх»

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

Как сделать кнопку «Наверх» в конструкторе Taptop

Чтобы добавить на страницу кнопку «Наверх», нужно перетащить ее в секцию подвала.

Далее нужно настроить ее расположение и внешний вид на вкладке Дизайн. В разделе Позиционирование выберите опцию Фиксированное и установите параметры сдвига снизу и справа (в примере ниже — по 50px). Кнопка будет зафиксирована на странице в этих координатах. Также поменяйте значение Z-индекс, чтобы кнопка отображалась поверх остального контента при прокрутке страницы.

Далее настройте дизайн, выбрав нужный цвет и иконку для кнопки.

 

Резюме

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

• Тщательно прорабатывайте структуру сайта.
• Создавайте навигацию, исходя из структуры проекта и контента.
• Размещайте элементы удобно для пользователя и акцентируйте на них внимание.
• Помимо меню, используйте дополнительные элементы для перехода по сайту.
• Отслеживайте поведение посетителей на сайте с помощью сервисов аналитики и при необходимости улучшайте юзабилити.