Дизайн и юзабилити
Карточка товара, которая продаёт
Карточка товара — место, где посетитель интернет-магазина принимает решение о покупке. Любое сомнение, на которое страница не ответила, может стоить продажи. Разбираем,…
Зачем уделять внимание навигации
Навигация — это система, которая помогает посетителю ответить на три вопроса: где я нахожусь, куда могу пойти и как вернуться обратно. Если хотя бы на один из них ответа нет, человек начинает тратить усилия на ориентирование вместо решения своей задачи. Многие в такой ситуации просто уходят.
От навигации зависят:
- конверсия — посетитель находит нужную услугу или товар и доходит до заявки;
- глубина просмотра — человек видит больше разделов и предложений;
- SEO — поисковые системы лучше понимают структуру сайта и распределяют вес между страницами;
- нагрузка на поддержку — меньше звонков с вопросом «где у вас найти...».
Плохую навигацию нельзя исправить красивым дизайном. Сначала продумывается структура, потом — визуальное оформление.
Основа навигации — структура сайта
Меню отражает информационную архитектуру сайта. Если структура запутанная, никакое меню не сделает её понятной.
Как построить структуру
- Соберите весь контент. Перечислите все страницы и типы информации, которые должны быть на сайте.
- Изучите задачи посетителей. Зачем приходят люди? Что ищут чаще всего? Данные Метрики, поисковые запросы, вопросы клиентов отделу продаж — лучшие источники.
- Сгруппируйте контент так, как думают клиенты. Не по внутренней структуре компании, а по логике посетителя. Клиенту не важно, какой отдел оказывает услугу.
- Проверьте группировку. Метод карточной сортировки: дайте нескольким людям карточки с названиями страниц и попросите разложить по группам. Совпадения покажут естественную логику.
- Учтите поисковый спрос. Структура для SEO-продвижения строится с учётом групп запросов: под каждую значимую группу — своя страница.
Глубина и ширина
Классический ориентир — до любой важной страницы можно добраться за три клика. Это не строгое правило: важнее, чтобы каждый клик был очевидным. Пять понятных шагов лучше трёх, на каждом из которых приходится гадать.
Слишком широкое меню (двадцать пунктов на верхнем уровне) перегружает. Слишком глубокое (пять уровней вложенности) прячет контент. Для большинства сайтов оптимально пять-семь пунктов верхнего уровня и два-три уровня вложенности.
Названия разделов
Название пункта меню должно однозначно сообщать, что за ним находится. Это кажется очевидным, но на практике регулярно встречаются проблемы.
- Внутренний жаргон. «Решения», «Продукты», «Направления» — непонятно, что внутри. Лучше конкретно: «Ремонт квартир», «Дизайн интерьера».
- Креативные названия. «Наша философия», «Мир возможностей» — посетитель не будет кликать наугад.
- Пересекающиеся разделы. «Услуги» и «Решения», «Статьи» и «Блог» — непонятно, в чём разница и где искать.
- Длинные названия. Пункт меню из шести слов плохо считывается.
Используйте привычные слова: «Каталог», «Услуги», «Цены», «Доставка и оплата», «Контакты», «О компании». Стандартные названия не скучны — они экономят посетителю время.
Совет: проверьте меню вопросом «где бы вы искали...». Попросите нескольких человек, не знакомых с сайтом, показать, в какой раздел они пошли бы за конкретной информацией. Если ответы расходятся, названия нужно уточнить.
Виды меню
Горизонтальное меню в шапке
Самый распространённый вариант для сайтов с небольшим числом разделов. Пункты видны сразу, не требуют дополнительных действий. Ограничение — ширина экрана: больше семи-восьми пунктов в одну строку не поместятся.
Выпадающее меню
При наведении или клике раскрывается список подразделов. Подходит для двух уровней. Важно, чтобы меню не закрывалось при малейшем смещении курсора, а на сенсорных экранах открывалось по нажатию.
Мега-меню
Широкая панель с подразделами, сгруппированными по колонкам, иногда с иконками и картинками. Хорошо работает для интернет-магазинов и крупных сайтов услуг. Позволяет сразу показать структуру каталога.
Боковое меню
Вертикальный список в левой колонке. Удобно для каталогов с большим числом категорий, документации, личных кабинетов. Позволяет вместить много пунктов и показать вложенность.
Меню в подвале
Дублирует основные разделы и добавляет второстепенные: реквизиты, политику конфиденциальности, вакансии. Посетители, долиставшие до конца страницы, часто ищут именно там.
Мобильная навигация
На смартфонах места мало, и навигация требует отдельного проектирования.
Меню-гамбургер — иконка из трёх полосок, раскрывающая меню. Стандартное решение, которое понимают почти все. Его недостаток — разделы скрыты, и посетитель может не догадаться о них. Поэтому самые важные действия выносите отдельно.
Нижняя панель навигации — четыре-пять ключевых пунктов внизу экрана, в зоне досягаемости большого пальца. Хорошо работает для интернет-магазинов и сервисов: каталог, поиск, корзина, профиль.
Липкая шапка — шапка, которая остаётся видимой при прокрутке. Удобно, если в ней телефон, кнопка заявки и меню. Но она не должна занимать много места: на маленьком экране каждый пиксель важен.
Правила мобильного меню:
- зона нажатия каждого пункта — не меньше сорока четырёх пикселей по высоте;
- вложенные уровни открываются по нажатию, с понятной кнопкой возврата;
- телефон и мессенджеры доступны в один тап;
- открытое меню легко закрыть.
Вспомогательные элементы навигации
Хлебные крошки. Цепочка ссылок вида «Главная → Каталог → Диваны → Угловые диваны» показывает, где находится посетитель, и позволяет одним кликом подняться на уровень выше. Обязательны для каталогов и сайтов с глубокой структурой. Дополнительно помогают поисковым системам понимать иерархию.
Поиск по сайту. Для интернет-магазинов и крупных сайтов — один из главных инструментов навигации. Поле поиска должно быть заметным, поиск — понимать опечатки, синонимы, артикулы, показывать подсказки при вводе. Страница без результатов должна предлагать альтернативы, а не тупик.
Фильтры. В каталогах фильтры по ключевым параметрам — цене, размеру, бренду, характеристикам — заменяют навигацию по подкатегориям и ускоряют выбор.
Перелинковка. Ссылки в тексте, блоки «Похожие услуги», «С этим товаром покупают», «Читайте также» ведут посетителя дальше по сайту и помогают SEO.
Логотип как ссылка на главную. Пользователи ожидают этого и будут кликать по логотипу, чтобы вернуться.
Индикация текущего раздела. Активный пункт меню визуально выделяется — так посетитель видит, где находится.
Типичные ошибки
- Структура по оргструктуре компании. Разделы соответствуют отделам, а не задачам клиентов.
- Слишком много пунктов. Двадцать равноправных разделов в шапке — глаз не может их охватить.
- Непонятные названия. Посетитель вынужден открывать каждый раздел, чтобы понять, что внутри.
- Разное меню на разных страницах. Меню меняется от страницы к странице, и посетитель теряет ориентацию.
- Важное спрятано. Цены, доставка, контакты — на четвёртом уровне вложенности.
- Выпадающее меню, которое закрывается. Курсор сдвинулся на несколько пикселей — и подменю исчезло.
- Нет пути назад. На мобильных из вложенного уровня меню нельзя вернуться на предыдущий.
- Пункты меню не ссылки. Клик по названию раздела ничего не делает, только раскрывает подменю, а страницы раздела нет.
- Поиск, который ничего не находит. Хуже, чем отсутствие поиска.
Как проверить навигацию
- Аналитика. В Яндекс Метрике посмотрите карту ссылок и отчёт по переходам: какие пункты меню используются, какие — нет. Проанализируйте внутренний поиск: частые запросы могут указывать на то, что нужный раздел трудно найти через меню.
- Тест первого клика. Дайте пользователям задание и посмотрите, куда они кликнут первым делом. Правильный первый клик сильно повышает шанс успешного выполнения задачи.
- Тестирование дерева. Участникам показывают только текстовую структуру разделов без дизайна и просят найти нужную информацию. Так проверяется сама архитектура.
- Вебвизор. Записи сессий покажут, как люди мечутся по меню в поисках нужного.
Мы в КомРА при разработке сайтов проектируем структуру и навигацию до создания дизайна: сначала карта сайта и прототипы, потом визуальное оформление. Это позволяет исправить логику, пока изменения ещё дёшевы.
Итог
Навигация — скелет сайта. Она строится на продуманной структуре, сгруппированной по логике клиента, а не компании. Названия разделов должны быть понятными и привычными, меню — компактным, с пятью-семью пунктами верхнего уровня, а мобильная навигация — спроектированной отдельно с учётом малых экранов.
Дополните меню хлебными крошками, удобным поиском, фильтрами и перелинковкой. Проверяйте навигацию на реальных пользователях и по данным аналитики. Когда посетителю не приходится думать, куда нажать, он быстрее находит нужное — и чаще становится клиентом.