На десктопе меню видно всегда: горизонтальная строка ссылок в шапке. На телефоне места нет, и всё прячется за одну кнопку. Для мобильного посетителя меню — это фактически карта сайта, и от того, где кнопка и что внутри, зависит, дойдёт ли он до услуг, цен и формы заявки.
Когда мы переделывали собственный сайт, меню было одной из главных точек правок. Кнопка переехала, панель стала выезжать с другой стороны, внутри появились контакты. Ниже — логика этих решений и чек-лист, который мы теперь применяем в клиентских проектах.
Большой палец решает, где кнопка
Большинство людей держат телефон одной рукой и нажимают большим пальцем. Удобная зона — нижняя и средняя часть экрана со стороны руки; верхний противоположный угол — самая неудобная точка, до неё приходится тянуться или перехватывать телефон. Правшей большинство, поэтому для них проще всего дотянуться до правой стороны экрана.
Отсюда практические выводы:
- кнопку меню ставим справа — в шапке это правый верхний угол, куда большой палец правой руки дотягивается заметно легче, чем в левый;
- шапку делаем «липкой» или показываем при прокрутке вверх, чтобы до меню не приходилось листать к началу страницы;
- размер области нажатия — не меньше 44–48 пикселей по каждой стороне, даже если сама иконка меньше;
- рядом с кнопкой меню не размещаем другие мелкие кнопки, чтобы не промахиваться.
Для приложений и сайтов, где меню нужно постоянно, иногда лучше нижняя панель навигации из 4–5 пунктов. Для сайта услуг это избыточно: достаточно одной хорошо расположенной кнопки.
Почему панель выезжает справа
Самый распространённый вариант в шаблонах — меню выезжает слева. Это наследство ранних мобильных приложений, где слева был «ящик» навигации. Но если кнопка справа, а панель появляется слева, глаз и палец вынуждены прыгать через весь экран: нажал в правом углу — ищи пункты у левого края.
На своём сайте мы сделали так: кнопка справа, и панель выезжает тоже справа, прямо из-под пальца. Пункты меню оказываются в зоне большого пальца, закрыть панель можно там же, где её открыли. Это мелочь, но именно из таких мелочей складывается ощущение, что сайтом удобно пользоваться.
Технически это стандартный компонент «offcanvas» — во многих фреймворках он есть из коробки, и сторона появления задаётся одним классом. Не нужно писать собственный скрипт анимации.
Как выглядит кнопка
Три горизонтальные полоски («бургер») — самый узнаваемый знак меню. Мы на своём сайте используем кнопку с тремя точками в фирменном стиле, и это тоже рабочий вариант, если соблюдены условия:
- кнопка контрастна фону шапки и не теряется на светлом и тёмном экране;
- у неё есть текстовая подпись для экранных дикторов —
aria-label="Открыть меню"; - при открытом меню на месте кнопки или в самой панели появляется явный крестик «закрыть».
Если аудитория сайта старшего возраста или не очень уверенно пользуется смартфоном, имеет смысл добавить к иконке слово «Меню». Это занимает немного места, а вопросов «где тут разделы?» становится меньше.
Что положить внутрь меню
Частая ошибка — перенести в мобильную панель только список ссылок из десктопной шапки. На телефоне меню — единственная точка входа почти во всё, и в нём стоит разместить то, что на десктопе было в шапке, подвале и боковых блоках.
- Основные разделы — 5–7 пунктов, по названиям, понятным клиенту: «Услуги», «Портфолио», «Цены», «О нас», «Контакты».
- Подразделы — раскрывающимися списками, а не отдельными экранами. Не больше одного уровня вложенности.
- Телефон — кликабельной ссылкой
tel:, чтобы позвонить одним нажатием. - Почта и мессенджеры, которые реально используются для связи с клиентами.
- Кнопка заявки — заметная, на всю ширину, внизу панели: «Обсудить проект», «Оставить заявку».
- Время работы или адрес, если это важно для бизнеса — для офлайн-точек обязательно.
Кнопка заявки в меню — самый недооценённый пункт. Человек открыл меню, потому что ищет, куда идти дальше. Если в этот момент перед ним понятный призыв, часть посетителей сразу переходит к действию, минуя три экрана прокрутки.
Доступность: меню должно работать без пальца
Мобильное меню часто проверяют только тапом. Но им пользуются и с клавиатуры (планшет с чехлом-клавиатурой, узкое окно браузера на ноутбуке), и через экранный диктор. Минимум, который мы проверяем:
- кнопка — это элемент
button, а неdivс обработчиком клика; - атрибут
aria-expandedменяется при открытии и закрытии; - после открытия фокус переходит внутрь панели, а клавиша Tab не «убегает» на страницу под ней;
- панель закрывается по Esc, по крестику и по нажатию на затемнённый фон;
- после закрытия фокус возвращается на кнопку меню;
- страница под открытым меню не прокручивается.
Готовые компоненты популярных фреймворков почти всё это делают сами. Главное — не сломать поведение собственными доработками.
Частые ошибки, которые мы встречаем при аудите
Когда к нам приходят с запросом «переделать мобильную версию», в меню почти всегда находится что-то из этого списка:
- Меню на весь экран без возможности закрыть. Крестик спрятан под системной строкой телефона или уехал за пределы экрана на узких моделях. Пользователь нажимает «назад» в браузере и уходит с сайта.
- Двойная вложенность с отдельными экранами. «Услуги» → «Разработка» → «Сайты» — три перехода, на каждом свой заголовок и своя кнопка «назад». Посетитель теряется уже на втором уровне.
- Пункты меню с подменю, которые нельзя открыть как страницу. Нажатие на «Услуги» только раскрывает список, а общей страницы услуг из меню не достичь. Нужна отдельная стрелка для раскрытия и сам пункт как ссылка.
- Меню перекрывает форму. Липкая шапка с кнопкой занимает треть экрана при открытой клавиатуре, и поле ввода оказывается под ней.
- Разный состав меню на разных страницах. Часть шаблонов собрана в разное время, и на страницах вакансий или блога меню беднее, чем на главной. Это лечится единым шаблоном шапки для всего сайта.
Большинство этих ошибок не видно на десктопе в режиме эмуляции телефона: их замечают только на настоящем устройстве, с настоящим пальцем и открытой клавиатурой.
Как мы проверяем меню
Меню — частый источник регрессий: правка в шапке десктопа ломает мобильную версию, новая страница получает собственный вариант шапки. Поэтому у нас есть автоматический тест, который проверяет, что на публичных страницах меню выезжает именно справа и содержит нужные пункты. Плюс скриншоты на нескольких мобильных ширинах после каждой правки вёрстки и обязательная проверка на реальном телефоне перед сдачей.
| Проверка | Ожидание |
|---|---|
| Ширина 360–430 px | Кнопка видна, не перекрывает логотип |
| Открытие | Панель справа, фон затемнён, страница не скроллится |
| Содержимое | Разделы, телефон, почта, кнопка заявки |
| Закрытие | Крестик, Esc, тап по фону |
| Клавиатура | Фокус внутри панели, возврат на кнопку |
| Длинное меню | Прокручивается внутри панели, кнопка заявки доступна |
Итог
Удобное мобильное меню — это кнопка в зоне большого пальца, панель, которая выезжает с той же стороны, понятные разделы, контакты и кнопка заявки внутри и корректная работа с клавиатуры. Всё это укладывается в стандартный компонент и пару часов внимательной настройки, а влияет на каждого мобильного посетителя.
Если ваше мобильное меню вызывает вопросы у клиентов или вы планируете редизайн — напишите нам. Проведём аудит мобильной версии и предложим, что изменить. Примеры наших работ — в портфолио.
