7 золотых правил дизайна мобильного меню

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

1. Текст никогда не меньше 16 px

16 px (1 rem) — порог. Ниже — гость зумит вручную, и навигация ломается. Рекомендация: тело 16-18 px, название блюда 18-22 px, заголовок категории 22-28 px.

2. Тач-цели минимум 44 × 44 px

Apple HIG и Google Material требуют 44 × 44 px. Меньше — 15-23% больше промахов. Между табами не меньше 8 px.

3. Иерархия F-pattern

Чтение мобильного — вертикальное. Рекомендации помещайте сверху, фиксируйте панель категорий. Если логика не ясна за 5 секунд, побеждает кнопка "назад".

4. WebP/AVIF и lazy loading

WebP на 30% легче PNG. AVIF ещё на 15-20% меньше. Изображения грузятся только при открытии категории — <img loading="lazy">.

5. Правило трёх секунд

LCP меньше 3 с. Тестируйте в Throttled 3G — Wi-Fi кафе редко лучше. JS-bundle меньше 150 KB.

6. Палитра максимум 4-5 цветов

Цвет бренда + вторичный + акцент + чёрный + белый. Иконки аллергенов по форме И цвету — 1 из 12 мужчин страдает красно-зелёным дальтонизмом.

7. Тест одной рукой

Критичные действия — в нижнюю половину, правило большого пальца. Mobile-first платформы вроде thMenu следуют этим паттернам по умолчанию; кастомные темы стоит проверять самостоятельно.

Хорошо настроенное мобильное меню повышает заказы на 12-18%. Плохо — отправляет гостя к официанту и стирает цифровое преимущество.

Было полезно? Поделитесь.