Зачем этот текст
Владелец салона смотрит Метрику: 80% заходов с телефона. Заявок почти нет. Он просит «сделать красивее на компьютере». Обычно ломается не красота. Человек открыл сайт в одной руке, в транспорте или в очереди. Кнопка уехала за край. Текст мелкий. Форма на десять полей. Он закрыл вкладку.
Ниже - что проверить на маленьком экране, прежде чем заказывать новый дизайн. Без «адаптив под ключ» в каждом абзаце.
С телефона смотрят иначе
На компьютере человек сидит. Есть две руки, большая картинка, время потыкать меню. С телефона он часто стоит, едет, держит ребёнка. Экран узкий. Палец толще курсора. Если главный шаг не попадает под большой палец, заявка не родится.
Это не «молодёжь в телефоне». Окна, салон, клиника, автосервис - почти все заходят с мобильного, когда задача уже горит.
Про заявки, которые ломаются на любом экране, - в «Сайт красивый, а заявок нет». Здесь уже: сайт вроде живой, а с телефона путь обрывается.
Что обычно ломается
Первое - кнопка. «Оставить заявку» красивая на макете и обрезана на телефоне. Или прячется под фиксированной шапкой. Или открывает форму, которая не влезает.
Второе - текст. На компьютере «полный спектр услуг красоты» ещё терпят. На телефоне это стена. Человек ищет «окрашивание у корня» и не находит.
Третье - форма. Имя, почта, город, откуда узнали, три галочки. На широком экране скучно. На узком - отказ. Хватает имени, телефона и короткого поля «задача».
Четвёртое - скорость. Картинки по 4 мегабайта. Сайт открывается пять секунд. Человек в 4G уезжает к соседней выдаче.
Пятое - номер и Max. С телефона человек хочет нажать и позвонить. Если номер картинкой, без ссылки tel:, палец бесполезен. Если Max открывает пустую страницу в браузере - тоже.
Клиника сверстала «запись» огромной кнопкой. На телефоне кнопка уезжает вниз, а сверху висит меню на полэкрана. Человек листает, не попадает, записывается через карты к другой клинике.
Как проверить за десять минут
Не нужен дизайнер. Нужен ваш телефон и чужая сеть, не офисный Wi-Fi.
- Откройте сайт в обычном браузере телефона, не в «предпросмотре» макета.
- Засеките, за сколько появился первый экран. Больше трёх секунд - уже риск.
- Не увеличивая масштаб, прочитайте заголовок услуги и найдите, куда нажать.
- Нажмите главную кнопку большим пальцем. Попадает ли с первого раза?
- Дойдите до заявки. Сколько полей? Клавиатура наезжает на кнопку «отправить»?
- Нажмите номер. Открывается звонок или это просто текст?
Если на шаге 3 вы щуритесь - клиент тоже. Если на шаге 5 бросили - он бросит раньше.
Куда вести саму заявку - форма, звонок или Max - в «Форма, звонок или Max». Сначала экран должен дать дойти до этого выбора.
Когда «красиво на компьютере» врёт
Макет в Figma широкий. Там всё встаёт. На телефоне колонки складываются в кашу: фото услуги, потом три абзаца «о нас», потом кнопка, которую уже не ждут.
Частая ловушка - слайдер на весь экран. На компьютере эффект. На телефоне человек свайпает мимо заявки и не понимает, чем вы занимаетесь.
Вторая - меню-бургер с двадцатью пунктами. На телефоне это лабиринт. Для окон и автосервиса на первом экране нужна услуга и шаг, не карта сайта.
Третья - попап «оставьте телефон» через две секунды. На компьютере раздражает. На телефоне закрывает всё, что человек только начал читать. Он жмёт крестик мимо и уходит.
Автосервис крутит на главной видео с подъёмника. На телефоне ролик тяжёлый, звук выключен, кнопка «записаться» под ним. Человек с горящим маслом не ждёт загрузку. Пишет в Max соседу по району.
Что оставить на первом экране телефона
Один экран - одна задача. Человек должен за 10 секунд понять три вещи:
- Кто вы и что делаете. Не «полный спектр». «Замена масла», «окрашивание», «окна под ключ».
- Где вы. Город, район, выезд - одна строка.
- Что нажать. Одна главная кнопка. Телефон рядом, не вместо неё.
Фото свои, не сток. На телефоне сток выдаёт себя быстрее: чужой интерьер, чужие руки.
Цена «от» лучше, чем ничего. На маленьком экране пустой блок «стоимость по запросу» выглядит как отказ говорить.
Как собираем рабочие сайты - на разработке сайтов. Если сайт только открыли - в «Сайт запустили. Что делать дальше».
Где обычно ломается
Самая дорогая ошибка - править компьютер и не открывать телефон. Заявки с мобильного молчат, а вы спорите про отступы в шапке десктопа.
Вторая - «адаптив» как галочка в смете. Формально страница сжимается. По делу кнопка 32 пикселя, в нее не попасть.
Третья - разные версии: «мобильная» отдельным адресом. Человек из поиска попадает на широкую, потом редирект, потом потеря формы. Один сайт, который нормально складывается, спокойнее.
Четвёртая - карта на всю ширину, которая перехватывает скролл. Человек хочет листать вниз, а двигает район. На телефоне это ловушка.
Чеклист: сайт выдерживает телефон?
Отметьте. Три «нет» - чинить экран, не заказывать редизайн «покрасивее».
- С телефона за 10 секунд понятно, чем вы занимаетесь.
- Главная кнопка видна без прокрутки или сразу под коротким текстом.
- В кнопку попадаете пальцем, не ногтем.
- Форма: имя, телефон, задача. Не десять полей.
- Номер нажимается и открывает звонок.
- Картинки не весят как альбом отпуска.
- Нет попапа, который закрывает всё на старте.
- Меню не прячет услугу, ради которой человек пришёл.
Если заходы с телефона есть, а заявок нет - начните с этого списка. Не с нового баннера.
Коротко: красные флаги
- «На компьютере же красиво» - и 80% заходов с телефона.
- Кнопка обрезана или под меню.
- Форма на десять полей.
- Номер нельзя нажать.
- Слайдер и видео вместо услуги.
- Попап на весь экран через две секунды.
- Страница открывается дольше, чем человек готов ждать в очереди.
Что сделать на этой неделе
Не заказывайте «мобильную версию с нуля», пока не прошли три шага.
- Откройте свой сайт в метро или во дворе, не в офисе. Засеките, дошли ли до заявки.
- Попросите человека, который не делал сайт, сделать то же самое. Смотрите молча, куда он тычет.
- Выпишите три правки: кнопка, форма, скорость. Сделайте их. Потом смотрите Метрику ещё неделю.
Дальше - бриф или контакты. Скажем прямо, что чинить на телефоне в первую очередь. Без пакета «новый дизайн для десктопа».
