Où ils regardent

Ce que c'est et pourquoi ça compte

Celui qui ouvre ta landing ou ta fiche sur l'App Store décide en quelques secondes s'il reste. Pendant ces secondes, voit-il ce que fait ton app et le bouton pour l'essayer ? En général, tu ne le découvres qu'après le lancement, par les chiffres.

Foveacast te le montre avant. C'est une page web gratuite et open source (licence MIT, le code est sur GitHub). Tu glisses une capture de ta page et elle te renvoie une heatmap, une carte de couleurs : là où c'est clair, les yeux iront probablement ; là où c'est sombre, sans doute pas. Et elle te la montre pour trois moments : la première seconde, les trois premières, les sept premières.

Le modèle a appris sur des données réelles : l'étude UEyes (Jiang, Leiva et leurs collègues, CHI 2023) a suivi avec un eye tracker, une caméra qui enregistre où regardent les pupilles, 62 personnes devant 1 980 captures de sites, de logiciels, d'apps et d'affiches. Tout tourne dans ton navigateur : pas de compte, et l'image n'est envoyée nulle part.

1. Fais une bonne capture

Le résultat ne vaut que ce que vaut la capture que tu lui donnes. Moi, je fais comme ça :

1. Ouvre ta page dans le navigateur de ton ordinateur, en grande fenêtre. Ferme le bandeau des cookies et chaque popup : s'ils restent, ils attirent les regards dans la prédiction aussi.
2. Capture le premier écran, celui qu'on voit sans faire défiler : c'est là que se joue la première seconde. Sur Mac, appuie sur Cmd+Shift+4 et fais glisser sur la zone ; sur Windows, appuie sur Win+Shift+S.
3. Pour le reste de la page, fais une capture par bloc, pas une seule très longue. Le modèle travaille sur une petite version de l'image, 320 sur 240 pixels : une page entière dans une seule image verticale s'écrase et les détails disparaissent.
4. Enregistre-la en PNG ou JPG, sous les 20 Mo. Si elle fait plus de 2560 pixels de large, l'outil la réduit tout seul.

Pour l'App Store, ouvre la fiche de ton app depuis le navigateur de l'ordinateur et fais pareil. Ce n'est pas comme la voit quelqu'un qui l'ouvre sur son téléphone, mais ça te dit si l'icône, le nom et les premières images se font remarquer.

2. Lance le test

1. Ouvre allaboutken.com/Foveacast depuis l'ordinateur, avec Chrome (ou un autre navigateur basé sur Chromium) ou avec Firefox. Garde la fenêtre large : en dessous de 900 pixels, la page croit que tu es sur un téléphone et t'affiche un avertissement.
2. La première fois, elle télécharge les fichiers du modèle, environ 57 Mo : attends que ce soit fini. Les fois suivantes, elle les prend dans le cache du navigateur et démarre tout de suite.
3. Fais glisser la capture sur la page, colle-la ou charge-la avec New Image.
4. Attends l'analyse : la vue à 3 secondes arrive en premier, puis les deux autres. Clique sur la heatmap pour passer d'une vue à l'autre : First glance (1 s), Quick scan (3 s), Full viewing (7 s).

Avec Download PNG, tu enregistres l'image : garde-la, elle te servira pour la comparaison à la fin.

3. Lis les trois vues et le rapport

Les couleurs vont du violet foncé, peu d'attention prévue, à l'orange, jusqu'au jaune vif, la plus forte. Deux choses à savoir avant de regarder :

• L'échelle est relative à ton image : le point le plus fort est toujours jaune, même si rien ne ressort vraiment. Jaune ne veut pas dire « ça marche », ça veut dire « c'est le plus fort de cette page ».
• Le réticule marque l'endroit où le modèle pense que tombera le premier regard. C'est une estimation, pas une mesure.

Les trois vues disent des choses différentes :

• 1 seconde : ce qui saute aux yeux avant même de lire. Comptent le contraste, les contours, les visages, le texte en gros.
• 3 secondes : un premier tour de la page. Les titres, les grandes images, les menus et les boutons commencent à compter.
• 7 secondes : une lecture plus attentive. L'attention arrive aussi sur les textes, les formulaires et les détails.

Sous la heatmap, il y a le rapport, Analysis Report. Les parties que j'utilise le plus :

• Attention by image region : la règle des tiers, c'est-à-dire la page découpée en une grille de 3 sur 3, avec le pourcentage d'attention dans chaque case.
• Eye movement sequence : l'ordre prévu dans lequel le regard passe d'une zone à l'autre, marqué par des numéros.
• Attention shift : comment le centre de l'attention se déplace de 1 à 7 secondes. S'il descend dans l'ordre de lecture voulu, la page guide bien.

4. Les deux questions de la première seconde

De tout le rapport, deux questions m'intéressent. Je les regarde dans la vue à 1 seconde :

1. Est-ce qu'on voit la promesse ? La promesse, c'est la phrase qui dit ce que fait ton app et pour qui. Elle devrait être claire dans les trois vues. Si elle ne s'allume qu'à 3 ou 7 secondes, elle est probablement trop petite ou pas assez contrastée par rapport à ce qui l'entoure.
2. Est-ce qu'on voit le bouton principal ? C'est celui qui fait télécharger ou s'inscrire. S'il reste sombre à 1 seconde, personne ne le remarque sans doute avant de partir.

Ensuite, regarde qui vole l'attention : un logo, une photo là juste pour décorer, deux zones claires côte à côte qui se font concurrence. Décide ce qui doit gagner.

Écris en deux lignes ce que tu as vu : c'est ce que tu donneras à Claude Code.

5. Corrige la page avec Claude Code

Ouvre Claude Code dans le dossier de ton site et donne-lui les images : fais-les glisser dans la fenêtre, colle-les avec Ctrl+V ou écris le chemin du fichier. Un changement à la fois, sinon tu ne sauras pas ce qui a marché.

Je te joins la capture de ma landing et la heatmap de l'attention prévue à 1 seconde. Le bouton principal « [texte du bouton] » reste presque dans le noir : personne ne le remarque, sans doute.
Fais-le ressortir : plus de contraste avec le fond, plus d'espace vide autour et, si besoin, plus grand ou plus haut.
Ne touche pas aux textes, aux couleurs de la marque ni au reste de la page.
Avant de changer quoi que ce soit, dis-moi en trois lignes ce que tu comptes faire.

Le titre « [ta phrase] » ne s'allume que dans la vue à 7 secondes. Je veux qu'on le voie dans la première seconde.
Travaille seulement sur la taille, la graisse et le contraste du titre, et sur l'espace autour. Ne change pas les mots.
À la fin, liste-moi les valeurs que tu as changées, avant et après.

Dans la heatmap à 1 seconde, [l'élément] est la zone la plus claire et enlève de l'attention au titre et au bouton.
Rends-le moins fort, avec moins de contraste ou plus petit, sans le supprimer.
Laisse le reste tel quel.

Avant de refaire le test, ouvre la page et vérifie que tout marche encore, sur ton téléphone aussi.

6. Refais le test, puis demande à de vraies personnes

1. Refais la capture avec la même fenêtre et le même endroit de la page, passe-la dans Foveacast et enregistre le PNG. Si tu changes le cadrage, la comparaison ne vaut rien.
2. Mets côte à côte les deux heatmaps à 1 seconde, avant et après. Il n'y a qu'une question : le bouton et la promesse sont-ils plus clairs maintenant, par rapport au reste de la page ?
3. Regarde aussi les vues à 3 et 7 secondes : tu as déplacé l'attention, vérifie que tu ne l'as pas enlevée à quelque chose d'important.
4. Si c'est pire, reviens en arrière. Si c'est mieux, garde le changement et passe au suivant.

Et puis ne lui fais pas trop confiance. C'est une prédiction sur une personne moyenne qui regarde la page sans rien chercher ; tes utilisateurs arrivent avec un but, et quelqu'un qui cherche quelque chose regarde autrement. Sur du texte dense, des tableaux et des cartes, il se trompe davantage. Il existe des services payants avec un eye tracking mesuré sur de vraies personnes, mais pour un contrôle avant le lancement, ceci suffit : sers-t'en pour trouver les problèmes évidents, puis montre la page à quelques vraies personnes et demande-leur ce que fait cette app et où elles cliqueraient.

Les erreurs les plus courantes

• Passer toute la page en une seule image très longue. Elle s'écrase : fais une capture par bloc.
• Lire le jaune comme « ça marche ». C'est juste le point le plus fort de ton image.
• Ne regarder que la vue à 7 secondes. La promesse et le bouton se jouent dans la première.
• Demander cinq changements d'un coup à Claude Code et ne plus savoir lequel a aidé.
• Prendre la heatmap pour tes vrais utilisateurs. C'est une moyenne, pas tes gens.

Check-list

• Capture faite sur l'ordinateur, sans bandeau ni popup
• Une capture pour le premier écran et une pour chaque bloc important
• La promesse est claire dans les trois vues
• Le bouton principal n'est pas sombre à 1 seconde
• J'ai demandé à Claude Code un changement à la fois
• J'ai refait le test avec le même cadrage et comparé les deux PNG
• J'ai montré la page à quelques vraies personnes

Questions fréquentes