WebSEO

Веб студия создания сайтов и незаменимый помощник при самостоятельном создании сайта с нуля.

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

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

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

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

Рассмотрим основные элементы навигации сайта, к которым относятся:

  1. Логотип - уже для всех привычно, что, клик по логотипу ведет на главную страницу или прокручивает её в самое начало (если это одностраничный ресурс).
  2. Меню - самая важная часть навигации. На сайтах бывает сразу несколько типов меню:
    • Главное - находится в верхней части и не меняется при переходе с одной странички на другую;
    • Дополнительное - располагается в правом или левом блоке и меняет своё содержание в зависимости от текущего раздела сайта;
    • Нижнее - стоит в самом низу (в подвале). Может быть краткой версией основного меню, дублировать его полностью или быть его расширенным вариантом.
    Кроме назначения и места расположения, меню ещё бывает разных видов:
    • Горизонтальное - когда пункты меню располагаются в одну строку;
    • Вертикальное - пункты меню находятся друг под другом.
    Но и это ещё не всё. Меню может быть выпадающим, выезжающим, раскрывающимся, гармошкой и комбинировать в себе все эти методы одновременно.
  3. HTML карта - самостоятельная страница, на которой можно посмотреть всю структуру сайта и перейти сразу к нужному пункту. Пример карты этого сайта.
  4. Форма поиска - помогает найти нужную информацию по слову или фразе.
  5. Подсказки и информационные блоки - обычно располагаются после основной информации и предлагают пользователю прочесть другую полезную информацию:
    • интересное;
    • похожие товары;
    • вместе с этим искали;
    • материалы по теме;
    • и прочее.
  6. "Хлебные крошки" - это строка навигации на сайте, по которой пользователь может проследить свой путь. Располагается вверху контента.
    Пример хлебных крошек
  7. Пагинация - это нумерация страниц, с помощью которых посетитель может передвигаться по сайту. Например:
    Пример пагинации Google

Зачем нужна навигация?

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

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

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

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

Как сделать навигацию на сайте?

  1. Начните работу над навигацией с создания структуры сайта.
  2. Обдумайте все этапы общения с пользователем, как при очном общении с клиентом, пример которого мы приводили выше.
  3. Составьте список этих этапов в виде отдельных страничек сайта.
  4. Обдумайте навигацию для каждой такой страницы.
  5. Попытайтесь мыслить как пользователь:
    • Ему явно что-то нужно, если он зашёл на эту страничку.
    • Готов ли он совершить основное действие.
    • Что ему может понадобиться для этого.
  6. Какой путь и какие действия он уже проделал, чтобы попасть на эту страницу:
    • Увидел рекламу в социальных сетях.
    • Специально искал эту информацию в поиске.
    • Перешёл с другой страницы вашего сайта.
  7. Подумайте, что понадобится пользователю при чтении странички, а так же после ее прочтения:
    • Узнать значение непонятного слова в вашей статье.
    • Выяснить дополнительную информацию по теме.
    • Изучить другие варианты или условия.
    • Хочет почитать отзывы или задать вопрос.
    • Готов перейти к следующему этапу.
  8. Нужно не только учитывать эмоции клиента, но и подталкивать его к нужному вам действию (напишите комментарий, подпишитесь, позвоните и т.д.).
  9. Зарисуйте элементы навигации для каждого этапа на бумаге или используя программы для создания прототипа сайта.
  10. Учтите расположение элементов навигации при просмотре сайта с компьютера и с мобильного устройства.
  11. Ещё раз убедитесь, что все элементы навигации располагаются в нужном месте, заметны, но не мешаются, и в любой момент можно вернуться на шаг назад.

Заключение

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

Остались вопросы? Мы поможем! Всего за 15000 тенге мы разработаем такую навигацию для вашего сайта, что все ваши посетители придут в восторг!

Заказать

Поделиться идеей
Есть идеи на счёт новых статей? Хотите выяснить нюансы или предложить свои услуги? По любым вопросам относительно этого раздела нашего сайта, пишите на supportwebseokz
Написать
Сервис обратного звонка RedConnect