VJOURNAL

Design • Rédaction internationale •

Cinq secondes, trois réponses : comment évaluer une landing page avant de la refaire

Une landing page est jugée en quelques secondes par des gens qui ne lui doivent rien. Ce guide montre comment mener un test des cinq secondes, quoi placer sur le premier écran, à quelle vitesse afficher le contenu et par où commencer en accessibilité.

Couverture VJOURNAL pour « Cinq secondes, trois réponses : comment évaluer une landing page avant de la refaire »

Réponse en bref

Une landing page fonctionne quand une personne qui la découvre sait nommer l’offre, le public et l’étape suivante au bout de quelques secondes. Vérifiez-le par un test des cinq secondes : montrez brièvement le premier écran, masquez-le et posez des questions ouvertes. Assurez-vous ensuite que le contenu principal apparaît vite (web.dev juge bon un Largest Contentful Paint de 2,5 secondes ou moins) et que le contraste du texte, l’usage au clavier et la taille des boutons respectent les bases des WCAG 2.2.

Arrêt des vérifications: 4 sources
Après quelques secondes sur le premier écran, un nouveau visiteur devrait savoir dire ce que la page propose, à qui elle s’adresse et quoi faire ensuite.
Le test des cinq secondes vérifie précisément cela : montrez brièvement la page à des personnes qui ne l’ont jamais vue, retirez-la, puis posez-leur des questions ouvertes.
La réponse doit arriver vite : web.dev fixe à 2,5 secondes le seuil d’un bon Largest Contentful Paint.

Un inconnu décide en quelques secondes si la page mérite une minute

Un visiteur arrive sur une landing page avec une question, depuis une publicité, un résultat de recherche ou un lien dans un message. Personne ne doit de patience à la page. Dans un article de 2011 pour le Nielsen Norman Group, Jakob Nielsen résumait une analyse de Microsoft Research sur les visites de pages : les utilisateurs quittent souvent une page web en 10 à 20 secondes, mais celles dont la proposition de valeur est claire retiennent l’attention bien plus longtemps.

Le détail compte davantage que la moyenne. Selon cet article, les 10 premières secondes sont décisives pour le choix de rester ou de partir, et la probabilité de départ reste élevée pendant les 20 suivantes. La conclusion de Nielsen : la proposition de valeur doit être communiquée clairement en 10 secondes.

Un audit de landing page utile ne commence donc pas par la couleur, l’animation ou le goût. Il commence par trois choses qu’un nouveau venu devrait pouvoir énoncer presque aussitôt : ce qui est proposé, pour qui, et quelle est l’étape suivante. Ces chiffres décrivent la navigation en général, pas une règle au chronomètre, mais ils fixent l’ordre du travail : la réponse d’abord, puis tout ce qui permet de la voir.

Le test des cinq secondes tel que le décrivent les chercheurs

Le guide du Nielsen Norman Group consacré à l’évaluation du design visuel définit le test des cinq secondes comme un test de première impression : on montre une maquette pendant cinq secondes pour saisir la réaction instinctive. C’est trop court pour lire le texte, précise le guide, mais suffisant pour se faire une impression du style visuel. La même exposition brève convient à une question plus difficile : savoir si l’offre a été comprise.

La préparation prend quelques minutes. Faites une capture du premier écran tel qu’il s’affiche sur un téléphone. Trouvez quelques personnes qui ressemblent à vos clients et n’ont jamais vu la page, ce qui exclut les collègues. Le guide ajoute une consigne : ne prévenez pas les participants que l’image disparaîtra au bout de cinq secondes, car cet avertissement les pousse à mémoriser des détails.

Montrez la capture, masquez-la et posez des questions ouvertes, toujours dans le même ordre. Que propose cette entreprise ? À qui s’adresse-t-elle ? Que feriez-vous ensuite ? Notez les réponses mot pour mot. Le guide déconseille d’associer une exposition aussi courte à une longue liste d’adjectifs à choisir : arrivés au bout de la liste, les gens ne se souviennent plus de grand-chose.

Noter les réponses sans flatter votre propre page

Avant la première séance, écrivez en une phrase la réponse que vous espérez entendre, par exemple « logiciel de comptabilité pour indépendants, essai gratuit ». Une réponse est validée quand la personne nomme l’offre et le public avec des mots proches des vôtres. Elle ne l’est pas quand elle se trompe de catégorie, décrit le décor (« quelque chose avec un dégradé bleu ») ou se réfugie dans « des solutions, je crois ».

La forme des échecs indique quoi changer. Ceux qui se rappellent l’image mais pas l’offre ont vu un visuel qui pèse plus lourd que le message. Ceux qui répètent le titre sans pouvoir dire quoi faire ensuite n’ont pas perçu le bouton comme l’action principale. Des réponses très différentes d’une personne à l’autre signifient en général que le premier écran dit plusieurs choses à la fois.

Un test des cinq secondes mesure la clarté d’une première impression, pas la persuasion : il ne vous dira pas si le prix est juste ni si le formulaire fonctionne. Le même guide décrit une méthode complémentaire, le test du premier clic, où le participant reçoit une tâche et est arrêté après son premier clic. On voit ainsi si l’étape suivante peut être trouvée.

Ce que le premier écran doit porter et ce qui peut attendre

Personne ne fait défiler une page en cinq secondes : c’est donc le premier écran que l’on teste. Il lui faut quatre éléments : un titre qui nomme l’offre avec les mots du client ; une ligne qui dit à qui elle s’adresse ou quel résultat attendre ; une action principale dont le libellé annonce ce qui se passe après le clic ; et une preuve vérifiable, comme une capture du produit ou un client cité par son nom.

Presque tout le reste peut attendre plus bas : l’histoire de l’entreprise, la liste complète des fonctionnalités, les offres secondaires. Les sections inférieures servent les visiteurs qui savent déjà de quoi parle la page et cherchent des raisons. Mais le premier écran ne doit pas ressembler à la page entière. Un bloc d’ouverture qui remplit l’affichage bord à bord, sans indice de ce qui suit, peut se lire comme la fin de l’histoire.

Jugez d’abord la version mobile, puisque cet écran est le plus petit. Une fois que le bandeau de consentement, l’en-tête fixe et la bulle de discussion ont pris leur part, le titre peut se retrouver sous la zone visible et le bouton avoir disparu. Faites la capture du test sur un vrai téléphone, avec le bandeau tel qu’un nouveau visiteur le rencontre, et non à partir de la maquette impeccable du fichier de design.

Largest Contentful Paint : quand la réponse apparaît vraiment

Les secondes du visiteur commencent au moment où il touche le lien, pas quand la page a fini de se charger. La documentation web.dev de Google mesure cela avec le Largest Contentful Paint, ou LCP : le temps de rendu de la plus grande image, du plus grand bloc de texte ou de la plus grande vidéo visible dans la fenêtre d’affichage, compté à partir du moment où l’utilisateur a accédé à la page. Il marque le point où le contenu principal est probablement chargé.

Les sites devraient viser, selon web.dev, un LCP de 2,5 secondes ou moins, mesuré au 75e centile des chargements de page et séparément pour le mobile et l’ordinateur. Autrement dit, trois visites sur quatre devraient afficher le contenu principal dans ce délai. Si une image d’en-tête demande quatre secondes, pour prendre un exemple inventé, l’essentiel des cinq premières secondes s’écoule avant que l’offre n’apparaisse.

La même page indique où lire ce chiffre : PageSpeed Insights et la Search Console pour les données de visites réelles, Lighthouse et Chrome DevTools pour une mesure de laboratoire. Sur une landing page, regardez d’abord l’image d’en-tête et les polices de titrage : une image ne compte qu’une fois chargée, note la documentation, et un texte en police web n’est pas considéré comme rendu pendant la période de blocage de la police.

Les bases d’accessibilité qui permettent de lire la réponse

Un message illisible n’a pas été transmis. Les Web Content Accessibility Guidelines (WCAG) 2.2, règles pour l’accessibilité des contenus web publiées par le W3C sous forme de recommandation, contiennent des critères qui touchent directement le premier écran. Le plus connu concerne le contraste : le texte doit présenter un rapport d’au moins 4,5:1 avec son arrière-plan, et le texte de grande taille d’au moins 3:1 (critère 1.4.3, niveau AA). Le gris pâle sur blanc et les mots posés sur une photographie sont les échecs habituels.

Viennent ensuite les images et le clavier. Un contenu non textuel doit avoir une alternative textuelle remplissant la même fonction (1.1.1, niveau A) : une offre qui n’existe que dans une image de bannière reste donc muette pour qui utilise un lecteur d’écran. Toutes les fonctionnalités doivent être utilisables au clavier (2.1.1), avec un indicateur de focus visible (2.4.7). Pour vérifier, appuyez sur Tab jusqu’au bouton principal, puis sur Entrée.

La version 2.2 a ajouté une taille de cible minimale de 24 sur 24 pixels CSS pour les pointeurs, avec des exceptions comme les liens placés dans une phrase (2.5.8, niveau AA), et les champs qui demandent une saisie doivent avoir des étiquettes ou des instructions (3.3.2). Ces vérifications rapides ne constituent pas un audit de conformité. Savoir si une entreprise est légalement tenue de respecter les WCAG dépend du droit national : c’est une question pour un conseiller qualifié.

Les effets de design qui s’interposent entre le visiteur et la réponse

La bannière tournante est le cas d’école. Un carrousel met plusieurs messages à la place d’un seul, et lors d’un test des cinq secondes certains participants décriront peut-être la deuxième diapositive alors que votre offre figure sur la première. Les WCAG ont une règle à ce sujet : un contenu en mouvement qui démarre automatiquement, dure plus de cinq secondes et s’affiche en parallèle d’un autre contenu doit pouvoir être mis en pause, arrêté ou masqué, sauf si le mouvement est essentiel (2.2.2, niveau A).

Les effets d’apparition coûtent du temps plus discrètement. Un titre qui se révèle après deux secondes d’animation a gaspillé deux des cinq secondes du visiteur. Une grande vidéo d’en-tête peut être l’élément que mesure le LCP ; web.dev précise que, pour une vidéo, c’est l’image d’aperçu ou la première image qui compte, selon celle qui arrive en premier. Et un titre astucieux qui pourrait appartenir à n’importe quelle entreprise (« Des solutions pour un avenir meilleur ») ne répond à rien.

Un seul test sépare le décor de l’obstacle : l’effet aide-t-il un inconnu à répondre plus vite à l’une des trois questions ? Sinon, déplacez-le sous le premier écran ou supprimez-le. Ce n’est pas un plaidoyer contre le savoir-faire. Le guide du Nielsen Norman Group observe qu’une première impression forte peut susciter confiance et intérêt, et un premier écran calme et soigné produit exactement cet effet.

Une routine à répéter : l’ordre des contrôles et des corrections

Mettez les contrôles en une seule séquence et un audit de landing page tient en un après-midi. Écrivez la phrase que vous voulez voir répétée par les visiteurs. Menez le test des cinq secondes sur une capture prise sur téléphone, puis le test du premier clic. Relevez le LCP dans les données de terrain. Terminez par le contraste, les alternatives textuelles, le clavier et la taille des cibles.

Corrigez les problèmes dans l’ordre où ils bloquent la réponse. Commencez par ce qui ne peut pas être lu, c’est-à-dire le contraste faible et le texte enfermé dans des images. Passez à ce qui n’est pas clair : le titre, la ligne d’appui et le libellé du bouton. Traitez ensuite ce qui est lent, en commençant par l’élément que le LCP désigne comme le plus grand. Le mouvement et le décor passent en dernier.

Refaites le test avec de nouvelles personnes, car quiconque a vu la page n’est plus un visiteur qui la découvre. Tenez un relevé daté de chaque tour : la capture, les questions et les réponses telles qu’elles ont été dites. La critique cesse alors d’être un concours d’opinions et devient une comparaison de versions. Quand des inconnus vous répètent votre phrase, la page est prête pour un test A/B, qui mesure la persuasion et non la clarté.

Checklist pratique

  • Écrivez une phrase qui énonce l’offre, le public et l’action attendue avant de montrer la page à qui que ce soit.
  • Montrez cinq secondes une capture du premier écran sur téléphone à des gens qui découvrent la page, puis notez leurs réponses telles quelles.
  • Relevez le Largest Contentful Paint de la page dans les données de terrain et comparez-le aux 2,5 secondes que web.dev juge bonnes.
  • Contrôlez le texte du titre et du bouton au regard du rapport de contraste 4,5:1 des WCAG 2.2 et atteignez l’action principale au seul clavier.
  • Déplacez sous le premier écran, ou supprimez, tout élément animé qui ne rend pas l’offre plus claire pour un nouveau venu.

Questions et réponses

Qu’est-ce qu’un test des cinq secondes pour une landing page ?

C’est une vérification rapide de la première impression. Vous montrez une capture de la page à quelqu’un qui ne la connaît pas, vous la retirez après cinq secondes et vous demandez ce que vend l’entreprise, à qui elle s’adresse et où la personne cliquerait. Le Nielsen Norman Group décrit la méthode comme un moyen de saisir la réaction instinctive : le temps manque pour lire le texte, si bien que seul ce qui est clair d’emblée subsiste.

Combien de personnes faut-il pour un test des cinq secondes ?

Les sources utilisées ici décrivent la méthode sans prescrire de nombre. Comme règle pratique, quelques personnes issues de votre public cible suffisent à faire apparaître une tendance, car le test est qualitatif : vous cherchez des malentendus qui se répètent, pas des pourcentages. Si la même mauvaise réponse vient de plusieurs personnes, vous tenez un constat. Faites appel à de nouveaux participants à chaque modification de la page.

Que faut-il placer sur le premier écran d’une landing page ?

Uniquement ce dont un visiteur qui découvre la page a besoin pour décider de rester : un titre qui nomme l’offre, une phrase sur le public ou le résultat attendu, une action principale clairement libellée et une preuve vérifiable. Les fonctionnalités, la présentation de l’entreprise et les offres secondaires vont plus bas. Vérifiez ce choix sur un téléphone, où les bandeaux et les barres fixes laissent bien moins de place qu’une maquette ne le suggère.

Quel score de Largest Contentful Paint est considéré comme bon ?

La documentation web.dev de Google retient 2,5 secondes ou moins comme marque d’une bonne expérience utilisateur. L’étalon est le 75e centile : au moins trois chargements de page sur quatre devraient s’y tenir, téléphones et ordinateurs étant évalués à part. Le chiffre porte sur des visites réelles ; lisez-le donc dans des outils de terrain comme PageSpeed Insights ou la Search Console. Les outils de laboratoire, tel Lighthouse, servent à trouver la cause d’un résultat lent.

Un test des cinq secondes remplace-t-il un test A/B ?

Non, les deux répondent à des questions différentes. Le test des cinq secondes montre si des inconnus comprennent la page d’un coup d’œil, et il peut se faire sur un brouillon avant tout achat de trafic. Une expérience A/B compare les performances de deux versions en ligne auprès de visiteurs réels, ce qui renseigne sur la persuasion. La clarté passe d’abord : une version que personne ne comprend ne mérite pas qu’on lui envoie du trafic.