Если у вас магазин, включает липкую шапку «чтобы корзина всегда была» и на телефоне теряет «оплатить»: полоска отъедает первый кадр. Если у вас студия или услуги, так же клеит сверху телефон и «оставить имя», и форма заявки (имя или телефон, ещё не визит) уезжает под сгиб.
Что именно проверить
Если у вас магазин, боится, что без прилипшей корзины гость «потеряется и не купит». Если у вас студия или услуги, стыдится короткого верха: «клиент не увидит телефон, если прокрутит». Макет (картинка экрана, ещё не сайт) на широком мониторе ещё терпит щит.
Под пальцем шапка высотой 72–96 пикселей съедает треть первого кадра. Стыд «простой» шапки сильнее страха, что оплаты или заявки не начался. Липкая полоска это ориентация, не реклама и не вторая главная.
Готовая тема уже даёт тонкий верх: знак, три ссылки, иконка. Адаптация шаблона (свои цвета, логотип, тексты и фото на готовых экранах) не наращивает высоту «чтобы всё было под рукой». Сделать шапку всегда видимой щитом — уже не правка, а новый первый экран.
Индивидуальный макет с толстой липкой панелью рисуют неделями. Гость ищет цену и поле, не коллекцию значков, которая едет за ним.
Как это выглядит на практике
Студия: 4–6 экранов, 8–15 услуг, форма в первом кадре, те же дни. Включить «заботливую» липкость с акцией и второй кнопкой — 2–5 дней спора и +20–50 тысяч, на улице оплаты или заявки ниже сгиба. Разница в том, видна ли кнопка без прокрутки.
На кассе магазина липкая акция бьётся с «оплатить». На услуге студии липкое «оставьте имя» бьётся с полями в сетке: гость не понимает, куда жать. Счёт за «ещё чуть выше, чтобы не потеряли» (документ «заплатите»; деньги могут не прийти, а вёрстка (сборка страниц по макету)) сборка живых страниц по макету — уже повесила слой на каждый скролл.
Бриф дизайна (одна страница) пишет высоту шапки числом и запрет щита. Телефон в шапке текстом, не картинкой: его копируют, а не любуются.
- Липкая шапка ест первый кадр на телефоне.
- Оплаты или заявки живёт ниже полоски, не внутри неё.
- Магазин из тонкого верха идёт в каталог и корзину.
- Студия из тонкого верха идёт к услуге и полям имени.
На чём считать результат
Откройте главную на своём телефоне, не в узкой рамке браузера. Если кнопки нет, а шапка занимает треть кадра — липкость уже съела оплаты или заявки. Кто ставит «ок», смотрит этот снимок, не широкий монитор.
- Сфотографируйте первый кадр с включённой липкой шапкой и без неё. Где виден оплаты или заявки — тот вариант берут.
- Оставьте в полоске знак, три ссылки и телефон текстом. Акции и вторую кнопку выньте.
- Если липкость нужна, ограничьте высоту 48–56 пикселей. Выше — щит.
- Запретите правку «добавим в шапку, чтобы не потеряли». Это новый первый экран.
- Пройдите оплату и имя пальцем при том, кто ставит «ок»: шапка не должна закрывать кнопку.
Что сделать дальше
Пример магазина: «Шапка темы 48 пикселей, не липнет щитом, «купить» выше сгиба, 50 карточек». Пример студии: «Полоска без акции, форма имени в первом кадре, липкое «оставьте имя» не рисуем». Лист в бриф (короткое описание, что нужно от сайта) рядом с датой запуска.
Остановитесь, когда на узком без прокрутки виден оплаты или заявки, а шапка не спорит с кнопкой. Не возвращайте липкий щит после «ок», «на праздник». Толстая липкость подождёт этап 2, если касса и заявка уже живые.
- Сфотографируйте первый кадр с включённой липкой шапкой и без неё. Где виден оплаты или заявки — тот вариант берут.
- Оставьте в полоске знак, три ссылки и телефон текстом. Акции и вторую кнопку выньте.
- Если липкость нужна, ограничьте высоту 48–56 пикселей. Выше — щит.
- Запретите правку «добавим в шапку, чтобы не потеряли». Это новый первый экран.
- Пройдите оплату и имя пальцем при том, кто ставит «ок»: шапка не должна закрывать кнопку.
Назад в раздел
