Реалізація анкети онбордингу для мобільного застосунку

Ми помітили, що Duolingo запитує «Навіщо ти вивчаєш мову?» і показує різний контент залежно від відповіді. Headspace — «Що тебе турбує?» і пропонує відповідні медитації. Це не просто UX-паттерн — це механізм, який значно збільшує ймовірність повернення користувача: застосунок з перших секунд релевантний саме йому. Без персоналізації користувач бачить однаковий інтерфейс, а контент не відповідає його очікуванням. Анкета вирішує цю проблему: вона збирає ключові дані та одразу налаштовує застосунок. В результаті retention зростає на 20–40%, а вартість залучення користувача окупається швидше.

З нами ви отримуєте 10+ років досвіду в мобільній розробці та понад 50 реалізованих проєктів з персоналізованим онбордингом. Ми гарантуємо якість коду та підтримку після запуску. Вартість розробки анкети з розгалуженням починається від $1500, але вона окупається за 2 місяці за рахунок підвищення retention на 20-40%. За нашими даними, анкета з розгалуженням підвищує конверсію в 1.5 раза порівняно з лінійною.

Чому персоналізований онбординг важливий для мобільного застосунку?

За даними Localytics, персоналізований онбординг збільшує retention на 25%. Коли користувач бачить релевантний контент з першого запуску, ймовірність повторного візиту зростає. Анкета — ефективний інструмент збору даних: вона займає 30–60 секунд, але дає профіль, який визначає поведінку застосунку на тижні вперед. Адаптація контенту під конкретного користувача — запорука успішного UX onboarding.

Архітектура анкети

Анкета персоналізації — це не просто набір екранів з кнопками «Далі». Це потік з розгалуженням: відповідь на питання 2 може визначати, яким буде третє питання. І результат — не просто збережені відповіді, а набір параметрів, що впливають на початковий стан застосунку.

Data-driven конфігурація. Кожне питання — об'єкт з метаданими:

struct OnboardingQuestion { let id: String let type: QuestionType // .singleChoice, .multiChoice, .slider, .text let title: String let subtitle: String? let options: [QuestionOption] let nextQuestionId: [String: String] // optionId -> nextQuestionId, або "default" let analyticsKey: String } 

Логіка розгалуження через словник nextQuestionId: якщо користувач вибрав опцію «Зниження стресу» — наступне питання q_stress_level, якщо «Кращий сон» — q_sleep_problems. «default» — для питань без розгалуження. Конфігурація завантажується з сервера або бандлиться в застосунку як JSON-файл.

QuestionnaireCoordinator керує стеком питань: history: [String] для підтримки кнопки «Назад», currentQuestionId: String, answers: [String: Any] для накопичення відповідей. При натисканні «Назад» — history.popLast() і перехід до попереднього питання зі збереженням вибраної відповіді.

Як реалізувати розгалуження питань на Swift?

У центрі — QuestionnaireCoordinator. Він отримує конфігурацію, керує історією та визначає наступне питання. Приклад:

class QuestionnaireCoordinator { private var history: [String] = [] private var currentQuestionId: String = "q_goal" private var answers: [String: Any] = [:] private let configuration: [String: OnboardingQuestion] func goToNext(selectedOptionId: String) { guard let question = configuration[currentQuestionId], let nextId = question.nextQuestionId[selectedOptionId] ?? question.nextQuestionId["default"] else { return } history.append(currentQuestionId) currentQuestionId = nextId } func goBack() { guard let previous = history.popLast() else { return } currentQuestionId = previous } func currentQuestion() -> OnboardingQuestion? { configuration[currentQuestionId] } } 

UI анкети

Навігація між питаннями

Перехід між екранами питань — горизонтальна анімація. На iOS: UIPageViewController в .scroll стилі або UIView.transition(with:duration:options:animations:) з .transitionCurlUp для незвичного відчуття. SwiftUI онбординг реалізований з використанням TabView з tabViewStyle(.page) при фіксованому selection, але автосвайп назад контролюється через interactiveDismissDisabled.

Найкращий варіант — кастомна анімація через withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) з offset та opacity. Дає повний контроль: вперед — слайд вліво, назад — слайд вправо.

Типи питань

Single choice — список карток або пунктів, тап негайно переходить до наступного питання (без «Далі»). Haptic .selection при виборі. Вибрана картка — анімована зміна background і border.

Multi choice — чекбокси або картки з multiple selection. Кнопка «Далі» з'являється після вибору хоча б одного варіанту. LazyVGrid / FlowLayout для карток з тегами.

Slider — UISlider / Slider у SwiftUI для числових значень (вік, частота, рівень). Лейбли по краях для зрозумілого контексту. Haptic .selection при кратних значеннях.

Progress indicator

Прогрес-бар зверху показує положення в анкеті. Анімований LinearProgressView / LinearProgressIndicator. Не показуємо точний крок («3 із 7») — користувач бачить кінець і може кинути. Показуємо лише bar без числових міток.

Порівняння лінійної та розгалуженої анкети

Компоненти UI за платформами

{ "questions": [ { "id": "q_goal", "type": "singleChoice", "title": "Для чого ви використовуєте застосунок?", "options": [ { "id": "stress", "title": "Зниження стресу" }, { "id": "sleep", "title": "Кращий сон" } ], "nextQuestionId": { "stress": "q_stress_level", "sleep": "q_sleep_problems", "default": "q_time" }, "analyticsKey": "goal_selection" } ] } 

Персоналізація результату та аналітика

Після завершення анкети збираємо UserProfile з відповідей:

struct UserProfile { let primaryGoal: Goal // з питання q_goal let experienceLevel: Level // з питання q_experience let preferredTopics: [Topic] // з питання q_topics (multi) let availableTime: Int // хвилин на день з питання q_time } 

Цей профіль визначає: який контент показується на головному екрані, які push-сповіщення надсилаються, які розділи приховані/показані, з яким рівнем складності починає користувач. iOS персоналізація досягається за рахунок збереження профілю локально (UserDefaults / DataStore) і синхронізації з сервером — щоб при перевстановленні або зміні пристрою користувач не проходив анкету знову.

Аналітика. Firebase Analytics: questionnaire_started, questionnaire_step_completed (з step_id та time_spent), questionnaire_skipped (з at_step), questionnaire_completed. За цими даними видно — на якому питанні користувачі йдуть, які відповіді найпопулярніші, як впливає анкета на retention мобільного застосунку. Firebase Analytics — рекомендований інструмент для моніторингу.

Пропуск анкети та редагування

Кнопка «Пропустити» — завжди. Не всі хочуть розповідати про себе. Тим, хто пропустив, показуємо дефолтний контент і періодично (через 3–7 днів) ненав'язливо пропонуємо заповнити «для кращих рекомендацій».

Можливість змінити відповіді пізніше — в налаштуваннях профілю. Не замикати користувача в початковому виборі. OnboardingQuestionnaireView перевикористовується в settings з режимом edit — ті самі компоненти, але з pre-filled відповідями та іншим completion-action (оновлення профілю замість переходу до головного екрану).

Кроки реалізації анкети

1. Створіть конфігураційний JSON з питаннями та логікою розгалуження.
2. Реалізуйте QuestionnaireCoordinator для керування потоком.
3. Розробіть UI-компоненти для кожного типу питання.
4. Інтегруйте Firebase Analytics для відстеження подій.
5. Додайте можливість пропуску та редагування в налаштуваннях.
6. Протестуйте та запустіть.

Що входить в роботу

• Конфігураційний JSON-файл анкети з підтримкою розгалуження
• QuestionnaireCoordinator на Swift або Kotlin
• UI-компоненти (SingleChoice, MultiChoice, Slider, ProgressBar)
• Інтеграція аналітики Firebase
• Можливість редагування профілю в налаштуваннях
• Документація по використанню

Термін: 2–3 дні. Лінійна анкета з 5–7 питань з simple choice та застосуванням результату до початкового контенту — 2 дні. Анкета з розгалуженням, server-driven конфігурацією, декількома типами питань, аналітикою та редагуванням в профілі — 3 дні. Зв'яжіться з нами для оцінки проєкту. Отримайте консультацію по онбордингу безкоштовно.