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

Понятная навигация сайта — один из важных элементов. И это не просто слова: согласно исследованию, 38% людей смотрят на макет при первом посещении сайта. В этой статье — подробно про механизм навигации и какие инструменты вы можете использовать для своего интернет-магазина уже сейчас.

Что такое навигация?

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

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

Навигация — это «верхушка» айсберга информационной архитектуры сайта (IA). А «под водой» находится то, что не видно обычному посетителю: исследования, стратегия, менеджмент и организация. Получается, что информацию о сайте не видно в навигационном интерфейсе, но она является его основой. Это помогает пользователю понять, что сайт построен в соответствии с их потребностями и ожиданиями. Но все электронные таблицы и диаграммы остаются вне зоны видимости клиентов.

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

Посмотрим на примере одного из интернет-магазинов. Основное навигационное меню содержит пункт «Аксессуары». При наведении курсора появляется вспомогательное меню с несколькими разделами: «Женщинам»,«Мужчинам», «Детям». Это эффективно, потому что пользователь находит всё что нужно + меню не выглядит перегруженным. Беспроигрышный вариант.

Какие есть типы навигации по сайту?
1. Горизонтальная панель
Самый распространённый тип. Отображает основные страницы рядом друг с другом и размещает их в шапке веб-сайта. Обычно разделы везде примерно одинаковые: «Информация», «Продукты», «Цены» и «Контакты» — так привычнее для посетителей. 
Для примера — панель навигации маркетплейса технологичных товаров. Видим пункты «Акции», «Доставка», «Услуги» (с подменю), а также пункт «Бренды». Эти специально подобранные категории скорее всего предоставят пользователям быстрый доступ к тем страницам, которые они ищут, а не к стандартным опциям, которые возможно им и не нужны.

2. Выпадающее меню

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

А вот другой маркетплейс. Можно навести курсор на любую главную навигационную ссылку, и появится подробное выпадающее меню. Например, на скриншоте видно, что когда курсор наведён на «Автотовары», то появляется большой список.

3. Меню в нижнем колонтитуле

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

Например, у маркетплейса из примера №2 в нижнем колонтитуле около 30 ссылок. Большинство из них относится к одной из категорий, которая перечислена в главном навигационном меню. Хотя это обеспечивает лёгкий доступ к важным подстраницам, иногда это утомительно для пользователей. Поэтому действуйте по своему усмотрению.

Что должно быть на вашей навигационной панели?

Чтобы оптимизировать сайт и улучшить UX, рекомендуем использовать в навигации максимум 7 элементов. Про поиске самых важных разделов помните: первый приоритет — удобство клиентов.

Крутое упражнение — сортировка карточек. Оно помогает «проникнуть в сознание» клиентов вашего сайта и создать навигацию с их точки зрения. 
Для этого разложите перед испытуемыми стопку карточек-указателей, на каждой из которых нарисована важная страница вашего сайта. Затем попросите участника расположить карточки так, как он считает нужным. Обратите внимание на принципы, по которым группируют те или иные страницы. Спросите у участников, как бы они сами назвали каждую категорию. Это очень хороший вариант, чтобы понять, что для пользователей является интуитивно понятным.

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

Как можно назвать разделы меню?

Существуют разные типы нейминга.

1. Объектно-ориентированный

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

2. Ориентированный на действия

Задайте себе (или пользователям) вопрос: с какой целью клиенты приходят на сайт? Узнать какие-то факты или совершить действия? Посмотрим на блог ещё одного маркетплейса. Люди заходят на него не ради раздела «О компании», а чтобы начать продавать и доставлять свои товары.

3. На основе аудитории

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

Вместо вывода. Хорошо структурированное меню и логичные ссылки сокращают время поиска, делают сайт более приятным в использовании. Как итог — увеличение лояльности пользователей и количества лидов.