Дизайн форм для не-дизайнеров: почему люди бросают их на полпути и как это исправить

Почти в каждом приложении где-то есть форма. Зарегистрируйтесь здесь. Добавьте нового клиента. Запишитесь на приём. Расскажите, что пошло не так. И почти в каждом приложении именно на этом экране люди пропадают — там, где вы просите их что-то напечатать в ответ. Их было достаточно любопытства, чтобы дойти досюда, а форма — это то место, где они молча закрывают вкладку.

Дизайн формы — это просто набор решений, которые стоят за этим экраном: какие поля вы просите заполнить, в каком порядке они идут и как форма реагирует, когда человек ошибается или заканчивает заполнение. Это одно из самых результативных изменений, которые можно внести в приложение, созданное на AI, — ведь форма — это момент, когда вы просите человека проделать работу. Ошибётесь здесь — и все усилия, вложенные в остальную часть приложения, просто не успеют сыграть роль. Вот почему люди бросают формы и какая горстка изменений доводит их до конца.

Почему люди бросают заполнение форм на полпути?

Люди уходят, когда то, что просит форма, перевешивает то, что они получают взамен, — в этом весь механизм. Большинство плохих форм некрасивы не потому, что плохо выглядят, а потому что просят слишком много и слишком рано — раньше, чем человек успевает убедиться, что оно того стоит.

Представьте каждое поле как отдельную просьбу. «Как вас зовут?» — это крошечная просьба. «Загрузите лицензию на бизнес» — это большая просьба. «Придумайте пароль» — это что-то среднее, но одновременно и обязательство: оно говорит вы будете возвращаться сюда снова и снова. Когда человек попадает на вашу форму, он молча складывает все эти просьбы и сравнивает их с тем, насколько сильно он хочет получить результат. Так что первый шаг в дизайне формы — не визуальный. Это решение о том, что вам на самом деле нужно.

Сколько полей должно быть в форме?

Столько, сколько получится минимизировать. Самое эффективное решение проблемы брошенных форм — удалить поля. Не уменьшить, не переставить местами. Удалить.

Подруга делала инструмент для записи на клининговые услуги. В первой версии форма содержала одиннадцать полей: имя, email, телефон, адрес, площадь в квадратных метрах, число спален, число ванных комнат, домашние животные, желаемая дата, желаемое время и «что-нибудь ещё». Почти никто не доходил до конца. Мы сократили её до трёх полей — имя, телефон и «когда вам удобно?» — а остальное она стала спрашивать во время подтверждающего звонка, который и так делала. Число записей выросло сразу же. Остальные восемь полей не собирали информацию — они отпугивали людей ещё до того, как она получала лид.

Для каждого поля задавайте один вопрос: нужно ли мне это прямо сейчас, чтобы сделать следующий шаг? Если ответ «нет, но было бы неплохо иметь», — уберите поле. Спросить можно всегда потом, когда человек уже стал клиентом, а не незнакомцем, решающим, стоит ли вообще заморачиваться. Форма из трёх полей, которую заполняют, лучше подробной формы, которую не заполняет никто.

В каком порядке должны идти поля формы?

Начните с самых простых полей, не требующих усилий, — тех, что заполняются без раздумий, вроде имени или email, — и оставьте всё, что требует реальных усилий, на потом, когда у человека уже появился импульс. Порядок важен больше, чем кажется. Как только человек начал печатать, он с гораздо большей вероятностью продолжит — самое сложное было начать. Если открывать форму с «придумайте пароль» или «загрузите документ», вы просите о большом обязательстве раньше, чем у человека появился хоть какой-то импульс, — и именно тут люди уходят.

Если форма действительно длинная — подробная заявка, анкета с настоящими документами, — разбейте её на шаги и показывайте, на каком этапе человек находится. «Шаг 2 из 3» — мелочь, которая делает реальную работу: она сообщает человеку, что конец уже виден, и он не бросит длинную прокрутку, не понимая, сколько ещё осталось. Видимая финишная черта удерживает людей в движении к ней.

Какие поля формы должны быть обязательными?

Как можно меньше. Чётко помечайте обязательные поля и — что важнее — делайте почти ничего не обязательным. Каждое обязательное поле — это место, где форма может отказать человеку, а ничто не убивает форму быстрее, чем ситуация, когда человек её заполнил, нажал «отправить» и получил обратно три красные ошибки за поля, о необходимости заполнения которых он даже не знал.

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

Как должна работать проверка ошибок в форме?

Хорошая валидация ловит ошибку в момент, когда она произошла, и объясняет конкретно, что нужно исправить, вместо того чтобы ждать отправки формы и вываливать стену красного текста. Хорошая форма ловит проблему прямо там, где она возникла, — в момент, когда человек закончил заполнять поле, — и говорит что-то конкретное и доброжелательное: «В этом email не хватает символа @». Плохая форма ждёт нажатия «отправить», вываливает стену красного и говорит «Неверные данные», что вообще не объясняет, что именно исправлять.

Разница в том, ощущается ли форма как союзник человека. «Эта дата уже прошла — выберите день на этой неделе» — это помощь. «Ошибка» — это упрёк. Одно доводят до конца, другое — бросают. Это небольшая, но реальная часть дизайна форм, и стоит проверить каждое сообщение об ошибке, которое может показать ваше приложение.

Как сделать форму удобной для мобильных устройств?

На телефоне важнее всего две вещи, и телефоны безжалостно наказывают за небрежные формы. Во-первых, вызывайте нужную клавиатуру: поле email должно открывать клавиатуру с символом @, поле телефона — цифровую клавиатуру. Ваш билдер может это настроить, и ввод текста превращается из рутины в одно касание. Во-вторых, используйте настоящий выбор даты вместо того, чтобы заставлять человека набирать «21.06.2026» большими пальцами, — календарь, по которому достаточно тапнуть, быстрее и никогда не выдаёт дату в неправильном формате.

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

Что должно происходить после того, как человек отправил форму?

Сразу после отправки показывайте чёткое подтверждение — сообщение, благодарность, «мы получили, вот что будет дальше». Самая часто пропускаемая часть формы — это её финал. Человек нажимает «отправить», и… ничего видимого не происходит. Прошло ли это? Нужно ли попробовать ещё раз? Эта тишина заставляет людей отправлять форму повторно или, того хуже, решить, что что-то сломано, и уйти. Это всего один экран, но именно он определяет, доверяет ли человек вашему приложению или гадает, не потратил ли он время впустую.

Как попросить об этом своего билдера

Большую часть этого можно сразу передать своему AI-билдеру, если сформулировать конкретно:

• «В этой форме должно быть только три поля: имя, телефон и желаемая дата. Перенесите всё остальное на более поздний шаг».
• «Сделайте все поля необязательными, кроме имени и email».
• «Показывайте встроенные сообщения об ошибках рядом с каждым полем по мере ввода, с подсказками на простом языке — а не один список ошибок внизу».
• «Используйте клавиатуру для email в поле email и выбор даты в поле даты на мобильных устройствах».
• «После отправки показывайте экран подтверждения с текстом о том, что заявка получена, и что будет дальше».

Каждый из этих пунктов — чёткая инструкция, по которой билдер может действовать, и вместе они охватывают большую часть того, что отличает форму, которую заполняют до конца, от той, от которой убегают.

Как протестировать форму перед запуском?

Откройте её на телефоне и попробуйте заполнить как можно быстрее, будто видите её впервые. Это весь тест. Заметьте каждое место, где вы колеблетесь, щуритесь или задумываетесь, — именно в этих местах ваши реальные пользователи и бросают форму, и теперь вы точно знаете, что нужно исправить в первую очередь.