Формы на мобильной версии сайта
На мобильных устройствах половина пользователей не завершает заполнение форм на мобильной версии сайта. Причина простая: на маленком экране каждое лишнее поле, непонятная кнопка или медленная загрузка интерфейса стоят слишком дорого. Веб-формы очень разные — от регистрации до заказа, от поиска до обратной связи — но создание форм для мобильных браузеров требует совсем иного подхода. В разных версиях сайта форма должна выглядеть и работать по-своему. Если много пользователей уходит на этапе заполнения, эта статья поможет разобраться, чем отличаются мобильные версии от нормального десктопа, какие работающие паттерны можно использовать, и какой один элемент способен улучшить результаты за час работы.
Первая причина отказа — кнопки слишком тесные. Когда размер кнопок меньше 48 пикселей на 48 пикселей (это рекомендует Google Material Design для мобильных устройств), палец просто не попадает. Особенно неудобно, если кнопка соседствует с другими элементами управления на расстоянии в несколько пикселей. Пользователь жмёт по кнопке отправки и попадает на соседний чекбокс. Раздражение, отказ от заполнения.
Вторая причина — потеря данных. Когда пользователь переключается между приложениями на мобильном телефоне (например, проверил почту, вернулся в браузер), форма часто теряет то, что человек уже заполнил. Система очищает форму или перезагружает страницу. Если это произойдёт после 10 полей ввода, пользователь просто закроет браузер и найдёт альтернативу.
Третья беда — непредсказуемое поведение виртуальной клавиатуры. На iOS и Android она ведёт себя по-разному. На одном устройстве клавиатура скрывает половину экрана, на другом загораживает кнопку отправки. Когда человек начинает вводить номер телефона, ожидает увидеть числовую клавиатуру, а вместо этого видит буквы — это ещё одна причина для отказа.
Кнопка отправки — главный элемент
Размер кнопки отправки — это не мелочь. Apple Human Interface Guidelines рекомендует минимальный размер 44 пикселя для интерактивных элементов, Google Material Design — 48 пикселей. Это не просто правило: это размер подушечки среднего пальца взрослого. На практике кнопка отправки должна быть шире: 48–56 пикселей в пределах экрана мобильного устройства, чтобы пользователь нажал её с первой попытки.
Цвет кнопки работает на конверсию. Исследования показывают, что контрастная кнопка (например, яркий оранжевый или зелёный на светлом фоне) нажимается на 15–20% чаще, чем серая. Но важно не переусложнять: две кнопки одинакового размера рядом создают неопределённость. Основную кнопку сделай крупнее на версии сайта, а вторую (например, «Отмена») — совсем маленькой или вообще убери за пределы экрана.
Расстояние между кнопкой отправки и другими элементами — минимум 16 пикселей. Если кнопка заказа стоит прямо над кнопкой браузера «Назад», человек легко ошибётся при касании. На любой версии сайта эта ошибка стоит конверсии.
Поля ввода: текст, email, номер телефона
Поле ввода — основной элемент любой формы. На экране мобильного устройства это должно быть не менее 44 пикселей в высоту. Если размер меньше, палец промахивается. Внутри поля оставь отступ (padding) — минимум 12 пикселей слева и справа. Текст внутри должен быть 16 пикселей или больше, иначе браузер на iOS автоматически увеличит масштаб страницы при фокусе на поле, и произойдёт разочаровывающий скачок.
Для номера телефона используй специальный тип input: type="tel". Это вызывает числовую клавиатуру на мобильном телефоне, а не обычную. Пользователю не надо переключаться между буквами и цифрами. На сайте обязательно покажи формат номера (например, "+7 () --") в плейсхолдере. Так человек поймёт, в каком порядке вводить цифры.
Для email используй type="email". Это добавляет клавишу @ на виртуальной клавиатуре, и данные браузеры после этого могут подсказать сохранённый адрес. Функция автозаполнения (autofill) — одна из самых полезных штук для мобильных браузеров. Если включить атрибут autocomplete="email", браузер предложит уже известные адреса. Это сокращает время заполнения на 30–40%.
Выпадающий список и элементы выбора
Выпадающий список на мобильном устройстве — это не обычный select. На iOS и Android он открывается во весь экран, как отдельное меню. Если вариантов больше пяти, это нормально. Если вариантов двух-трёх, радиокнопки будут лучше: они видны сразу, не требуют дополнительного клика.
Radio buttons и checkboxes тоже требуют минимума 48 пикселей на 48 пикселей для касания. Если хочешь использовать классические маленькие кружочки (как на десктопе), то обязательно увеличь область касания невидимым слоем вокруг них. Иначе пользователь будет жать по тексту рядом, а не по самой кнопке.
За выбор даты и времени отвечают специальные input'ы: type="date" и type="time". На мобильных браузерах они открывают нативные календари и селекторы времени операционной системы. Это намного удобнее, чем самодельный календарь. User не видит код, а вот опыт взаимодействия ощущает сразу.
Требования Apple и Google
Apple Human Interface Guidelines указывает: элементы управления на iOS должны быть не менее 44×44 пункта (на Retina экранах это 88×88 пикселей). Google Material Design во вторую версию (2018 года) дал уточнение: 48×48 dp для основных и 40×40 dp для второстепенных элементов. Оба гайда сходятся: достаточное расстояние между элементами (минимум 8 пикселей) — залог удобства.
На стороне контрастности оба гайда требуют коэффициента WCAG AA (4.5:1 для текста). Если цвет кнопки близок к фону, пользователь просто её не заметит.
Хорошие и плохие примеры
Плохая реализация: маленькая кнопка (32×32 пикселя), без отступа от края, номер телефона вводится в обычное текстовое поле (type="text"), калькулятор прямо над кнопкой отправки (легко кликнется случайно).
Хорошая реализация: кнопка 56 пикселей в высоту, занимает всю ширину экрана минус отступ, контрастный цвет, номер телефона встроен с type="tel" и подсказкой формата, кнопка отправки отделена от других элементов пространством и вернула фокус после отправки (чтобы пользователь знал, что форма обработана).
Частые проблемы: потеря данных и virtual keyboard
При разработке на мобильной версии сайта часто забывают сохранять значения формы. Если пользователь вводит название компании, а потом браузер перезагружает страницу при переключении на другое приложение, данные теряются. Решение: используй localStorage или sessionStorage в JavaScript для сохранения введённых значений. При возврате на страницу восстанови текст из памяти браузера.
Virtual keyboard на iOS скрывает кнопку отправки? Это потому, что поле ввода находится в нижней части экрана. Убедись, что кнопка находится выше последнего поля ввода минимум на 100 пикселей. Или сделай кнопку фиксированной, приклеенной к низу экрана, независимо от клавиатуры.
Автозаполнение и сохранение прогресса
Используй правильные атрибуты autocomplete для полей. Для имени напиши autocomplete="given-name", для фамилии autocomplete="family-name", для номера телефона autocomplete="tel". Это позволит браузеру автоматически заполнить известные пользователю данные. На сайте это сокращает время на 40–50%.
Сохрани прогресс заполнения формы. Если пользователь ввёл имя и номер телефона, но ещё не нажал отправку, эти данные должны остаться в браузере, пока форма открыта. Когда человек вернётся на страницу через неделю, форма должна запомнить хотя бы имя (если это возможно в рамках privacy).
Оптимизация мобильных форм для конверсии
Оптимизация мобильных форм повышает конверсию
На мобильных браузеров скорость загрузки формы влияет на поведение пользователя. Stripe измерили конверсию: оптимизация скорости повысила показатель на тридцать четыре процента. Сократили количество полей, добавили HTML5 валидацию данных, разбили форму на этапы. Оптимизация мобильных версии сайта не требует больших затрат разработки разработчика и работает через две недели внедрения.
Встроенная валидация HTML5 спасает время пользователя
Когда браузер проверяет данные во время заполнение, пользователь видит ошибку сразу. HTML5 type="email" валидирует адрес почты, type="tel" проверяет номер телефона, type="number" ловит цифровые ошибки. Airbnb применила валидацию в форме заказа для мобильных версии, и неправильные персональные данные упали на двадцать восемь процентов. Такие поля ввода работают на всех браузеров без дополнительного JavaScript.
Конструктор форм создаёт решение за два часа
Выбрать онлайн платформу для создание формы не требует программирования разработчика. Typeform, JotForm, Airtable предлагают готовые шаблоны форм для мобильных устройств с оптимизацией загрузки и поддержкой GDPR для обработки персональных данных. За два часа создадите форму обратной связи или форму заказа, протестируете на мобильном телефоне и опубликуете на сайте без дополнительных элементов интерфейса.