Время чтения 8 минут | прочитали: 1065

Навигация сайта - что это и как использовать

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

Содержание:

Необходимость в навигации

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

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

Основные требования, предъявляемые к системе навигации:

  • Доступность. На каждой странице присутствуют навигационные элементы, дающие возможность посетителям быстро переходить в интересующий раздел.
  • Ясность. Составляющие пользовательского интерфейса и меню хорошо просматриваются и понятны на интуитивном уровне. Желательно, чтобы переход на любую страницу либо в раздел не занимал более 3 кликов.
  • Соответствующее визуальное оформление. Элементы навигации сайта контрастируют с основным текстом и фоном, не выбиваясь из общего цветового решения.

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

Виды

Существуют различные типы навигации сайта:

  • Основная. Гиперссылки на главные разделы стандартно размещаются в меню. Навигация востребована у владельцев небольших проектов, на которых опубликовано несколько десятков страниц.
  • Контекстная. Преимущественно используется при внутренней перелинковке страниц на сайте для достижения качественной SEO-оптимизации. Навигация реализуется ссылками в тексте, направляющими посетителя теля на другой раздел, площадку.
  • Тематическая. Это гиперссылки на страницы и разделы с аналогичной по смыслу информацией либо размещенные под материалом и ведущие на предыдущую, следующую публикацию. Пример навигации – фотогалереи, позволяющие переходить к очередному и возвращаться к просмотренному изображению.
  • Языковая. Используется на площадках, адаптированных для аудитории из разных стран. Пользователю, перешедшему на ресурс, предлагается на выбор предпочтительный язык для отображения контента. Часто применяется на сайтах международных компаний, представительств, биржах.
  • Рекламная. Ссылки размещаются для привлечения аудитории на другие площадки либо страницы, на которых предлагается определенный продукт (товар, услуга). Оформление рекламной навигации возможно как графикой, так и текстом.
  • Глобальная. Подразумеваются ссылки, просматриваемые пользователем с любой страницы (например, на главную).
  • Поисковая. Позволяет ввести запрос в соответствующую строку с целью обнаружения на ресурсе материалов, содержащих указанные слова, фразы. На многих площадках реализована выдача результатов не только с сайта, но и поисковых систем.
  • Указательная. Предоставляет пользователю возможность увидеть, какая часть ресурса посещается, а также не запутаться в значительном информационном потоке. Тип навигации хорошо подходит для порталов с многочисленными страницами и рубриками.
  • Географическая. В основном применяется для туристических и аналогичных ресурсов, на которых важно показать наглядно геолокацию раздела, где находится пользователь. Чаще задействуется совместно с гиперссылками на полезный контент о стране, конкретной достопримечательности.

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

Способы реализации

Реализация навигации по сайту возможна следующими формами:

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

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

Структура

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

Структура может реализовываться следующими схемами:

  • Линейная. Из-за взаимосвязанности страниц их посещение возможно в определенном порядке. Например, если пользователь оказался в конкретном разделе в середине сайта, дальнейшие переходы допустимы только в одну сторону, а возврат назад – исключен.
  • Линейная реверсивная. Для карты сайта характерно передвижение в обе стороны, т. е. можно переходить и на предыдущую, и следующую страницу.
  • Кольцевая. Относится к линейной структуре, где с последней страницы доступен переход на первую.
  • Иерархическая. Бывает простой (например, карта сайта с возможностью перехода с 3 страницы на 5, с 4 на 2, т. е. возврат разрешается) либо тупиковой системой – с отсутствием реверса. В последнем случае вернуться можно посредством соответствующей кнопки веб-браузера.
  • Звездообразная. Обязательное условие в карте сайта – центральная страница, с которой доступен переход на другие адреса. Причем попасть с второстепенных разделов в нужные рубрики можно только через основной URL.
  • Матричная. Напоминает звездообразную структуру, однако для перехода на смежные страницы требуется меньше действий.
  • Полносвязная. Каждая страница взаимосвязана с остальными. Для перехода в другой раздел достаточно единственного клика. Навигация может реализовываться в виде меню – отдельного фрейма, постоянно присутствующего на экране.

Основные элементы

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

Меню

Это панель, на которой размещены ссылки к основным разделам. Меню бывает следующих видов:

  • Горизонтальное. Стандартно расположено в шапке (либо под). Содержит кнопки и гиперссылки, ведущие к соответствующим страницам. При нехватке места на панели для всех разделов можно сделать выпадающее меню с категориями.
  • Вертикальное. Находится справа либо слева на сайте, отображает перечень главных разделов, товарный каталог.
  • «Меню-гамбургер». Для скрытия категорий используется специальный значок в виде 3 горизонтальных полос. Схема отображения меню позаимствована из мобильной версии и преимущественно применяется на площадках, где важным критерием считается экономия места.

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

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

Логотип и другие пометки главной страницы

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

Раздел «О нас»

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

Значки

Для лучшего восприятия информации на странице часто размещаются не текстовые гиперссылки, а специальные значки. Например:

  • «лупа» (поиск);
  • «дом» (главная страница);
  • «сердечко» (избранное);
  • «корзина» (страница оформления заказа).

Значки разрабатываются в единой стилистике с сайтом и размещаются в шапке ресурса (реже – в меню).

Также посредством такого приема обозначаются товарные категории в интернет-магазинах. При нажатии на значок клиент попадает в соответствующий раздел либо карточку продукта.

Текстовые ссылки

Навигация включает такой элемент, как гиперссылки на страницы, которые встроены в сам текст. К основным правилам их оформления относятся:

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

Также необходимо учесть своевременное оповещение пользователей, если гиперссылка предусматривает конкретное действие: переход на другую площадку, скачивание документа и пр.

Призывы к действию

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

Кнопка для возврата

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

Такой прием – хороший вариант для длинных лендингов, проектов с бесконечной лентой, информационных порталов.

Страница 404

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

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

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

Шапка

Шапку рекомендуется визуально отделить от остальных элементов и, в зависимости от направленности сайта, включить:

  • логотип (желательно размещать слева вверху, что считается наиболее распространенным и привычным образцом для пользователей);
  • название компании и небольшое описание сферы деятельности (теглайн, если информация непонятна из логотипа), при необходимости – уникальное торговое предложение;
  • регионы доставки заказов, работы (необязательно перечислять все субъекты, достаточно лаконичного изложения данных);
  • контакты (если имеется несколько магазинов и офисов, в шапке website указываются сведения только для главного);
  • рабочий график (прописывается рядом с номером телефона для информирования клиентов о времени для звонков);
  • гиперссылка на страницу корзины (при разработке интернет-магазина);
  • форма заказа обратного звонка (актуальна, если имеется возможность быстро обработать заявки).

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

Основное меню

Оптимальное решение – это размещение ссылок в горизонтальном меню. При выборе названий для страниц важно помнить о семантическом проектировании.

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

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

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

Форма поиска

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

Визуальная составляющая поисковой формы:

  • Кнопка запуска. На некоторых сайтах полностью отсутствует, что часто вводит в заблуждение пользователей, которые не понимают, как начать поиск. Кнопку нужно делать заметной и удобной для нажатия. Можно прописать слова «Искать», «Найти» вместо малозаметного значка «лупы».
  • Поле ввода. Высота и длина должны быть удобными и позволять вводить запрос, состоящий из 2-3 слов. Лучше применять крупный шрифт, что позволит посетителям хорошо видеть фразу и, при необходимости, вносить корректировки.
  • Выбор категории поиска. Желателен при значительном количестве категорий. Например, можно разделить поиск по блогу, каталогу.

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

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

    Футер

    Футер (или «подвал») – это область в конце страницы, куда нужно включить:

    • Гиперссылки на все разделы. Причем желательно продублировать как основное меню, так и указать дополнительные рубрики. Оптимальное размещение – столбцами с разделением на логические подгруппы для лучшей ориентации.
    • Соцсети. Ссылки на них, в отличие от шапки, в футере кстати.
    • Форма заказа обратного звонка (если присутствует вверху сайта).
    • Контакты. Данные необходимо указать более детально, чем в шапке (например, добавить адрес, реквизиты компании).

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

    URL-адреса

    Адреса, по возможности, нужно делать простыми и понятными пользователям. URL, в большинстве случаев, указывается на латинице, хотя не исключены и кириллические названия.

    Дополнительные навигационные элементы

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

    Боковое меню

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

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

    «Хлебные крошки» (или локальная навигация)

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

    Правила, по которым оформляются «хлебные крошки»:

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

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

    Сортировка и фильтрация продукции

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

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

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

    Рекомендации

    Для лучшей ориентации пользователей на сайте необходимо соблюдать следующие советы по оформлению ссылок:

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

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

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

    ← Перейти к списку статей

    Смотрите также:

    Категории:

    Алгоритмы Аналитика Аудит сайта Бизнес Дизайн Инструменты Кейсы Коммерческие факторы Контент Маркетинг Мета-теги Методы продвижения Оптимизация сайта Перелинковка Поведенческие факторы Продвижение сайта Ранжирование сайта Региональность Семантическое ядро Специалисты Ссылки Стоимость раскрутки сайтов Технические факторы Типы сайтов Трафик Фильтры Юзабилити Яндекс сервисы