Анкета в аккордеонах

Чтобы взять кредит или займ через Банки.ру, человек проходит один и тот же путь: витрина → авторизация → анкета → персональные одобрения. Анкета общая для потребкредитов и МФО, сценарии почти совпадают.

Моя зона — формат заполнения и проверки данных. И интерактивный прототип под UX-тесты, который я собрал сам.

Как устроено на проде

1. Параметры — сумма и срок, если их не выбрали на витрине
2. Паспорт, адрес регистрации, контакты
3. Доход и работа — при официальном трудоустройстве обязательны девять полей об организации
4. Личные данные — образование, семья, дети, контактное лицо

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

Текущие шаги анкеты на проде

Отвалы внутри анкеты стабильные, а не разовые. Ниже — срез с продакшена.

• Пришли на страницу

  177,4k

• Авторизация

  31,8k

  17,9%

• Контактные данные

  24,9k

  78,6%

• Паспорт

  20,5k

  82,1%

• Работодатель

  18,1k

  88,2%

• Доп. информация

  16,5k

  91,2%

• Экран одобрений

  15,8k

  95,7%

Самый большой обвал — до анкеты, на авторизации: дальше проходит 17,9%. Внутри анкеты до конца доходит примерно половина, и основные потери там же, где всегда: контакты и паспорт. После паспорта воронка выравнивается — кто прошел его, чаще дожимает форму.

Динамика за год

78% → 56%

анкета пройдена, июнь 2024 → июнь 2025

3% → 31%

отвал на первом шаге, параметры

8—10%

отвал на паспорте, каждый месяц

Отвалы по шагам анкеты, апрель 2024 — июнь 2025

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

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

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

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

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

Аккордеоны — средний путь между «ста мелкими шагами» и «стеной полей». Каждый раздел анкеты — отдельный аккордеон, все они на одном экране, открыт текущий.

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

За этим стоит старый инсайт продакта: на одном большом полотне у новых конверсия падала, у повторных росла. Аккордеоны — попытка закрыть оба сценария одной разметкой.

	Новый	Повторный
Заголовок	Заявка на займ	«Проверьте данные»
Старт формы	пустая	предзаполненная
Открытый раздел	первый незаполненный	параметры займа
Госуслуги	виджет и кнопка в баре	не показываем
Задача экрана	заполнить с нуля	проверить и поправить

Дальше путь общий: подтверждение дохода → витрина с одобрениями.

Новый и повторный на одном экране

Разделы

1. Паспорт РФ, адрес и дата регистрации
2. СНИЛС и ИНН
3. Контактные данные
4. Текущее место работы
5. Личные данные
6. Контактное лицо
7. Необязательное: авто и недвижимость

Поверх формы — аккордеон «Параметры займа»: свернутый, он показывает одну строку «Займ, 10 000 ₽, 14 дней». Рядом плашка доверия: компании из реестра ЦБ, Банки.ру не берет комиссию.

Автоматика

• При загрузке открыт первый незаполненный раздел
• Заполненный сворачивается, открывается следующий
• «Личные данные» не сворачиваются: после селектов там остается тоггл про детей
• В свернутом виде — статус: пусто, зеленая галочка или ошибка; тап по ошибке открывает раздел и ведет к проблемному полю

Разделы со статусами: пусто, заполнено, ошибка

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

Как сделали

1. Сначала тип занятости
2. Есть работодатель — спрашиваем только название организации
3. Ищем в реестре компаний и показываем список
4. По выбору автозаполняем все, что есть в реестре: ИНН, адрес, телефон, численность, тип
5. Человеку остается должность и дата начала работы

Реквизиты своей компании люди не знают и построчно не сверяют. Выбор из реестра дает достаточно корректный ввод — и снимает главный вопрос шага: где вообще взять эти данные.

Поиск организации и реквизиты после выбора

Поля

• Плавающий лейбл: у пустого поля он стоит на месте значения, при вводе уезжает вверх
• Маски на лету — даты, паспорт, телефон, СНИЛС, ИНН, сумма
• Валидация на уходе из поля, а не на каждом символе: пустое поле — еще не ошибка
• Ошибка — красная обводка и короткая тряска, снимается при возврате фокуса
• На «Продолжить» с ошибками: подсвечиваем все, раскрываем нужный раздел, скроллим к первому полю

Поле: пустое, в фокусе, с ошибкой

ФИО: одно поле вместо трех

Стартуем с одного поля «Фамилия Имя Отчество». Тап — и оно раскрывается в три поля стопкой, фокус на фамилии. Сворачивается обратно, только когда заполнены все три или ни одного: частично введенное остается открытым. Есть тоггл «по паспорту без отчества».

Зачем: меньше шума на старте и привычные отдельные поля при вводе — без ручного разбиения строки.

ФИО: свернуто и раскрыто

Адрес — только из списка

Все адресные поля в форме readonly, тап открывает шторку с поиском. Адрес попадает в анкету только выбором подсказки: набранный текст без выбора не сохраняется.

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

Шторка адреса с подсказками

Подсказки

Вместо ссылок под полями — иконка «i» и шторка: где найти адрес и дату регистрации, зачем город получения, как узнать СНИЛС, ИНН или ИНН организации. В форме от этого заметно меньше визуального шума.

Раньше на шаге паспорта стоял попап Госуслуг, и он резал конверсию. Здесь Госуслуги — необязательный способ заполнить анкету быстрее.

• Верхний виджет только у новых: «заполните анкету в один клик», после входа — «заполнили часть анкеты за вас»
• В нижнем баре основная кнопка всегда «Продолжить», кнопка Госуслуг серая и с ней не конкурирует
• Она появляется, только если анкета еще не полная и виджет ушел с экрана; после ручного заполнения или входа — исчезает
• Бар при скролле сжимается в пилюлю, при открытой клавиатуре прячется

У повторного ни виджета, ни кнопки нет: данные уже есть, задача — проверить их, а не заполнить заново.

Виджет Госуслуг и нижний бар

• Не дали выбирать МФО галочками — это било по экономике одобрений
• Не встроили подтверждение дохода внутрь аккордеонов: отдельный барьер, отдельный шаг
• Не вернули попап Госуслуг на паспорт
• Не обещали в интерфейсе выбор партнеров, которого на самом деле нет

Чтобы проверить формат на людях, я собрал кликабельный мобильный прототип. Респондент открывает ссылку на телефоне и проходит сценарий как настоящий продукт: валидации, шторки, автопереходы аккордеонов, два флоу и путь до витрины с одобрениями.

15+

экранов сквозного пути

2

флоу: новый и повторный

0

фреймворков и UI-китов

Слой	Что
Сборка	Astro 5, статика
UI	HTML, CSS и немного JS — без React и UI-китов
Состояние	свой контекст в window, session- и localStorage
Данные	офферы и тексты отдельными файлами
Внешние API	Яндекс.Карты для адресов, демо-реестр организаций
Деплой	Vercel, дубль в Yandex Object Storage

Дубль на Object Storage нужен потому, что ссылка Vercel в России открывается не у всех: часть респондентов и коллег иначе просто не зашла бы.

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

Сквозной путь в прототипе: витрина → анкета → одобрения

Скилл для ИИ-агентов

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

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

Потребление токенов на итерациях упало больше чем на 30%: агент реже бродит по коду и чаще попадает в нужный файл с первого раза. Сам прототип начинался раньше скилла — скилл вырос из него.

Модерируемый UX-тест, июль 2026. Все на смартфонах, все брали займ онлайн за последние полгода и пользовались агрегаторами. В одном прогоне — анкета, подтверждение дохода и карточки одобрений.

8

респондентов: 4 новых и 4 повторных

5,0 / 5

удобство заполнения и проверки

0

критичных блокеров

Наблюдение	Деталь
Формат зашел	5,0 из 5 и у новых, и у повторных
Почему удобно	виден объем работы, блоки не перегружают, галочки показывают готовность
Автоматика критична	сворачивание ценят при условии, что оно работает без багов
Госуслуги	виджет понятен, не читается как реклама, нижний бар не мешает
Минор	один повторный не понял, сохранилась ли правка поля

Оговорка исследования: прототип был идеально сверстан. На проде эффект упрется в качество автоматики аккордеонов.

Решение команды после Discovery: формат берем в разработку, критичных правок по анкете нет. Остались десктоп и корнер-кейсы в спеке.

• Формат качественно подтвержден и для новых, и для повторных
• Передано в разработку: логика поведения и макеты
• Заложен A/B по финальному шагу повторного: аккордеоны против чек-листа перед витриной

Цифры — после выкладки

Главная метрика — конверсия «старт анкеты → завершение», отдельно по новым и повторным. Baseline для сравнения уже есть.

Метрика	Baseline	После
Анкета пройдена	56%	—
Отвал на первом шаге	31%	—
Отвал на паспорте	10%	—
Контакты → паспорт	82,1%	—

1. Сначала воронка, потом формат. Структуру заставили менять отвалы на паспорте и просадка завершения с 78% до 56%, а не желание сделать аккордеоны.
2. Мелкая нарезка не равна меньшей нагрузке: на длинной обязательной анкете она делает хуже.
3. Главный friction часто не в количестве полей, а в том, что данных нет под рукой. Реестр организаций снял его, не добавив ни одного экрана.
4. Не только Figma: живой прототип, инфраструктура и процесс для агентов — быстрее тесты, дешевле итерации, проще передача в разработку.