Формы без боли: решения, которые повышают число заявок

Самый действенный способ улучшить форму — убрать из неё лишнее. Каждое поле — это ещё одно усилие, ещё один повод задуматься «а зачем им это?» и закрыть вкладку. Baymard Institute в исследованиях оформления заказа приводит среднее число полей — 11,3 — и разбирает, как сокращать их без потери нужных данных.

Если без поля не обойтись, но заполнять его не обязательно, отметьте это явно. Baymard по итогам тестов оформления заказа рекомендует помечать и обязательные, и необязательные поля — тогда человек не гадает, что можно пропустить.

Форма читается сверху вниз. Когда поля стоят в две-три колонки, глаз прыгает зигзагом и легко пропускает строку; Baymard в тестах отмечает, что многоколоночные формы заметно затрудняют заполнение. Исключение — короткие связанные поля, вроде «Срок действия» и «CVC» карты.

Nielsen Norman Group прямо называет плейсхолдеры вместо подписей вредными: текст пропадает в момент ввода, проверить себя нечем, а светло-серые буквы плохо читаются. W3C в руководстве по доступным формам тоже требует подпись, программно связанную с полем, — её зачитывают экранные дикторы, а клик по ней ставит курсор в поле.

Большинство заявок сегодня оставляют с телефона. Правильный тип поля сам открывает нужную клавиатуру, а атрибут autocomplete позволяет браузеру подставить сохранённые данные одним касанием. Оба механизма описаны в MDN и в рекомендациях web.dev по формам.

Validation — проверка введённых данных. Проверять стоит сразу у поля, а не только после нажатия «Отправить», но важен момент. Baymard описывает типичную ошибку — «преждевременную» проверку, когда поле краснеет, пока человек ещё печатает. Nielsen Norman Group тоже называет раздражающим сообщение об ошибке до того, как дали закончить ввод.

Бывает, что коротко не получится: анкета на кредит, запись к врачу с выбором услуги и времени, заявка на расчёт сложного проекта. Тогда форму делят на шаги — stepper form, — и каждый шаг отвечает на один вопрос.

• Показывайте, сколько шагов осталось: «Шаг 2 из 4» снимает тревогу «это надолго?»
• Начинайте с простого и интересного вопроса о задаче, а не с телефона
• Давайте вернуться назад, не теряя ответы
• Сохраняйте введённое, если человек случайно закрыл вкладку
• Перед отправкой покажите сводку, чтобы можно было проверить и поправить

Текст кнопки должен называть результат, а не действие с формой: «Получить расчёт», «Записаться на 14:30», «Забронировать столик» вместо безликого «Отправить». После нажатия кнопка блокируется и показывает, что заявка уходит, — иначе её нажмут дважды.

Экран после отправки — тоже часть формы. Скажите, что заявка получена, кто и как свяжется, и что можно сделать прямо сейчас: посмотреть кейсы, добавить событие в календарь, написать в мессенджер.