Eye-tracking e navegação UX

1) Por que usar Eye-tracking

O itreking mostra exatamente como os usuários digitalizam a interface, o que notam, o que ignoram, onde se perdem. Ele complementa as métricas de click e scroll, revelando o caminho da atenção e o alinhamento da hierarquia visual com as tarefas do usuário.

• Verificar navegação e arquitetura de informações (menus, filtros, buscas).
• Validação da primeira tela/above the fold e acertos.
• Compara as opções de cartão/diretório/tabela (F-pattern, Z-pattern, diagrama de Gutenberg).
• Diagnóstico de cegueira banner, sobrecarga e «ruído visual».
• Produtos com alta taxa de precisão: finanças, apostas, marcadores de lave, cachê.

2) Que artefatos dá itreking

Heatmap (mapa de calor): intensidade agregada de fixação por área.
Gaze plot/Scanpath: seqüência de fixação (pontos numerados) e sackad (seta).
Métricas AOI: indicadores de área de interface especificada (botões, campos, menus, banners, cartões, tabelas).
Matrizes de transição: como os usuários «cruzam» entre as zonas (hábitos de navegação).
Relatórios de segmentos: diferenças de atenção em papéis/dispositivos/experiência.

3) Padrões básicos de atenção

F-pattern (textos/tabelas): linha superior → coluna esquerda → horizontal abaixo.
Z-pattern: topo esquerdo → topo direito → diagonal → inferior direita.
Diagrama de Gutenberg: quadrantes fortes/fracos, caminho natural de leitura.
Zonas cegas: direita/inferior em telas densas, «cegueira banner».
Âncoras de competição: descontos, elementos de brincadeira, banners animados - «roubam» a atenção do CTA.

4) Métricas que operamos

• TTFF (Time to First Fixation) - Tempo até a primeira fixação na área.
• Fixation count/duration - quantidade/duração total de fixação.
• Dwell time - tempo total na área (incluindo entradas repetidas).
• Revisits - número de devoluções para AOI (sinal de dificuldade/importância).
• Mudança propability - Probabilidade de transição de AOI para B.
• Sequence score/ordem de fixação - Quanto cedo a zona entra na seqüência.
• Scanpath length/Entropy - comprimento/caoticidade da rota (baixa entropia = hierarquia clara).
• Coverage/Convex hull - Área de exame visual (excesso de ronda = superaquecimento).

• TTFF baixo e dwell alto em CTA - bom (rapidamente notado, pensado e clicado).
• O TTFF alto para navegação é ruim (procurando por muito tempo).
• Muitos retornos a um bloco - suspeita de incerteza ou ação obrigatória sem dicas.

5) Plano de pesquisa (modelo)

O objetivo é verificar se o usuário encontra elementos essenciais de navegação de forma rápida e previsível.
Segmentos: 2-3 (novos/experientes; desctop/mobile).
A amostra é 6-8 por segmento (qualitativo) ou 25-60 (quasi-quantitativamente).
Tarefas: 5 a 7 cenários realistas com início controlado (veja abaixo).
Equipamento: Rastreador fixo/instalação móvel/webcam (consulte no ° 7).
AOI: sinalizar itens-chave com antecedência (logotipo/busca/menu/filtros/TT/banner/cartão/tabela/cachê).
Procedimento: calibrar → tarefa → fixar os resultados → um breve debrief sem questionamentos.
Saída: heatmap, scanpath, tabela AOI-métricas, recomendações e hipóteses A/B.

Modelo de cenário de tarefas

1. Localize e inclua Tópico escuro (ou especifique um limite de taxa).
2. Filtrar o diretório de provedor X e ordenar por RTP.
3. Abra o cachê e veja os métodos de saída disponíveis.
4. «Procure um evento lave e adicione o resultado ao betslip».
5. Procure a página Regras e o Jogo Responsável.
Para cada etapa, fixamos TTFF, transições, sucesso e tempo de execução.

6) Sinalização AOI: best pratices

Tornem as zonas semânticas «Menu principal inteiro», «Pesquisa», «Filtros», «Cartão de jogo: capa», «CTA: Jogar», «Banner promocional», «Migalhas de pão».
Divida os informantes (editoras, estatais) e as interações (botões).
No mobyle, leve em consideração os painéis ocultos (hambúrguer/tempestade) como AOI individual.
Para tabelas/cooffs: colunas de AOI individuais (Liga, Indicador de referência, Cooff 1X2, CTA Adicionar).
Não use até pixels: 10-15 AOI para ecrã - a melhor mente para análise.

7) Equipamentos, precisão e restrições

Rastreadores de hardware (rígulos de mesa/móvel): alta precisão, bom para UI denso (tabelas, coeficientes).
Webcam (remote ET): mais barato/rápido, mas maior ruído, pior para pequenos fins; serve para uma hierarquia rude.
Calibragem: ponto 5-9; repetição de deslocamento/cansaço.
Think-aloud pode distorcer o olhar pattern - use minimamente, melhor pós-task intervenção.

8) Pipeline analítica

1. Qualidade dos dados: precisão de tracking, porcentagem de perdas, fixação de valor.
2. Conjunto de tarefas: sucesso, tempo, erros, escalas subjetivas (SEQ/UMUX-Lite).
3. Tabela AOI: TTFF, dwell, revisits, transições, entropy - segmentos e dispositivos.
4. Heatmap + Scanpath: Procurando por âncoras de atenção extra, «salipados», omissões.
5. Suposições e soluções: o que mudar/aprimorar/renomear/ocultar; que dicas/scaffolding.
6. Priorização: Impacto x Effort; edições rápidas → protótipo → novo teste.
7. Validação: A/B em métricas-chave (CTR navegação, tempo de tarefa, conversão de passo).

9) Descobertas típicas e como reagir a elas

O TTFF alto para pesquisa/filtros → torná-los permanentemente visíveis, aumentar o contraste/editora.
O banner move a atenção do CTA primário → reduzir o peso visual do banner, trocar de posição, adicionar moldura/peso da fonte CTA.
O longo scanpath em cartões → simplificar os primitivos visuais (menos selos/editoras) e normalizar a exaltação.
Fraca detecção de status/erro → cor/ícone + proximidade com campo, ARIA-label, microquiratagem.
Impasses de navegação → «devoluções» explícitas, breadcrumbs, chapéu fixo duplicado CTA.

10) Para iGaming/UI financeiro: exemplos de AOI e soluções

Cacique: Fichas Depósito/Saída, métodos, limites, comissões, ETA → verificamos o TTFF e o caminho para «Confirmar».
Betslip: adição de resultado, alteração de valor, dicas de coeficientes, risco-warnings → minimização de microdutores de olhar.
Tabelas de marca/coff: prioridade da coluna de coeficientes, chapéu pegajoso, realce as alterações.
Lobby slots: cartão do provedor, crachás (jackpot/frisas), filtros mecânicos → evitamos ruídos visuais para que o CTA «Jogar» não se perca.
Jogo responsável: colocar limites em uma área de atenção alta, não esconder por um hambúrguer.

11) Modelo de relatório (copie no wiki)

Contexto: produto/versão/dispositivo

Tarefas: lista, critérios de sucesso

Segmentos: N para cada um

AOI: esquema/lista

Métricas-chave: tabela TTFF/dwell/revisits/transições

Descobertas (Top-5): Resumidamente + visual (heatmap/scanpath)

Recomendações: classificadas (Impact x Effort)

Experimentos: A/B, efeito esperado, prazo

Riscos/observações: limitações de dados/generalidade

12) Folha de cheque antes de iniciar

• Os objetivos/questões da pesquisa estão definidos
• Tarefas realistas e atômicas (≤60 segundos/tarefa)
• Os AOI estão marcados, a lenda está acordada
• Calibragem testada, repetição em deslocamento
• As opções de interface são contra-equilibradas (A/B ordem)
• Coleta de concordâncias e política de privacidade estão prontos
• Plano de análise/modelos de tabela elaborados
• As métricas de controle UX (sucesso, tempo, SEQ) estão conectadas

13) Antipatters e armadilhas de interpretação

Considerar «mais fixação = melhor». Às vezes é confuso.
Tirar conclusões apenas sobre heatmap sem seqüência (scanpath).
Misture diferentes telas/resoluções em um único heatmap.
Ignorar conteúdo e contexto da tarefa (o banner pode ser apropriado).
Transferir as conclusões para todos os users sem segmentação/dispositivo.
Tirar conclusões fortes nos participantes como um estudo quantitativo.

14) Ética e privacidade

Consentimento informado, alvos, gravações, armazenamento, anonimato.
Minimize o PII, armazene os dados crus de forma limitada, use o ID.
Para cenários sensíveis (finanças/jogos) - formulação suave, possibilidade de omitir a pergunta, dados demo seguros.

15) Início rápido (one-pager)

1. Descreva 3 a 5 tarefas de navegação essenciais.
2. Sinalize 10-15 AOI nas telas de destino.
3. Faça 8-10 sessões (10-12 min): calibrar → tarefas → o debrief curto.
4. Junte a tabela AOI (TTFF, dwell, transições, entropy) em segmentos/dispositivos.
5. Produza o Top-5 das descobertas e as hipóteses 3-5 A/B (posições, dimensões, copiações, visibilidade).
6. Execute as edições rápidas → o itreking de controle nas mesmas tarefas.