Привет, я Максим, веб-разработчик. Мобильная навигация — одна из тех вещей, которые пользователь замечает только когда она плохая. Хорошее мобильное меню невидимо: человек находит нужный раздел за секунду и не задумывается о процессе. Плохое — заставляет тыкать в мелкие элементы, искать спрятанные разделы, раздражаться и уходить. С учётом того, что больше 70% трафика коммерческих сайтов в России приходится на мобильные устройства, проектирование навигации — не второстепенная задача, а одна из ключевых. Разбираю основные паттерны, их плюсы и минусы, правила реализации и типичные ошибки.
Гамбургер-меню: проверенный стандарт со своими ограничениями
Три горизонтальные полоски (☰) — узнаваемый во всём мире паттерн. Нажимаете — раскрывается панель навигации со списком разделов. Основное преимущество: максимальная экономия места на экране. Все пункты меню убраны за одну компактную кнопку, и весь экран отдан контенту.
Но у гамбургера есть существенный недостаток, подтверждённый многочисленными исследованиями и моим собственным опытом: скрытая навигация хуже видимой. Пользователи значительно реже переходят по пунктам, которые не видят. Если раздел «Акции» спрятан в гамбургер-меню — большинство посетителей его просто не откроют, потому что не знают о его существовании. На одном из моих проектов (интернет-магазин электроники) после переноса ключевых разделов из гамбургера в видимый tab bar количество переходов в раздел «Корзина» выросло на 25%, а в «Акции» — на 40%.
Тем не менее гамбургер остаётся оптимальным решением для сайтов с большим количеством разделов — десять и более пунктов меню. Корпоративные порталы, сайты с развёрнутой структурой услуг, каталоги с десятками категорий — здесь гамбургер незаменим, потому что вместить всё в видимую навигацию физически невозможно. Для сайтов с четырьмя-шестью разделами есть решения лучше.
Tab bar: видимая навигация, которая повышает конверсию
Полоска с четырьмя-пятью иконками в нижней части экрана — паттерн, пришедший из мобильных приложений. Главная, Каталог, Корзина, Профиль — всегда на виду, всегда доступны одним тапом. Пользователю не нужно открывать меню, чтобы перейти к нужному разделу — он просто нажимает иконку внизу экрана.
Я всё чаще использую tab bar вместо гамбургера для интернет-магазинов и сервисных сайтов. Конверсия выше по двум причинам. Первая — кнопка «Корзина» постоянно видна и напоминает о себе, счётчик товаров обновляется в реальном времени. Вторая — навигация находится в нижней части экрана, в зоне естественного охвата большого пальца. Это называется «зона комфорта» — область экрана, до которой пользователь легко дотягивается одной рукой.
Ограничения tab bar: максимум пять пунктов, иначе иконки становятся слишком мелкими. Каждый пункт должен быть понятен по иконке без подписи (хотя подписи я всё равно добавляю — не все пользователи интуитивно понимают иконки). И tab bar не подходит для сайтов со сложной структурой — десять категорий в пять кнопок не уместить.
Комбинированный подход: tab bar плюс гамбургер
На практике часто работает гибридное решение. Внизу экрана — tab bar с четырьмя-пятью ключевыми разделами (Главная, Каталог, Корзина, Избранное, Профиль). В шапке — гамбургер-кнопка с расширенным меню: все категории, информационные страницы, контакты, блог. Так ключевая навигация всегда на виду, а полная структура сайта доступна в один клик.
Этот подход я использовал на нескольких крупных проектах, и он показал лучшие результаты по глубине просмотра и конверсии по сравнению с чистым гамбургером.
Как реализовать гамбургер-меню правильно
Если вы используете гамбургер — важно сделать его максимально удобным.
Панель открывается слева или справа — принципиальной разницы нет, но важна последовательность. Я предпочитаю справа: для правшей (а их большинство) кнопка ближе к большому пальцу. Кроме того, большинство мобильных приложений закрепило привычку к правой стороне.
Выбор между боковой и полноэкранной панелью зависит от объёма навигации. Для сайтов с небольшим количеством пунктов — боковая панель, занимающая 70–80% ширины экрана. Для сложной навигации с подкатегориями — полноэкранная, чтобы хватило места для всех уровней.
Анимация — обязательна, но деликатна. Плавное выезжание за 200–300 миллисекунд. Не мгновенное появление (дезориентирует — пользователь не понимает, что произошло) и не медленная анимация за секунду (раздражает, особенно при повторных использованиях).
Кнопка закрытия — крестик, расположенный в том же месте, где была кнопка гамбургера. Плюс закрытие по тапу за пределами панели меню и по свайпу (вправо для правой панели, влево для левой). Три способа закрытия — потому что разные пользователи ожидают разное поведение.
Если есть подкатегории — реализуйте аккордеон внутри меню. Пользователь тапает на «Каталог», раскрывается список подкатегорий прямо в панели. Не уводите на отдельную страницу или отдельный экран подменю — человек теряет контекст и может не найти дорогу обратно. Аккордеон сохраняет ментальную модель «я нахожусь в меню и раскрываю его ветки».
Поиск: важнее навигации
Для интернет-магазинов и крупных сайтов поиск зачастую важнее навигации. Исследования показывают, что пользователи, которые пользуются поиском, конвертируются в покупки в два-три раза чаще, чем те, кто бродит по каталогу. Потому что поиском пользуется человек, который уже знает, что хочет.
Я размещаю строку поиска в верхней части мобильного экрана — видимую всегда, без необходимости открывать меню. На некоторых проектах делаю её полноценным полем ввода, на других — иконку лупы, при тапе на которую раскрывается поле на весь экран. Второй вариант экономит место, но добавляет лишний шаг. Для магазинов с широким ассортиментом я предпочитаю видимое поле поиска — оно мотивирует пользователя искать.
Распространённые ошибки в мобильном меню
Меню перекрывает важный контент без затемнения фона. При открытом меню пользователь случайно тапает по элементам за панелью — добавляет товар в корзину, переходит на другую страницу. Решение: затемнённый оверлей (backdrop) за панелью меню, который блокирует клики по фоновому контенту.
Слишком мелкие пункты меню. Минимальная высота тапабельного элемента — 44 пикселя. С отступами между пунктами — чтобы палец не попадал на соседний пункт. На мобильных палец — основной инструмент навигации, и если пользователь промахивается — он раздражается.
Отсутствие индикации текущей страницы. Пользователь открывает меню и не видит, на какой странице он находится. Выделите текущий пункт цветом, жирным шрифтом или подчёркиванием — это базовый элемент навигационного UX.
Фиксированная шапка, съедающая экран. Шапка с логотипом, поиском и гамбургером может занимать 80–100 пикселей. На маленьких экранах (iPhone SE, бюджетные Android) это ощутимая часть видимой области. Решение: шапка скрывается при скролле вниз и появляется при скролле вверх. Это стандартный паттерн, который экономит пространство.
Как протестировать мобильную навигацию
Мой совет: не полагайтесь только на эмулятор в браузере. Откройте сайт на реальном смартфоне — причём не на флагмане, а на среднебюджетном Android-устройстве с небольшим экраном. Попросите трёх-пять человек, не знакомых с вашим сайтом, найти конкретный раздел: «Найди условия доставки», «Добавь товар в корзину», «Открой контакты». Засеките время. Если на выполнение любой из этих задач уходит больше пяти секунд — навигацию нужно переделывать.
Мобильное меню — деталь, от которой зависит больше 60% пользовательского опыта вашего сайта. Инвестиция времени в его проработку окупается ростом конверсии и снижением показателя отказов.