Реалізація контекстного онбординга (навчання в момент використання) в мобільному додатку
Класичний онбординг з п'яти слайдів показує функції до того, як користувач зрозумів, навіщо вони потрібні. Контекстний онбординг працює навпаки: підсказка появляється в той момент, коли користувач вперше стикається з конкретним екраном або дією.
Користувач відкрив список завдань вперше — показуємо тултип на кнопці додавання. Перейшов у налаштування — показуємо підсказку про тему оформлення. Не раніше, не пізніше.
Головна складність — координація показу
Найчастіша помилка: показувати всі підсказки при першому запуску додатку. Отримується той же лінійний онбординг, тільки розбитий по екранам. Контекстний онбординг вимагає точного триггера.
Правильний підхід — счетчик посещення екрана. У UserDefaults зберігаємо screenVisitCount_taskList: Int. При першому посещенні (count == 1) показуємо підсказку. При повторних — ні. Для складніших випадків: підсказка на кнопку показується лише після того, як користувач провів на екрані не менше 2 секунд — інакше він просто проходить мимо.
На iOS для відображення тултипів використовуємо UIPopoverPresentationController (нативний) або бібліотеки типу EasyTipView. У SwiftUI — кастомний ViewModifier з overlay та GeometryReader для позиціонування відносно цільового елемента. На Flutter — OverlayEntry з обчисленням RenderBox.localToGlobal для координат цільового widget.
Кейс з практики: додаток для управління проектами, 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 дні. Вартість розраховується індивідуально після аналізу структури додатку.