Многошаговая форма: дизайн UX

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

Назначение: {{form_purpose}} Шагов: {{step_count}} Срочность: {{completion_urgency}}

6 принципов многошаговой формы

1. Каждый шаг — autosaved. Refresh, закрытие вкладки, переход → данные не теряются. Без этого — провал.
2. Прогресс честный. Если шагов 5, показывай 5. Не «Step 1 of many». Если динамический — диапазон («3-5 steps»).
3. Back не теряет. Кнопка «Back» возвращает с заполненными данными. Browser back — тоже.
4. Validation после касания, не на keystroke. Не показывать ошибку, пока юзер не покинул поле или не нажал Next.
5. Errors — конкретные. «Email is invalid» — плохо. «Email is missing @ — try name@example.com» — хорошо.
6. Можно выйти и вернуться. Save & exit button. Email-link на возврат («Continue your application»).

Архитектура шагов

Прогресс-индикатор

• Stepper (top): для 3-6 шагов. Показывает name каждого шага, current highlighted, completed — checkmark.

  ① Personal info  →  ② Address  →  ③ Payment  →  ④ Review
  ●                   ○              ○              ○
  

• Progress bar (top): для 7+ шагов или dynamic. «Step 3 of 7 — Almost there».
• Подсказка времени: «About 5 minutes left». Особенно важно для длинных форм.

Структура одного шага

┌─────────────────────────────────┐
│ Stepper / progress              │
├─────────────────────────────────┤
│ STEP TITLE                      │
│ Short subtitle/instruction      │
│                                  │
│ [field 1]                       │
│ [field 2]                       │
│ [field 3]                       │
│                                  │
│ Optional: «Why we ask?» link    │
│                                  │
├─────────────────────────────────┤
│ [Back]              [Save & exit]│   ← бывший слева, потом справа
│                       [Next →]   │
└─────────────────────────────────┘

Поведение Next

• Click → validate всех полей шага → если ошибки, highlight + focus first error.
• Если успех — autosave → next step. Loading state на кнопке (spinner inside Next).
• Disable Next до заполнения required полей? Нет. Лучше показать ошибки после клика (юзер не понимает, почему disabled).

Поведение Back

• Возврат на предыдущий шаг с заполненными данными.
• Без confirm (если данные сохранены) — back работает мгновенно.

Save & exit

• Кнопка справа (или в меню «...»).
• Сохраняет текущее состояние, показывает «Saved. You can continue later from <email link / dashboard>.»
• Email-link с токеном на 7 дней — must-have для длинных форм.

Validation timing

Error recovery

Per-field

• Inline ошибка под полем, красный border, иконка.
• Текст: что не так + как починить («Email is missing @ — try name@example.com»).
• Иконка info с расширенным объяснением при сложных правилах.

Per-step

• Если несколько полей — summary вверху шага: «3 issues to fix» + список со скроллом к каждому.

Server-side (после submit)

• Если ошибка приходит с сервера — вернуться к нужному шагу, focus на поле с ошибкой.
• НЕ показывать generic «Something went wrong» — это убийство confidence'а.

Edge cases

• Refresh посередине: загружается с того шага, на котором был. Все данные ✓.
• Сессия истекла: «You were signed out. Reopen the link from your email to continue.»
• Несколько вкладок: только одна активная (или syncing через localStorage).
• Required attachment / upload: progress bar внутри шага. Если падает — retry без потери остальных данных.
• Conditional fields: field B появляется на основе ответа на A — без перепрыгивания страницы.

Длина формы

• 3-4 шага — оптимально. 5-7 — приемлемо с честным прогрессом. 8+ — split into 2 sessions (часть 1 → email с продолжением).
• Один шаг = одна тема. Не «Personal + Address + Payment в одном». Это убивает скорость заполнения.
• Максимум 5-7 полей на шаге. Больше — split дальше или используй sub-secions с accordion.

Mobile-адаптация

• Stepper → progress bar (stepper не помещается).
• One-handed: primary action (Next) — внизу, full-width, sticky bottom.
• Back — слева вверху (иконка ←), не рядом с Next (нажмут случайно).
• Keyboard на mobile: input type=email, tel, numeric — для правильной клавиатуры. autocomplete=on, autocapitalize=words и т.д.

A11y

• Каждый шаг — <form> с явным aria-label.
• Stepper — role="list", текущий шаг aria-current="step".
• Progress bar — role="progressbar" с aria-valuenow, aria-valuemax.
• Error messages — aria-describedby на поле, role="alert" на сообщении.
• Focus order правильный: после Next focus уходит на title нового шага или первое поле.

Формат вывода

Структура (общая)

• Прогресс-индикатор: stepper или bar?
• Шаги: список с title и кол-вом полей в каждом
• Estimated time

Per-step spec

Для каждого шага:

• Title + subtitle
• Поля (с типами)
• Validation rules
• Conditional logic (если есть)

Autosave

• Что и когда сохраняется
• Как уведомляется юзер
• Email-link / dashboard для возврата

Validation timing

| Когда | Что |

Errors

• Per-field: формат + примеры
• Per-step summary: формат
• Server-side: как обрабатывается

Save & exit

• Где кнопка
• Что происходит
• Возврат: как

Edge cases

3-5 пунктов: refresh / session timeout / conditional fields / etc.

Mobile-spec

Что меняется на 375px.

A11y чеклист

Роли, keyboard, focus order.

Anti-patterns (НЕ делать)

• ❌ Refresh теряет данные. Это форма прошлого века.
• ❌ Validation на каждое нажатие. «Email» → «E» → ошибка «Email is invalid». Юзер ненавидит.
• ❌ Generic error «Something went wrong». Скажи, что именно и куда смотреть.
• ❌ «Step 1 of ??». Юзер не понимает, сколько ещё.
• ❌ Disable Next до заполнения. Юзер думает, что кнопка сломана.
• ❌ Длинный шаг с 30 полями. Split.
• ❌ Back без сохранения данных в forward. Юзер пере-заполняет — уходит.
• ❌ Нет save-and-exit. Длинная форма без exit — это насилие.
• ❌ Stepper, который скроллится горизонтально на mobile и обрезается. Используй progress bar.
• ❌ Focus после Next остаётся на старой кнопке. Screen reader не понимает, что страница изменилась.