Формы, которые заполняют до конца
Убрать лишние поля, проверять ввод в нужный момент, писать ошибки человеческим языком и не мешать автозаполнению — разбор по шагам.
Форма — место, где интерес человека превращается в действие: заявку, заказ, регистрацию. И место, где его чаще всего теряют. Не потому, что форма сложная, а потому, что она мелко раздражает много раз подряд.
Убери поля
Самое действенное, что можно сделать с формой, — сократить её. Пройди по каждому полю и спроси: кто прочитает этот ответ и что с ним сделает? Если ответ «пусть будет», поле лишнее.
Частые кандидаты на удаление:
- «Повторите пароль» — лучше кнопка «показать пароль»;
- отдельные поля для имени, отчества и фамилии там, где хватает одного;
- «Откуда вы о нас узнали» на шаге оплаты;
- телефон, если звонить никто не собирается.
Необязательные поля тоже не бесплатны: человек их читает, думает и решает пропустить. Если поле необязательное, возможно, его не должно быть вовсе.
Порядок и группы
Длинную форму делят на смысловые группы: контакты, адрес, оплата. Многошаговая форма хороша, если шаги действительно разные и видно, сколько осталось. Плохо, если каждый шаг — одно поле и кнопка «Далее»: это та же длинная форма, только медленнее.
Одна колонка почти всегда лучше двух: взгляд идёт сверху вниз, и ничего не теряется справа.
Проверка по ходу, но не на каждую букву
Сообщать об ошибках после нажатия «Отправить», прокручивая страницу наверх к списку проблем, поздно. Писать «неверный email» после первой набранной буквы рано и раздражает.
Рабочий вариант: проверять поле, когда человек из него ушёл, а уже показанную ошибку снимать сразу, как только значение стало правильным. И обязательно проверять всё ещё раз на сервере: проверка в браузере — для удобства, а не для защиты.
Сообщения об ошибках
Сообщение говорит, что не так и как исправить, — человеческим языком и рядом с полем.
- Не «Неверный формат», а «В номере не хватает цифр».
- Не «Ошибка 422», а «Этот адрес уже зарегистрирован. Войти?»
- Не красить красным всю форму, а отметить конкретное поле.
И никогда не стирай введённое после ошибки. Форма, которая очищает все поля из-за одного неверного, — самый надёжный способ убедить человека закрыть вкладку. То же при сбое на сервере: запрос не прошёл, а данные остаются на месте.
Автозаполнение и клавиатура
Браузер и телефон умеют сами подставлять имя, почту, адрес, телефон и даже карту — если им не мешать. Для этого полям нужны правильные атрибуты:
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input name="code" inputmode="numeric" autocomplete="one-time-code">
type и inputmode заодно открывают на телефоне нужную клавиатуру: с @ для почты, цифровую для кода. Код из SMS с autocomplete="one-time-code" подставляется одним касанием.
Частая поломка в сгенерированных формах — самодельные поля, которые выглядят как обычные, но браузер их не узнаёт, и автозаполнение не работает вовсе. Проверь на телефоне, а не только на ноутбуке.
Кнопка отправки
Кнопка называет действие: «Оформить заказ», «Отправить заявку», а не «Отправить» или «ОК». Её не блокируют заранее, пока форма не заполнена: человек не понимает, почему она серая. Лучше дать нажать и показать, чего не хватает.
После нажатия кнопка показывает, что запрос идёт, и не даёт отправить форму дважды. Двойной заказ из-за медленной сети — неприятность и для человека, и для поддержки.
Как проверить
Заполни свою форму с телефона одной рукой — сначала с выключенным автозаполнением, потом со включённым. Ошибись в каждом поле по очереди. Отправь при плохой связи. Всё, что раздражает тебя, раздражает и остальных, просто они об этом не напишут — они уйдут.
SUBXCAT разбирает ключевые формы продукта поле за полем и доводит их до состояния, в котором их заканчивают.