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

Какие виды навигации на сайте бывают и зачем она нужна интернет-магазину?

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

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

Основные виды навигации на сайте:

  • Глобальная (ссылки, которые доступны с любой страницы сайта);
  • Основная (линки с главной страницы или основного меню);
  • Тематическая (линки на страницы схожей тематики);
  • Текстовая (внутренняя перелинковка);
  • Языковая (для переключения между языковыми версиями сайта);
  • Рекламная (баннера и блоки).

С точки зрения дизайнерской разработки навигация сайта бывает:

  • Горизонтальной — вверху страницы;
  • Вертикальной — сайдбар, обычно слева;
  • «Гамбургер» (категории меню раскрываются при наведении на специальный значок в виде 3 горизонтальных полосок)

Любой из видов навигации можно реализовать следующими способами:

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

16 советов по оптимизации навигации на сайте

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

1. Продумайте структуру

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

Если все же используете такие элементы, то добавьте к ним пояснения. Например, кнопка «Назад» не всегда дает четкое понимание того, куда именно попадет пользователь, нажав на нее: в каталог или на шаг назад. Измените название кнопки на «Назад в каталог», чтобы внести ясность.

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

2. Располагайте основные элементы навигации в привычных и предсказуемых местах

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

Пример расположения меню в интернет-магазине Rozetka
Расположение личного кабинета и корзины в интернет-магазине детских товаров Antoshka

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

Пример навигации в интернет-магазине Intertop

3. Учитывайте поисковые запросы пользователей

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

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

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

Вбивая в строку поиска “Купить черные монокини”, пользователь попадает на страницу, где уже представлены товары, согласно этому запросу.

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

4. Закладывайте навигацию сайта с учетом масштабируемости бизнеса

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

Меню интернет-магазина косметики Mon Amie. В блоке достаточно места для размещения новых категорий при необходимости.

5. Экспериментируйте, но не забывайте про юзабилити

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

Пример графической навигации на сайте интернет-магазина Juliette

6. Правильно расставляйте акценты и выделяйте главный CTA

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

Пример оформления кнопок в интернет-магазине Intertop. Кнопка добавления товара в корзину более акцентная и заметная

7. Используйте полную навигацию на десктопе

Меню интернет-магазина в виде бургера для адаптивной версии сайта — верное решение, но не стоит использовать скрытую навигацию для десктопной версии. Согласно исследованию, скрытым меню на десктопе пользуются только в 27% случаев, а полную или комбинированную навигацию пользователи используют почти в два раза чаще: в 48% и 50% случаев соответственно.

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

Реализация каталога на сайте гипермаркета Rozetk

8. Выводите популярные категории товаров в основную навигацию

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

Пример навигации на сайте детского интернет-магазина Antoshka

9. Используйте мега-меню

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

Мега-меню на сайте интернет-магазина электроники Denika

10. Правильно реализуйте акции и распродажи на главной странице

Существуют 2 основных способа реализации:

  1. Вынесите на главную страницу интернет-магазина категорию «Акции/Распродажа», в которой будут собраны акционные товары.
  2. Направьте пользователей на страницу выдачи категории с активным фильтром «Акции/Распродажа», чтобы посетитель, убрав фильтр, мог просмотреть все товары категории.
На сайте Zlato.ua при наведении на пункт меню Sale, пользователь может выбрать интересующую его категорию и подкатегорию с акционными товарами

11. Используйте подкатегории

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

Реализация подкатегорий на сайте Dicentra

12. Выводите популярные фильтры

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

Пример выведения популярных фильтров в главном выпадающем меню интернет-магазина Denika

13. Покажите пользователям их местонахождения

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

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

Пример реализации «хлебных крошек» на сайте Intertop

14. Отображайте блоки с просмотренными товарами

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

Блок с ранее просмотренными товарами в интернет-магазине детской тематики Pampik

15. Предлагайте пользователю похожие товары в карточке

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

Блок с похожими товарами на сайте Pampik

16. Реализуйте меню в футере

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

Футер интернет-магазина Intertop

Итак, какая же должна быть удобная навигация на сайте?

Основные характеристики удобной навигации сайта интернет-магазина:

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

Поделиться постом в:

Также читайте

1
/
1

Больше кейсов от турум-бурум?

Ознакомьтесь с нашим портфолио из различных сфер бизнеса.

Смотреть портфолио

Оставьте заявку и наш UX−специалист свяжется с вами

Ваше сообщение было отправлено! Мы свяжемся с вами как можно скорее

Отправить ещё одну заявку
Doublecheck your form data please