5 советов по разработке отличной навигации на сайте

Навигация является одним из важнейших элементов веб-сайта.

Он предоставляет общее представление о том, что посетители там найдут (что также полезно для SEO). Он помогает посетителям ориентироваться на сайте и быстро перемещаться по нему. Кроме того, он позволяет им быстро выполнять действия, например, заходить в корзину или выполнять поиск по сайту.

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

Сегодня мы рассмотрим пять моментов, которые следует учитывать при проектировании навигации на сайте. Мы приведём примеры из BeTheme, чтобы вы могли увидеть, как выглядят эти рекомендации.

Как создать отличную навигацию на сайте (с примерами)

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

Не совсем.

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

Совет №1: сделайте логотип заметным

Логотип — это, по сути, цифровое лицо компании. Он представляет её не только на веб-сайте, но и на других платформах: в социальных сетях, на онлайн-форумах, в подписях электронных писем и так далее.

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

Чтобы максимально эффективно использовать логотип для построения бренда, необходимо правильно разместить его, подобрать размер и интервал в шапке сайта. Вот несколько общих правил, которым следует следовать:

1. Ссылка: привяжите логотип к домашней странице.

2. Размещение: по возможности размещайте его в левом верхнем углу (согласно исследованию NNG). Если вы хотите разместить его в центре, убедитесь, что в левом верхнем углу есть ссылка «Домой».

На готовом сайте BeBaker 3 используется такое альтернативное размещение логотипа :

3. Размер: выберите размер, позволяющий легко различить и прочитать каждую деталь. Идеальный размер — 250 x 100 пикселей для прямоугольных логотипов и 160 x 160 пикселей для квадратных, хотя всё зависит от того, сколько места вы хотите оставить для навигационных ссылок.

Например, логотип BeDentist 4 имеет размер 166 x 60 пикселей:

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

Совет №2: сделайте заголовок «липким»

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

В результате веб-страницы могут стать довольно длинными.

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

Липкий заголовок решает эту проблему. Он не просто прикрепляется к верхней части страницы. Посмотрите, как преображается заголовок на одностраничном сайте BePizza 5 :

По мере того, как посетитель прокручивает страницу вниз, уникальная панель навигации уменьшается. Хотя она стала значительно меньше, её всё ещё можно использовать.

В качестве альтернативы вы можете использовать закрепленную навигацию с выравниванием по левому краю, как на готовом сайте Cottage 2:

Логотип по-прежнему находится на своем месте, навигационные ссылки всегда видны и не отнимают слишком много места у основного контента.

Совет №3: выделите текущую страницу, на которой находится посетитель

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

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

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

С BeTheme у вас есть множество возможностей. Например, здесь, в навигации Be Ebook 3, вы можете увидеть , как цвет текста на текущей странице меняется с чёрного на синий:

Еще один способ добавить изящную подсветку к навигации — разместить цветную линию под текущей страницей.

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

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

Совет №4: используйте только узнаваемые значки

Иконография может быть полезным элементом веб-дизайна. Обычно мы используем её вместе с текстовыми надписями, чтобы визуально донести или объяснить суть конкретной идеи. Однако иконки можно использовать и как самостоятельные элементы вместо текстовых надписей.

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

Те, которые вы можете разместить там, можно более или менее найти на готовом сайте BeDietShop:

Здесь есть четыре значка навигации:

• Профиль пользователя для настроек учетной записи
• Сердечко для лайков и избранных
• Корзина для страницы корзины/сумки
• Увеличительное стекло для поиска

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

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

Совет №5: Организуйте мегаменю так, чтобы их было легко просматривать

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

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

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

• Выделенные жирным шрифтом заголовки
• Столбцы для связанных страниц
• Изображения для выделения важных страниц

Некоторые из этих тактик можно увидеть в мегаменю магазина Betheme:

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

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

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

Такой тип «навигации» по веб-сайту может уменьшить перегруженность и беспокойство, которые испытывают пользователи, когда на экране отображается слишком много опций одновременно.

Сделайте навигацию удобной для ваших посетителей с помощью BeTheme

Без навигации посетителям пришлось бы прилагать немало усилий, чтобы найти пути к другой информации и точкам конверсии на вашем сайте. Однако одного лишь размещения ряда навигационных ссылок в верхней (или боковой) части сайта недостаточно.

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

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