Проектирование удобной навигации по сайту

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

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

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

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

Шапка сайта. Должна быть визуально отделена от других элементов страницы и содержать следующие элементы:

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

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

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

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

Список для каждого сайта индивидуален, но для легкого восприятия не рекомендуем размещать в меню более 5-7 ссылок. Если же их получается больше, над шапкой сайта можно выделить второе меню со ссылками на вспомогательные разделы – так называемое «сервисное» меню.

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

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

Форма поиска. Маст-хэв для больших сайтов, в особенности для интернет-магазинов и информационных порталов.

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

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

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

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

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

Хлебные крошки или локальная навигация. Показывают путь, пройдённый пользователем, или местонахождение страницы в иерархии сайта. Стоит добавить, если у вас многоуровневый сайт (вложенность более 2 уровней). Рекомендации по оформлению:

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

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

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

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

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

Фильтры и сортировка товаров. Необходимы в основном для интернет-магазинов.

Кнопка «Вверх». Помогает пользователям быстро вернуться в начало страницы. Располагать лучше в правом нижнем углу.

Но и это еще не все

Есть еще пара элементов, о которых хотелось бы также сказать в рамках данной темы.

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

Хороший пример: https://site.ru/company/portfolio/

Плохой пример: https://site.ru/site/28787343/

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

Заключение

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