Навигация на сайте: основные элементы и грамотное создание

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

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

Навигация на сайте: основные элементы и грамотное создание

Главное меню

Какой элемент сайта можно считать основным с точки зрения навигации? Естественно, главное меню. Оно встречает пользователя сразу же на первой странице, позволяя быстро сориентироваться, куда ему двигаться дальше и какой раздел выбирать. Традиционно меню размещают горизонтально непосредственно под/над шапкой сайта. Оно должно включать в себя ссылки на все основные страницы ресурса. Каких-то жестких ограничений в этом плане нет – все зависит от тематики сайта и т.д. К примеру, для интернет-магазина в главном меню в обязательном порядке обычно присутствует ссылка на:

  • каталог предлагаемых товаров;
  • особенности оплаты и доставки;
  • информацию о компании;
  • форму обратной связи.

Также могут быть включены ссылки на другие важные страницы, к примеру, блог, скидки и т.д. Оптимальное количество пунктов в главном меню – в пределах 5-7. Резонно добавлять подпункты, что положительно скажется на удобстве навигации. Для привлечения внимания посетителя к определенным страницам используется выделение с помощью шрифта или цвета. Таким образом, к примеру, можно оформить пункт «Акции».

Встроенный поиск

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

Подвал

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

Хлебные крошки

В известной сказке «Гензель и Гретель» герои отмечали хлебными крошками пройденный путь, чтобы отыскать дорогу домой. В веб-дизайне задача данного элемента идентична, ведь он является цепочкой ссылок, которые ведут на главную страницу с любой другой. Следовательно, куда бы не завело пользователя любопытство – он легко может вернуться к началу пути. Обычно хлебные крошки размещают в левом верхнем углу. Каждый пункт – кликабельная ссылка на соответствующую страницу, исключая самый нижний, так как его имя идентично текущей странице.

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

Кнопка возврата

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

Боковое меню

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

Карта сайта

Здесь сразу же напрашивается аналогия с книгами, ведь по факту карта сайта очень сильно напоминает типичное оглавление. Разве что вместо номера страницы сразу проставлена ссылка, да и листать ничего не нужно – достаточно один раз кликнуть и пользователь переносится на интересующую его страницу. Удобно и практично, что тут еще добавить?

Грамотное использование вышеуказанных элементов – залог организации эффективной навигации на сайте. Оценят это не только пользователи, а и поисковые системы, что в итоге позволит улучшить позиции ресурса в сравнении с конкурентами.

17 комментариев

Оставить комментарий
  1. Спасибо Адель!Очень полезный контент.

  2. Кратко, ёмко, по делу! супер!

  3. Да тут куча полезной информации. Замечательно, не нужно часами сидеть в интернете по крупицам выуживая нужное.

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

  5. Папковская Елена

    Хорошая статья! Сжато и доступно! Спасибо, Адель!

  6. Очень ценная информация!!!Спасибо,Что делитесь!!!

  7. Кроме того чему научился Вашем тренинге по сайтостроению, буду заглядывать и сюда очень много полезной информации.

  8. Спасибо, Адель. Ты очень хорошо и понятно все объясняешь. Отдельное спасибо Рамилю и Гульнаре из тех поддержки.
    Статья полезная, тк это основа сайта.

  9. Было огромное желание создать сайт, и работать в интернете, оно начало сбываться. Спасибо создателю сайта за его труд и доброту!

  10. Очень долго мечтал создать свой сайт, однако получались не доделанные. Наконец нашел ваши рекомендации и уже за 3 тренинга создал свой сайт! Спасибо, все четко, ясно , понято и главное быстро!

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

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