Eye-tracking і UX-навігація

1) Навіщо використовувати Eye-tracking

Айтрекінг показує як саме користувачі сканують інтерфейс: що помічають, що ігнорують, де губляться. Він доповнює клікові і скролл-метрики, розкриваючи шлях уваги і відповідність візуальної ієрархії завданням користувача.

• Перевірка навігації та інформаційної архітектури (меню, фільтри, пошук).
• Валідація першого екрану/above the fold і розстановки акцентів.
• Порівняння варіантів карток/каталогів/таблиць (F-pattern, Z-pattern, діаграма Гутенберга).
• Діагностика банерної сліпоти, перевантаження і «візуального шуму».
• Продукти з високою ставкою на точність: фінанси, ставки, лайв-маркети, кешер.

2) Які артефакти дає айтрекінг

Heatmap (карта тепла): агрегована інтенсивність фіксацій по області.
Gaze plot / Scanpath: послідовність фіксацій (пронумеровані точки) і саккад (стрілки).
AOI-метрики: показники по заданих зонах інтерфейсу (кнопки, поля, меню, банери, картки, таблиці).
Перехідні матриці: як користувачі «перескакують» між зонами (навігаційні звички).
Сегментні звіти: відмінності в увазі за ролями/пристроями/досвіду.

3) Базові патерни уваги

F-pattern (тексти/таблиці): верхній рядок → ліва колонка → горизонталь нижче.
Z-pattern (лендінги): лівий верх → правий верх → діагональ → правий низ.
Діаграма Гутенберга: сильний/слабкий квадранти, природний шлях читання.
Сліпі зони: праві/нижні області на щільних екранах, «банерна сліпота».
Змагаються якоря: плашки знижок, мерехтливі елементи, анімовані банери - «крадуть» увагу у CTA.

4) Метрики, якими оперуємо

• TTFF (Time to First Fixation) - час до першої фіксації на зоні.
• Fixation count/duration - кількість/сумарна тривалість фіксацій.
• Dwell time - сумарний час в зоні (включаючи повторні заходи).
• Revisits - число повернень в AOI (ознака труднощі/важливості).
• Transition probability - ймовірність переходу з AOI A в B.
• Sequence score/порядок фіксацій - наскільки рано зона потрапляє в послідовність.
• Scanpath length/Entropy - довжина/хаотичність маршруту (низька ентропія = ясна ієрархія).
• Coverage/Convex hull - площа візуального обстеження (надлишковий обхід = перевантаження).

• Низький TTFF і високий dwell на CTA - добре (швидко помітили, обміркували і клікнули).
• Високий TTFF на навігацію - погано (шукали меню довго).
• Багато повернень до одного блоку - підозра на неясність або обов'язкову дію без підказок.

5) План дослідження (шаблон)

Мета: перевірити, чи знаходить користувач ключові елементи навігації швидко і передбачувано.
Сегменти: 2-3 (новачки/досвідчені; десктоп/мобайл).
Вибірка: 6-8 на сегмент (якісно) або 25-60 (квазі-кількісно).
Завдання: 5-7 реалістичних сценаріїв з контрольованим стартом (див. нижче).
Апаратура: стаціонарний трекер/мобільна установка/веб-камера (див. § 7).
AOI: заздалегідь розмітити ключові елементи (логотип/пошук/меню/фільтри/СТА/банер/картка/таблиця/кешер).
Процедура: калібрування → завдання → фіксація результатів → короткий debrief без навідних питань.
Вихід: heatmap, scanpath, таблиця AOI-метрик, рекомендації та A/B-гіпотези.

Шаблон сценаріїв завдань

1. «Знайдіть і увімкніть Темну тему (або задайте ліміт за ставками)».
2. «Відфільтруйте каталог по провайдеру X і відсортуйте по RTP».
3. «Відкрийте кешер і подивіться доступні методи виведення».
4. «Знайдіть лайв-подію і додайте результат в бетсліп».
5. «Знайдіть сторінку Правила і Відповідальна гра».
Для кожного кроку фіксуємо TTFF, переходи, успішність і час виконання.

6) Розмітка AOI: best practices

Робіть зони семантичними: "Головне меню цілком", "Пошук", "Фільтри", "Картка гри: обкладинка», «CTA: Грати", "Банер промо", "Хлібні крихти".
Поділяйте інформатори (лейбли, статуси) та інтерактиви (кнопки).
На мобайлі враховуйте приховані панелі (бургер/шторка) як окремі AOI.
Для таблиць/коефіцієнтів: окремі AOI по колонках («Ліга», «Лайв індикатор», «Коефф 1X2», «CTA Додати»).
Не дробіть до пікселів: 10-15 AOI на екран - оптимум для аналізу.

7) Обладнання, точність і обмеження

Апаратні трекери (настільні/мобільні риги): висока точність, хороші для щільних UI (таблиці, коефіцієнти).
Веб-камера (remote ET): дешевше/швидше, але вище шум, гірше для дрібних цілей; годиться для грубої ієрархії.
Калібрування - критичне: 5-9-точок; повтор при зміщенні/втомі.
Think-aloud може спотворювати патерн погляду - використовуйте мінімально, краще post-task interview.

8) Аналітичний пайплайн

1. Якість даних: точність трекінгу, відсоток втрат, валідні фіксації.
2. Звід за завданнями: успішність, час, помилки, суб'єктивні шкали (SEQ/UMUX-Lite).
3. AOI-таблиця: TTFF, dwell, revisits, переходи, entropy - по сегментах і пристроях.
4. Heatmap + Scanpath: шукаємо зайві якоря уваги, «заліпи», пропуски.
5. Гіпотези та рішення: що переставити/укрупнити/перейменувати/приховати; які підказки/скефолдинг.
6. Пріоритизація: Impact × Effort; швидкі правки → прототип → контрольне повторне тестування.
7. Валідизація: A/B на ключових метриках (CTR по навігації, час на задачу, конверсія кроку).

9) Типові знахідки і як на них реагувати

Високий TTFF на пошук/фільтри → зробити їх постійно видимими, збільшити контраст/лейбл.
Банер перетягує увагу з первинного CTA → знизити візуальну вагу банера, обміняти позиції, додати рамку/вагу шрифту CTA.
Довгий scanpath по картках → спростити візуальні примітиви (менше плашок/лейблів), стандартизувати прев'ю.
Слабке виявлення статусів/помилок → колір/іконки + близькість до поля, ARIA-label, мікрокопірайтинг.
Навігаційні тупики → явні «повернення», breadcrumbs, фіксована шапка, дублюючі CTA.

10) Для iGaming/фінансових UI: приклади AOI і рішень

Кешер: вкладки «Депозит/Висновок», методи, ліміти, комісії, ETA → перевіряємо TTFF і шлях до «Підтвердити».
Бетсліп: додавання результату, зміна суми, підказки коефіцієнтів, ризик-варнінги → мінімізуємо мікрорухи погляду.
Лайв-маркети/коефф-таблиці: пріоритет колонки коефіцієнтів, липка шапка, підсвічування змін.
Лобі слотів: картка провайдера, бейджі (джекпот/фріспіни), фільтри по механіках → уникаємо візуального шуму, щоб CTA «Грати» не губився.
Відповідальна гра: розміщення лімітів в зоні високої уваги, не ховати за бургер.

11) Шаблон звіту (копіюйте в wiki)

Контекст: продукт/версія/пристрій

Завдання: список, критерії успіху

Сегменти: N по кожному

AOI: схема/перелік

Ключові метрики: таблиця TTFF/dwell/revisits/переходи

Знахідки (Top-5): коротко + візуал (heatmap/scanpath)

Рекомендації: ранжовані (Impact × Effort)

Експерименти: A/B-план, очікуваний ефект, термін

Ризики/зауваження: обмеження даних/узагальнюваності

12) Чек-лист перед запуском

• Цілі/питання дослідження сформульовані
• Завдання реалістичні і атомарні (≤60 сек/задача)
• AOI розмічені, легенда узгоджена
• Калібрування перевірено, повтор при зміщенні
• Варіанти інтерфейсу контрбалансовані (A/B порядок)
• Збір згоди і політика приватності готові
• План аналізу/шаблони таблиць заготовлені
• Контрольні метрики UX (успішність, час, SEQ) підключені

13) Антипатерни і пастки інтерпретації

Вважати «більше фіксацій = краще». Іноді це замішання.
Робити висновки тільки по heatmap без послідовності (scanpath).
Змішувати різні екрани/роздільної здатності в одну heatmap.
Ігнорувати контент і контекст завдання (банер може бути доречним).
Переносити виводи на всіх користувачів без сегментації/пристрою.
Робити гучні висновки на 5 учасниках як на кількісному дослідженні.

14) Етика і приватність

Інформована згода: цілі, запис, зберігання, анонімізація.
Мінімізуйте PII, зберігайте сирі дані обмежено, використовуйте ID.
Для чутливих сценаріїв (фінанси/ігри) - м'які формулювання, можливість пропустити питання, безпечні демо-дані.

15) Швидкий старт (one-pager)

1. Опишіть 3-5 ключових завдань навігації.
2. Розмітьте 10-15 AOI на цільових екранах.
3. Проведіть 8-10 сесій (по 10-12 хв): калібрування → завдання → короткий debrief.
4. Зведіть AOI-таблицю (TTFF, dwell, переходи, entropy) за сегментами/пристроями.
5. Сформуйте Top-5 знахідок і 3-5 A/B-гіпотез (позиції, розміри, копірайт, видимість).
6. Запустіть швидкі правки → контрольний айтрекінг на тих же завданнях.