Выстраиваем систему навигации сайта: правила и лайфхаки

Навигация сайта — это целая система вашего web-ресурса, которая позволяет пользователю быстро находить необходимую информацию или же совершать действия (добавлять товары в корзину и покупать их). Для того чтобы не заблудиться в “дебрях” сайта, навигация предлагает различные элементы и способы перехода между страницами, сопровождая пользователя к нужному ему разделу или опции на сайте. Помните, чем "больше" сайт и сложнее ниша — тем лучше надо прорабатывать вашу “карту территории”.

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

Как определить, что пора улучшить навигацию на сайте?

Мы обозначили 3 основных признака, которые дают понять, что навигация вашего сайта нуждается в модернизации:
1
Минимальное количество продаж и ухудшение поведенческих показателей при стагнации прочих факторов (спрос, трафик, позиции).
2
Слишком большой процент отказов (30+% в Яндексе или 60+% в Google).
3
Низкое или уменьшающееся время нахождения на сайте (необходимо сравнивать данные в динамике внутри сайта).
Вообще мы рекомендуем заниматься улучшением навигации постоянно. Тем самым вы не только заботитесь о пользователях своего ресурса, но и работаете с поведенческими факторами, которые являются важным фактором ранжирования.

Какие шаги следует предпринять для улучшения навигации сайта?

1. Проведите анализ поведения пользователей на сайте как минимум с помощью базовых инструментов.

Мы рекомендуем в первую очередь базовые системы аналитики Яндекс.Метрика и Google Analytics, которые собирают данные с вашего сайта (при условии установки скрипта) в три этапа: сбор данных, обработка и формирование отчета, предоставление отчета.

Что это дает? При помощи инструментов сервисов вы получаете:
Оценку воронки продаж или пользовательского пути.
Информацию о пользователях: какие страницы они посетили, через какой браузер просматривали ресурс, из какой страны (города), как попали на сайт (через поисковую систему, с контекстной рекламы, другого сайта и т.п.).
Чем отличаются сервисы? Прежде всего некоторыми инструментами аналитики. Например, у Яндекс.Метрики есть вебвизор, карта кликов и карта скроллинга, а в арсенале Google Analytics — режим реального времени (к конкуренту данные попадают примерно за 15 минут), многоканальные конверсии, вычисляемые параметры и А/Б-тесты.

Мы рекомендуем не останавливаться на ресурсах Яндекса и Google, поэтому подготовили список дополнительные сервисов, которые помогут проанализировать ваш сайт с учетом разных запросов.

AskUsers — сервис, позволяющий проводить юзабилити-тестирование сайтов, привлекая к анализу услуги реальных пользователей (ЦА).

Hotjar или его аналог Userpoint — это инструменты с функционалом вебвизора, воронки продаж, опросника.

Crazyegg — популярный зарубежный сайт, который формирует тепловые карты. Может создавать карты кликов и скроллинга. Встроен инструмент Confetti для сегментации посетителей и просмотра результатов по указанным сегментам.

Usertesting — сервис опросов со встроенной настройкой таргета.

Clicktale — мощный сервис для аналитики взаимодействия аудитории с сайтом, который записывает видео каждого визита с текстовой расшифровкой, содержащей логи, события, тайминг и ценность действия. Можно отслеживать статистику отдельных страниц программы, самостоятельно указывая параметры — число просмотров и отказов, доходность, число полученных заказов.
2. Оцените последовательность шагов текущей навигации по сайту: насколько быстро имеющиеся элементы позволяют попасть на нужную страницу? Как быстро можно совершить действие (купить, добавить в корзину, написать в поддержку)?

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

Рис. 1. Пример “хлебных крошек” на сайте интернет-магазина OZON

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

Рис. 2. Пример  XML-карты сайта диджитал-агентства Биплан

Рис.3. Пример карты в формате HTML с сайта “М.Видео”

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

Пример подобного использования:

Рис.4. Пример футера сайта диджитал-агентства Биплан

Фильтр (для интернет-магазина). Данный инструмент упрощает навигацию, помогает пользователю найти необходимый товар, повышает поведенческие характеристики и способен улучшить видимость сайта в поиске. Отдельно отметим, что конверсия сайтов с фасетными фильтрами увеличивается на 25%.
Поисковая строка. Обязательный элемент для сайта, содержащего большое количество информации.
Различные интерактивные элементы инфографики (анимация, викторины и калькуляторы, тесты, опросы, поп-апы, различные рекомендации). Они перенаправляют пользователя в нужный раздел и помогают добавить на сайт дополнительные функции, а также работают на персонализацию и повышают заинтересованность пользователей. Согласно исследованию Content Marketing Institute, 45% маркетологов оценивают интерактивные элементы как “крайне эффективные”. А 87% довольны тем, как они помогают получить данные для персонализации.

Рис.5. Пример интерактивного элемента (теста) с сайта диджитал-агентства “Веб.Центр”

Рис. 6. Пример интерактивного элемента с сайта онлайн-курсов “ACADEMY”

Быстрые ссылки в сниппете. Быстрые ссылки привлекают внимание пользователей, улучшают поведенческие характеристики сайта, повышают его привлекательность и CTR. Есть лишь один нюанс: в Яндексе и Google не существует кнопки, которая может установить быстрые ссылки. Навигация формируется самостоятельно для наиболее посещаемых разделов по алгоритмам поисковых систем. Поисковики сами решают, показывать быстрые ссылки в поиске или нет. При оценке они учитывают структуру, оптимизацию и интерес со стороны аудитории.
Фантазия веб-дизайнеров и маркетологов безгранична: постоянно появляются новые элементы. Хотя большинство из них модернизируют уже существующие.

3. Проведите работу над улучшением меню и фильтров.

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

4. Обдумайте методику осуществления переходов на нужные страницы со второстепенных страниц и разделов сайта.

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

5. Проведите оптимизацию навигации для мобильной версии сайта.

Отдельное внимание стоит уделить косвенным факторам — быстродействию и качеству верстки.

6. Подберите понятное визуальное оформление.

Например, это цвет и форма кнопок, их содержание и расположение.

7. Узнайте мнение пользователей с помощью опроса.

Пример подобного использования:

Рис.7. Пример сбора отзывов о ресурсе с сайта “Домклик”

Рис.8. Пример сбора отзывов о ресурсе с сайта “М.Видео”

8. Проводите периодические замеры.

Изучайте показатели вовлеченности и проводите тесты новых решений.

Мы дали вам инструкцию, как сделать сайт понятным для пользователя и эффективным для продвижения, а теперь дело за вами! Экспериментируйте, меняйтесь, наводите порядок на своем ресурсе, ну а если понадобится помощь — обращайтесь в Биплан!