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

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

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

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

Почему навигация влияет на конверсию

Посетитель приходит на сайт с конкретной задачей: узнать цену, найти адрес, выбрать товар, понять условия доставки. Если путь к ответу неочевиден, человек тратит силы на поиск, а не на принятие решения. Часть посетителей сдаётся на полпути.

Плохая навигация бьёт по конверсии сразу несколькими способами:

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

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

Структура: от задач пользователя, а не от оргструктуры

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

Чтобы построить удобную структуру, мы проходим несколько шагов:

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

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

Главное меню: сколько пунктов и как их называть

Главное меню должно быть коротким. По нашему опыту, оптимально от пяти до семи пунктов. Больше — и глаз начинает теряться, меньше — и в меню не помещаются важные разделы.

Названия пунктов требуют особого внимания. Правила, которых мы придерживаемся:

• Понятные слова вместо креативных. «Услуги», «Цены», «Контакты» лучше, чем «Что мы умеем», «Инвестиции», «Будем на связи».
• Конкретика вместо обобщений. «Кухни на заказ» вместо «Продукция», если кухни — основное направление.
• Короткие формулировки. Одно–два слова на пункт; длинные названия ломают строку и плохо считываются.
• Без дублей по смыслу. Если есть пункты «О компании» и «О нас», человек не понимает разницу.
• Порядок по важности. Самые востребованные разделы — слева, контакты — традиционно в конце.

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

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

Мобильное меню

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

Что мы проверяем в мобильном меню:

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

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

Вспомогательные элементы навигации

Главное меню — не единственный способ перемещения по сайту. Есть ряд элементов, которые помогают ориентироваться и возвращаться назад.

• Хлебные крошки — цепочка ссылок вида «Главная — Каталог — Кухни — Угловые кухни». Показывают, где находится человек, и позволяют подняться на уровень выше одним кликом. Особенно полезны в каталогах и на сайтах с глубокой структурой.
• Поиск по сайту — обязателен для магазинов и сайтов с большим количеством материалов. Поиск должен понимать опечатки, синонимы и показывать подсказки при вводе.
• Перелинковка внутри контента — ссылки на связанные услуги, статьи, кейсы. Помогает человеку углубиться в тему, не возвращаясь в меню.
• Подвал сайта — место для полной карты разделов, контактов, документов. Многие посетители доходят до подвала именно в поисках того, что не нашли в меню.
• Логотип-ссылка на главную — стандарт, который все ожидают. Если логотип некликабелен, люди испытывают лёгкое раздражение.

Отдельно о поиске: мы советуем клиентам смотреть отчёт по поисковым запросам внутри сайта. Это прямой список того, что люди ищут и не могут найти через меню. Если какой-то запрос повторяется часто, стоит сделать для него заметный пункт или раздел.

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

В аудитах мы раз за разом встречаем одни и те же проблемы:

• Меню отличается на разных страницах, и человек не может восстановить картину сайта.
• Активный раздел никак не подсвечивается, непонятно, где сейчас находится посетитель.
• Важные страницы, например цены или доставка, доступны только из подвала.
• Ссылки в меню ведут на пустые разделы или страницы-заглушки «В разработке».
• Шапка с меню пропадает при прокрутке, и для перехода в другой раздел нужно возвращаться наверх длинной страницы.
• Пункты меню оформлены так, что не отличаются от обычного текста.

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

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

Для оценки существующей навигации мы используем комбинацию методов:

1. Аналитика переходов. Какие пункты меню нажимают чаще всего, а какие почти никогда. Непопулярные пункты — кандидаты на удаление или переименование.
2. Карты кликов. Показывают, куда нажимают люди, в том числе на некликабельные элементы, которые они принимают за ссылки.
3. Записи сессий. Видно, как человек мечется между разделами в поисках нужного.
4. Внутренний поиск. Запросы в поиске по сайту подсказывают, чего не хватает в навигации.
5. Тест с заданиями. Несколько человек выполняют конкретные задачи, а вы наблюдаете, как они ищут путь.

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

Выводы

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

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