Форма из пяти полей потопила стартап. Как проектировать формы правильно

Стартап продавал B2B-аналитику. Продукт работал, демо вызывало восторг, в пайплайне было больше двухсот лидов в месяц. Через полгода компания закрылась. На разборе обнаружили простую вещь: форма регистрации из пяти полей съедала около 70% входящего трафика. Email, имя, компания, должность, размер команды — и кнопка «Начать». Люди приходили, смотрели на форму и уходили.

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

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

---

## Почему форма — это не «просто поля»

Когда пользователь видит форму, он одновременно отвечает себе на три вопроса:

• Сколько это займёт времени?
• Что со мной сделают с этими данными?
• Стоит ли результат этих усилий?

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

Из этого следует неприятный вывод: визуальный объём формы важнее её реального содержания. Четыре поля, разнесённые на четыре экрана с прогресс-баром, конвертируют лучше, чем те же четыре поля одним блоком с подписями в три строки.

### Что на самом деле считает мозг пользователя

• Количество видимых полей (а не общее)
• Длину подписей и хелперов
• Наличие звёздочек «обязательно»
• Сложность ожидаемого ответа («компания» — просто, «как вы планируете использовать продукт» — нет)
• Юридические ссылки и галочки согласий

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

---

## Главный вопрос перед каждым полем: зачем оно здесь

Вернёмся к стартапу из начала. Когда команда садилась пересматривать форму, выяснилась типичная картина:

• Имя — «чтобы письма были персонализированными»
• Компания — «чтобы продажники понимали контекст»
• Должность — «чтобы сегментировать в CRM»
• Размер команды — «чтобы маркетинг знал ICP»

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

Это и есть базовый анти-паттерн: форма как удобный способ собрать данные для внутренних процессов за счёт внешнего пользователя.

### Тест на необходимость поля

Для каждого поля задайте три вопроса подряд:

1. Что сломается в продукте, если этого поля не будет прямо сейчас?
2. Можно ли получить эти данные позже — автоматически или по ходу использования?
3. Готов ли я лично заполнить это поле, чтобы попробовать незнакомый продукт?

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

### Анти-паттерны, которые встречаются почти везде

• Поле «телефон» в форме, после которой не будет звонка
• Поле «должность» в продукте, который не сегментирует по должностям
• Поле «как вы о нас узнали» — атрибуция, которую дизайнер платит конверсией
• Подтверждение пароля при наличии кнопки «показать пароль»
• Поле «отчество», когда оно не используется ни в одном письме и интерфейсе
• Капча на форме, где нет проблемы со спамом

### Вопросы для ревью формы с командой

• Какие поля здесь существуют ради внутренних процессов, а не ради пользователя?
• Что из этого можно перенести в follow-up email или в онбординг внутри продукта?
• Какие поля можно заполнить автоматически — по домену, геолокации, прошлым сессиям?
• Если бы за каждое поле платили 5% конверсии — какие бы оставили?

Последний вопрос — самый честный. Потому что вы за них и так платите, просто не видите цену в явном виде.

## Рабочий процесс: от макета до релиза

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

### Этап 1. Снять реальные требования

До открытия макета — разговор. Не «какие поля нужны», а «какие решения вы принимаете на основе этих данных».

Вопросы, которые стоит задать продакту, сейлзу и маркетингу:

• Что именно ты сделаешь с этим полем в первые 24 часа после регистрации?
• Если поле будет пустым у 30% пользователей, твой процесс сломается?
• Это поле уже есть где-то ещё (CRM, аналитика, обогащение)?
• Можно ли получить эти данные после первого ценного действия в продукте?

Половина полей отваливается на этом этапе — выясняется, что никто не пользуется ими в текущей форме, они там «исторически».

### Этап 2. Спроектировать минимальную версию

Соберите форму так, будто за каждое поле платите деньгами. Дальше — добавляйте только то, что переживёт ревью.

Базовый принцип последовательности:

• Сначала то, что пользователь уже знает наизусть (email, имя)
• Потом то, что требует короткой мысли (название компании)
• В конце — то, что требует выбора и сравнения (тариф, размер команды)
• Юридическое и согласия — рядом с кнопкой, не отдельным блоком сверху

### Этап 3. Прогнать форму на себе

Заполните её сами — с телефона, в браузере без автозаполнения, в неудобной позе. Это звучит банально, но 80% проблем находится здесь, а не на тестах.

На что обратить внимание:

• Где палец промахивается мимо поля
• Где клавиатура закрывает кнопку «Далее»
• Где автозаполнение подставляет не то
• Где валидация ругается на корректные данные
• Где после ошибки приходится перевводить пароль

## Диагностика: как понять, что форма ломается

Форма редко падает целиком. Обычно есть один-два шага, на которых уходит большинство. Задача — найти их быстро.

### Где смотреть в метриках

• Drop-off по каждому полю отдельно, а не по форме в целом
• Время заполнения — аномально долгое поле почти всегда либо непонятное, либо вызывает сомнения
• Частота правок одного и того же поля — индикатор плохой валидации или формулировки
• Процент пользователей, которые открыли форму с мобильного и переключились на десктоп

### Поведенческие признаки проблемного поля

• Пользователь несколько раз кликает в поле и уходит, не введя ничего — поле непонятное
• Стирает и переписывает — формат неочевиден
• Останавливается перед полем дольше, чем перед остальными — поле вызывает сомнение «зачем им это»
• Бросает форму на одном и том же поле каждый раз — это и есть точка отказа

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

### Быстрый юзабилити-тест на пять человек

Не нужен лабораторный сетап. Достаточно поймать пятерых знакомых, не работающих в IT, и попросить заполнить форму вслух. За час вы услышите больше, чем в трёх отчётах из аналитики.

Что фиксировать:

• На каком поле возникает пауза
• Какие слова в подписях вызывают переспрашивание
• Где человек угадывает формат, а не следует подсказке
• В какой момент звучит фраза «а это зачем»

Последняя — самая ценная. Каждое «а это зачем» — это поле, которое либо надо убрать, либо объяснить прямо в интерфейсе.

## Типичные ошибки в макете

Большинство дизайнеров знают про «не делайте плейсхолдер вместо лейбла». Но в живых макетах раз за разом всплывают те же грабли.

### Подписи и хелперы

• Лейбл внутри поля как плейсхолдер — исчезает при фокусе, пользователь забывает, что вводит
• Хелпер только под полем — мобильная клавиатура его закрывает
• Звёздочка «обязательно» без объяснения, что значат поля без звёздочки
• Подпись «Введите корректный email» вместо «Например, anna@company.com»

### Валидация

• Срабатывает на каждое нажатие клавиши, ругается на ещё недописанный email
• Срабатывает только по сабмиту, и пользователь видит сразу пять красных полей
• Сообщение об ошибке появляется сверху формы, а ошибка — в третьем поле снизу
• После ошибки форма сбрасывает уже заполненные поля (особенно пароль)

### Кнопки и финал

• Кнопка disabled до полного заполнения, без объяснения, что именно не так
• Две равнозначные кнопки «Отправить» и «Отмена» рядом
• После сабмита нет состояния загрузки, и пользователь кликает второй раз
• Успешная отправка без подтверждения — человек не понимает, сработало ли

### Чеклист перед отдачей формы в разработку

• Каждое поле прошло тест «что сломается без него»
• Лейблы снаружи поля, хелперы видны при открытой клавиатуре
• Валидация срабатывает по blur, а не по каждому символу
• Сообщения об ошибках конкретные и рядом с проблемным полем
• Кнопка сабмита имеет состояние loading и disabled с понятной причиной
• Форма заполняется автозаполнением браузера (правильные autocomplete атрибуты)
• Юридический текст не тяжелее самой формы
• Форма заполнена лично, с телефона, в реальных условиях

## Короткий итог сегмента

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

## Продвинутые сценарии: когда форма сложнее, чем «имя и email»

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

### Длинные формы: правила выживания

• Делите на шаги по смыслу, а не по равному числу полей. «Контакты», «компания», «оплата» — понятные блоки. «Шаг 1 из 4» без названия — нет.
• Показывайте прогресс. Не как декорацию, а как обещание: «осталось два коротких шага».
• Сохраняйте состояние между шагами и между сессиями. Если пользователь закрыл вкладку — он не должен начинать заново.
• Самые лёгкие поля — в начало. Это эффект инвестиции: чем больше человек уже вложил, тем меньше шанс, что бросит.
• Тяжёлые поля (загрузка документов, длинные тексты) — ближе к концу, но до финального сабмита, чтобы не пугать на старте.

### Условные поля и зависимая логика

Любое поле, которое появляется в зависимости от ответа в другом, — это риск. Пользователь видит, что форма «растёт», и теряет ощущение конца.

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

### Формы с файлами и сложным вводом

• Загрузка документа должна показывать превью и имя файла, а не «успешно». Люди не верят молчаливому успеху.
• Для номеров (карта, ИНН, паспорт) — маска, но такая, чтобы её можно было вставить из буфера обмена. Маска, ломающая paste, — классический способ потерять пользователя.
• Поля с автодополнением (адрес, компания) экономят минуты, но молча падающее API превращает форму в загадку. Всегда оставляйте ручной ввод как фолбэк.

## AI и формы: где помогает, где мешает

Соблазн «давайте поставим AI вместо формы и пусть пользователь говорит словами» — растёт. Иногда это работает. Чаще — нет.

### Где AI реально снимает боль

• Парсинг свободного ввода в структурированные поля: адрес одной строкой, реквизиты из вставленного куска текста, дата в любом формате.
• Подсказки и автозаполнение на основе предыдущих ответов внутри той же формы.
• Объяснение, зачем нужно поле, по запросу — вместо длинного хелпера в макете.
• Проверка качества: модель «проходит» форму до релиза и фиксирует двусмысленные подписи.

### Где AI вредит

• Замена формы чатом там, где у пользователя чёткая задача. Заполнить пять полей быстрее, чем вести диалог.
• Скрытые поля, которые модель «додумывает» за пользователя. Любая ошибка модели = ошибка в данных, которую никто не заметил.
• Валидация через LLM в реальном времени без детерминированного фолбэка. Пользователь не должен ждать ответа модели, чтобы понять, что email невалидный.

Правило простое: AI хорош как слой поверх формы, а не вместо неё. Структура полей остаётся, ввод становится терпимее.

## Как объяснять решение команде

Половина плохих форм рождается не от незнания, а потому что дизайнер не смог отстоять сокращение полей. На встрече побеждает не правота, а аргумент.

### Аргументы, которые работают

• «Каждое лишнее поле — минус к конверсии». Если есть свой drop-off — покажите. Если нет — сошлитесь на данные из аналитики продукта в целом.
• «Это поле не используется ни в одном downstream-процессе». Самый сильный аргумент: данные собираем, но никто не читает.
• «Маркетинг может дособрать это потом — после активации, а не до». Часто работает: бизнес получает данные, продукт — конверсию.
• «Юрист подтвердил, что без этого поля релиз возможен». Без этой проверки спор бесконечный.

### Анти-паттерны коммуникации

• Спорить вкусом. «Мне кажется, это лишнее» проигрывает любой бизнес-логике.
• Приносить готовый макет без обсуждения полей. Решение о полях принимается до Figma, а не в ней.
• Соглашаться на «давайте добавим, потом уберём». Не уберёте.

### Вопросы для ревью формы в команде

• Какое поле здесь самое дорогое по drop-off и почему оно осталось?
• Что произойдёт с пользователем, если он ошибётся в третьем поле снизу?
• Эта форма работает с автозаполнением браузера и менеджером паролей?
• Кто-то заполнил её лично, с телефона, на плохом интернете?
• Какой следующий шаг после успешной отправки и виден ли он сразу?

## Короткий итог сегмента

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

## Финальный чеклист: форма перед релизом

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

### Содержание и поля

• Каждое поле имеет ответ на вопрос «зачем оно здесь и кто это читает»
• Все поля, которые можно собрать после активации, перенесены после неё
• Обязательные поля отмечены явно, необязательные — не маскируются под обязательные
• Подписи полей описывают, что вводить, а не как это называется в БД
• Подсказка под полем короче подписи или её нет вовсе

### Поведение и ввод

• Форма дружит с автозаполнением браузера и менеджером паролей
• Маски не ломают вставку из буфера
• Числовые поля на мобильном открывают числовую клавиатуру
• При переключении радиокнопок и табов введённые данные сохраняются
• Длинная форма помнит состояние при случайном обновлении страницы

### Ошибки и обратная связь

• Валидация срабатывает после ухода с поля, а не на каждое нажатие
• Текст ошибки говорит, что сделать, а не просто «неверный формат»
• При сабмите фокус прыгает на первое поле с ошибкой
• Успех показывает, что произошло дальше и где это искать
• Сетевые сбои не стирают введённое

### Контекст и устройство

• Форма проверена на маленьком экране и на медленном интернете
• Клавиатура не перекрывает активное поле
• Тач-цели не меньше 44 пикселей
• Форма работает с клавиатуры, без мыши, по табу
• Скринридер читает подписи, а не «edit text»

## Анти-паттерны, которые встречаются чаще остального

Если вы видите хотя бы один из этих пунктов в своём продукте — это не вкусовщина, это известная дыра.

• Поле «комментарий», обязательное к заполнению. Никто не знает, что туда писать, все пишут «-».
• Капча на каждой попытке логина. Удобство теряется быстрее, чем боты — мотивацию.
• Слитный ввод телефона без кода страны и без определения по геолокации. Половина международных пользователей уходит.
• Двойной ввод email «для подтверждения». Решает несуществующую проблему за счёт реальной конверсии.
• Сброс пароля, который требует ввести старый пароль. Если бы человек его помнил, он не нажал бы «забыл».
• Кнопка «Очистить форму» рядом с «Отправить». Существует только чтобы её нажали по ошибке.
• Поле «Откуда вы о нас узнали?» как обязательное. Маркетинговая метрика ценой конверсии.
• Скрытие пароля без возможности показать. На мобильном это гарантированная опечатка.
• Сообщение «что-то пошло не так» без указания, какое поле виновато. Игра в угадайку для пользователя.

## Вопросы для ревью любой формы

Прогоните этот список до того, как форма уйдёт в спринт.

• Кто заказчик каждого поля и что произойдёт, если поле убрать?
• Какой минимальный набор данных нужен, чтобы пользователь получил ценность?
• Что увидит человек, который заполнил всё правильно, но сервер ответил 500?
• Если форма длинная — где разумные точки сохранения прогресса?
• Можно ли пройти её одной рукой, держа телефон в метро?
• Что произойдёт, если пользователь вернётся через час, день, неделю?
• Какие поля сейчас собираются, но не используются ни в одном отчёте и ни одной фиче?
• Если завтра нужно будет добавить ещё одно поле, какое уберём?

## Практический итог

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

Стартап из заголовка потонул не потому, что у него было пять полей. Он потонул потому, что никто в команде не задал этот вопрос ни одному из них. Форма — это всегда зеркало того, как команда думает о пользователе. И починить её можно ровно настолько, насколько команда готова услышать, что часть данных собирать пока рано.