Меню рисуют с широкого экрана и потом «сжимают»: владелец магазина утверждает шапку на ноутбуке, владелец студии — на проекторе. На телефоне те же двадцать пунктов становятся шкафом от подбородка до челки.
Палец бьёт не туда, жест «купить» прячется. Меню запуска — то, что влезает в один экран телефона без простыни. На этой неделе структуру смотрят одной рукой, не с макета 1920.
Проблема
Владелец магазина боится, что на узком «не солидно» и просит как на десктопе: все разделы в ряд. Владелец студии стыдится короткого бургера из трёх строк и просит крупные фото в меню «для атмосферы». Жадность экономит второй макет: один широкий, телефон «подстроится». Подстроится в кашу. Гость одной рукой в транспорте не целится в мелкие пункты и не скроллит меню-журнал. Он закрывает сайт и звонит конкуренту, у которого жест на первом экране.
Меню на пальце — сценарий входа одного человека, не сжатый десктоп. Человек либо идёт в каталог, либо к услугам, либо звонит. Всё, что не влезает без второй прокрутки меню, не живёт в этапе 1. Фото, иконки, баннер внутри бургера — воры места. На телефоне место — это цена жеста: каждый лишний ряд отодвигает «каталог» и «запись».
Причина
Рабочее меню магазина на телефоне: кнопка открытия, 3 ссылки, телефон текстом, закрытие. Высота зоны нажатия около пальца, не «как в строке десктопа». Студия — то же плюс слот или заявка. Спроектировать телефон первым — 2 дня на шапку. Спроектировать десктоп и «адаптировать» — неделя плюс 30–60 тысяч на то, что кнопку купить перекрыла липкая полоска. Первый экран телефона без открытого меню обязан показывать жест, не только логотип и бургер.
Число пунктов не растёт, потому что «на широком влезло». Если на 1920 в ряд сидит 10 ссылок, на пальце это 10 строк плюс прокрутка. Режут до трёх, остальное — внутри раздела. Поиск в меню телефона — поле, не только лупа. Корзина или заявка не прячутся внутрь бургера как седьмой пункт: это жест пути, ему место снаружи. Иначе человек открывает меню, чтобы купить, и теряет карточку.
- Меню утверждают на телефоне, не на проекторе.
- Три пункта и телефон, фото в бургере не живут.
- Магазин: корзина снаружи меню. Студия: заявка снаружи меню.
- Сжатый десктоп — не мобильная структура.
Решение
Откройте текущую шапку на телефоне одной рукой, большой палец внизу. Попадаете ли в пункты без прицеливания? Магазин и студия делают снимок открытого меню. Если меню длиннее экрана — режете, не уменьшаете шрифт.
- Соберите меню из трёх ссылок и номера. Проверьте, что оно без прокрутки на обычном телефоне.
- Выньте корзину или заявку из бургера наружу.
- Уберите из меню фото, иконки соцсетей и «язык» этапа 1.
- Посмотрите первый экран без открытого меню: жест виден без тапа на бургер.
- В бриф (короткое описание, что нужно от сайта): «меню на пальце, десктоп не образец».
Проверка
Запишите состав бургера построчно. Пример магазина: «Каталог, доставка, контакты, номер снаружи, корзина снаружи». Пример студии: «Услуги, запись, контакты, номер снаружи». Положите снимок телефона в прототип (схема экранов без красивых картинок) как приёмку, не макет 1920. Если принимают только широкий экран, меню снова разъедется.
Остановитесь, когда палец открывает меню, выбирает один пункт и не скроллит шкаф. Не возвращайте десять ссылок «на большом же влезает». Большой экран подождёт той же тройки: лишние пункты не обязаны появляться, потому что пикселей больше. Второй ряд меню — этап 2, не утешение широкой витрины. Приёмка шапки — снимок телефона, не макет 1920 на проекторе.
Чек-лист
- Соберите меню из трёх ссылок и номера. Проверьте, что оно без прокрутки на обычном телефоне.
- Выньте корзину или заявку из бургера наружу.
- Уберите из меню фото, иконки соцсетей и «язык» этапа 1.
- Посмотрите первый экран без открытого меню: жест виден без тапа на бургер.
- В бриф: «меню на пальце, десктоп не образец».
Назад в раздел
