La ligne de flottaison compte-t-elle encore ?

La ligne a bougé, la question est restée la même

Il n'y a plus une seule ligne de flottaison. Un portable en 1440 par 900 montre environ 750 pixels de votre page une fois que le navigateur a pris sa part. Un iPhone sous Safari en montre autour de 650, et moins encore quand la barre d'adresse est en bas. Chaque visiteur voit donc une portion différente du haut de page. Ce qu'il attend de cette portion n'a pas changé. Suis-je au bon endroit, et est-ce que ça vaut un scroll de plus ?

Les gens scrollent, et ils décident vite

N'importe qui utilise un téléphone depuis 2010 scrolle sans y penser. Le pouce bouge avant que le cerveau ait fini la phrase. La vieille peur que personne ne lise sous la ligne de flottaison est donc dépassée. Les gens partent quand même très vite. Quelqu'un clique sur votre annonce, lit le titre, ne trouve pas ce que l'annonce promettait, et il est parti en quelques secondes. Scroller ne coûte rien au lecteur. C'est son attention qui est rare.

Mesurez votre ligne de flottaison avant de la dessiner

Ouvrez votre page sur les trois appareils que montrent vraiment vos statistiques. Pour la plupart de mes clients, c'est un iPhone, un MacBook 13 pouces et un écran externe en 1080p. Prenez une capture du haut de la page sur chacun, sans scroller. Le téléphone montre en général un titre et la moitié d'un bouton. Le grand écran montre en général un titre qui flotte au milieu de 400 pixels de vide. Dessinez pour les deux, séparément.

Ce qui gaspille la place

Trois choses mangent le premier écran sans rien rendre. Les carrousels qui tournent perdent les gens dès la première diapo, donc la deuxième et la troisième ne sont jamais vues. Les titres abstraits du genre « La croissance, réinventée » iraient aussi bien sur n'importe quel site de n'importe quel secteur. Les images hero trop grandes poussent le bouton hors de l'écran du téléphone. Vérifiez ce dernier point sur un vrai appareil, parce que le canvas Framer est généreux d'une façon que les téléphones ne sont pas.

Ce qui mérite sa place en haut de page

Cinq choses, à peu près dans cet ordre. Le nom du produit et la catégorie à laquelle il appartient. Le résultat que l'acheteur obtient, écrit avec ses mots à lui. Une preuve, comme une rangée de logos ou un chiffre que vous pouvez défendre. Un bouton principal avec un verbe dessus. Et une image du vrai produit ou du vrai travail, plutôt qu'une photo de banque d'images avec une équipe qui sourit.

Donnez au scroll un endroit où aller

Le bas du premier écran doit avoir l'air coupé exprès. Commencez une section juste au-dessus de la ligne. Montrez la moitié d'une rangée de logos. Laissez un titre dépasser par le bas. Une bordure nette et un grand vide à cet endroit précis disent à l'œil que la page est finie. Sur les pages longues, je garde le hero à environ 80 % de la hauteur de l'écran, pour qu'un bout de la section suivante reste toujours visible.

Comment vérifier la vôtre en dix minutes

Montrez le haut de votre page à quelqu'un d'extérieur à votre entreprise pendant cinq secondes. Cachez-la, puis demandez-lui ce que l'entreprise vend et pour qui. S'il ne sait pas répondre, le haut de page a raté, et aucune animation ne le sauvera. Après le lancement, regardez une carte de scroll. Si une grande partie des sessions n'atteint jamais la deuxième section, le problème est dans ces 650 premiers pixels.