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

Ми помітили, що 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 дні. Зв'яжіться з нами для оцінки проєкту. Отримайте консультацію по онбордингу.