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

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

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

Что вообще входит в навигацию

Навигация — это не только верхнее меню. Это вся система указателей, по которым человек перемещается:

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

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

Правило трёх кликов и его правильное понимание

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

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

Отсюда практический критерий: смотрите не на количество кликов, а на количество моментов, когда человек может засомневаться. Каждое такое место — точка потери.

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

Главное меню — самый заметный элемент, и с ним чаще всего перебарщивают.

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

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

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

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

Раздел, ради которого приходят, должен быть первым. Если восемьдесят процентов посетителей ищут услуги — «Услуги» стоит первым пунктом, а не после «О компании».

Чего в главном меню быть не должно

Пункты вроде «Новости», «Вакансии», «Партнёрам», «Полезная информация» занимают место, а нужны единицам. Их место — в подвале.

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

Одинаковые по смыслу пункты — «Услуги» и «Что мы делаем» — заставляют выбирать вслепую.

Подменю: как не запутать

Выпадающие списки — удобный инструмент, если соблюдать несколько условий.

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

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

Родительский пункт должен быть кликабельным. Классическая ошибка: «Услуги» только раскрывает список и никуда не ведёт. Человеку, который хочет посмотреть всё сразу, некуда идти. Нужна страница-раздел, где перечислены все услуги с короткими описаниями.

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

Навигация на телефоне

Больше половины посетителей смотрят сайт с телефона, и там навигация устроена принципиально иначе.

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

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

Пункты достаточно крупные для пальца. Мелкие ссылки в два ряда — гарантия ошибочных нажатий.

Телефон вынесен отдельно, помимо меню. Кликабельный номер или кнопка звонка должны быть видны без раскрытия меню — это самый частый способ обращения с мобильных.

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

Хлебные крошки: недооценённый элемент

Цепочка вида «Главная — Услуги — Монтаж — Монтаж в загородном доме» решает сразу несколько задач.

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

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

Она помогает поисковым системам понять структуру сайта.

Хлебные крошки нужны на всех внутренних страницах, кроме главной. Делать их следует настоящими ссылками, а не декоративным текстом.

Поиск по сайту

Для сайта с большим количеством страниц внутренний поиск — не роскошь. Часть людей вообще не пользуется меню: они сразу ищут.

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

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

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

Навигация внутри страницы

Отдельная тема — как человек перемещается по длинной странице.

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

Кнопка обращения должна встречаться несколько раз по ходу страницы, а не только в конце. Человек принимает решение в разный момент: кто-то после блока с ценами, кто-то после примеров работ.

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

Типичные ошибки, которые встречаются чаще всего

Меню, построенное по структуре компании. Разделы названы по отделам и внутренним направлениям. Посетитель не знает вашей оргструктуры.

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

Разное меню на разных страницах. Человек привыкает к расположению, и любое смещение сбивает.

Логотип не ведёт на главную. Мелочь, но её ждут все.

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

Слишком глубокая вложенность каталога. Пять уровней до товара — гарантия, что до него дойдут единицы.

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

Скрытое меню на компьютере. Мода прятать навигацию за значок на широких экранах стоит компаниям заметной части посетителей.

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

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

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

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

Проверка с телефона в неудобных условиях. Откройте сайт на телефоне на улице, при ярком свете, одной рукой. Многие проблемы становятся очевидны.

Карта нажатий в Яндекс.Метрике. Показывает, куда люди действительно нажимают. Часто выясняется, что активно нажимают на элементы, которые не являются ссылками, а нужные пункты меню игнорируют.

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

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

Порядок наведения порядка

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

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

Затем составьте список задач, с которыми приходят на сайт, — обычно их пять-семь. Для каждой задачи опишите идеальный путь: с какой страницы человек начинает и через что доходит до обращения.

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

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

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

И проверьте всё заново на живых людях — уже после переделки.

Подвал: недооценённая часть навигации

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

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

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

Хороший приём — разбить подвал на три-четыре колонки по смыслу и на телефоне свернуть каждую в раскрывающийся блок.

Итог

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

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

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