Навигация — это система указателей сайта: меню, ссылки, хлебные крошки, поиск, подвал. Когда она работает хорошо, её никто не замечает: человек просто находит то, что нужно. Когда плохо, посетитель раздражается, тратит лишние клики и в конце концов уходит к конкуренту, у которого всё понятно. Причём вы не получаете даже жалобы: люди не пишут «ваше меню неудобно», они молча закрывают страницу.
Беда в том, что владельцы сайтов хорошо знают собственный бизнес и потому не видят проблем. Для вас очевидно, что «Решения» это услуги, а «Экосистема» это набор продуктов. Новичок этого не понимает. Навигацию нужно проектировать глазами человека, который видит сайт впервые и торопится.
В этой статье разберём основные ошибки, расскажем, как их находить на своём сайте и какие приёмы помогают сделать структуру прозрачной на настольных компьютерах и на смартфонах.
Что делает навигацию хорошей
Удачная навигация отвечает на три вопроса, которые человек задаёт неосознанно: где я нахожусь, куда я могу пойти отсюда и как мне вернуться. Если на каждой странице ответы очевидны, сайт ощущается удобным. Кроме того, хорошая навигация следует нескольким принципам.
- Предсказуемость. Меню находится там, где человек ожидает его увидеть, и выглядит привычно.
- Понятные слова. Пункты называются так, как люди говорят о своих задачах.
- Краткость. Выбор не перегружает: пять–семь основных пунктов запоминаются легко.
- Последовательность. Меню одинаково работает на всех страницах и устройствах.
- Обратная связь. Текущий раздел подсвечен, ссылки выглядят как ссылки, кнопки как кнопки.
Ошибка 1. Перегруженное главное меню
Типичная картина: в верхней панели двенадцать пунктов, у каждого выпадающий список ещё из десяти строк. Человек видит стену слов и не может выбрать. Психологи называют это перегрузкой выбором: чем больше вариантов, тем сложнее решение и тем выше вероятность отказа.
Как исправить. Оставьте в главном меню только то, что соответствует основным задачам посетителей и бизнеса: услуги или каталог, примеры работ, о компании, контакты. Второстепенное перенесите в подвал или в подразделы. Если список услуг длинный, сгруппируйте его по смыслу, а не по хронологии появления. Для интернет-магазина важна отдельная логика каталога, о которой мы рассказывали в статье про проектирование каталога.
Ошибка 2. Непонятные и «умные» названия
«Наш подход», «Экосистема», «Лаборатория», «Миссия» — такие слова звучат красиво, но не говорят, что внутри. Человек вынужден гадать и нажимать наугад. Подобные названия подходят для внутренних презентаций, но не для указателей. Лучше всего работают простые существительные: «Услуги», «Цены», «Примеры работ», «Контакты», «Доставка и оплата».
Проверить названия просто: покажите меню человеку, не знакомому с вашей компанией, и спросите, что, по его мнению, находится за каждым пунктом. Если он ошибается или сомневается, переименуйте. Ещё лучше провести небольшой тест на сортировку карточек, где участники группируют разделы по смыслу и сами придумывают подписи.
Ошибка 3. Нет явного пути к главному действию
Бывает, что в меню есть всё, кроме того, ради чего сайт создан. Цены спрятаны, контакты в подвале, форма заявки на отдельной странице, к которой не ведёт ни одна ссылка. Посетитель, готовый обратиться, вынужден искать способ. Главное действие должно быть доступно с любой страницы: заметная кнопка в шапке, закреплённая панель на мобильных, контакты на виду. О том, как оформлять такие кнопки, мы писали в статье про кнопки и призывы к действию.
Ошибка 4. Лишний уровень вложенности
Чем глубже спрятан нужный раздел, тем меньше людей до него доходят. Если для заказа услуги нужно пройти четыре страницы, значительная часть посетителей остановится на второй. Практическое правило: любую важную страницу желательно открывать не более чем за три клика от главной. Это не догма, но хороший ориентир. Если структура всё равно глубокая, помогают быстрые ссылки на популярное, поиск и перекрёстные ссылки между связанными страницами. Эта же логика полезна и для поисковой оптимизации, ведь глубоко вложенные страницы хуже индексируются. Подробнее о связях страниц рассказано в материале про внутреннюю перелинковку.
Ошибка 5. Меню, которое исчезает или прячется
Выпадающие списки, открывающиеся при наведении, раздражают: достаточно чуть сместить курсор, и меню закрывается. На сенсорных экранах наведения не существует вовсе. Другая проблема — скрытие всего меню за значком-гамбургером даже на широких экранах. Когда пункты не видны, люди реже ими пользуются: открытое меню обычно даёт больше переходов, чем спрятанное.
Рекомендации. На компьютерах показывайте основные разделы открыто. Выпадающие списки делайте по клику либо с заметной задержкой закрытия, а область наведения достаточно просторной. На смартфонах гамбургер допустим, но подписывайте его словом «Меню» или дополняйте нижней панелью с основными действиями.
Ошибка 6. Слабая мобильная навигация
Большая часть посетителей приходит со смартфонов, а мелкие пункты, тесно расположенные ссылки и крошечные кнопки превращают навигацию в испытание. Рекомендуемый размер области нажатия — не меньше нескольких миллиметров по каждой стороне, с достаточными интервалами между элементами. Многоуровневые меню на малом экране стоит упрощать: показывать один уровень за раз с понятной кнопкой «Назад».
Проектировать навигацию лучше сразу с учётом экрана смартфона, а не сжимать компьютерную версию. Принципы подхода описаны в статье про mobile first. Для интернет-магазинов у мобильной навигации своя специфика, о ней подробно в материале про мобильную версию магазина.
Ошибка 7. Поиск, которого не видно или который не работает
Для сайтов с большим числом страниц или товаров поиск становится основным способом навигации. Если строка поиска спрятана или выглядит как иконка, которую никто не замечает, часть посетителей не найдёт нужное. Хуже, когда поиск есть, но выдаёт «ничего не найдено» на любую опечатку или синоним.
Что делать. Разместите поле поиска на видном месте и подпишите, что в нём искать. Добавьте подсказки по мере ввода, исправление опечаток, учёт синонимов. Страница «ничего не найдено» должна предлагать выход: популярные разделы, смежные запросы, форму связи. Отдельная тема — поиск и фильтры в магазине, она разобрана в материале про фильтры и поиск.
Ошибка 8. Нет ориентиров внутри страницы
Человек должен понимать, где находится. Если нет хлебных крошек, подсветки текущего раздела и понятных заголовков, он теряется в глубине сайта. Хлебные крошки особенно важны для каталогов и больших разделов: они показывают путь и позволяют вернуться на уровень выше. Для длинных страниц помогают якорные ссылки или краткое содержание вверху: человек сразу видит, что внутри, и переходит к нужной части.
Отдельно упомянем ссылки внутри текста. Они должны отличаться от обычных слов цветом и подчёркиванием, а текст ссылки — объяснять, что откроется. «Нажмите здесь» ничего не говорит. «Смотреть примеры работ» говорит всё. Это же важно для людей, пользующихся экранными дикторами. Вопросы доступности подробно рассмотрены в материале про доступность сайта.
Ошибка 9. Разная логика на разных страницах
Когда меню на главной выглядит одним образом, а на внутренних страницах другим, или одни и те же действия называются по-разному, человек теряет уверенность. Консистентность — один из главных признаков качественного интерфейса. Одинаковые элементы должны выглядеть и вести себя одинаково. Для крупных проектов это обеспечивается единой системой компонентов: подробнее о ней в материале про дизайн-систему.
Как проверить навигацию своего сайта
- Задачи для посетителя. Составьте пять реальных задач: найти цену, узнать условия доставки, связаться с компанией, посмотреть примеры, найти конкретный товар. Попросите нескольких людей решить их и засеките время и число кликов.
- Аналитика. Посмотрите карты кликов и записи сессий. Если люди нажимают на элементы, не являющиеся ссылками, или многократно возвращаются назад, это сигнал проблемы.
- Поисковые запросы на сайте. Что ищут посетители через внутренний поиск? Часто это то, что они не смогли найти через меню.
- Тест на сортировку карточек. Участники группируют разделы так, как им кажется логичным, и вы сравниваете результат с вашей структурой.
- Вопросы менеджеров. Что клиенты спрашивают по телефону и почте, хотя ответ есть на сайте? Скорее всего, они его не нашли.
Методы сбора такой информации описаны в материалах про юзабилити-тестирование и UX-исследование.
Принципы построения удачной структуры
Группируйте по задачам пользователя
Разделы должны отражать то, чем интересуется человек, а не то, как устроена компания. Если клиент приходит за ремонтом квартиры, ему нужны «Ремонт квартир», «Стоимость», «Примеры» и «Как мы работаем», а не отделы, подразделения и направления.
Не прячьте важное в подвал
Подвал хорош для справочной информации: реквизитов, политики конфиденциальности, дополнительных страниц. Но цены, контакты и основные услуги должны быть в основной навигации. Что именно размещать в нижней части страницы, подробно описано в материале про футер сайта.
Используйте приоритеты
Самые важные пункты ставьте в начале и в конце списка: их лучше запоминают. Главное действие выделяйте визуально. Остальные пункты делайте одинаково спокойными, чтобы не конкурировали за внимание.
Думайте о возвращении
Человек, нашедший нужный раздел, может захотеть вернуться: сравнить, перечитать, показать коллеге. Помогает постоянная шапка, понятная кнопка возврата на главную через логотип, сохранение прокрутки и фильтров при возвращении к списку.
Навигация и поисковая оптимизация
Структура сайта влияет не только на людей, но и на поисковые системы. Роботы переходят по ссылкам, и страницы, до которых трудно добраться, индексируются хуже. Понятные названия разделов с ключевыми словами помогают поисковикам определить тему, а логичная иерархия распределяет вес между страницами. При этом не стоит перегружать меню ключевыми словами в ущерб читаемости: пункт «Купить недорого качественные окна в Москве» хуже, чем «Окна». Структура закладывается на этапе проектирования, о чём рассказано в статье про SEO при разработке.
Пример исправления навигации
В практике студии Mevero нередко встречаются сайты компаний, где меню разрослось за годы: каждый новый отдел добавлял своё. На одном из таких проектов мы сократили главное меню с одиннадцати до шести пунктов, объединили четыре близких раздела в один с подразделами и вынесли на видное место кнопку «Рассчитать стоимость». Дополнительно переименовали пункты в язык клиентов. Количество обращений через форму выросло, а доля тех, кто уходил с главной без единого клика, заметно снизилась. Изменения затронули только структуру и тексты, дизайн остался прежним. Это хорошо показывает: иногда достаточно навести порядок, а не перерисовывать сайт.
Если ваша навигация давно не пересматривалась, проверьте её в рамках UX-аудита, а при комплексном обновлении подумайте о редизайне. Признаки того, что обновление назрело, описаны в статье про редизайн сайта.
Итог
Навигация — это фундамент пользовательского опыта. Она должна быть простой, предсказуемой и построенной вокруг задач посетителей. Сократите меню до главного, говорите понятными словами, дайте быстрый путь к целевому действию, позаботьтесь о мобильной версии и поиске, и сайт начнёт удерживать тех, кто раньше уходил. Проверяйте результаты на реальных людях и аналитике, а не на собственном ощущении удобства.
Хотите, чтобы специалисты посмотрели на ваш сайт свежим взглядом и подсказали, где теряются клиенты? Свяжитесь с нами: оценим навигацию и предложим конкретные шаги по улучшению.
