Дизайн форм для нефахівців: чому люди кидають їх на півдорозі й що з цим робити
Люди кидають форми, коли те, що ви просите, переважує те, що вони отримують натомість. У цьому гайді — виправлення, які допомагають довести форми до кінця в застосунку, створеному з допомогою AI: менше полів, розумніший порядок полів, м’якша валідація і чітке підтвердження наприкінці.
Майже в кожному застосунку десь є форма. Зареєструйтеся тут. Додайте нового клієнта. Забронюйте зустріч. Розкажіть, що пішло не так. І майже кожен застосунок губить людей саме там — на тому єдиному екрані, де ви просите щось у відповідь набрати. Їм було достатньо цікаво, щоб прийти, і саме на формі вони тихо закривають вкладку.
Дизайн форми — це просто набір рішень, які стоять за цим екраном: які поля ви питаєте, у якому порядку вони йдуть і як форма реагує, коли хтось помиляється або закінчує заповнення. Це одна з найвпливовіших змін, які можна внести в застосунок, створений з допомогою AI, бо форма — це момент, коли ви просите людину зробити роботу. Помилитеся тут — і всі зусилля, вкладені в решту застосунку, так і не отримають шансу мати значення. Ось чому люди кидають форми й кілька змін, які допомагають довести їх до кінця.
Чому люди кидають заповнення форм на півдорозі?
Люди йдуть, коли те, що просить форма, переважує те, що вони отримують натомість — весь механізм саме в цьому. Більшість поганих форм не потворні; вони просто просять забагато, зарано, ще до того, як людину переконали, що воно того варте.
Уявіть кожне поле як окреме прохання. «Як вас звати?» — крихітне прохання. «Завантажте ліцензію на бізнес» — велике. «Створіть пароль» — середнє, але водночас це й зобов’язання — воно каже: ви ще повернетесь сюди. Коли хтось потрапляє на вашу форму, він мовчки додає ці прохання одне до одного і зважує їх проти того, наскільки сильно хоче результат. Тож перший крок у дизайні форми — не візуальний. Це рішення про те, що вам насправді потрібно.
Скільки полів має бути у формі?
Стільки, скільки можна уникнути. Найбільше виправлення проти кидання форм — видаляти поля, а не зменшувати їх і не переставляти. Видаляти.
Подруга створювала інструмент бронювання для свого клінінгового бізнесу. У першій версії форма мала одинадцять полів: ім’я, e-mail, телефон, адреса, площа приміщення, кількість спалень, кількість санвузлів, домашні тварини, бажана дата, бажаний час і «щось іще». Майже ніхто її не заповнював до кінця. Ми скоротили до трьох — ім’я, телефон і «коли вам зручно?» — а решту вона питала під час підтверджувального дзвінка, який усе одно робила. Бронювання зросли одразу. Інші вісім полів не збирали інформацію — вони відлякували людей ще до того, як вона взагалі отримувала лід.
Для кожного поля постав собі одне запитання: чи потрібно мені це прямо зараз, для наступного кроку? Якщо відповідь «ні, але було б непогано мати» — прибирай. Запитати завжди можна пізніше, коли людина вже стала клієнтом, а не незнайомцем, який вирішує, чи варто взагалі морочитися. Форма, що просить три речі й працює, переважає докладну, яку ніхто не заповнює.
У якому порядку мають іти поля форми?
Почніть із найпростіших полів, які не потребують жодного зобов’язання — таких, що не вимагають роздумів, як-от ім’я чи e-mail — а все, що вимагає реальних зусиль, залиште на потім, коли в людини вже з’явиться інерція. Порядок важить більше, ніж здається. Щойно людина почала друкувати, вона з набагато більшою ймовірністю продовжить — найважче було почати. Якщо на початку стоїть «створіть пароль» або «завантажте документ», ви просите про велике зобов’язання ще до того, як з’явилась хоч якась інерція, — і саме тут люди відсіюються.
Якщо форма справді довга — детальна анкета, оформлення з реальними документами — розбийте її на кроки й покажіть, на якому кроці людина зараз. «Крок 2 з 3» — дрібниця, яка виконує реальну роботу: вона каже людині, що кінець уже видно, тож вона не кине довгий скрол лише тому, що не уявляє, скільки ще залишилось. Видима фінішна лінія тримає людей у русі до неї.
Які поля форми мають бути обов’язковими?
Якомога менше. Чітко позначте обов’язкові поля і — що важливіше — зробіть майже нічого не обов’язковим. Кожне обов’язкове поле — це місце, де форма може відмовити людині, а ніщо не вбиває форму швидше, ніж коли людина заповнює її, тисне «відправити» — і отримує назад три червоні помилки за поля, про обов’язковість яких навіть не знала.
Якщо поле може бути необов’язковим — зробіть його необов’язковим. Номер телефону, який вам «хотілося б мати», не вартий людини, яка не хоче його давати й натомість просто йде.
Як має працювати валідація помилок у формі?
Хороша валідація ловить помилку в ту саму мить, коли вона стається, і чітко пояснює, що саме виправити, замість чекати на «відправити» й показувати стіну червоного. Хороша форма ловить проблему точно там, де вона виникла, у момент, коли людина закінчує заповнювати це поле, і каже щось конкретне й доброзичливе: «У цьому e-mail бракує символу @». Погана форма чекає, доки людина натисне «відправити», викидає стіну червоного і каже «Некоректні дані» — що взагалі не пояснює, що саме виправити.
Різниця в тому, чи відчувається форма як союзник людини. «Ця дата вже минула — оберіть день цього тижня» — це помічник. «Помилка» — це докір. Одне доводять до кінця; інше кидають. Це невелика, але справжня частина дизайну форм, і варто перевірити кожне повідомлення про помилку, яке може показати ваш застосунок.
Як зробити форму зручною для мобільних пристроїв?
На телефоні найбільше важать дві речі, і телефони суворо карають ліниві форми. По-перше, викликайте правильну клавіатуру: поле для e-mail має відкривати клавіатуру із символом @, поле для телефону — цифрову панель. Ваш білдер може це налаштувати, і це перетворює набір тексту з рутини на дотик. По-друге, для дат використовуйте справжній календар замість того, щоб людина набирала «21.06.2026» великими пальцями — календар, у якому досить торкнутися дати, швидший і ніколи не дає дату в неправильному форматі.
Спробуйте самі: відкрийте форму вашого застосунку на власному телефоні й заповніть її так, наче ви поспішаючий незнайомець. Тертя виявляється секунд за десять.
Що має статися після того, як людина відправила форму?
Покажіть чітке підтвердження в ту саму мить, коли форму відправлено, — повідомлення, подяку, «ми отримали, ось що буде далі». Найчастіше пропускають саме кінець форми. Людина тисне «відправити» — і… нічого видимого не відбувається. Пройшло чи ні? Треба спробувати ще раз? Ця тиша змушує людей відправляти повторно або, гірше, думати, що щось зламалось, і йти. Це лише один екран, але саме він визначає, чи довірятиме людина вашому застосунку, чи запідозрить, що щойно змарнувала час.
Як сформулювати запит своєму білдеру
Більшість із цього можна прямо доручити своєму AI-білдеру, якщо сформулювати конкретно:
- «Ця форма має мати лише три поля: ім’я, телефон і бажану дату. Все інше перенеси на пізніший крок».
- «Зроби всі поля необов’язковими, крім імені та e-mail».
- «Показуй повідомлення про помилки одразу біля кожного поля, поки користувач вводить дані, простою мовою — а не один список помилок унизу».
- «Використай клавіатуру для e-mail у полі e-mail і календар для поля з датою на мобільних».
- «Після відправлення покажи екран підтвердження з повідомленням, що ми отримали заявку, і що буде далі».
Кожен із цих пунктів — чітка інструкція, за якою білдер може діяти, і разом вони охоплюють більшу частину того, що відрізняє форму, яку заповнюють до кінця, від тієї, з якої тікають.
Як протестувати форму перед публікацією?
Відкрийте її на телефоні й спробуйте заповнити якнайшвидше, наче бачите вперше. Це весь тест. Помічайте кожне місце, де вагаєтесь, мружитесь або мусите замислитись, — саме в цих місцях реальні користувачі кидають форму, і тепер ви точно знаєте, що виправляти першим.