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

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

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

Сложная и непонятная навигация влияет на продвижение пользователя по сайту. До 35% посетителей могут выходить из сайта/приложения из-за неудобной системы навигации.

Удобная система навигации сайта нужна для того, чтобы пользователи могли:

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

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

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

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

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

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

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

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

По нашему опыту, 70–80% пользователей заходят на сайт с мобильных устройств. В то же время именно мобайл часто оказывается наиболее проблемным: показатели вовлечённости и конверсии на 30–50% ниже, чем на рабочем столе, — в основном из-за того, что мобильному интерфейсу не уделяют должного внимания.

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

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

По нашим наблюдениям, 24% сайтов в нише одежды и обуви испытывают проблемы именно с иерархией навигации.

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

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

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

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

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

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

‍

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

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

Стоит учитывать поисковые запросы целевой аудитории, чтобы оптимизировать навигацию по средствам корректной и эффективной работы инструмента поиска на сайте. Ведь, по статистике, 3–6% пользователей переходят на страницу результатов поиска, и их конверсия в 3–4 раза выше, чем у тех, кто не пользуется поиском.

В то же время на многих сайтах либо вообще отсутствует страница с результатами поиска, либо пользователи вынуждены довольствоваться только попап-подсказками. Это при том, что поиск активно используется – что подтверждают и тепловые карты. По данным Baymard Institute, до 30% посетителей e-commerce сайтов используют поиск сразу после того, как попадают на сайт, а «поисковые» пользователи конвертируют в 2–4 раза лучше навигирующих через меню. Однако до сих пор многие магазины пренебрегают полноценной страницей поиска, упуская возможность влиять на конверсию через UX.

Чтобы улучшить опыт, важно предусмотреть запросы на разных языках, а также реализовать параллельное отображение категорий товаров. К примеру, если пользователь вводит запрос «Hot Wheels» — система должна найти товар и по варианту «Хот Уилс». Предлагайте подсказки и автоматическую коррекцию, если слово напечатано с ошибкой. Это упростит поиск и приблизит пользователя к покупке.

Также следует реализовать разумные подсказки (smart suggest), которые не просто повторяют запрос пользователя, а прогнозируют его намерения: предлагают брендовые уточнения, категории, фильтры или товары с высокой вероятностью соответствия. Это значительно сокращает путь к результату и увеличивает шансы конверсии.

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

‍

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

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

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

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

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

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

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

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

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

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

На мобильной версии сайта SmartMag:

• Основное вертикальное меню открывается как боковая панель, где представлены основные категории товаров с иконками — например, «Смартфоны и аксессуары», «Наушники и аудиотехника», «Товары для детей» и т.д. Это обеспечивает быструю ориентацию в структуре каталога.
• Второй уровень меню (например, в категории «Наушники и аудиотехника») открывается после клика на основную категорию. Здесь пользователь видит подкатегории как общие (например, «Наушники», «Аудиотехника»), так и брендовые (например, «Наушники Marshall», «Apple», «Razer» и т.п.).
• UI-элементы. В верхней части есть кнопка «Все категории» для возврата вспять, а также иконка закрытия меню. Интерфейс работает плавно и позволяет быстро углубиться в каталог, не утрачивая контекст.

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

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

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

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

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

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

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

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

Даже простое выделение основного CTA дает +5–20% к кликабельности. Для интернет-магазина с CTR = 6% это означает прирост до 6,3–7,2%, или +300…+1200 добавлений в корзину на 100000 просмотров — без затрат на дополнительный трафик.

‍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предлагайте альтернативные товары на странице продукта – это поможет пользователю быстрее найти подходящий вариант, если текущий не подошел. Такой подход снижает отказы на 15–20% и, в зависимости от ниши, может увеличить средний чек на 10–25%, стимулируя дополнительные или заменяемые покупки.

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

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

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

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

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

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

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