Premier écran : décider en trois secondes

Un premier écran doit répondre à trois questions avant que le visiteur ait bougé la souris : où suis-je, qu'est-ce que je peux faire ici, et qu'est-ce que cela va me coûter ou me demander. S'il répond à ces trois points en trois secondes, le visiteur reste ; s'il en manque un, il repart sans que vous le sachiez jamais. Le reste de la page, aussi soigné soit-il, ne sera pas lu. La même bascule a produit le responsive web design, qui a imposé de penser l'écran d'abord comme une contrainte de largeur, puis comme un contenu qui s'adapte.

Ce que le premier écran doit dire

Trois informations, dans cet ordre de lecture : l'activité, la zone géographique ou le public, et l'action suivante. L'activité se dit en une ligne, pas en un slogan. « Menuiserie sur mesure à Strasbourg » informe ; « L'excellence au service de vos envies » n'informe pas. La zone compte parce qu'un visiteur qui cherche un artisan à quarante kilomètres veut le savoir tout de suite, avant de lire la moitié de la page. L'action suivante, elle, se matérialise par un bouton unique : demander un devis, appeler, réserver. Un seul bouton principal par écran : deux boutons de même poids visuel annulent la décision.

Cette logique de clarification progressive n'est pas née avec le marketing : elle vient de l'histoire technique du web, où chaque étape a ajouté une couche de compréhension possible. Le dossier documentaire de cpnetapps.com retrace ces moments, du calcul côté serveur au calcul côté navigateur, et rappelle qu'à chaque fois, c'est la couche la plus proche du visiteur qui a gagné en réactivité. C'est exactement ce que fait un premier écran : il place l'information utile au plus près du regard, sans faire attendre.

Qu'est-ce qu'un visiteur doit pouvoir faire en trois secondes ?

Il doit pouvoir décider s'il est au bon endroit. Trois secondes, c'est le temps d'un balayage : le regard descend du coin supérieur gauche vers le centre, s'arrête sur ce qui contraste, puis remonte chercher une issue. Si le contraste principal est une photographie décorative, le regard s'y arrête et ne trouve rien à faire. Si le contraste principal est un titre lisible et un bouton, le regard a une porte de sortie.

Concrètement, cela veut dire : un titre de six à dix mots maximum, une phrase de contexte en dessous, et un bouton visible sans faire défiler. Le texte du bouton commence par un verbe : « Demander un devis », « Voir les réalisations », « Prendre rendez-vous ». Un bouton « En savoir plus » ne dit rien de ce qu'on obtient.

Ce que le premier écran doit taire

Il doit taire tout ce qui n'aide pas à décider. En tête de liste : le carrousel automatique, qui fait disparaître l'information avant qu'elle soit lue ; les mentions « Bienvenue sur notre site », qui n'apprennent rien ; les listes de labels et de certifications empilés sans hiérarchie ; les animations d'entrée qui retardent l'affichage de deux secondes pour le plaisir.

Il doit taire aussi le jargon interne. Un visiteur n'a pas besoin de savoir que vous avez refondu votre système d'information, ni que votre équipe est « passionnée ». Il a besoin de savoir si vous faites ce qu'il cherche, où, et à quel prix approximatif. Le premier écran n'est pas une page de présentation de l'entreprise : c'est un guichet.

Enfin, il doit taire le menu complet. Un menu à douze entrées au-dessus de la ligne de flottaison repousse le contenu utile vers le bas. Cinq entrées suffisent sur un premier écran ; le reste peut vivre dans un menu secondaire ou dans le pied de page.

Deux refontes réelles, et ce qu'elles ont changé

Premier cas : un cabinet d'expertise comptable. Le premier écran d'origine portait une photographie de gratte-ciel, un slogan de trois lignes et un carrousel de quatre images qui défilaient en cinq secondes. Le taux de rebond dépassait 70 pour cent. La refonte a remplacé la photographie par un titre factuel, « Expertise comptable pour artisans et commerçants, à Strasbourg », une phrase de contexte sur les délais de réponse, et un bouton « Prendre rendez-vous ». Le carrousel a disparu. Le taux de rebond est descendu sous 45 pour cent en six semaines, sans changement de contenu sur les pages intérieures.

Second cas : une association culturelle. Le premier écran affichait le logo en grand, une citation, et un menu de neuf entrées. Les visiteurs ne trouvaient pas la programmation. La refonte a mis la prochaine date en titre, le lieu en sous-titre, et un bouton « Réserver ». Le menu est passé à cinq entrées. Le nombre de clics vers la page de réservation a doublé sur la même période, à budget constant.

Dans les deux cas, la refonte n'a pas ajouté de contenu : elle a retiré ce qui retardait la décision et avancé ce qui la permettait.

Comment vérifier votre propre premier écran

Trois tests, faisables en atelier, sans outil payant.

Le test des trois secondes : montrez la page à quelqu'un qui ne connaît pas votre activité, pendant trois secondes, puis cachez l'écran. Demandez-lui ce que vous faites et ce qu'il pouvait faire. S'il hésite, le premier écran a échoué.

Le test du plissement : plissez les yeux devant la page jusqu'à ce que le texte devienne illisible. Ce qui reste visible, ce sont vos zones de contraste. Si ce ne sont pas le titre et le bouton, la hiérarchie visuelle est à revoir.

Le test du défilement : ouvrez la page sur un téléphone, sans faire défiler. Comptez les informations utiles visibles. En dessous de deux, le premier écran est trop chargé.

Ce qu'il faut retenir

Un premier écran réussi tient en trois éléments : une activité nommée, un public ou une zone précisés, une action unique proposée. Tout le reste, images décoratives, slogans, listes de labels, menus longs, peut attendre le deuxième écran. La règle tient parce qu'elle respecte le visiteur : elle lui donne de quoi décider avant de lui demander de lire.