Выстраиваем систему навигации сайта: правила и лайфхаки
Навигация сайта — это целая система вашего web-ресурса, которая позволяет пользователю быстро находить необходимую информацию или же совершать действия (добавлять товары в корзину и покупать их). Для того чтобы не заблудиться в “дебрях” сайта, навигация предлагает различные элементы и способы перехода между страницами, сопровождая пользователя к нужному ему разделу или опции на сайте. Помните, чем "больше" сайт и сложнее ниша — тем лучше надо прорабатывать вашу “карту территории”.
В этой статье мы поможем понять, когда вашему ресурсу необходимы улучшения, расскажем про основные принципы навигации и дадим рекомендации по ее модернизации.
В этой статье мы поможем понять, когда вашему ресурсу необходимы улучшения, расскажем про основные принципы навигации и дадим рекомендации по ее модернизации.
Как определить, что пора улучшить навигацию на сайте?
Мы обозначили 3 основных признака, которые дают понять, что навигация вашего сайта нуждается в модернизации:
1
Минимальное количество продаж и ухудшение поведенческих показателей при стагнации прочих факторов (спрос, трафик, позиции).
2
Слишком большой процент отказов (30+% в Яндексе или 60+% в Google).
3
Низкое или уменьшающееся время нахождения на сайте (необходимо сравнивать данные в динамике внутри сайта).
Вообще мы рекомендуем заниматься улучшением навигации постоянно. Тем самым вы не только заботитесь о пользователях своего ресурса, но и работаете с поведенческими факторами, которые являются важным фактором ранжирования.
Какие шаги следует предпринять для улучшения навигации сайта?
1. Проведите анализ поведения пользователей на сайте как минимум с помощью базовых инструментов.
Мы рекомендуем в первую очередь базовые системы аналитики Яндекс.Метрика и Google Analytics, которые собирают данные с вашего сайта (при условии установки скрипта) в три этапа: сбор данных, обработка и формирование отчета, предоставление отчета.
Что это дает? При помощи инструментов сервисов вы получаете:
Мы рекомендуем в первую очередь базовые системы аналитики Яндекс.Метрика и Google Analytics, которые собирают данные с вашего сайта (при условии установки скрипта) в три этапа: сбор данных, обработка и формирование отчета, предоставление отчета.
Что это дает? При помощи инструментов сервисов вы получаете:
Оценку воронки продаж или пользовательского пути.
Информацию о пользователях: какие страницы они посетили, через какой браузер просматривали ресурс, из какой страны (города), как попали на сайт (через поисковую систему, с контекстной рекламы, другого сайта и т.п.).
Чем отличаются сервисы? Прежде всего некоторыми инструментами аналитики. Например, у Яндекс.Метрики есть вебвизор, карта кликов и карта скроллинга, а в арсенале Google Analytics — режим реального времени (к конкуренту данные попадают примерно за 15 минут), многоканальные конверсии, вычисляемые параметры и А/Б-тесты.
Мы рекомендуем не останавливаться на ресурсах Яндекса и Google, поэтому подготовили список дополнительные сервисов, которые помогут проанализировать ваш сайт с учетом разных запросов.
AskUsers — сервис, позволяющий проводить юзабилити-тестирование сайтов, привлекая к анализу услуги реальных пользователей (ЦА).
Hotjar или его аналог Userpoint — это инструменты с функционалом вебвизора, воронки продаж, опросника.
Crazyegg — популярный зарубежный сайт, который формирует тепловые карты. Может создавать карты кликов и скроллинга. Встроен инструмент Confetti для сегментации посетителей и просмотра результатов по указанным сегментам.
Usertesting — сервис опросов со встроенной настройкой таргета.
Clicktale — мощный сервис для аналитики взаимодействия аудитории с сайтом, который записывает видео каждого визита с текстовой расшифровкой, содержащей логи, события, тайминг и ценность действия. Можно отслеживать статистику отдельных страниц программы, самостоятельно указывая параметры — число просмотров и отказов, доходность, число полученных заказов.
Мы рекомендуем не останавливаться на ресурсах Яндекса и 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. Узнайте мнение пользователей с помощью опроса.
Пример подобного использования:
3. Проведите работу над улучшением меню и фильтров.
Все основные разделы должны иметь доступное расположение, а ссылки на них — быть понятными на интуитивном уровне.
4. Обдумайте методику осуществления переходов на нужные страницы со второстепенных страниц и разделов сайта.
Например, если вашей главной целью являются продажи, то привлекаемый трафик должен вести пользователя к продукту, а не на информационные страницы блога.
5. Проведите оптимизацию навигации для мобильной версии сайта.
Отдельное внимание стоит уделить косвенным факторам — быстродействию и качеству верстки.
6. Подберите понятное визуальное оформление.
Например, это цвет и форма кнопок, их содержание и расположение.
7. Узнайте мнение пользователей с помощью опроса.
Пример подобного использования:
Рис.7. Пример сбора отзывов о ресурсе с сайта “Домклик”
Рис.8. Пример сбора отзывов о ресурсе с сайта “М.Видео”
8. Проводите периодические замеры.
Изучайте показатели вовлеченности и проводите тесты новых решений.
Мы дали вам инструкцию, как сделать сайт понятным для пользователя и эффективным для продвижения, а теперь дело за вами! Экспериментируйте, меняйтесь, наводите порядок на своем ресурсе, ну а если понадобится помощь — обращайтесь в Биплан!
Изучайте показатели вовлеченности и проводите тесты новых решений.
Мы дали вам инструкцию, как сделать сайт понятным для пользователя и эффективным для продвижения, а теперь дело за вами! Экспериментируйте, меняйтесь, наводите порядок на своем ресурсе, ну а если понадобится помощь — обращайтесь в Биплан!