Eye-tracking et navigation UX

1) Pourquoi utiliser Eye-tracking

Aytraking montre exactement comment les utilisateurs scannent l'interface : ce qui est remarqué, ce qui est ignoré, où sont perdus. Il complète les métriques de clic et de scroll, révélant le chemin de l'attention et la conformité de la hiérarchie visuelle avec les tâches de l'utilisateur.

• Vérifiez la navigation et l'architecture des informations (menus, filtres, recherche).
• Valider le premier écran/above le fold et placer les accents.
• Comparaison des variantes cartes/catalogues/tables (F-pattern, Z-pattern, diagramme de Gutenberg).
• Diagnostic de la cécité bannière, de la surcharge et du « bruit visuel ».
• Produits à taux élevé sur la précision : finances, paris, live markets, cache.

2) Quels artefacts donne l'aitreking

Heatmap (carte de chaleur) : intensité agrégée des fixations par zone.
Gaze plot/Scanpath : séquence de fixation (points numérotés) et saccade (flèches).
Métriques AOI : indicateurs par zones d'interface spécifiées (boutons, champs, menus, bannières, cartes, tableaux).
Matrices transitoires : comment les utilisateurs « sautent » entre les zones (habitudes de navigation).
Rapports segmentaires : différences d'attention par rôle/appareil/expérience.

3) Modèles d'attention de base

F-pattern (textes/tableaux) : la ligne supérieure → la colonne de gauche → l'horizontale ci-dessous.
Z-pattern : haut gauche → haut droit → diagonale → bas droit.
Diagramme de Gutenberg : quadrant fort/faible, voie de lecture naturelle.
Zones aveugles : zones droites/inférieures sur écrans serrés, « cécité bannière ».
Ancres en compétition : lames de réduction, éléments scintillants, bannières animées - « voler » l'attention de CTA.

4) Les métriques que nous opérons

• TTFF (Time to First Fixation) : Temps jusqu'à la première fixation sur la zone.
• Compte de fixation/durée : Nombre/durée totale de fixation.
• Dwell time est le temps total dans la zone (y compris les entrées répétées).
• Revisits est le nombre de retours à l'AOI (signe de difficulté/importance).
• La probabilité de transition est la probabilité de transition de l'AOI A à B.
• Sequence score/ordre de fixation - jusqu'à quel point la zone entre dans la séquence.
• Scanpath length/Entropy est la longueur/chaotique de l'itinéraire (faible entropie = hiérarchie claire).
• Coverage/Convex hull est la zone d'examen visuel (contournement excessif = surchauffe).

• TTFF bas et dwell haut sur CTA - bien (rapidement remarqué, réfléchi et cliqué).
• TTFF élevé pour la navigation - mauvais (chercher le menu depuis longtemps).
• Beaucoup de retours à un bloc - suspicion d'ambiguïté ou d'action obligatoire sans indices.

5) Plan d'étude (modèle)

Objectif : vérifier si l'utilisateur trouve les éléments clés de la navigation rapide et prévisible.
Segments : 2-3 (débutants/expérimentés ; Desktop/mobile).
Échantillon : 6-8 par segment (qualitatif) ou 25-60 (quasi quantitatif).
Défis : 5 à 7 scénarios réalistes avec un démarrage contrôlé (voir ci-dessous).
Équipement : Tracker fixe/installation mobile/webcam (voir § 7).
AOI : marquer à l'avance les éléments clés (logo/recherche/menu/filtres/STA/bannière/carte/table/cache).
Procédure : étalonnage → tâche → fixation des résultats → débrief court sans poser de questions.
Sortie : heatmap, scanpath, tableau AOI-métriques, recommandations et hypothèses A/B.

Modèle de script de tâche

1. Recherchez et activez le thème obscur (ou fixez une limite de mise).
2. Filtrez le répertoire par fournisseur X et triez par RTP.
3. Ouvrez le cache et voyez les méthodes de sortie disponibles.
4. Localisez l'événement et ajoutez le résultat au betslip.
5. Trouvez la page Règles et Jeu responsable.
Pour chaque étape, nous enregistrons le TTFF, les transitions, le succès et le temps d'exécution.

6) Marquage AOI : meilleures pratiques

Rendre les zones sémantiques : « Menu principal entier », « Recherche », « Filtres », « Carte de jeu : couverture », « CTA : Jouer », « Bannière promo », « Miettes à pain ».
Séparez les informateurs (étiquettes, statuts) et les interactifs (boutons).
Sur le mobile, considérez les panneaux cachés (burger/rideau) comme des AOI distincts.
Pour les tableaux/les coefficients : AOI individuels par colonne (« Ligue », « Voyant indicateur », « 1X2 », « CTA Ajouter »).
Ne pas fractionner jusqu'à pixels : 10-15 AOI par écran - optimum pour l'analyse.

7) Équipement, précision et limites

Trackers hardware (bureau/rigs mobiles) : haute précision, bon pour les UI denses (tables, coefficients).
Webcam (remote ET) : moins cher/plus rapide, mais plus de bruit, pire pour les petites cibles ; est bon pour une hiérarchie grossière.
Étalonnage - critique : 5-9 points ; répétition en cas de déplacement/fatigue.
Think-aloud peut déformer le modèle de regard - utilisez un minimum, mieux que post-task interview.

8) Pipline analytique

1. Qualité des données : précision de suivi, pourcentage de perte, fixations valides.
2. Ensemble par tâche : succès, temps, erreurs, échelles subjectives (SEQ/UMUX-Lite).
3. Table AOI : TTFF, dwell, revisites, transitions, entropy - par segments et périphériques.
4. Heatmap + Scanpath : à la recherche d'ancres superflues, de « zalips », de sauts.
5. Hypothèses et solutions : Quoi repositionner/agrandir/renommer/cacher ; Quels indices/sceffolding.
6. Priorité : Impact × Effet ; les modifications rapides → le prototype → les tests de contrôle.
7. Validation : A/B sur les mesures clés (CTR par navigation, temps de tâche, conversion d'étape).

9) Découvertes typiques et comment y répondre

Un TTFF élevé par recherche/filtres → les rendre visibles en permanence, augmenter le contraste/label.
La bannière tire l'attention du CTA primaire → réduire le poids visuel de la bannière, échanger des positions, ajouter un cadre/poids de police CTA.
Le long scanpath sur les cartes → simplifier les primitives visuelles (moins de placards/labels), uniformiser la prévisualisation.
Faible détection des états/erreurs → couleur/icônes + proximité du champ, label ARIA, microcrédit.
Les impasses de navigation → les « retours » explicites, les breadcrumbs, le chapeau fixe qui font double emploi avec le CTA.

10) Pour iGaming/Finance UI : exemples d'AOI et solutions

Cache : onglets « Dépôt/Retrait », méthodes, limites, frais, ETA → vérifions le TTFF et le chemin vers « Confirmer ».
Betslip : ajout d'un résultat, modification de la somme, invites de coefficients, risque-varnings, → minimisons les microcrédits du regard.
Live Markets/Tableau : Priorité de la colonne des coefficients, chapeau collant, mise en surbrillance des modifications.
Lobby slot : carte fournisseur, badge (jackpot/frispins), filtres par mécanique, → éviter le bruit visuel pour que le CTA « Play » ne se perde pas.
Jeu responsable : placer les limites dans une zone de haute attention, ne pas cacher derrière le burger.

11) Modèle de rapport (copier dans le wiki)

Contexte : produit/version/appareil

Défis : liste, critères de succès

Segments : N pour chaque

AOI : schéma/liste

Indicateurs clés : TTFF/dwell/révisits/transitions

Découvertes (Top-5) : bref + visuel (heatmap/scanpath)

Recommandations : classées (Impact × Effort)

Expérimentation : Plan A/B, effet attendu, délai

Risques/remarques : limites des données/généralisabilité

12) Chèque avant le lancement

• Les objectifs/questions de l'étude sont formulés
• Les tâches sont réalistes et atomiques (≤60 s/tâche)
• L'AOI est marquée, la légende est acceptée
• Étalonnage vérifié, répétition au décalage
• Les options d'interface sont contre-équilibrées (ordre A/B)
• La collecte du consentement et la politique de confidentialité sont prêtes
• Plan d'analyse/modèles de tableau ont été préparés
• Les métriques de contrôle UX (succès, temps, SEQ) sont connectées

13) Antipathers et pièges d'interprétation

Compter « plus de fixations = mieux ». Parfois, c'est une confusion.
Tirer des conclusions uniquement sur heatmap sans séquence (scanpath).
Mélanger différents écrans/résolutions en un seul heatmap.
Ignorer le contenu et le contexte de la tâche (une bannière peut être appropriée).
Transfère les conclusions à tous les utilisateurs sans segmentation/dispositif.
Tirer des conclusions importantes sur 5 participants comme sur une étude quantitative.

14) Éthique et vie privée

Consentement éclairé : finalités, enregistrement, conservation, anonymisation.
Réduisez le PII, stockez les données brutes de manière limitée, utilisez l'ID.
Pour les scénarios sensibles (finances/jeux) - des formulations douces, la possibilité de manquer la question, des données de démonstration sécurisées.

15) Démarrage rapide (one-pager)

1. Décrivez les 3 à 5 principales tâches de navigation.
2. Marquez 10-15 AOI sur les écrans cibles.
3. Organiser 8 à 10 séances (10 à 12 min chacune) : étalonnage des tâches → → débrief court.
4. Regrouper la table AOI (TTFF, dwell, transitions, entropy) en segments/dispositifs.
5. Formez une Top-5 de découvertes et 3-5 hypothèses A/B (positions, dimensions, copyright, visibilité).
6. Lancez les modifications rapides → l'aitraquage de contrôle sur les mêmes tâches.