Навигация по сайту представляет собой совокупность приемов, методов и специальных элементов, которые при комплексном взаимодействии позволяют пользователям быстро переходить от одной страницы к другой. Напрямую влияет как на успешное продвижение веб-проекта, так и уровень конверсий.
Необходимость в навигации
Продуманная система навигации сайта считается важным показателем удобства каждого ресурса. Запутанные переходы и бесконечные ссылки дезориентируют аудиторию и усложняют поиск интересующей информации, в результате чего пользователи покидают площадку и предпочитают конкурентов, что негативно отражается на поведенческих факторах.
Важна качественная навигация и для поисковых систем. Роботам нужно понимать, какая роль отводится конкретной странице, разделу либо другим элементам.
Основные требования, предъявляемые к системе навигации:
- Доступность. На каждой странице присутствуют навигационные элементы, дающие возможность посетителям быстро переходить в интересующий раздел.
- Ясность. Составляющие пользовательского интерфейса и меню хорошо просматриваются и понятны на интуитивном уровне. Желательно, чтобы переход на любую страницу либо в раздел не занимал более 3 кликов.
- Соответствующее визуальное оформление. Элементы навигации сайта контрастируют с основным текстом и фоном, не выбиваясь из общего цветового решения.
От соблюдения указанных требований при разработке ресурса зависит дальнейшее развитие проекта. При игнорировании правил трудно добиться высокой посещаемости и постоянной аудитории. Поэтому навигация – это неотъемлемая часть работы над юзабилити, удобством использования площадки по совокупности ключевых факторов.
Виды
Существуют различные типы навигации сайта:
- Основная. Гиперссылки на главные разделы стандартно размещаются в меню. Навигация востребована у владельцев небольших проектов, на которых опубликовано несколько десятков страниц.
- Контекстная. Преимущественно используется при внутренней перелинковке страниц на сайте для достижения качественной SEO-оптимизации. Навигация реализуется ссылками в тексте, направляющими посетителя теля на другой раздел, площадку.
- Тематическая. Это гиперссылки на страницы и разделы с аналогичной по смыслу информацией либо размещенные под материалом и ведущие на предыдущую, следующую публикацию. Пример навигации – фотогалереи, позволяющие переходить к очередному и возвращаться к просмотренному изображению.
- Языковая. Используется на площадках, адаптированных для аудитории из разных стран. Пользователю, перешедшему на ресурс, предлагается на выбор предпочтительный язык для отображения контента. Часто применяется на сайтах международных компаний, представительств, биржах.
- Рекламная. Ссылки размещаются для привлечения аудитории на другие площадки либо страницы, на которых предлагается определенный продукт (товар, услуга). Оформление рекламной навигации возможно как графикой, так и текстом.
- Глобальная. Подразумеваются ссылки, просматриваемые пользователем с любой страницы (например, на главную).
- Поисковая. Позволяет ввести запрос в соответствующую строку с целью обнаружения на ресурсе материалов, содержащих указанные слова, фразы. На многих площадках реализована выдача результатов не только с сайта, но и поисковых систем.
- Указательная. Предоставляет пользователю возможность увидеть, какая часть ресурса посещается, а также не запутаться в значительном информационном потоке. Тип навигации хорошо подходит для порталов с многочисленными страницами и рубриками.
- Географическая. В основном применяется для туристических и аналогичных ресурсов, на которых важно показать наглядно геолокацию раздела, где находится пользователь. Чаще задействуется совместно с гиперссылками на полезный контент о стране, конкретной достопримечательности.
Наиболее оптимальный тип навигации выбирается на основе позиционирования сайта, объема контента, тематической направленности. Допускается применять сочетание различных видов, поскольку главное – обеспечить пользователю удобство при поиске нужной информации.
Способы реализации
Реализация навигации по сайту возможна следующими формами:
- Текстовая. Гиперссылки на внутренние страницы и разделы либо внешние ресурсы проставляются текстом.
- Графическая. Смотрится более привлекательно. Для создания навигации применяются кнопки и прорисованные элементы меню.
- Flash- и java-технологии. Позволяет сделать интерактивное меню, т. е. при наведении курсора и клике на гиперссылку возникают разные эффекты.
- По сайту HTML. Различные формы дают возможность скрытия меню, в результате чего последнее отображается только при наведении курсора на корневую папку. Способ позволяет сэкономить пространство на странице.
Выбор нужной формы зависит от тира разрабатываемого проекта и поставленных задач. Грамотная навигация позволяет удержать аудитории на площадке и подтолкнуть потенциального клиента к целевому действию.
Структура
Структура отдельных страниц отличается от строения ресурса. В первом случае подразумевается, откуда можно сделать переход на конкретный раздел и в какую часть площадки попасть. Общая карта сайта дает возможность увидеть, как связываются все страницы друг с другом. Навигацию можно представить ориентированным графом, дуги (ребра) которого выступают в качестве ссылок, а верхушки – URL.
Структура может реализовываться следующими схемами:
- Линейная. Из-за взаимосвязанности страниц их посещение возможно в определенном порядке. Например, если пользователь оказался в конкретном разделе в середине сайта, дальнейшие переходы допустимы только в одну сторону, а возврат назад – исключен.
- Линейная реверсивная. Для карты сайта характерно передвижение в обе стороны, т. е. можно переходить и на предыдущую, и следующую страницу.
- Кольцевая. Относится к линейной структуре, где с последней страницы доступен переход на первую.
- Иерархическая. Бывает простой (например, карта сайта с возможностью перехода с 3 страницы на 5, с 4 на 2, т. е. возврат разрешается) либо тупиковой системой – с отсутствием реверса. В последнем случае вернуться можно посредством соответствующей кнопки веб-браузера.
- Звездообразная. Обязательное условие в карте сайта – центральная страница, с которой доступен переход на другие адреса. Причем попасть с второстепенных разделов в нужные рубрики можно только через основной URL.
- Матричная. Напоминает звездообразную структуру, однако для перехода на смежные страницы требуется меньше действий.
- Полносвязная. Каждая страница взаимосвязана с остальными. Для перехода в другой раздел достаточно единственного клика. Навигация может реализовываться в виде меню – отдельного фрейма, постоянно присутствующего на экране.
Основные элементы
Существуют различные элементы, связанные с навигацией. Их основная задача – обеспечение прочной структуры и адаптация площадки для поисковых систем и аудитории. Каждый элемент помогает пользователю переходить на нужную страницу для получения информации, дающей ответ на запрос.
Меню
Это панель, на которой размещены ссылки к основным разделам. Меню бывает следующих видов:
- Горизонтальное. Стандартно расположено в шапке (либо под). Содержит кнопки и гиперссылки, ведущие к соответствующим страницам. При нехватке места на панели для всех разделов можно сделать выпадающее меню с категориями.
- Вертикальное. Находится справа либо слева на сайте, отображает перечень главных разделов, товарный каталог.
- «Меню-гамбургер». Для скрытия категорий используется специальный значок в виде 3 горизонтальных полос. Схема отображения меню позаимствована из мобильной версии и преимущественно применяется на площадках, где важным критерием считается экономия места.
Также меню подразделяется на главное и второстепенное. Последнее добавляется при наличии значительного количества разделов либо разбивке по категориям внутри конкретной страницы.
Независимо от типа, меню оформляется с учетом общей стилистики ресурса. Рекомендуется выделять активную категорию и наиболее важные подразделы.
Логотип и другие пометки главной страницы
На логотип фирмы часто добавляется гиперссылка к главной странице. Также может реализовываться прием, когда для входа используется специальный значок в виде «дома». Реже в меню задействуется раздел «Главная».
Раздел «О нас»
Важно, чтобы аудитория имела беспрепятственный доступ к информации о сайте и компании. Если в навигационной панели присутствует раздел « О нас», лояльность и доверие пользователей к ресурсу повышаются.
Значки
Для лучшего восприятия информации на странице часто размещаются не текстовые гиперссылки, а специальные значки. Например:
- «лупа» (поиск);
- «дом» (главная страница);
- «сердечко» (избранное);
- «корзина» (страница оформления заказа).
Значки разрабатываются в единой стилистике с сайтом и размещаются в шапке ресурса (реже – в меню).
Также посредством такого приема обозначаются товарные категории в интернет-магазинах. При нажатии на значок клиент попадает в соответствующий раздел либо карточку продукта.
Текстовые ссылки
Навигация включает такой элемент, как гиперссылки на страницы, которые встроены в сам текст. К основным правилам их оформления относятся:
- заметность по тексту (например, выделить цветом и подчеркнуть);
- скрытие ссылки в тесте (анкор), а не вставка прямого URL;
- активное состояние при наведении курсора либо нажатии (можно реализовать разницей оттенков).
Также необходимо учесть своевременное оповещение пользователей, если гиперссылка предусматривает конкретное действие: переход на другую площадку, скачивание документа и пр.
Призывы к действию
Считаются полноценным навигационным элементом. Заполняя форму и нажимая на кнопку, клиент перенаправляется на страницу для покупки либо заказа. По завершении целевого воздействия пользователь должен беспрепятственно попасть на главную, в товарный каталог, другие разделы.
Кнопка для возврата
Сложность, с которой сталкиваются пользователи при скроллинге, состоит в быстром возврате в начало страницы. Чтобы не прокручивать последнюю заново, предусматриваются специальные кнопки, которые выглядят в виде стрелок «вверх».
Такой прием – хороший вариант для длинных лендингов, проектов с бесконечной лентой, информационных порталов.
Страница 404
В ситуации, когда пользователь попадает на несуществующую страницу, важно перенаправить человека на главную либо в другие подразделы, чтобы потенциальный клиент не покинул площадку.
Как сделать удобную навигацию
Удобный навигатор помогает аудитории ориентироваться на сайте и хорошо понимать, на какой из страниц либо в разделе человек находится, откуда перешел и куда может зайти. Для выполнения задачи на ресурс важно добавить основные элементы.
Шапка
Шапку рекомендуется визуально отделить от остальных элементов и, в зависимости от направленности сайта, включить:
- логотип (желательно размещать слева вверху, что считается наиболее распространенным и привычным образцом для пользователей);
- название компании и небольшое описание сферы деятельности (теглайн, если информация непонятна из логотипа), при необходимости – уникальное торговое предложение;
- регионы доставки заказов, работы (необязательно перечислять все субъекты, достаточно лаконичного изложения данных);
- контакты (если имеется несколько магазинов и офисов, в шапке website указываются сведения только для главного);
- рабочий график (прописывается рядом с номером телефона для информирования клиентов о времени для звонков);
- гиперссылка на страницу корзины (при разработке интернет-магазина);
- форма заказа обратного звонка (актуальна, если имеется возможность быстро обработать заявки).
Проставлять в шапке ссылки на социальные сети не рекомендуется, чтобы пользователи сразу не уходили с сайта.
Основное меню
Оптимальное решение – это размещение ссылок в горизонтальном меню. При выборе названий для страниц важно помнить о семантическом проектировании.
Основные разделы, которые присутствуют в меню, зависят от направления деятельности. Например, можно указать:
- каталог услуг, товаров (в виде выпадающего пункта);
- страницу о компании;
- системы скидок, акций;
- отзывы (особенно актуально для сайтов по оказанию услуг);
- блог;
- контактную информацию;
- портфолио (при наличии готовых работ);
- гарантии безопасности, правила возврата, методы оплаты, доставки (для площадок электронной коммерции) и пр.
Для каждого ресурса перечень разделов различается. Однако чтобы информация хорошо воспринималась аудиторией, желательно не размещать в строке (не считая выпадающих пунктов) более 5-7 ссылок с названиями. Если количество важных страниц превышает значение, лучше добавить дополнительное меню на вспомогательные разделы.
Форма поиска
Чтобы избавить пользователя от выполнения лишних действий, рекомендуется показывать форму полностью – с полем ввода и кнопкой запуска. А не отражать только последнюю, поскольку иногда заметить элемент трудно.
Визуальная составляющая поисковой формы:
- Кнопка запуска. На некоторых сайтах полностью отсутствует, что часто вводит в заблуждение пользователей, которые не понимают, как начать поиск. Кнопку нужно делать заметной и удобной для нажатия. Можно прописать слова «Искать», «Найти» вместо малозаметного значка «лупы».
- Поле ввода. Высота и длина должны быть удобными и позволять вводить запрос, состоящий из 2-3 слов. Лучше применять крупный шрифт, что позволит посетителям хорошо видеть фразу и, при необходимости, вносить корректировки.
- Выбор категории поиска. Желателен при значительном количестве категорий. Например, можно разделить поиск по блогу, каталогу.
Форма поиска должна быть доступной со всех страниц и может находиться в таких областях сайта, как:
Самым лучшим местом для формы поиска считается шапка, поскольку на нее аудитория обращает внимание в первую очередь.
Футер
Футер (или «подвал») – это область в конце страницы, куда нужно включить:
- Гиперссылки на все разделы. Причем желательно продублировать как основное меню, так и указать дополнительные рубрики. Оптимальное размещение – столбцами с разделением на логические подгруппы для лучшей ориентации.
- Соцсети. Ссылки на них, в отличие от шапки, в футере кстати.
- Форма заказа обратного звонка (если присутствует вверху сайта).
- Контакты. Данные необходимо указать более детально, чем в шапке (например, добавить адрес, реквизиты компании).
Название фирмы и логотип размещать в футере необязательно. Оформлять «подвал» можно как в едином стиле с сайтом, так и выбирать отдельный дизайн.
URL-адреса
Адреса, по возможности, нужно делать простыми и понятными пользователям. URL, в большинстве случаев, указывается на латинице, хотя не исключены и кириллические названия.
Дополнительные навигационные элементы
Дополнительные элементы навигации также позволяют понимать структуру площадки, однако применяются не на всех ресурсах.
Боковое меню
Если разделы делятся на подразделы, актуально их вынесение в боковое меню.
Оптимальная область для размещения – с левой стороны от основной части контента. Дублировать меню на всех страницах не нужно, достаточно поместить блок в раздел, к которому относится информация.
«Хлебные крошки» (или локальная навигация)
Это дополнительная навигационная цепочка, указывающая путь от главной до текущей страницы. Все элементы строки, за исключением последнего, – кликабельны и ведут на соответствующий раздел. Иногда текущая страница убирается и остается только предшествующая категория. Такая схема информирует, в какой части сайта находится посетитель и как вернуться назад.
Правила, по которым оформляются «хлебные крошки»:
- предпочтительное место нахождения – под главным меню;
- расположение на всех страница (кроме главной);
- использование средних букв;
- выделение последнего элемента навигации, совпадающего с названием страницы либо раздела (например, жирным шрифтом).
Не стоит добавлять гиперссылки в виде «Обратно в раздел», «Вперед», «Назад» и т. п., которые только запутывают пользователей. Достаточно «хлебных крошек».
Сортировка и фильтрация продукции
Элементы преимущественно необходимы на сайтах электронной коммерции. Большинство клиентов положительно относятся к боковому меню, которое размещается в левой части от товарного перечня. Пользователи лучше воспринимают информацию, поэтому, в первую очередь, выбирают оценочные критерии, а после изучают отображаемый список.
Сформировать фильтры, подходящие к любой продукции, невозможно. К наиболее важным составляющим относятся:
- Категории товаров, услуг. Разделять продукцию нужно по типу, назначению, производителю и другим параметрам. Размещать список ссылок лучше в начале блока с фильтром.
- Наличие товара на складе. Если ассортиментные позиции можно заказать, обязательной считается сортировка по товарам, которые доступны для оценки и покупки на момент посещения сайта.
- Новинки, акции. Пользователи часто посещают такие страницы, поэтому важно предусмотреть возможность выбора только проступивших в продажу либо скидочных товаров отдельно для каждой из категорий, всего списка.
- Ценовой диапазон. Фильтром пользуются клиенты, желающие выбрать исключительно из дорогих либо дешевых товаров. Можно пользоваться готовыми диапазонами, однако лучше предоставить клиенту возможность самостоятельно указывать значения стоимости.
- Отмена фильтров. При автоматическом обновлении перечня продукции элемент навигации необязателен. Сброс фильтров, выводимый соответствующей кнопкой, важно реализовать в каталогах. Причем размещать элементы для запуска и отмены рядом нежелательно, поскольку посетители могут ошибиться при нажатии.
Рекомендации
Для лучшей ориентации пользователей на сайте необходимо соблюдать следующие советы по оформлению ссылок:
- делать гиперссылки аналогичного размера, что и основной текст (для хорошего восприятия контента);
- организовать открытие ссылок на сторонние площадки в новой вкладке, чтобы пользователи не покидали ресурс;
- не проставлять в текстах значительный объем линков (информация трудно воспринимается аудиторией, к тому же можно попасть под санкции поисковых систем);
- не размещать ссылки рядом друг с другом (рекомендуется пользоваться знаками препинания, отступами между ними либо изменить формулировку основного контента);
- отказаться от дополнительных эффектов при наведении курсора, клике (при заходе с мобильных устройств ничего не появится);
- не использовать синий оттенок, подчеркивание для выделения некликабельного контента, чтобы не запутать посетителей, поскольку стандартно таким способом выделяются сами ссылки;
- не забывать про посещенные пользователем адреса и выделять их другим цветом, поскольку при наличии значительного количества материалов на площадке человек может забыть, на какие конкретно страницы уже переходил и начнет совершать ненужные действия.
Рекомендуется учитывать и масштабируемость, т. е. продумывать навигацию с расчетом на расширение сайта, чтобы по мере развития ресурса система смогла безопасно выдержать новые элементы и сохранить работоспособность. Причем увеличение объема данных необходимо закладывать еще на этапе проектирования. Например, меню можно устроить с запасом места для добавления нескольких пунктов.
Детально продуманная навигация позволяет улучшить показатели качества проекта и напрямую влияет, сколько людей, посетивших площадку, вернутся снова, добавят адрес в закладки. При грамотной проработке ссылок значительно увеличивается процент постоянной аудитории, повышаются конверсии, а ресурс вызывает лояльность и доверие пользователей, что положительно сказывается на продвижении в поисковых системах.
