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

Что разберём

Подпись, подсказка и ошибка — три разных текстатренажёр
Когда проверять полеживое поле
Шаги по смыслу, а не поровнудо и после
Назад без потери данныхсхема
Черновик: уйти и вернутьсяпереключатель
Ошибка отправки, когда всё заполненопереключатель
Найдите ошибки на шаге «Реквизиты»поиск

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

1Подпись, подсказка и ошибка — три разных текста

У поля три текста, и у каждого своя работа. Подпись называет, что ввести. Подсказка объясняет, как или где это взять. Ошибка говорит, что не так и как исправить.

Когда тексты путают, каждый делает чужую работу плохо:

подпись с инструкцией длинная и читается дольше;
подсказка, повторяющая подпись, занимает место и ничего не добавляет;
ошибка, повторяющая подсказку слово в слово, не говорит, что именно не так.

Поле «ИНН» · три текста

ИНН10 цифр у компании, 12 — у индивидуального предпринимателяВ ИНН компании 10 цифр, а сейчас 9770123456

Подпись — одно слово. Подсказка отвечает, сколько цифр. Ошибка говорит, сколько ждали и сколько получили.

Текст	На какой вопрос отвечает	Когда виден	Как испортить
Подпись	Что ввести	Всегда	Вписать в неё инструкцию: «ИНН (10 или 12 цифр, без пробелов)»
Подсказка	Как ввести и где взять	Всегда, под подписью	Повторить подпись: «Введите ИНН»
Ошибка	Что не так с этим значением и что сделать	Когда значение не подошло	Повторить подсказку: «10 цифр у компании, 12 — у ИП»

Подсказку пишут не к каждому полю. «Название компании» подсказки не требует. «Отсрочка платежа» — требует: непонятно, от какого дня её считать.

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

Проверьте себя

Восемь текстов у полей формы «Новый поставщик». Подпись, подсказка или ошибка?

Тренажёр · подпись, подсказка или ошибка

«Расчётный счёт»
ПодписьНазывает, что ввести, — коротко, словами из документа.
«20 цифр, есть в карточке компании поставщика»
ПодсказкаОтвечает, как выглядит значение и где его взять. Видна всегда, а не только после ошибки.
«В расчётном счёте 20 цифр, а сейчас 18»
ОшибкаГоворит, что не так именно с этим значением: двух цифр не хватает.
«Сколько дней после поставки есть на оплату»
ПодсказкаОбъясняет, от чего считать дни. Подпись над ней — «Отсрочка платежа, дней».
«Такого БИК нет в справочнике банков. Проверьте цифры»
ОшибкаЗначение по формату верное, но не нашлось. Ошибка говорит, что делать: проверить цифры.
«Минимальная партия, кг»
ПодписьЧто ввести и в каких единицах. Единицы — в подписи, чтобы не писать их в каждом значении.
«PDF со всеми подписями, до 20 МБ»
ПодсказкаОграничения сказаны до загрузки договора, а не в ошибке после неё.
«Выберите, кто платит за доставку»
ОшибкаТак звучит ошибка пустого обязательного поля: глагол и что выбрать.

Если текст не отвечает ни на один из трёх вопросов — что ввести, как, что не так, — он лишний.

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

2Когда проверять поле

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

У проверки четыре привычных момента. Разница между ними лучше всего видна на живом поле.

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

Момент проверки	Когда человек видит ошибку	Чем платит
На вводе	На первом же знаке	Его поправляют, пока он не закончил. Ошибка мигает на каждом символе
При уходе из поля	Когда перешёл к следующему полю	Исправил — а ошибка висит, пока снова не уйдёт из поля
При отправке	После кнопки	Узнаёт обо всём в конце; в длинной форме — через несколько шагов
При уходе, потом на вводе	Когда перешёл к следующему полю; исчезает сразу после исправления	Сложнее в разработке: у поля два режима

Что показало исследование

Известное исследование момента проверки провёл Люк Вроблевски вместе с лондонской компанией Etre в 2009 году. 22 человека заполняли шесть вариантов одной формы регистрации.

Лучший вариант проверки у поля по сравнению с проверкой после кнопки дал:

на 22 % больше успешных заполнений;
на 22 % меньше ошибок;
на 42 % меньше времени на заполнение.

Проверка после ухода из поля оказалась на 7 секунд быстрее проверки во время ввода. И на 10 — проверки, которая начиналась, как только человек вставал в поле: обе ругали тех, кто ещё не закончил.

Исследованию 17 лет, и каждый участник заполнял все шесть форм подряд. Поэтому проценты — направление, а не точная мера.

Что советуют сейчас

Baymard Institute в 2024 году советует тот же порядок, что и последний режим тренажёра. Проверять поле, когда человек из него ушёл, а сообщение об ошибке обновлять на каждом знаке — чтобы оно исчезло, как только значение стало верным.

Там же посчитали, что у 31 % интернет-магазинов из их выборки проверки у поля нет вовсе.

В Контур.Гайдах основная проверка — тоже при потере фокуса. Проверка при отправке — для случаев, когда при уходе из поля проверить нельзя.

И отдельное правило: пустое поле при уходе из него не ругают. Человек мог пока пройти мимо.

Расходятся Baymard и Вроблевски в мелочи. Baymard советует отмечать верное поле галочкой, а у Вроблевски галочки у простых полей вроде имени сбивали участников.

GOV.UK Design System советует иначе: не проверять при уходе из поля, а ждать, пока человек попробует перейти дальше. Проверка до конца ввода мешает, особенно тем, кто печатает медленно.

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

Когда проверять на вводе

Проверка на вводе уместна там, где она помогает, а не ругает. Например:

счётчик знаков у поля с пределом;
условия пароля, которые отмечаются по мере ввода;
проверка «такой логин уже занят» после паузы в наборе.

Вроблевски так и пишет: помогать во время ввода можно, но с задержкой, чтобы преждевременные ошибки не злили.

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

3Шаги по смыслу, а не поровну

Длинную форму делят на шаги там, где меняется тема или нужен другой документ, а не через каждые четыре поля.

В форме «Новый поставщик» шестнадцать полей. Их можно разложить на четыре шага по четыре поля — выглядит ровно.

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

Форма «Новый поставщик» · как разбить на шаги

Поровну

Шаг	Поля
1	Название, ИНН, КПП, БИК банка
2	Расчётный счёт, контактное лицо, телефон, почта
3	Сайт, минимальная партия, срок поставки, кто платит за доставку
4	Отсрочка платежа, договор, комментарий, отметка «Проверен»

ПоровнуБанковские реквизиты разорваны между шагами 1 и 2, условия поставки — между 3 и 4. На каждом шаге нужен другой документ, и непонятно, о чём шаг: у него нет названия.

По смыслу

Шаг	Поля	Откуда берут
1 · Компания	Название, ИНН, КПП, сайт	Из письма поставщика
2 · Реквизиты	БИК, расчётный счёт	Карточка компании от бухгалтера
3 · Контакты	Контактное лицо, телефон, почта	Из переписки
4 · Условия	Минимальная партия, срок поставки, доставка, отсрочка, договор	Договор от юриста
5 · Проверка	Всё введённое одним списком	—

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

Граница шага — там, где человек меняет документ или тему разговора.

Что показывать над шагом

Номер без общего числа — «Шаг 2» — не говорит, сколько осталось.

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

Шаг 2 из 5 · Реквизиты

Компания ✓
Реквизиты
Контакты
Условия
Проверка

Когда нужен мастер

В Nielsen Norman Group форму по шагам называют мастером. Её советуют новичкам и для дел, которые делают редко: шаги ведут по порядку и не дают пропустить нужное.

Там же советуют:

показывать список шагов с выделенным текущим;
называть на кнопке, куда она ведёт, — «Дальше: контакты», а не просто «Дальше»;
разрешать выйти на середине, сохранив введённое.

Если шаги приходится заполнять вразнобой, мастер не подходит: он держит строгий порядок. Тогда нужен список задач — о нём в разделе 5.

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

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

Руководство по сервисам GOV.UK идёт дальше в дробности: начинать с того, чтобы на каждой странице был один вопрос. А индикатор шагов GOV.UK Design System советует сначала убрать и проверить форму без него — может быть, она и так достаточно проста. Если индикатор всё же нужен, хватит простого «Вопрос 3 из 9».

Это другой масштаб. Сервисами GOV.UK пользуются раз в жизни, а форму поставщика менеджер заполняет несколько раз в год. Шагов в ней пять, а не тридцать, и ему проще видеть, что впереди.

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

4Назад без потери данных

Кнопка «Назад» возвращает на прошлый шаг со всем, что там введено, и не стирает то, что введено на текущем.

Менеджер на шаге «Условия» понял, что ошибся в ИНН. Он нажимает «Назад» три раза, исправляет цифру — и возвращается вперёд.

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

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

Шаг 5 из 5 · Проверка

КомпанияООО «Зерно Юга» · ИНН 7701234567 · КПП 770101001Изменить РеквизитыБанк «Восход» · счёт 40702 810 0 0000 0001234Изменить УсловияОт 60 кг · 14 дней · отсрочка 30 дней · договор.pdfИзменить Добавить поставщика

Проверка — последний шанс увидеть всё целиком. «Изменить» ведёт к полю и возвращает сюда же.

Не спрашивать дважды

Требование повторно не спрашивать есть и в WCAG 2.2: критерий 3.3.7 «Повторный ввод», уровень A, появился в версии 2.2.

То, что человек уже ввёл в этом же процессе, форма подставляет сама или даёт выбрать.

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

Страницу проверки перед отправкой описывает GOV.UK Design System — паттерн Check answers: человек видит все ответы, а у каждого раздела стоит ссылка «Изменить».

Любое движение по шагам сохраняет введённое. «Назад» — на шаг назад, «Изменить» на проверке — к полю и обратно на проверку.

5Черновик: уйти и вернуться

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

Менеджер заполнил компанию и контакты, а реквизиты бухгалтер поставщика пришлёт завтра. Закрыть вкладку должно быть не страшно.

Форма «Новый поставщик» · на следующий день

Без черновика

Сессия истеклаВойдите снова, чтобы продолжить. Шаг 1 из 5 · Компания Название ИНН

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

С черновиком

Вы остановились на шаге «Реквизиты»Компания и контакты сохранены вчера в 17:40. Черновик хранится 30 дней. Шаг 2 из 5 · Реквизиты БИК банка НазадДальше: контактыЧерновик сохранён в 09:12

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

В списке поставщиков черновик тоже виден: «ООО «Зерно Юга» · черновик · шаг 2 из 5 · Продолжить».

Вопрос	Как решить в админке
Где хранить	На сервере, а не только в браузере: менеджер начинает на рабочем компьютере, а продолжает с ноутбука
Когда сохранять	При уходе из каждого поля и при переходе между шагами, а не по кнопке «Сохранить черновик», о которой забудут
Как сказать	Тихой строкой у кнопок: «Черновик сохранён в 09:12». Не всплывающим окном на каждое сохранение
Как вернуться	Черновик виден в списке, а форма открывается на шаге, где остановились
Сколько хранить	Назвать срок прямо: «Черновик хранится 30 дней» — и предупредить, когда он подходит к концу

Автосохранение

В Контур.Гайдах ему отведена отдельная страница:

правки копят не дольше 5–10 секунд и отправляют на сервер;
у кнопки пишут «Черновик сохранён»;
если сервер не отвечает — сохраняют в браузере и повторяют попытки, пока связь не вернётся.

Список задач вместо шагов

Если части формы можно заполнять в любом порядке, вместо строгих шагов подходит список задач.

В GOV.UK Design System это паттерн Complete multiple tasks — для долгих дел, которые заполняют в несколько подходов.

Человек видит все разделы с отметками, что готово, а что нет. Выбирает, с чего начать, и возвращается к остальным позже.

Отдельного паттерна «сохранить и вернуться» в GOV.UK пока нет — заявка на него висит в списке задач команды с 2018 года.

Время сессии

В WCAG 2.2 у ограничения по времени есть несколько способов не мешать человеку (критерий 2.2.1, уровень A).

Один из них — предупредить заранее и дать не меньше 20 секунд, чтобы продлить время простым действием.

А если сессия всё-таки истекла, после повторного входа введённое должно остаться на месте. Это критерий 2.2.5 уровня AAA.

Его выполняют не все, но для длинной формы он важнее многих.

Черновик сохраняется сам, человек знает об этом и знает, где его найти. Возвращение открывает тот шаг, где он остановился.

6Ошибка отправки, когда всё заполнено

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

Ошибки отправки — не то же самое, что ошибки полей.

Поле может быть заполнено правильно, а сохранить всё равно нельзя: пропала связь, такой поставщик уже есть, сервер не ответил.

Шаг «Проверка» · после нажатия «Добавить поставщика»

Пропала связь

Не получилось сохранить: нет связиВсё введённое на месте. Проверьте интернет и нажмите «Добавить поставщика» ещё раз. КомпанияООО «Зерно Юга» · ИНН 7701234567 Добавить поставщика

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

Такой уже есть

Поставщик с ИНН 7701234567 уже естьООО «Зерно Юга», добавлен 12 марта. Открыть его или исправить ИНН. КомпанияООО «Зерно Юга» · ИНН 7701234567 Добавить поставщика

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

Сервер не ответил

Сервер не ответилЧерновик сохранён — данные не пропадут. Попробуйте через несколько минут. Если не выйдет, напишите в поддержку и назовите код CX-4821. КомпанияООО «Зерно Юга» · ИНН 7701234567 Добавить поставщика

Сервер не ответилЧеловек не виноват и сделать ничего не может, кроме как подождать. Ему говорят именно это, а код дают для поддержки, а не вместо объяснения.

Во всех трёх случаях форма не очищается и не возвращает на первый шаг.

Пока форма отправляется, кнопка показывает это — «Сохраняем…» — и не принимает второе нажатие. Иначе менеджер нажмёт дважды, пока ждёт, и в базе окажутся два одинаковых поставщика.

Ошибка отправки не стирает введённое. Она говорит, что случилось и что делать: повторить, открыть существующую запись или подождать. Второе нажатие во время отправки ничего не делает.

7Найдите ошибки на шаге «Реквизиты»

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

Нажимайте на куски формы, которые вы бы переделали. В разборе будет, что с ними не так. Нормальные куски тоже можно нажать.

Макет шага · найдите ошибки

Шаг 2

Новый поставщик

БИК банкаВведите БИК банка044525000 БанкБанк «Восход», МоскваПодставлено по БИК Корреспондентский счёт *20 цифр Расчётный счёт20 цифр, есть в карточке компании поставщика В расчётном счёте 20 цифр, а сейчас 240|курсор в поле, менеджер вводит Назадданные этого шага не сохранятся Дальше: контакты Черновик сохранён в 14:32 Сохранить и выйти

«Шаг 2» над формой.Дописать. Непонятно, сколько шагов осталось и как они называются. Нужно «Шаг 2 из 5 · Реквизиты» и список шагов.
Подсказка «Введите БИК банка».Переписать. Подсказка повторяет подпись и ничего не объясняет. Полезнее: «9 цифр, есть в карточке компании поставщика».
Банк, подставленный по БИК.Оставить. Форма сама нашла банк по БИК и показала его: менеджер сразу видит, не ошибся ли в цифрах.
Обязательный корреспондентский счёт.Убрать. Корреспондентский счёт однозначно следует из БИК — форма может подставить его сама, как подставила банк. Просить его ввести — лишние двадцать цифр и лишний повод ошибиться.
Подпись и подсказка у расчётного счёта.Оставить. Подпись называет поле, подсказка говорит, сколько цифр и где их взять.
Ошибка «20 цифр, а сейчас 2», пока менеджер вводит.Переделать. Проверка на вводе ругает того, кто ещё не закончил: две цифры из двадцати — не ошибка, а начало. Ошибку показывают, когда человек ушёл из поля.
«Назад» с предупреждением «данные этого шага не сохранятся».Переделать. Предупреждение честное, но решение плохое: шаг назад не должен ничего стирать. Переход между шагами сохраняет всё введённое.
Кнопка «Дальше: контакты».Оставить. Видно, куда ведёт кнопка, — следующий шаг назван.
Строка «Черновик сохранён в 14:32».Оставить. Тихо подтверждает, что можно уйти, ничего не потеряв.
Ссылка «Сохранить и выйти».Оставить. Явный выход для того, кто ждёт реквизиты от бухгалтера. Черновик и так сохранён, но кнопка снимает тревогу.

Все пять найдены. Шаг без общего числа и названия, подсказка-повтор, поле, которое форма заполнит сама, ошибка во время ввода и «Назад», который стирает. Каждая из них в длинной форме повторяется на каждом шаге.

Нормальные куски тоже можно нажать: вы прочитаете, почему там всё в порядке, а счётчик «Найдено» не изменится.

Длинную форму проверяют на середине, а не только на первом и последнем шаге: человек вводит, возвращается, уходит и приходит снова.

8Задание

Возьмите длинную форму, разбейте её на шаги, добавьте сохранение черновика и опишите, что происходит при ошибке отправки.

Часть 1 · Разложить, 30 минут

Выберите форму на десять полей и больше: подключение партнёра, заявка на кредит, анкета сотрудника, настройки магазина. Если своей нет, возьмите форму «Новый поставщик» из урока.
Для каждого поля выпишите, откуда человек берёт ответ: из головы, из документа, у коллеги.
Разбейте на шаги по источнику и теме. Дайте каждому шагу название.
Решите момент проверки для каждого поля и что из проверок нужно уже на вводе.

Длинная форма · заполните перед макетом

ФОРМА: ______________________        Дата: __.__.____
КТО ЗАПОЛНЯЕТ: ______________________
ЗА СКОЛЬКО ПОДХОДОВ: ______________________

ШАГИ
1 · название ____________  поля ____________  откуда берут ____________
2 · название ____________  поля ____________  откуда берут ____________
3 · название ____________  поля ____________  откуда берут ____________
последний · Проверка: всё введённое, «Изменить» у каждого раздела

ПРОВЕРКА ПОЛЕЙ
при уходе из поля: ______________________
на вводе (только помощь): ______________________
только на сервере: ______________________

ЧЕРНОВИК
где хранится: ______________________
когда сохраняется: ______________________
как человек узнаёт: ______________________
где найти и сколько хранится: ______________________

ОШИБКА ОТПРАВКИ
нет связи: ______________________
такая запись уже есть: ______________________
сервер не ответил: ______________________

Если у шага не придумалось название — скорее всего, он нарезан поровну, а не по смыслу.

Часть 2 · Нарисовать, 60 минут

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

Часть 3 · Проверить, 15 минут

Пройдите сценарий «бросить на середине»: дошли до третьего шага, закрыли вкладку, открыли форму снова. Где вы оказались и что видите?
Пройдите «назад три раза и обратно»: что-нибудь потерялось?

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

Что должно получиться

Схема шагов с названиями и источником данных у каждого.
Макеты: шаг с индикатором и тремя текстами у поля, возвращение к черновику, проверка, три ошибки отправки.
Заполненный шаблон длинной формы.

План работы: 30 минут на разбор, час на макеты, 15 минут на проверку.

Частые сложности

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

9Чек-лист и ошибки

Длинная форма готова, если

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

Что мешает

Проверка на каждом знаке. Форма ругает раньше, чем человек закончил.
Шаги поровну. Один документ разорван между шагами, у шагов нет названий.
«Назад» стирает шаг. Возвращаться страшно — форму бросают.
Черновик по кнопке. О ней забывают, а сессия истекает.
Ошибка отправки на пустой форме. Всё, что ввели, надо вводить заново.

10Три ступени темы

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

Ступень	Что нужно уметь	Как проверить результат
Junior	Ставить подпись над полем; убирать лишние поля и обосновывать оставшиеся; отмечать то, чего меньше; показывать ошибку у поля и словами; писать, что исправить	По каждому оставшемуся полю можно сказать, зачем оно и что сломается без него
Middle — этот урок	Разводить подпись, подсказку и текст ошибки; выбирать момент проверки; разбивать длинную форму на шаги по смыслу; сохранять черновик; продумывать ошибку отправки	Можно закрыть вкладку на середине, вернуться и продолжить с того же места
Senior	Задавать единый момент проверки; собирать словарь ошибок; описывать порядок полей и поведение кнопки отправки; проверять новые формы по правилам	Одна и та же ошибка во всех формах продукта звучит одинаково

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

Что почитать дальше

ВалидацияКонтур.Гайды · на русском · бесплатноПравила проверки полей в продуктах Контура: основная проверка при уходе из поля, пустое поле не ругают, связанные ИНН и КПП сверяют при отправке. С уроком расходится в двух местах: текст ошибки прячут в тултип, а подсказку допускают в плейсхолдере.
Сохранение данныхКонтур.Гайды · на русском · бесплатноКак устроить автосохранение большой формы: копить правки не дольше 5–10 секунд, хранить на сервере, показывать «Черновик сохранён» у кнопки. Отдельно разобран сбой: сервер не отвечает — сохранить локально и повторять попытки.
Расскажите о мастереСоветы Бюро Горбунова, Илья Бирман, 2023 · на русском · бесплатноКороткий разбор мастера от Ильи Бирмана: навигатор шагов, пара «Назад» и «Вперёд», сохранность данных даже при ветвлении шагов. В профессиональных интерфейсах Бирман считает мастер скорее нежелательным — доводы стоит сравнить с уроком.
Inline Validation in Web FormsA List Apart, Люк Вроблевски, 2009 · на английском · бесплатноИсследование Люка Вроблевски и Etre: 22 человека, шесть вариантов одной формы регистрации, проверка после ухода из поля против проверки во время ввода. Исследованию 17 лет, и каждый участник заполнял все шесть форм, поэтому проценты — направление, а не точная мера.
Usability Testing of Inline Form ValidationBaymard Institute, Эдвард Скотт, 2024 · на английском · бесплатноРазбор Baymard по тестам интернет-магазинов: не проверять поле, пока человек не закончил, снимать ошибку на каждом знаке, как только значение стало верным, и отмечать верные поля галочкой. Контекст — оформление заказа, а не длинная форма в админке.
Wizards: Definition and Design RecommendationsNielsen Norman Group, Ралука Будиу · на английском · бесплатноКогда мастер уместен (новички, редкие задачи) и чем он плох: лишние клики при частом использовании, трудно сравнивать шаги, тяжело прерваться. Статья требует строгого порядка шагов: если части формы заполняют вразнобой, нужен не мастер, а список задач.