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: заранее разметить ключевые элементы (логотип/поиск/меню/фильтры/CTA/баннер/карточка/таблица/кэшер).
Процедура: калибровка → задача → фиксация результатов → короткий 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. Запустите быстрые правки → контрольный айтрекинг на тех же задачах.