Реализация контекстного онбординга (обучение в момент использования) в мобильном приложении
Классический онбординг из пяти слайдов показывает функции до того, как пользователь понял, зачем они нужны. Контекстный онбординг работает наоборот: подсказка появляется в тот момент, когда пользователь впервые сталкивается с конкретным экраном или действием.
Пользователь открыл список задач впервые — показываем тултип на кнопке добавления. Перешёл в настройки — показываем подсказку про тему оформления. Не раньше, не позже.
Главная сложность — координация показа
Самая частая ошибка: показывать все подсказки при первом запуске приложения. Получается тот же линейный онбординг, только разбитый по экранам. Контекстный онбординг требует точного триггера.
Правильный подход — счётчик посещений экрана. В UserDefaults храним screenVisitCount_taskList: Int. При первом посещении (count == 1) показываем подсказку. При повторных — нет. Для более сложных случаев: подсказка на кнопку показывается только после того, как пользователь провёл на экране не менее 2 секунд — иначе он просто проходит мимо.
На iOS для отображения тултипов используем UIPopoverPresentationController (нативный) или библиотеки типа EasyTipView. В SwiftUI — кастомный ViewModifier с overlay и GeometryReader для позиционирования относительно целевого элемента. На Flutter — OverlayEntry с вычислением RenderBox.localToGlobal для координат целевого виджета.
Кейс из практики: приложение для управления проектами, React Native. Клиент хотел обучить пользователей фильтрации задач. Реализовали через react-native-spotlight-tour — библиотека накладывает затемнение с прозрачным «окном» вокруг целевого компонента. Проблема: на Android с useNativeDriver: true анимация fade-in срабатывала с задержкой ~300мс. Оказалось, что LayoutAnimation конфликтовал с анимацией тура. Отключили LayoutAnimation на этих экранах — задержка ушла.
Управление цепочками подсказок
Если подсказок несколько, нужна очерёдность. Два элемента не должны подсвечиваться одновременно.
Реализуем через очередь: OnboardingCoordinator (Singleton или EnvironmentObject в SwiftUI) хранит [OnboardingStep] и активирует следующий шаг только после закрытия текущего. Каждый шаг знает свой targetViewId и условие показа. Это позволяет добавлять новые подсказки без переписывания логики.
Дополнительно: показываем подсказку только если экран полностью загрузился и данные отображены. Нет смысла тыкать на пустой список.
Что входит в работу
- Проектирование карты подсказок: какой элемент, при каком условии, сколько раз
- Реализация
OnboardingCoordinatorс очередью шагов и хранением состояния - Компонент тултипа / spotlight с анимацией появления
- Кнопки «Понятно», «Позже», «Не показывать»
- Сброс онбординга из настроек для тестирования
Сроки
Базовая реализация с тремя тултипами и линейной очередью: 1–2 дня. С spotlight-эффектом, сложной логикой триггеров и адаптацией под разные роли пользователей — 3 дня. Стоимость рассчитывается индивидуально после анализа структуры приложения.