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

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

Содержание:

Необходимость в навигации
Виды
Способы реализации
Структура
Основные элементы
Как сделать удобную навигацию
Дополнительные навигационные элементы
Рекомендации

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

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

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

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

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

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

Виды

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

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

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

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

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

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

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

Структура

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

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

Линейная. Из-за взаимосвязанности страниц их посещение возможно в определенном порядке. Например, если пользователь оказался в конкретном разделе в середине сайта, дальнейшие переходы допустимы только в одну сторону, а возврат назад – исключен.

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

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

Иерархическая. Бывает простой (например, карта сайта с возможностью перехода с 3 страницы на 5, с 4 на 2, т. е. возврат разрешается) либо тупиковой системой – с отсутствием реверса. В последнем случае вернуться можно посредством соответствующей кнопки веб-браузера.

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

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

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

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

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

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

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

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

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

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

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

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

Значки

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

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

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

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

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

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

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

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

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

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

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

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

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

Страница 404

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

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

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

Шапка

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

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

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

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

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

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

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

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

Форма поиска

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

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

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

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

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

Над боковым меню (слева либо справа).

В главном меню. Подходит, если в нем мало ссылок и достаточно места.

Самым лучшим местом для формы поиска считается шапка, поскольку на нее аудитория обращает внимание в первую очередь.

Футер

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

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

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

URL-адреса

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

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

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

Боковое меню

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

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

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

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

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

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

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

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

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

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

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

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

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