Навигация интернет-магазина: разработка структуры, типичные ошибки и удачные примеры

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

Что такое навигация и какие функции она выполняет

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

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

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

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

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

Учитывая критерии качественного юзабилити, навигация должна давать четкие ответы на такие вопросы:

1. Текущее положение пользователя на сайте.
2. Ранее посещенные юзером страницы.
3. Перечень доступных для посетителя страниц.

Необходимое количество ссылок определяется задачами площадки, объемом текстового, графического контента. Грамотная структура вмещает столько элементов, сколько требуется для удобного и оперативного перемещения по сайту. Однако нельзя и перебарщивать, чрезмерно загромождая пространство. Оптимальный объем – не более 5-15% от общей площади ресурса.

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

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

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

Типы и виды навигации

Исходя из конкретно выполняемых функций, навигация подразделяется на следующие разновидности:

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

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

Чтобы выбранные элементы работали, нужно соответствующим образом их оформить и реализовать на сайте. Существует несколько форм реализации:

1. Текстовая. Ссылки, оформляемые в виде обычного текста.
2. Графическая. Функциональные гиперссылки, «замаскированные» в различные графические элементы – кнопки, изображения.
3. HTML. Выпадающие списки, компоненты, открывающиеся при наведении курсора на корневой раздел. Позволяют значительно сэкономить пространство.
4. Технологии Flash, Java. Интерактивные компоненты, реагирующие на нажатие или наведение курсора запрограммированным действием, эффектом.

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

Ключевые навигационные элементы для интернет-магазина

Главное меню

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

В главном меню должны присутствовать ссылки на основные страницы интернет-магазина:

• о компании;
• каталог товаров;
• доставка/оплата;
• возврат/гарантии;
• скидки/акции;
• отзывы;
• обратная связь;
• блог;
• контактная информация.

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

Дополнительное боковое меню

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

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

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

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

Футер

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

В пространстве подвала размещают следующие полезные компоненты:

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

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

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

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

Системные иконки-пиктограммы

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

URL-адрес

URL, выносимый в адресную строку, также является важным навигационным элементом ресурса. Он должен быть простым, понятным обычному пользователю, отражать не искаженную суть конкретной веб-страницы. Желательно прописывать адреса на латинице: https://site.ua/internet-magazin/glavnaya/.

Карта сайта

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

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

Типичные ошибки в навигации

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

1. Креативный стиль оформления. Излишняя оригинальность в навигации неуместна. Нестандартные стили и непривычное месторасположение вынуждают посетителей долго блуждать по площадке, что приводит к повышению процента отказов, снижает конверсию. Разумнее отказаться от экспериментов, перенаправив креативность в разработку основного контента.
2. Общие названия пунктов меню. Надписи, используемые в главном/боковом меню, должны носить строго информативный характер. Нельзя использовать общие названия, безликие фразы, абстрактные понятия, шаблонные выражения. Такой язык будет непонятен поисковым системам, целевой аудитории. Для каждого значка следует подбирать лаконичные надписи, точно характеризующие содержимое пункта.
3. Чрезмерное количество выпадающих списков. Выпадающие списки экономят пространство и позволяют вместить максимальное количество подразделов. На практике использовать их не совсем удобно: при скольжении курсора они часто «убегают». Перечни в несколько уровней еще более сложны в применении, часто выходят за границы монитора. В итоге – низкая посещаемость страниц. Внедрять подобное меню нужно осторожно и умеренно. Однако элемент вполне оправдывает себя на крупных площадках с многочисленными разделами.
4. Множество пунктов. Второстепенные пункты нередко отвлекают посетителей от авторитетных разделов. В навигации важна краткость: нужно попытаться ограничить число пунктов в разумных пределах. Переполненная ссылками система сложна для восприятия, плохо сказывается на SEO.
5. Непродуманное расположение важных категорий. В процессе исследований доказано, что начало и конец списка обладают эффектом первичности и новизны. На середине списков концентрация внимания снижается. Именно поэтому нежелательно помещать первостепенные разделы по центру. Лучшее место для них – крайний левый/правый угол.

Как оптимизировать навигацию

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

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

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

Примеры удачной навигационной системы

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

Rozetka

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

Zara

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

Whistles

Английский онлайн-магазин современной одежды – отличный пример минималистичной навигационной системы. Все разделы, включая поиск, вынесены в главное верхнее меню. Бокового меню нет. Площадка не загромождена лишними ссылками, все просто и понятно.

Выводы

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