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

Сегодня мы поговорим о создании практичной навигационной структуры сайта в 2018 году.

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

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

Ключевые принципы практичной навигации

Потенциальные покупатели всегда должны понимать:

• как они оказались в том или ином разделе web-ресурса;
• где именно они находятся в данный момент;
• куда они могут отправиться дальше.

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

Разработка навигации: базовые составляющие

Приведенные ниже элементы должны:

1. находиться в пределах всех страниц портала;
2. создаваться на основе единого стилистического решения.

---

Шапка web-проекта

Ее следует визуально отсоединить от остальных компонентов web-документа. Шапка должна содержать в себе:

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

Важно! Не включайте в структуру шапки ссылочный материал на социальные сети.

---

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

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

Что должно в нем находиться:

• товарный каталог (сделайте так, чтобы при нажатии/наведении он показывался пользователям в развернутом виде);
• раздел «О компании»;
• раздел «Оплата и доставка» (добавьте его, если являетесь владельцем виртуальной торговой площадки);
• гарантийные обязательства и условия возврата товара (см. предыдущий пункт);
• образцы работ (страница «Портфолио»);
• акционные предложения и система бонусов, скидок;
• клиентские отзывы;
• информационный блог (при условии, что он регулярно пополняется свежими статьями (хотя бы 1 раз в неделю));
• ссылка, ведущая на страницу с контактами.

Рекомендации по разработке основного меню:

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

---

Внутренняя поисковая строка

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

• для того чтобы пользователи сразу смогли ее идентифицировать, отобразите не только значок поиска, но и поле для отправки текстовых запросов;
• оптимальное место для локализации поискового элемента – шапка web-площадки;
• при выводе результатов поиска обозначьте их количество;
• обеспечьте показ релевантных тому или иному запросу поисковых подсказок.

---

Подвал

Далеко не все владельцы сайтов уделяют внимание заполнению этого информационного блока. И зря. Разъяснения:

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

Что должно присутствовать в нижней секции ресурса?

1. Ссылки на все его структурные сегменты (просто скопируйте ссылки из заглавного меню + добавьте ссылки на второстепенные страницы; совет: расположите их в виде столбиков, указав при этом принадлежность к определенной логической категории).
2. Контакты. В подвале лучше поместить развернутый вариант контактных данных (то есть не только телефон, но и адрес, e-mail, реквизиты организации и т. д.).
3. Ссылочный материал на те социальные сети, которые активно вами используются в рамках расширения целевого потребительского сегмента.

---

Добавочные навигационные компоненты

К ним относятся:

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

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