Разработка мультишагового процесса регистрации (Wizard) мобильного приложения

Разработка мультишагового процесса регистрации (Wizard) мобильного приложения

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

Архитектура состояния

Главная ошибка — хранить данные каждого шага в отдельном ViewModel. При переходе "назад" состояние теряется, пользователь вводит данные повторно.

Правильно: единый RegistrationViewModel (или RegistrationStore в Redux/MVI архитектуре) хранит всё состояние wizard:

data class RegistrationState(
    val currentStep: RegistrationStep = RegistrationStep.PERSONAL_INFO,
    val personalInfo: PersonalInfoForm = PersonalInfoForm(),
    val contactDetails: ContactDetailsForm = ContactDetailsForm(),
    val accountSetup: AccountSetupForm = AccountSetupForm(),
    val isLoading: Boolean = false,
    val error: String? = null
)

sealed class RegistrationStep {
    object PersonalInfo : RegistrationStep()
    object ContactDetails : RegistrationStep()
    object AccountSetup : RegistrationStep()
    object EmailVerification : RegistrationStep()
    object Completed : RegistrationStep()
}

Каждый шаг — отдельный Composable/UIViewController, получающий фрагмент состояния и колбэки. Навигация управляется из ViewModel через currentStep, а не через NavController напрямую.

Навигация между шагами

В iOS — UIPageViewController (горизонтальный свайп) или кастомный ContainerViewController. В SwiftUI — TabView с .tabViewStyle(.page) и скрытыми индикаторами, или кастомный ZStack с анимацией slide.

В Jetpack Compose — AnimatedContent по currentStep:

AnimatedContent(
    targetState = state.currentStep,
    transitionSpec = {
        slideInHorizontally { width -> width } + fadeIn() with
        slideOutHorizontally { width -> -width } + fadeOut()
    }
) { step ->
    when (step) {
        is RegistrationStep.PersonalInfo -> PersonalInfoStep(...)
        is RegistrationStep.ContactDetails -> ContactDetailsStep(...)
        // ...
    }
}

Кнопка "Назад" — не системная back-кнопка (хотя её тоже обрабатываем), а явная кнопка в header с переходом к предыдущему шагу без сброса данных.

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

Линейный прогрессбар (LinearProgressIndicator) с анимированным заполнением — минимум. Дополнительно — шаг N из M, текстовое название текущего шага. Не показываем шаги, которые пользователь ещё не видел — только пройденные и текущий.

Валидация пошаговая

Каждый шаг валидируется перед переходом к следующему. Если пользователь возвращается на предыдущий шаг и меняет данные — перевалидируем зависимые последующие шаги (например, телефон изменился — OTP уже не актуален, email verification сбрасывается).

// iOS — валидация перед переходом
func proceedToNextStep() {
    guard case .success = validateCurrentStep() else {
        showValidationErrors()
        return
    }
    currentStep = currentStep.next
}

Восстановление прогресса

Если пользователь закрыл приложение на шаге 3 из 5 — что происходит при возврате? Варианты:

• Сбросить: простейший вариант, подходит для коротких wizard (2–3 шага).
• Восстановить: сохраняем RegistrationState в UserDefaults / Room / Core Data (без чувствительных данных — пароль не сохраняем). При запуске проверяем наличие незавершённой регистрации.
• Сервер хранит прогресс: при первом шаге создаём черновик на сервере, каждый шаг патчим черновик. На любом устройстве пользователь продолжает с того же места.

Для крупных onboarding-форм (КЮЛ-верификация, медицинские данные) — третий вариант обязателен.

Email / Phone верификация внутри wizard

OTP-шаг — отдельный экран с полем для кода. Таймер обратного отсчёта (60 секунд), кнопка "Отправить повторно" появляется после истечения таймера. Автоматическое чтение OTP из SMS (iOS: .textContentType(.oneTimeCode), Android: SMS Retriever API через SmsRetrieverClient).

SMS Retriever на Android не требует разрешения READ_SMS — это важно для прохождения ревью в Google Play. Работает через хэш приложения (11-символьный строковый токен, генерируется из signing certificate), который включается в текст SMS.

Завершение регистрации

После последнего шага — не сразу в главный экран. Экран "Добро пожаловать" с анимацией (Lottie или SF Symbols animation) и единственной CTA. Сохраняем состояние "регистрация завершена" в UserDefaults — чтобы при следующем открытии не показывать onboarding снова.

Сроки

Wizard из 3–4 шагов с валидацией, прогресс-индикатором, OTP-верификацией и восстановлением прогресса — 10–16 рабочих дней на одну платформу. Если нужен кроссплатформенный (React Native / Flutter) — 14–20 дней. Серверная часть для хранения черновиков — отдельная оценка.