Stepper flow

Stepper (Степпер) — навигационный паттерн для многошаговых flow: онбординг, checkout, wizard, регистрация. Лучшие практики: прогресс-индикатор с номерами шагов, возможность вернуться назад без потери

Stepper (Степпер) — навигационный паттерн для многошаговых flow: онбординг, checkout, wizard, регистрация. Лучшие практики: прогресс-индикатор с номерами шагов, возможность вернуться назад без потери данных, один экран — одна задача пользователя. Оптимальное количество шагов: 3–7 для онбординга, не более 4–5 для checkout. Stepper особенно эффективен для form-heavy flow, где важно не перегружать пользователя за один экран. Антипаттерн: stepper без индикатора прогресса — пользователь не знает, сколько шагов осталось, и прерывает flow.

Экран для ввода серийного номера SIM-карты, который указан на самой SIM-карте и над штрих-кодом. Пользователь может ввести номер в текстовое поле и продолжить…
Экран для ввода серийного номера SIM-карты, который указан на самой SIM-карте и над штрих-кодом. Пользователь может ввести номер в текстовое поле и продолжить…

Что покрывает эта подборка

Подборка screens with sequential stepper navigation for onboarding, checkout and guided flows. В подборке 112 экранов из 27 сценариев и 3 приложений. Репрезентативный пример: Мой МТС_19.Активация SIM-карты для замены_002.webp в сценарии Активация SIM-карты для замены приложения Мой МТС.

Контекст страницы

Семейство
Паттерны
Фокус
Stepper flow
Экранов
112
Сценариев
27
Приложений
3

Семантический профиль

Семейство
Паттерны
Фокус
Stepper flow
Экраны
112
Сценарии
27
Приложения
3

Путь пользователя

Намерение пользователя
Начать знакомство (onboard), 9
Этап воронки
Активация (activation), 9
Роль шага
Ввод данных (input), 9

Паттерны и действия

Основное CTA
Продолжить (continue), 9
Паттерн раскладки
Форма (form), 7
Навигационный паттерн
Пошаговая навигация (stepper), 12
Платформа
Android (android), 1
Тема
Светлая тема (light), 12

Семантические сигналы

Типы экранов
Форма (form), Онбординг (onboarding), Другое (other)
Состояния экранов
Обычное состояние (default)
Основные CTA
Продолжить (continue), Применить (apply), Другое (other)
Паттерны раскладки
Форма (form), Один главный фокус (single_focus), Стопка карточек (card_stack)
Навигационные паттерны
Пошаговая навигация (stepper)
Намерения пользователя
Начать знакомство (onboard), Другое (other), Выбрать (select), Купить (purchase)
Этапы воронки
Активация (activation), Другое (other), Конверсия (conversion)
Темы
Светлая тема (light)
Платформы
Android (android)
Роли шага
Ввод данных (input), Промежуточный шаг (intermediate)

Элементы интерфейса

  • Форма (form) (ai_screen_type)
  • Онбординг (onboarding) (ai_screen_type)
  • Другое (other) (ai_screen_type)
  • Обычное состояние (default) (ai_screen_state)
  • Продолжить (continue) (ai_primary_cta_type)
  • Применить (apply) (ai_primary_cta_type)
  • Другое (other) (ai_primary_cta_type)
  • Форма (form) (ai_layout_style)

Теги

  • активация
  • sim карта
  • ввод номера
  • форма
  • мобильная связь
  • отзывы
  • рейтинг
  • звезды
  • оценка
  • недвижимость
  • транспорт
  • экология

Ключевые действия

  • продолжить (Кнопка (button))
  • Далее (Кнопка (button))
  • Дальше (Кнопка (button))
  • Далее (Кнопка (button))
  • Далее (Кнопка (button))
  • Назад (Кнопка (button))
  • Дальше (Кнопка (button))
  • Продолжить (Кнопка (button))

Подходящие страницы