Организация структуры навигации сайта

Доброго времени суток, дорогие читатели блога SEO Дилетанта. В продолжение темы внутренней и внешней структуры сайтов, в этой статье я хочу уделить внимание инструментам, с помощью которых мы можем, во-первых, создавать внешнюю структуру сайта для пользователя, во-вторых, корректировать ее исходя из реальной ситуации.
organizaciya-struktury-navigacii-sajta
Из двух предыдущих статей
Структура сайта — идеальная, для SEO, для людей
Линейная, древовидная, решетчатая структура сайта. О бесполезном с пользой
мы узнали, какой должна быть структура сайта, с помощью чего мы можем организовать ее в CMS. Но если до этого речь шла об организации внутренней структуры, то сегодня речь пойдет о внешнем ее проявлении для пользователя.

Структура тогда правильная, когда пользователь четко знает, где находится и как ему попасть туда, куда он хочет.

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

Cтруктура web-страницы.

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

  1. header (хедер, шапка),
  2. article (основная часть, контент),
  3. footer (футер, подвал)
  4. aside (сайдбар, боковая колонка) — самый необязательный блок.

Для наглядности я привела теги HTML5, т.к. они семантически показывают структуру web документа. В скобках я указала часто встречающиеся русские определения и произношения данных блоков.

Практически любой сайт имеет навигационный блок. И на большинстве сайтов для него определен раздел — сайдбар. Да, да, тот самый, который, вроде как, и необязательный, потому что мы знаем сайты, где отказались от использования сайдбара (например, Яндекс).

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

Во многом расположение сайдбара продиктовано тематикой сайта.

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

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

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

Сейчас новая тенденция — адаптивный дизайн, и удобство одинакового отображения контента как на мониторе компьютера, так и на телефоне, диктует расположение меню слева (пример Google+).

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

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

Если сайт ориентирован на поиск чего-либо, каталог товаров, электронная библиотека и пр., то сайдбар с навигационным меню располагается слева.

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

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

Я не ставлю целью данного поста рассмотреть разные виды навигации. Это тема для отдельной статьи.

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

Два наиболее распространенных вида структурной навигации на сайте — это Меню и Хлебные крошки.

Меню

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

<nav>меню</nav>

— блоки, содержащие ссылки на другие страницы и разделы сайта.

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

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

Если проанализировать современные сайты крупных организаций в любой сфере, то видно, что на большинстве из них используется не менее 2-3 меню.
В первую очередь я беру сайты, которые мы посещаем чаще всего, такие как Яндекс, Google, сайты социальных сетей, банков, крупные интернет-магазины.

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

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

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

  1. Мини меню, часто имеет графическое оформление. Может служить быстрым доступом к главным разделам сайта. Например: физическим лицам, юридическим лицам и т.п.
  2. Основное меню. Рубрикатор статей, навигатор по услугам организации, каталог товаров в интернет-магазине, каталог книг в электронной библиотеке.
  3. Меню «быстрый доступ». Часто встречается в интернет-магазинах — это меню с быстрым доступом к страницам одного из разделов. Например, раздел о Компании, информация для клиентов.
  4. Скрытое меню раздела. Меню, которое есть только внутри своего раздела. В каждом разделе свое собственное меню, нигде больше не повторяется.
Каждое такое меню должно сразу давать представление, какие типы документов или разделов оно объединяет. Где бы пользователь не находился, он должен легко ориентироваться в большом количестве информации и навигации.

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

Bread crumbs или хлебные крошки

Когда нет возможности правильно организовать URL’ы, а сайт имеет древовидную структуру, вложенность разделов и документов, тесть проблемы с организацией навигационного меню, то нужно обязательно использовать навигационную цепочку bread crumbs, «хлебные крошки».

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

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

Часто использование хлебных крошек связывают с перелинковкой на сайте, употребляют в контексте SEO, на самом же деле такая навигационная цепочка в первую очередь отображает структуру сайта, создает удобство посетителю. Google большое значение придает bread crumbs с точки зрения юзабилити.

Карта сайта

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

Стоит уточнить, что в веб строительстве есть два разных типа карты сайта. Карта сайта в формате .xml для поисковых систем и карта сайта в формате .html для посетителей сайта. Я говорю о карте сайта для посетителей.

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

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

Итак, мы рассмотрели несколько видов организации структуры на сайте. Все они в той или иной мере являются неотъемлемой частью современного web сайта. Какую бы структуру вы ни задумали, без навигации вам не обойтись.

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


Запись опубликована автором в рубрике Как создавать сайты с метками , .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *