Навигация на сайте: как ее правильно построить?

Навигация на сайте: как ее правильно построить?

Какие существуют виды навигации по сайту? Какой может быть структура навигации? Какие элементы навигации считаются основными? Как сделать удобную навигацию по сайту?
Навигация на сайте: как ее правильно построить?
Время чтения: 17 минут
Отправим материал вам на:

Из этой статьи вы узнаете:

  • Какие существуют виды навигации по сайту
  • Какой может быть структура навигации
  • Какие элементы навигации считаются основными
  • Как сделать удобную навигацию по сайту

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

Что такое навигация по сайту

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

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

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

Навигация по сайту

Итак, какой должна быть хорошая навигация на сайте? Вот ее основные характеристики:

  • Ясность. Необходимо, чтобы все составляющие меню или пользовательского интерфейса хорошо просматривались и были понятны любому на интуитивном уровне. В идеале на любую страницу или раздел на сайте пользователь должен сделать 3 клика.
  • Доступность на любой странице веб-сайта. На каждой странице должны присутствовать тщательно проработанные элементы навигации. Это дает посетителю возможность перейти из любого раздела туда, куда он хочет.
  • Продуманное визуальное оформление. Элементы навигации должны контрастировать с фоном и основным текстом, но не выбиваться из общего цветового решения веб-ресурса.
article_banner.png

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

Виды навигации сайта и типы ее реализации

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

  1. Языковая навигация. Применяется на площадках, посетители которых говорят на разных языках. Человеку, зашедшему на сайт, предлагается выбрать желаемый язык, на котором отобразится контент. Как правило, языковую навигацию используют на сайтах разных международных компаний. Благодаря ей можно не создавать несколько одинаковых веб-сайтов с контентом на разных языках.
  2. Основная. Ссылки на главные разделы ресурса, как правило, размещают в меню. Большинство веб-ресурсов применяют только ее, так как данный вид навигации подходит для небольших проектов с несколькими десятками страниц.
  3. Глобальная. Это ссылки, которые пользователь должен видеть с любой страницы. Благодаря этому обеспечивается удобная навигация на сайте. Пример — ссылки на главную страницу.
  4. Рекламная навигация. Здесь речь идет о ссылках, размещенных для привлечения посетителей на другие веб-ресурсы или страницы, где предлагается товар или услуга. Рекламную навигацию оформляют в виде как текста, так и графики.
  5. Рекламная навигация

  6. Тематическая. Это ссылки на разделы с близкой тематикой. Например, на похожую информацию на новостных площадках. Также это могут быть ссылки под одним материалом, по которым можно перейти к следующему или предыдущему. Яркий пример такой навигации — фотогалереи. Как правило, под каждой фотографией в них проставлены ссылки, ведущие к следующей или предыдущей.
  7. Навигация в контексте. По большей части ее используют для внутренней перелинковки страниц на веб-ресурсе с целью достижения более качественной SEO-оптимизации. Такая навигация выглядит как ссылка в тексте страницы, направляющая пользователя на другой сайт или в другой раздел.
  8. Указательная. Благодаря ей пользователь видит, в какой части сайта он сейчас находится. Хорошее решение для крупных площадок и веб-ресурсов с многочисленными разделами. Такая навигация дает посетителю возможность не потеряться в большом информационном потоке.
  9. Географическая. Используется в основном для крупных ресурсов или туристических сайтов, где важно наглядно показать геолокацию раздела, в котором находится посетитель. Географическую навигацию чаще всего применяют вместе со ссылками на полезные статьи о стране или достопримечательности.
  10. Поисковая. Позволяет ввести запрос в строку поиска, чтобы система нашла на веб-ресурсе все содержащие его материалы. Некоторые сайты выдают по запросу не только свои, но и результаты из поисковиков.

Подходящий вид навигации выбирают с учетом тематической направленности, позиционирования веб-ресурса, объема контента на нем. Иногда владельцы используют разные типы навигаций, если нужно. Но обычно отдают предпочтение 1-2 из вышеуказанных. При выборе навигации отталкиваются главным образом от того, будет ли пользователю удобно искать нужные данные.

Навигация на сайте может быть реализована в 4 формах:

  • Текстовая. Ссылки на разделы веб-ресурса или внешние площадки выглядят как простой текст.
  • Графическая. При таком оформлении навигация выглядит более привлекательно. Чтобы создать графическую навигацию, используют прорисованные элементы меню и кнопки.
  • Навигация по сайту HTML. Разнообразные формы позволяют скрыть обширное меню так, чтобы его было видно, только когда пользователь наводит курсор на корневую папку. Используя такую навигацию, вы экономите много места на странице.
  • Java- и flash-технологии. Такое меню можно сделать более интерактивным и при наведении курсора или нажатии на ссылку предусмотреть определенные эффекты. Навигацию этого вида реализовать сложнее всего, но при этом она выглядит эффектнее остальных.

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

Структура навигации сайта

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

Навигация — карта сайта может быть представлена в следующих формах:

  1. Самая элементарная — линейная.
  2. Линейная структура навигации

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

  3. Линейная реверсивная.
  4. Линейная реверсивная структура навигации

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

  5. Кольцевая.
  6. Кольцевая структура навигации

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

  7. Иерархическая.
  8. Иерархическая структура навигации

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

  9. Звездообразная.
  10. Звездообразная структура навигации

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

  11. Матричная.
  12. Матричная структура навигации

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

  13. Полносвязная.
  14. Полносвязная структура сайта

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

Основные элементы навигации сайта

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

1. Меню

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

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

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

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

Меню сайта

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

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

2. Логотип и прочие пометки главной страницы

Очень часто на логотип фирмы добавляют ссылку к главной странице веб-ресурса. Так, пользователь, нажимая на логотип, сразу переходит на главную. Интернет-аудитория уже привыкла к такому приему. Кроме того, на веб-сайтах часто используют иконку дома для перехода на главную страницу. Реже применяют раздел «Главная» в меню.

3. Раздел «О нас»

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

4. Иконки

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

Иконки

Кроме того, с помощью иконок обозначают категории товаров в интернет-магазинах. Нажимая на значок, пользователь оказывается в соответствующей категории или карточке товара. Бывает, что иконки размещают в меню веб-ресурса.

5. Текстовые ссылки

В навигации сайта присутствует еще один элемент — ссылки на страницы, которые встроены в текст.

Существуют некоторые правила оформления гиперссылок:

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

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

6. Футер

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

Футер

Оформляют данный элемент отдельно, и иногда его дизайн выбивается из общего стиля сайта.

7. «Хлебные крошки»

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

8. Призывы к действию

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

9. Оформление заказа / Корзина

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

10. Кнопка для возврата

При скроллинге появляется сложность: как клиенту скорее вернуться в начало страницы и не прокручивать ее по новой? Для устранения этой проблемы предусматривают кнопки возврата. Они выглядят как стрелки в положении «вверх».

Кнопка для возврата

Этот прием — идеальное решение для таких площадок, как информационные сайты, длинные лендинги, сайты с бесконечной лентой.

11. Страница 404

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

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

Как сделать удобную навигацию по сайту

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

Шапка

Ее необходимо зрительно отделить от других элементов страницы и включить туда:

  • Логотип. Рекомендуем разместить его вверху слева, поскольку это привычно для пользователей.
  • Наименование фирмы и небольшое описание деятельности — теглайн (если этой информации нет в логотипе). Также можете указать свое уникальное торговое предложение.
  • Регионы работы, доставки заказов. Не перечисляйте все субъекты. Эта информация должна быть лаконичной.
  • Контактные данные. При наличии нескольких офисов или магазинов в шапке сайта укажите важную информацию только для главного. Шапка не должна быть перегружена.
  • Возле номера телефона непременно добавьте график работы, чтобы клиенты знали, когда вам можно позвонить.
  • Ссылка на страницу корзины при наличии у вас интернет-магазина.
  • Форма заказа обратного звонка. Ее нужно указывать, только если ваши специалисты могут быстро обрабатывать заявки с нее. Необходима пользователям, которые в силу тех или иных причин сами не могут позвонить в компанию.

Форма заказа обратного звонка

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

Основное меню

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

  • Каталог товаров или услуг (выпадающий пункт меню).
  • Страница о компании.
  • Варианты оплаты и доставки (для сайтов электронной коммерции).
  • Гарантии и возврат (для сайтов электронной коммерции).
  • Портфолио (если есть чем похвастаться).
  • Акции и скидки.
  • Отзывы (для сайтов услуг).
  • Блог (при наличии).
  • Контактные данные.

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

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

Форма поиска

Есть смысл сразу ответить на часто задаваемый вопрос: нужно отразить одну кнопку или показать форму целиком? Рекомендуем разместить поле ввода и кнопку запуска, чтобы избавить посетителя от необходимости выполнять лишние действия. Иногда такие кнопки трудно заметить.

Форма поиска

Как визуально должна выглядеть форма поиска?

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

В каком месте следует расположить форму поиска? Прежде всего, она должна быть доступна со всех страниц. Чаще всего ее размещают в шапке. Интернет-аудитория привыкла, что, как правило, форма находится там.

Но можно разместить и в других областях веб-ресурса:

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

Снова отметим, что лучшим местом для размещения формы поиска является шапка, поскольку именно на нее посетитель обращает внимание в первую очередь.

Подвал сайта

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

Подвал должен включать в себя:

  • Ссылки на все разделы без исключений. Ваша задача — продублировать ссылки из основного меню и указать дополнительные разделы. Необходимо разместить их столбцами и разделить на логические подгруппы, чтобы проще было ориентироваться.
  • Контактные данные. Укажите их более подробно, чем в шапке: добавьте адрес и реквизиты фирмы.
  • Ссылки на социальные сети. Здесь они будут кстати.
  • Форму заказа обратного звонка (при условии, что вы разместили ее в шапке.)

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

Дополнительные навигационные элементы на сайте

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

  • Боковое меню.

Если какой-то из разделов делится на подразделы, их необходимо вывести в боковое меню.

Боковое меню

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

  • Хлебные крошки или локальная навигация.

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

Вот по каким правилам их нужно оформлять:

  1. Они должны располагаться на всех страницах веб-сайта, за исключением главной.
  2. Хлебные крошки должны быть расположены под главным меню, а также в одном месте на всех страницах.
  3. Пользоваться нужно некрупным шрифтом.
  4. Все элементы, за исключением последнего, должны ссылаться на соответствующие страницы веб-ресурса.
  5. Необходимо, чтобы последний элемент совпадал с наименованием страницы и был выделен (в идеале — жирным).

Не добавляйте на сайт ссылки, такие как «Вперед», «Назад», «Обратно в раздел» и т. д., только запутывающие посетителей. Хлебных крошек будет достаточно.

  • Фильтрация и сортировка продукции

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

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

Наличие товара

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

Ссылки в главной части веб-страницы

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

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

Вот еще 6 дополнительных рекомендаций:

  1. Делайте ссылки такого же размера, что и основной текст, чтобы пользователи лучше воспринимали контент.
  2. Откажитесь от дополнительных эффектов для ссылок при наведении курсора — с мобильных гаджетов они не видны.
  3. Не располагайте ссылки очень близко друг к другу. Пользуйтесь отступами и знаками препинания между ними. Другой вариант — измените формулировку основного текста.
  4. Не размещайте в тексте большое количество ссылок. Такую текстовую информацию труднее воспринимать. Кроме того, вы рискуете попасть под фильтры поисковиков.
  5. Ссылки на сторонние сайты необходимо открывать в новой вкладке, чтобы посетители не покидали ваш ресурс.
  6. Не используйте синий цвет или подчеркивание для выделения некликабельного текста, чтобы пользователи легко ориентировались.

URL-адрес веб-страницы

Адреса ссылок должны быть простыми и понятными рядовому посетителю. Весь адрес веб-страницы пишите на латинице.

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

О навигации на сайте WordPress

Создание навигации сайта на WordPress

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

  • Настройка меню

Настройте на панели администрирования сайта меню:

Внешний вид — Меню             

Введите все веб-страницы, которые хотите показать в меню. Расположите все элементы в необходимом для себя порядке и обязательно сохраните все отредактированное под именем, выбранным для вашего меню. К примеру, Меню 1.

Далее закрепите все это в настройках темы.

Внешний вид — Настроить — Навигация — Выбрать меню.

Выберите наше Меню 1 и сохраните настройки.

  • Постраничная навигация

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

WP-PageNavi

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

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

  • Вывод похожих публикаций

Можно установить еще один плагин — nRelate Related Content, который выводит после каждой публикации подобные статьи. Процесс установки плагина стандартный. После его активации необходимо провести еще несколько настроек. В меню панели администрирования появится отдельный блок — nRelate с двумя вкладками (Dashboard и Related Content). При первом обращении к плагину ему понадобится какое-то время для индексации всех страниц нашего веб-сайта.

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

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

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

Для реализации этого же функционала можно использовать и другие плагины, к примеру Contextual Related Posts.

  • Карта сайта

Чтобы посетителям было удобно, можно выстроить карту сайта. Для этого необходимо использовать плагин Dagon Design Sitemap Generator. Если не удается найти его через админку WordPress, скачайте с официального сайта Dagon Design.

Dagon Design

Установите и активируйте плагин, после чего выполните определенные настройки. Зайдите в меню Параметры — XML-Sitemap. Выберите все страницы, рубрики и статьи, которые вы хотели бы видеть на карте своего ресурса. И здесь же можете отказаться от всего, что не хотели бы показывать на карте сайта.

  • Кнопка «Наверх»

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

Простая кнопка без наворотов устанавливается в два счета. Для этого нужно открыть для редактирования файл footer.php темы WordPress, который, как мы знаем, отвечает за отображение в браузере нижней части страницы — футера.

Перед закрывающим тегом body необходимо поставить такой код:

<ahref="#" id="gotop">Наверх</a>

<script type="text/javascript">

$(function() {

$("#toTop").scrollToTop();

});

</script>

Редактировать файлы удобнее всего с помощью Notepad++. Так создается навигация сайта.

CSS-свойства для соответствующего идентификатора (id) gotop задаются, чтобы определить местоположение и вид значка «Наверх»:

#gotop {

position: fixed;

bottom: 60px;

margin-left: 1170px;

border: 2px solid #BBB9C0;

text-align: center;

color: #4F487E;

text-decoration: none;

font-size: 24px;

}

Необходимо скопировать и занести эти свойства в файл style.css темы WordPress (устройство темы WordPress). В итоге внизу справа должно появиться стандартное изображение кнопки «Наверх». Вы легко можете адаптировать ее к своему дизайну, изменив значение тех или иных свойств.

Кнопка Наверх

Эту простую картинку можно менять: делать рамку толще, выбрать другой тип и цвет (border), а также размер (font-size) и цвет (color) шрифта надписи «Наверх». Чтобы максимально адаптировать изображение к своему дизайну, попробуйте применить разные стили.

По каким параметрам проводится анализ навигации сайта

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

Навигацию всегда анализируют по следующим параметрам:

  1. Глубина
  2. Нельзя значительно удалять вложенные веб-страницы от главной. Лучше всего, если посетитель всего через 3 клика попадает на самые удаленные части ресурса. Если это условие не выполнено, значит, есть над чем работать.

  3. Flash и Java-Script
  4. Эти технологии в принципе не нужно использовать в навигации, так как роботы их не очень любят. Но если вы все же решили, что блоки должны быть динамичными, то обязательно оптимизируйте их под поисковые системы.

  5. Видимые переходы
  6. Пользователи не должны напрягаться, стараясь отыскать ссылки для перехода. Анализируя навигацию, удостоверьтесь, что ссылки для внутренних переходов выделены ярким шрифтом и хорошо заметны. То же самое относится к контекстным ссылкам, размещенным в контенте.

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

    Карта сайта

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

  11. Распознаваемость
  12. Смотря на навигацию сайта, пользователь должен уже приблизительно понимать общую структуру площади, а также представлять, куда ведет та или иная ссылка. Иными словами, необходимо использовать понятные и относительно короткие описания. Не нужно креативности, если вы знаете какие-либо стандартные значения. Например, прайс лучше обозначить ссылкой «Цены». К таким вариантам пользователи привыкли, следовательно, заметят их намного быстрее. И, конечно же, необходимо применять понятные шрифты средних размеров, чтобы люди воспринимали их положительно.

Основные ошибки в навигации сайта

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

Какие же основные ошибки пользователи допускают, разрабатывая навигацию?

Ошибка № 1. Оригинальный стиль

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

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

Ошибка № 2. Универсальные названия пунктов меню

Очень важно, чтобы названия меню навигации были информативны. Предположим, пункты меню «Товары» или «О нас» используют все компании, и такие надписи несут в себе мало информации для пользователя. Еще пример: «Кто мы». Эта фраза тоже ни о чем не говорит.

Негативные эмоции аудитории

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

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

Ошибка № 3. Выпадающее меню

Этот навигационный элемент сейчас очень распространен. Но использовать его нужно очень осторожно по двум причинам.

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

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

Ошибка № 4. Чрезмерное количество пунктов меню

Иногда даже 7 пунктов — перебор. Пусть их будет меньше — не более 5. Чем меньше вторых по значимости пунктов, тем реже посетители станут обращать на них внимание и тем больше будут смотреть на важные.

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

Ошибка № 5. Нелогичное размещение пункта меню для оформления заказа

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

article_banner.png

навигация на сайтенавигация карта сайтасистема навигации сайтасоздание навигации сайтанавигация веб-сайтанавигация по сайту htmlнавигация по сайту главнаянавигация сайта cssразработка навигации сайтанавигация на сайте примеры

Статья опубликована:

Рейтинг 5 из 5. Проголосовало: 1
2019-08-29 16:57:16
Спасибо за статью, понял, что навигация на моем сайте совсем плохая

Читайте также

Генератор Продаж
Опубликовано
Генератор Продаж
г. Рязань, Куйбышевское шоссе, 25
Телефон: 8 (800) 775-43-06