Mesures de Mona
Tout ce que Mona a mesuré, avec les données et la méthode. Tu n'as pas besoin de lire ça pour utiliser Mona : c'est là pour ceux qui veulent vérifier.
0,68regard : corrélation avec de vrais regardsavant 0,66 · carte moyenne 0,43
0,64détecteur d'éléments : F1 (texte, bouton, image)avant 0,59
5,5 ptsécart de note depuis une image seuleavant 8,1 · corrélation 0,82
0,995navigateur contre Python : carte du regardécart de note d'écran : 0,1 pt
Où l'œil se pose
Mona prédit une carte de chaleur : les zones que l'œil visite pendant les 3 premières secondes. On la compare à de vraies cartes humaines (UEyes, 62 personnes) et à un point de repère simple : la carte moyenne, c'est-à-dire l'habitude de regarder en haut et au centre. Imp1k n'a jamais servi à apprendre.
- Carte moyenne
- Mona avant
- Mona maintenant
Voir les valeurs
| Carte moyenne | Mona avant | Mona maintenant | |
|---|---|---|---|
| UEyes (test) | 0,43 | 0,66 | 0,68 |
| Imp1k pages web | 0,32 | 0,49 | 0,56 |
| Imp1k écrans mobiles | 0,37 | 0,43 | 0,47 |
- UEyes, validation
- Imp1k pages web (dev)
Voir les valeurs
| époque | UEyes, validation | Imp1k pages web (dev) |
|---|---|---|
| 1 | 0,643 | 0,539 |
| 2 | 0,693 | 0,485 |
| 3 | 0,707 | 0,539 |
| 4 | 0,706 | 0,562 |
| 5 | 0,705 | 0,559 |
| 6 | 0,713 | 0,564 |
| 7 | 0,704 | 0,531 |
| 8 | 0,708 | 0,529 |
| 9 | 0,706 | 0,522 |
| 10 | 0,704 | 0,504 |
| 11 | 0,703 | 0,508 |
| 12 | 0,703 | 0,497 |
| 13 | 0,705 | 0,509 |
| 14 | 0,705 | 0,510 |
| 15 | 0,704 | 0,510 |
Lire l'interface
Quand Mona part d'une image (maquette, capture), elle ne peut pas lire le code de la page : un détecteur maison repère textes, boutons, images, champs et icônes. Il a appris sur environ 1 500 sites publics dont les étiquettes viennent du code des pages. Ce test porte sur des sites qu'il n'a jamais vus.
- Avant
- Maintenant
Voir les valeurs
| Classe | Avant : rappel / précision | Maintenant : rappel / précision | F1 avant | F1 maintenant |
|---|---|---|---|---|
| texte | 0,59 / 0,64 | 0,72 / 0,75 | 0,61 | 0,73 |
| bouton | 0,51 / 0,59 | 0,59 / 0,59 | 0,55 | 0,59 |
| image | 0,65 / 0,57 | 0,61 / 0,60 | 0,61 | 0,60 |
| champ | 0,24 / 0,38 | 0,38 / 0,70 | 0,29 | 0,49 |
| icône | 0,15 / 0,34 | 0,31 / 0,43 | 0,21 | 0,36 |
La note d'une image
Pour savoir si la lecture depuis une image est assez fiable, on calcule la note deux fois : avec le code de la page (la référence), puis avec ce que le détecteur voit sur la seule image. Écart moyen 5,5 points (médiane 3,3) ; 80 % des écrans à moins de 10 points.
- Avant
- Maintenant
- Avec des boîtes exactes
Voir les valeurs
| Avant | Maintenant | Avec des boîtes exactes | |
|---|---|---|---|
| Tout | 8,1 | 5,5 | 3,8 |
| Contraste | 18,7 | 6,0 | 5,9 |
| Taille texte | 24,9 | 14,9 | 10,9 |
| Bouton | 9,5 | 6,3 | 1,8 |
| Surcharge | 0,0 | 0,0 | 0,0 |
| Quantité texte | 8,3 | 5,0 | 3,4 |
| Hiérarchie | 25,4 | 13,3 | 7,7 |
Le cerveau
Un modèle prédit la réaction de 20 zones du cortex visuel à une image, appris sur des mesures IRM (THINGS-fMRI). Il est validé sur des photos, pas sur des pages web : dans les rapports il reste indicatif et n'entre pas dans la note.
Voir les valeurs
| Zone | Valeur |
|---|---|
| V1 | 0,68 |
| V2 | 0,59 |
| V3 | 0,51 |
| V4 | 0,31 |
| V3ab | 0,47 |
| LO | 0,51 |
| MT | 0,57 |
| VO | 0,31 |
| FFA visages | 0,61 |
| OFA visages | 0,59 |
| EBA corps | 0,63 |
| STS social | 0,32 |
| PPA lieux | 0,60 |
| RSC lieux | 0,41 |
| TOS lieux | 0,52 |
| LOC objets | 0,52 |
| IT objets | 0,51 |
| attention FEF IPS | 0,35 |
| OFC valeur | 0,08 |
| vmPFC valeur | 0,00 |
Ce que Mona fait, sans rien cacher
Chaque étape, chaque donnée, chaque limite. S'il manque quelque chose ici, c'est un défaut de cette page.
Les étapes d'une analyse
- Capture (serveur). Un serveur ouvre l'adresse dans Chrome (1440 × 900), attend les animations d'entrée, fait défiler jusqu'à 12 écrans et relève, pour chaque écran, le texte, les tailles, les couleurs et les boutons. Il renvoie les images et ces relevés, puis oublie.
- Regard (votre navigateur). Deux petits modèles ONNX (environ 8 Mo ensemble) prédisent où l'œil se pose pendant les 3 premières secondes. Mona fait la moyenne de leurs cartes.
- Cerveau (votre navigateur). Un modèle d'environ 6 Mo prédit la réaction de 20 zones du cortex visuel, comparée à environ 500 pages web. Il n'entre pas dans la note.
- Lisibilité (votre navigateur). Six règles : contraste du texte (poids 2), taille du texte (1), bouton principal visible (2,5), surcharge (1,5), quantité de texte (1), hiérarchie (1,5).
- Note. Moyenne pondérée par écran sur 100 ; le premier écran compte pour moitié, les suivants pour l'autre moitié.
- Rapport. Gardé dans le stockage de votre navigateur (IndexedDB). Export JSON, impression PDF, suppression à tout moment.
Les modèles sont stockés en demi-précision pour diviser leur poids par deux ; le résultat est identique (corrélation du regard avec de vraies cartes : 0,681 avec ou sans). Le portage JavaScript des règles est vérifié contre la version Python : cartes de regard corrélées à 0,995, note d'écran à 0,1 point près.
Les données utilisées
| Source | Sert à | Détail |
|---|---|---|
| UEyes (Jiang et al., CHI 2023) | apprendre le regard | 1 980 interfaces, 62 personnes. CC BY 4.0. |
| Imp1k (Fosco et al., 2020) | mesurer seulement | 200 pages web et 200 écrans mobiles, importance annotée. Jamais utilisé pour apprendre ; une moitié sert à choisir le modèle, l'autre à annoncer le résultat. |
| THINGS-fMRI (Hebart et al.) | apprendre le cerveau | 8 740 images vues par 3 personnes. Données CC0 ; les images THINGS sont réservées à la recherche. |
| Environ 1 500 sites publics (liste Tranco) | apprendre le détecteur d'éléments | 3 écrans par site, étiquettes tirées automatiquement du code des pages. Sites pour adultes, jeux d'argent et piratage exclus. Captures non publiées. |
Ce qui part, ce qui reste
- Le serveur de capture voit l'adresse que vous donnez et le contenu de la page pendant l'analyse. Il ne garde ni image, ni texte, ni rapport. Il retient en mémoire, une heure, un compteur par adresse IP pour limiter les abus.
- Le regard, le cerveau, les règles et la note sont calculés dans votre navigateur. Une fois la capture reçue, rien ne repart.
- Pas de compte, pas de cookie, pas de mesure d'audience. Les polices et les bibliothèques sont servies par ce site, pas par un tiers. L'hébergeur de la page (GitHub) voit les visites comme tout hébergeur.
- Le serveur refuse les adresses internes (localhost, réseaux privés), les ports inhabituels et les redirections vers elles.
Ce que Mona ne sait pas faire
- Dire si une page plaît. Elle mesure le regard et la lisibilité, pas le goût, et ne remplace pas un test avec de vraies personnes.
- Le regard est appris sur la libre observation des 3 premières secondes : il ne prédit pas la recherche d'une information précise.
- La couche cerveau n'a pas été validée sur des pages web (elle l'a été sur des photos). Elle est indicative.
- Partie d'une image, la lecture de l'interface est moins fiable que depuis le code de la page. L'écart de note mesuré est donné dans les graphiques ci-dessus.
- Le texte dessiné dans une image n'est pas lu. Un écran n'est vu qu'à un instant : carrousels, vidéos et fenêtres qui s'ouvrent plus tard échappent à l'analyse.
- Les pages derrière une connexion, un bandeau bloquant ou une protection anti-robot donnent un rapport partiel. Au plus 12 écrans sont analysés.
- Mona ne remplace pas un audit d'accessibilité complet : elle vérifie le contraste et la taille, pas la navigation au clavier ni les lecteurs d'écran.
En résumé
Pour celles et ceux qui veulent juste savoir si Mona est faite pour eux, sans lire les graphiques.
Est-elle fiable ?
Oui, pour un premier avis rapide sur le regard et la lisibilité. Non, pour décider à ta place.
Mona a été testée sur des pages et des écrans qu'elle n'avait jamais vus, et comparée à de vraies mesures. Elle est bonne pour repérer ce qui attire l'œil et ce qui gêne la lecture. Elle ne sait pas ce qui plaît.
Oui, on peut s'y fier
Pour ce qui est mesuré directement :
- Où l'œil se pose. Mona retrouve l'essentiel de ce que de vraies personnes regardent : 0,68 sur 1 contre 0,43 pour une simple habitude de regarder en haut et au centre. Sur des pages web qu'elle n'a jamais vues : 0,56 contre 0,32.
- Ce qui gêne la lecture d'un site en ligne. Texte trop petit, contraste trop faible, trop de texte, bouton peu visible : ce sont des règles précises, appliquées à la lettre. Le calcul dans ton navigateur donne la même chose que la version d'origine. (écart de 0,1 point sur 100).
Oui, mais avec prudence
Utile, pas exact :
- La note d'une image ou d'une maquette. Sans le code de la page, Mona devine les textes et les boutons. Résultat : une note à environ ±5,5 points de celle qu'elle donnerait avec le code (la moitié du temps à moins de 3,3 points ; 80 écrans sur 100 à moins de 10 points). Pense à un thermomètre qui se trompe de quelques degrés.
- Les petits éléments. Les icônes et les champs de saisie sont souvent ratés (score 0,4 et 0,5 sur 1). Ils ne comptent pas dans la note.
- La réaction du cerveau. Elle est prédite sur des photos, pas sur des pages web, et elle n'entre pas dans la note : regarde-la comme une curiosité.
Non, ce n'est pas son rôle
Mona ne sait pas :
- Dire si ta page plaît, ni si elle donne envie d'acheter ou de s'inscrire. Elle mesure le regard et la lisibilité, pas le goût.
- Remplacer un test avec de vraies personnes. Elle sert à trier tes idées avant de les montrer, pas à clore la discussion.
- Faire un audit d'accessibilité complet. Elle vérifie le contraste et la taille du texte, pas le clavier ni les lecteurs d'écran.
- Lire les pages derrière un mot de passe, ni une application mobile native.
À quoi ça sert, concrètement
- « Mon bouton principal est-il vu ? » Mona montre une carte de chaleur : en rouge, ce que l'œil visite dans les premières secondes. Si ton bouton est dans une zone froide, tu le sais.
- « Mon texte est-il lisible ? » Elle repère les textes trop petits ou trop pâles, et te dit où.
- « Qu'est-ce que je corrige en premier ? » Elle classe les problèmes du plus important au moins important, écran par écran, avec une note sur 100.
- « Ma nouvelle version est-elle meilleure ? » Analyse l'ancienne et la nouvelle : tu compares deux notes et deux cartes de chaleur.
Pour qui
Elle est faite pour toi si…
- tu crées ou améliores un site, une page de vente, une landing page ou une maquette ;
- tu es designer, développeur·se, indépendant·e, étudiant·e ou tu gères le site d'une petite structure ;
- tu veux un avis rapide et gratuit avant de montrer ton travail, ou pour départager deux idées ;
- tu n'as pas le budget d'un test avec suivi du regard.
Elle ne suffit pas si…
- tu dois prendre une décision coûteuse (grosse refonte) : fais aussi un test avec de vraies personnes ;
- tu dois prouver une conformité légale d'accessibilité ;
- ta page est derrière une connexion, ou c'est une application mobile native ;
- tu veux savoir si les gens vont acheter : Mona ne mesure pas ça.
Les chiffres, expliqués simplement
- Corrélation, par exemple 0,68
- Mesure de ressemblance entre la carte de Mona et celle de vraies personnes : 0 = aucun rapport, 1 = identiques. 0,68, c'est « ça lui ressemble nettement » ; la simple habitude de regarder en haut au centre n'arrive qu'à 0,43.
- Écart de 5,5 points
- Si la « vraie » note d'une page est 70, Mona lisant seulement une image tombera la moitié du temps entre 67 et 73, et 8 fois sur 10 entre 60 et 80.
- F1 (détecteur d'éléments)
- Un score de 0 à 1 qui dit si Mona retrouve bien les textes, boutons et images sans en inventer. 0,73 pour les textes : elle en retrouve la plupart, avec quelques erreurs.
- « Jamais vu pendant l'apprentissage »
- Les tests portent sur des pages que Mona n'a jamais vues, comme un examen avec des sujets inédits : c'est ce qui rend les chiffres honnêtes.
Si tu ne retiens qu'une chose : Mona est un bon premier regard, rapide et gratuit, sur ce qui attire l'œil et ce qui se lit mal. Corrige avec elle, puis vérifie avec de vraies personnes.