Запис сесій і поведінковий аналіз

1) Введення

Запис сесій - це реконструкція взаємодій користувача з інтерфейсом (кліки, рухи, скролл, введення, помилки, стан UI), синхронізована з відеотреком екрану і консолями подій. Поведінковий аналіз перетворює сирий потік подій в інсайти: де люди губляться, зляться, кидають завдання і чому.

Мета: швидше знаходити точки тертя, скорочувати Time to Value і підвищувати конверсію ключових дій (реєстрація, депозит, запуск гри, участь у турнірі).

2) Коли це особливо корисно (iGaming-сценарії)

Онбординг і KYC: зрозуміти, де користувачі застрягають на кроках підтвердження.
Каса (депозит/висновок): валідаційні помилки, незрозумілі комісії/ліміти, скасування на останньому кроці.
Каталог/пошук гри: неочевидні фільтри, «помилкові кліки» за картками, плутанина між демо і реальним запуском.
Турніри та акції: читання правил, кліки по призах, нерозуміння умов.
Мобільні сценарії: hit-area, перекриття floating елементів, поведінка при поганій мережі.

3) Що саме фіксувати

Події UI: кліки, тапи, скролл, наведення (desktop), фокус/blur.
Стани компонентів: 'disabled','loading','error','success', sticky і плаваючі блоки.
Помилки та винятки: фронт-валідатори, відповіді API, таймаути, мережеві збої.
Переходи та відмови: зміна маршруту, закриття модалок, відкат на попередній крок.
Технічний контекст: девайс, ОС, браузер, розмір в'юпорту, лаги (CLS/LCP/INP).

4) Метрики поведінкового аналізу

Success Rate за завданнями (чи дійшов користувач до цільової дії).
Time on Task/TTV - час до цінності/завершення кроку.
FMC (First Meaningful Click) - перший значущий клік по меті.
Rage Click Rate - ≥3 кліка за 1-2 секунди в одній точці.
Dead Click Share - кліки без наслідків (немає переходу/івенту).
Error Rate - частота помилок (валідація/НТТР/виключення).
Backtrack Rate - частка повернень на попередній крок флоу.
Abandonment @Step - відхід на конкретному кроці (в касі, KYC, онбордингу).
Scroll Depth p50/p90 - глибина перегляду до СТА/правил/форм.

Пов'язуйте їх з бізнес-метриками: конверсія в реєстрацію/депозит, утримання, LTV-проксі.

5) Семплінг і репрезентативність

Базовий семпл: 10-30% трафіку на ключових екранах; 100% - на критичних помилках і рідкісних сценаріях.
Сегменти: нові/повертаються, VIP, гео, канали (органіка/paid/реферал), пристрої.
Фільтри шуму: боти, екстремальні швидкості скролла, фонові вкладки, відтворення без взаємодії.
Періоди: останні 7/28 днів + релізні вікна «до/після».

6) Анотації та робочий процес

• Проблема: «Dead Clicks 22% на бейджі «Megaways» картки гри».
• Гіпотеза причини: «Бейдж візуально схожий на кнопку фільтра».
• Рішення: «Зробити бейдж некликабельным стилем або додати дію фільтрації».
• Очікуваний ефект: «−50% dead-кліків, + 8-12% FMC запуску гри».
• Пріоритет: P1 (блокує ключовий шлях )/P2/P3.
• Критерії приймання: чіткі пороги метрик.

7) Приватність і комплаєнс

Маскування вводу: поля email, карти, документи, чати - приховуємо символи і селектори цілком.
PII/фінанси: не записуємо значення; токенізуємо ідентифікатори; анонімізуємо IP.
Cookie/Consent: поважаємо'DNT', показуємо банер згоди (opt-in/opt-out), окремі політики для записів/теплокарт.
Доступ та аудит: хто дивиться записи і навіщо; логи перегляду; термін зберігання (наприклад, 30-90 днів).
Право на видалення: очищаємо сесії користувача за запитом (DSAR).
Безпека: шифрування в сховищі і при передачі; обмеження експорту.

8) Техреалізація (рекомендації)

Шар даних (data layer): `ui_click`, `ui_error`, `ui_state_change`, `route_change`, `network_error`, `experiment_variant`.
Стабільні селектори: `data-session-zone`, `data-component-id`; уникайте «крихких» CSS-ланцюжків.
Склейка з A/B: зберігайте'session _ id'і'variant'( без PII) - для порівняння по гілках.
Продуктивність: батчируйте події, обмежуйте FPS записи, використовуйте адаптивний семплінг при деградації.
Мобайл-особливості: облік віртуальної клавіатури, ресайзу в'юпорта, жестів (swipe, pull to refresh).
Діагностика мережі: логуйте RTT, таймаути, відміни - часто саме мережа «ламає» UX.

9) Аналітичні патерни (що шукати)

Ранній догляд після інтро/банера - P1 не видно/неочевидний.
Циклічні повернення між двома кроками (A↔B) - контент/валідація незрозумілі.
Серії помилок форми - слабка мікрокопія, погані приклади, строгі маски.
Фокус на нецільових зонах (довгі стоп-кадри курсору) - ієрархія і контраст порушені.
Непотрапляння в hit-area - занадто маленькі цілі, перекриття (sticky/floating).
Збійні релізи «до/після» - сплеск Error Rate/Abandonment @Step.

10) Дашборд поведінкового аналізу (мінімум)

Session Overview: обсяг семпла, частка mobile/desktop, split по каналах.
Funnel Playback: кроки прапору з кліком на «дивлюся приклади сесій» по кожному розриву.
Rage/Dead Trends: динаміка за типами сторінок і сегментами.
Error Heat: карта топ-помилок (валідація/API) з посиланням на записи.
Time to Value: медіана/квантилі за ключовими завданнями.
Release Compare (до/після): дельти метрик і jump-лінки на репрезентативні записи.

11) Інтеграція з теплокартами та якісними методами

Тріангуляція: запис сесій (чому) + теплокарти (де) + метрики воронки (скільки).
Інтерв'ю/опитування: використовуйте кліпи із записів як стимули для питань "чому так зробив? ».
Саппорт/тікети: зв'язуйте ID сесії з тікетами для швидкої діагностики.

12) A/B та причинно-наслідковий аналіз

Для кожної гіпотези фіксуйте цільові UX-метрики (Rage/Dead/Backtrack) і бізнес-метрики (конверсія, TTV).
Порівнюйте записи за гілками A/B: де змінюється траєкторія уваги, зменшується число помилок і відмов.
Уникайте «дивлюся пару кліпів → роблю висновок»: використовуйте репрезентативні вибірки та довірчі інтервали.

13) Ролі і процес

UX-дослідник: формулює питання, планує семпл, анотує патерни.
Продукт/аналітик: пов'язує з бізнес-KPI, пріоритизує завдання.
Дизайнер/Frontend: реалізує правки, стежить за станами компонентів.
QA/Support: додають кейси в регресію, переносять призначені для користувача скарги в backlog.
Щотижневий розбір: 30-60 хвилин, 5-10 кліпів, 3-5 завдань з P1-пріоритетом.

14) Анти-патерни

Дивитися записи без мети і плану → вигорання, відсутність результатів.
Робити висновки по «яскравим» одиничним кейсам.
Ігнорувати приватність і маскування.
Змішувати mobile/desktop в один вивід.
Ставити діагнози без перевірки до/після або A/B.
«Культ кліпу»: кліп як прикраса презентації, а не доказ гіпотези.

15) Acceptance Criteria для завдань «після перегляду записів»

Описана проблема, гіпотеза, рішення, очікуваний ефект і метрики.
Задані порогові значення (наприклад, Rage Click Rate ↓ до <1,5%).
Включена перевірка в релізному вікні (до/після) + вибіркова ревізія записів.
Оновлено гайд по ієрархії (якщо причини в пріоритетах/контрасті).
Пройдено чек-листи доступності (фокус-стилі, hit-area, контраст).

16) Короткий чек-лист перед стартом

1. Є мета і список ключових сценаріїв?
2. Налаштовано маскування, згоду користувача і зберігання?
3. Визначено семпл і сегменти?
4. Маркування зон і консистентні селектори готові?
5. Зв'язка з A/B і воронкою - включена?
6. Визначено формат анотацій та пріоритизації?
7. Підготовлено дашборд з трендами Rage/Dead/Error/TTV?

17) TL; DR

Запис сесій - «мікроскоп» для UX: показує реальні фрикції і поведінкові патерни. Робіть це безпечно (маскування, згода), системно (семпл, сегменти, анотації), причинно (A/B, до/після) і продукто-орієнтовано (метрики → завдання → ефект). Результат - менше шуму, швидше до цінності, вище конверсія.