Навигация на сайте: как довести пользователя до покупки

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

Навигация сайта: виды и значение для интернет-магазина?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Позаботьтесь о юзабилити адаптивного дизайна сайта

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

1. Компактное меню: Имплементируйте составные или раскрывающиеся меню, которые занимают минимум места на экране, обеспечивая при этом доступ ко всем разделам сайта.
2. Понятные и стандартные иконки: Используйте понятные и привычные для пользователей иконки для представления пунктов меню. Это поможет посетителям быстро сориентироваться на сайте.
3. Структурированная иерархия: Обеспечьте четкую иерархию навигационных элементов, размещая их в логических группах и подгруппах. Это поможет пользователям быстро сориентироваться в сложной структуре сайта.
4. Сдержанность в количестве пунктов: Ограничьте количество пунктов меню для адаптивной версии сайта, исключая лишние или менее важные разделы, чтобы обеспечить удобство пользователей на маленьких экранах.
5. Достаточное расстояние между иконками интерфейса: Создавая адаптивный дизайн сайта, обеспечьте достаточное расстояние между интерактивными элементами и убедитесь, что все кнопки и ссылки достаточно большие, чтобы предотвратить случайные нажатия.

Ширина кончика пальца у среднестатистического человека примерно 1,6-2 см, а у большого пальца площадь нажима около 2,5 см. Поэтому исследование показывает, что минимальный физический размер сенсорной мишени должен составлять 1 см × 1 см.

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

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

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

6. Обеспечьте быструю загрузку элементов сайта

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

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

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

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

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

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

9. Обеспечьте достаточную контрастность для текста и фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20. Обращайте внимание на отзывы пользователей по взаимодействию с сайтом

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

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

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

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