Une limite d’écran, pas une hauteur universelle
La ligne de flottaison correspond au bas de la zone visible avant de défiler. Elle change avec la taille du navigateur, le zoom, les barres du mobile et le retour à la ligne des textes. Une capture desktop ne représente pas tous les visiteurs.
Le premier écran doit aider à comprendre la proposition et à trouver une prochaine étape. Il n’a pas besoin de contenir toutes les fonctionnalités, preuves et objections. Tout compresser peut rendre le message moins lisible.
Les visiteurs peuvent défiler
Les travaux de NN/g sur le défilement montrent une répartition de l’attention dans les situations étudiées. Ce sont des observations contextualisées, pas un pourcentage applicable à chaque site actuel. La suite de la page mérite donc autant une structure claire qu’un premier écran soigné.
À consulter : NN/g: Scrolling and Attention
Relire le premier écran
Analyse une capture correspondant à un usage concret. Regarde d’abord l’original, puis la prédiction d’attention. Reviens ensuite sur la page pour vérifier le fonctionnement de l’action principale.
- La promesse peut-elle être expliquée sans défiler ?
- L’action a-t-elle un libellé compréhensible ?
- L’illustration aide-t-elle le message ou attire-t-elle toute l’attention prédite ?
- La suite apporte-t-elle une démonstration ou une réponse utile ?
- Sur mobile, les informations essentielles restent-elles lisibles sans chevauchement ?
Le même premier écran à deux largeurs
La page fictive Fieldnote a été capturée à 1280 px et à 390 px, et les deux premiers écrans sont passés dans le modèle. Le score composite est identique, 50, et tout le reste diffère. Sur bureau, le titre mène avec une hiérarchie de 46. Sur téléphone, le titre et la première carte de contenu se partagent l'écran, la hiérarchie tombe à 3 et la couverture passe de 8 à 20 %. Une relecture de la ligne de flottaison faite sur la seule capture bureau aurait manqué la carte concurrente du téléphone.
| Rendu | Composite | Attention | Focus | Hiérarchie | Couverture | Cellule dominante |
|---|---|---|---|---|---|---|
| Bureau, 1280 par 720 | 50 | 9 | 70 | 46 | 8 % | Centre gauche |
| Téléphone, 390 par 844 | 50 | 17 | 84 | 3 | 20 % | Centre |
À consulter : Provenance, empreintes et métriques · La comparaison complète mobile et bureau
Ce que disent 93 captures sur le tiers supérieur
Dans l'étude publiée sur 93 captures de sites, la cellule dominante se trouvait dans la rangée du haut sur 18 captures seulement. Sur 51, c'était la cellule centrale. C'est un fait sur des pixels capturés, qui incluent la navigation, les bandeaux et le cadre du navigateur, et il ne dit rien du nombre de visiteurs qui défilent. C'est une raison de vérifier où tombe réellement l'accent de ton propre premier écran, pas une cible.
| Cellule dominante | Captures |
|---|---|
| Centre | 51 |
| Centre gauche | 18 |
| Haut centre | 11 |
| Haut gauche | 7 |
| Centre droite | 6 |
| Haut droite, rangée du bas | 0 |
À consulter : L'étude des 93 captures
Ne pas confondre tiers supérieur et hero
Heatpoints utilise notamment une grille de neuf zones pour résumer une carte. Une zone dominante hors de la rangée supérieure est hors du tiers supérieur de l’image. Cela ne signifie pas qu’elle est hors du hero ou sous la ligne de flottaison.
Notre étude de sites est présentée avec cette définition géométrique. Elle ne mesure pas la profondeur de défilement des visiteurs et ne prouve pas que les pages concernées convertissent mal.
À consulter : Définition de l’étude