Навигация на странице сайта

Что такое навигационная система сайта?

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

В интернет-магазинах и на порталах используется тот же принцип. Здесь есть ссылки, меню, кликабельные визуальные элементы навигации (кнопки, изображения, анкоры), опция поиска. Эта система должна быстро и легко приводить пользователя на нужную ему страницу. Если структура сложная и непонятная, проще вернуться в выдачу, чем бродить по запутанным виртуальным коридорам.

Какие бывают виды?

Виды навигации по сайту:

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

2. Глобальная. Это навигация на странице сайта, ссылки и элементы, доступные в каждом документе. Навигационная панель инструментов (utility navigation) относится к глобальной навигации. Панель включает ссылку на корзину, главную страницу, личный кабинет, поиск, форму подписки и регистрации, контактную форму, систему фильтрации Простая, логичная структура лучше сложной, запутанной и разветвленной. Сначала продумывают структуру, и только и сортировки товаров. На десктопе обычно используется горизонтальная ориентация панели, на мобильном — вертикальная.

3. Тематическая. Это линки на похожие страницы. На информационном проекте или в разделе — на страницы близкой тематики. В интернет-магазине — на похожие товары или дополнительные аксессуары.

4. Текстовая. Это анкорные или безанкорные ссылки, которые ведут из контента одной страницы на другие связанные по смыслу документы. Например, перелинковка может вести со страницы каталога на подробное описание товара.

5. Поисковая. Нужный запрос вводится в поисковую строку, и система находит релевантные документы.

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

7. Рекламная. Рекламные вертикальные и горизонтальные медийные или текстовые блоки со ссылкой.

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

Как навигация влияет на SEO?

Не только посетители, но и поисковики ценят удобство навигации по сайту. Структура сайта для SEO-продвижения не менее важна, чем качественный контент.

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

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

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

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

Как правильно выстроить навигацию сайта?

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

• Простая, логичная структура лучше сложной, запутанной и разветвленной. Сначала продумывают структуру, и только потом на ее основе проводится разработка навигации сайта.
• Обращайте внимание на уровень вложенности страниц. Если от главной до нужной страницы больше 3 кликов, то такая страница будет плохо ранжироваться. В идеале достаточно категорий, подкатегорий и страниц или записей внутри подкатегорий.
• Хлебные крошки — полезный и важный элемент, они помогают сориентироваться, где находится пользователь, и вернуться на нужный уровень в один клик.
• ЧПУ (человекопонятные урлы) любят и люди, и поисковые роботы. ЧПУ помогают понять, какой на странице контент, еще до того, как он успеет загрузиться.
• Если традиционного меню под шапкой недостаточно, используйте дополнительное вертикальное меню в сайдбаре.
• Используйте привычные виджеты, иконки и другие элементы, при необходимости дополняйте их текстом. Виджеты необычной формы (например, вертикальные кнопки вместо привычных горизонтальных) могут хорошо сработать, если останутся узнаваемыми.
• Фильтрация — еще один важный элемент. Фильтры помогают быстро найти в магазине нужный товар, это заместитель продавца-консультанта. Они сужают ассортимент, исключая из листинга те товары, которые не подходят пользователю. Например, по цвету, размеру, сезону. Фильтрацию можно использовать не только в магазинах, но и в онлайн-кинотеатрах, на информационных сайтах. Обычно фильтры располагают вертикально в левом или правом сайдбаре.
• Размещайте инструменты и кликабельные элементы в привычных местах. Например, поле поиска чаще всего находится в шапке справа, под логотипом помещают горизонтальное меню, под ним вертикальной цепочкой выводится выпадающее меню. Слишком оригинальный дизайн запутывает, затрудняет ориентацию. Лучше размещать элементы там, где пользователи ожидают их найти.
• Иконки, которые ведут на группы или профили в соцсетях, должны визуально отличаться от кнопок «Поделиться».
• Текстовые гиперссылки должны быть заметными, выделенными цветом. Ссылки в виде анкоров выглядят привлекательнее и воспринимаются лучше, чем URL.
• Пример удобной навигации можно подсмотреть у успешных конкурентов. Если конкурент находится в ТОП-1 выдачи, то, скорее всего, у него хорошая структура и удобная навигация.

Читайте на askusers

Решение остаться на лендинге или уйти обычно принимается при просмотре первого экрана. Мы составили чек-лист аудита первого экрана лендинга: правильно ли он оформлен и хочется ли читать контент.

Как создать кнопку, на которую хочется кликнуть и которая повышает конверсию? Какие кнопки лучше работают — вертикальные или горизонтальные? Читайте о выборе кнопки для упрощения usability.

Захватить внимание клиента и по шагам привести его к целевому действию — это искусство, которое подчиняется правилам. Читайте о методике онбординга и вовлечении клиента.

Обратите внимание на услугу по usability аудиту для интернет-магазина.