#2 – 8 astuces pour une page d’accueil réussie (et bien plus encore)

La page d’accueil est la page la plus importante de votre site web. C’est celle qui est généralement la plus visitée, qui attire le plus de trafic.

On serait donc tenté d’y mettre beaucoup de choses. Allez, on donne tout ! Mais c’est la pire chose à faire. Et l’autre pire chose à faire, c’est de ne pas en mettre assez. Voilà, ça vous fait une belle jambe.

La page d’accueil est votre teasing.

Un peu comme pour un film que vous voulez voir après avoir regardé la bande-annonce. La page d’accueil de votre site web doit teaser. On doit comprendre l’histoire, mais ne pas tout dévoiler non plus.
Elle doit donner envie de poursuivre la navigation sur le site et/ou de passer à l’action. Elle est un point d’entrée qui doit mener votre cible à faire une action.

Alors concrètement, comment faire pour donner envie, donner assez d’éléments mais pas trop non plus ?

Voici 8 astuces pour faire de votre page d’accueil une page qui convertit. Parce qu’on est n’est pas là pour enfiler des perles, on veut vendre.

 À quoi sert la page d’accueil ?

Votre page d’accueil doit répondre à 2 questions que se pose votre utilisateur :

• Où suis-je ?
• Que puis-je y faire ? (ou autrement dit : qu’est-ce que j’ai à gagner ici ? que va m’apporter le site ? que vais-je y trouver ?)

Convaincre au-dessus de la ligne de flottaison

L’internaute doit comprendre qui vous êtes et ce que vous pouvez lui apporter, dès son entrée sur le site. Et cela, au-dessus de la ligne de flottaison.

La ligne de flottaison est la ligne imaginaire horizontale en-dessous de laquelle le contenu de la page n’est plus visible. Le reste du contenu sera visible si vous scrollez.

La minute culture, trouvée sur le blog du codeur.com :

Le concept de la ligne de flottaison, « Above the fold » en anglais, remonte à des siècles, aux débuts de l’imprimerie. « Above the fold » signifie « au-dessus du pli ». Les journaux, en raison de la façon dont ils étaient imprimés sur de grandes feuilles de papier, étaient pliés une fois qu’ils arrivaient dans les kiosques à journaux. De ce fait, seule la moitié supérieure du papier est visible pour le passant.

L’industrie de la presse s’est vite rendu compte que pour capter l’attention des lecteurs, elle doit présenter des titres, du contenu et des images qui attirent l’attention dans la moitié supérieure de la page. Ce principe de base reste le même pour le contenu numérique.

Un exemple plus visuel : voici le contenu que je vois quand j’arrive sur la page d’accueil d’Evernote. La ligne de flottaison se trouve juste en-dessous du bouton « Inscrivez-vous gratuitement ». Pour voir le reste de la page, je suis obligée de scroller.

Alors bien sûr, cette ligne imaginaire sera différente selon la taille de votre écran (le mien est de taille 13 pouces).
Cette ligne imaginaire peut aussi être différente selon le navigateur que vous utilisez – Safari, Chrome, Firefox, etc. (en fonction de la barre de navigation). Mais c’est très léger, cela se joue à quelques pixels.

Par contre, elle sera bien différente selon le device sur lequel vous êtes : ordinateur, tablette ou smartphone (on scrolle bien plus sur un smartphone, puisque l’écran, plus petit, réorganise les contenus).

Tout l’enjeu est de répondre aux 2 questions de l’internaute.
Il doit savoir où il est et ce qu’il va trouver sur votre site, avant cette ligne imaginaire. Quoi ???
Oui, vous ne pouvez pas tout faire tenir sur un seul et même écran. Pas de panique, l’essentiel c’est que vous présentiez votre service pour que l’utilisateur comprenne votre message et ce qu’il va découvrir dans votre site.

Vous devez lui donner envie de découvrir le reste de votre page et de votre site.

Dès qu’il arrive sur votre site web, il doit comprendre en 3 secondes ce que vous allez lui apporter. Pour cela, vous devez :

• Parler du problème que vous allez résoudre.
• Comment vous allez le résoudre (grâce à votre service ou produit) – c’est la promesse.
• L’inciter à passer à l’action, notamment grâce à un call-to-action sous forme de bouton.

Si l’on reprend l’exemple d’Evernote ci-dessus, la mission est remplie :

• Le titre résout votre problème.
• Le message en dessous détaille quels sont vos problèmes et comment ils sont résolus.
• Le bouton « Inscrivez-vous gratuitement» ne fait pas dans la dentelle, il incite directement l’internaute à passer à l’action. L’objectif de conversion d’Evernote est l’inscription.

Quand je lis ce premier contenu du site, je me dis « enfin, je vais pouvoir être organisée et avoir à portée de main toutes mes notes, c’est l’extension de mon cerveau ! ».

Donc dites ce que vous faites clairement et de façon concise dans la première partie de votre page d’accueil. Grâce à un titre impactant, et un message qui divulgue votre promesse.
Et n’oubliez pas votre « call-to-action ». Pour définir ce bouton, vous devez connaître votre objectif numéro 1 (je vous renvoie donc à mon premier article sur les objectifs d’un site web).

• Est-ce que vous voulez que l’internaute collabore avec vous ? (par exemple pour un indépendant qui propose ses services)
• Est-ce que vous voulez qu’il s’inscrire à votre newsletter ?
• Est-ce que vous voulez qu’il achète un service ou produit ?
• Etc.

Voici quelques autres exemples de bons élèves :

En restauration, une image vaut milles mots…

Et en-dessous de la ligne de flottaison ?

J’allais dire « yolo ! ». Certes, vous pouvez mettre ce que vous voulez en-dessous de la ligne de flottaison. Mais on ne va pas pousser quand même.

Quand, au-dessus de la ligne de flottaison vous donnez envie à l’utilisateur de poursuivre sa découverte, vous teasez (je ne parle pas d’alcool), en-dessous, vous pouvez entrer un peu plus dans le détail.

Vous pouvez par exemple, succinctement :

• Vous présenter. Qui se cache derrière ? Cela humanise, et permet de créer un début de relation et de confiance. Pourquoi ne pas mettre une photo de vous, si vous êtes seul maître à bord, ou une photo de votre équipe ?
• Présenter votre offre, vos services. Concrètement, qu’apportez-vous ? Que vendez-vous ?
• Présenter 3-4 réalisations (les meilleures). Très utile pour les métiers créatifs, graphiques, artisanaux, graphiques, ou même pour les métiers du web.
• Dédier une partie de la page à la preuve sociale, grâce à des témoignages clients par exemple. Très utile pour que vos cibles vous fassent confiance.
• Indiquer vos coordonnées de contact et géographiques (si vous êtes un commerce par exemple). Et indiquer vos réseaux sociaux (ce serait dommage que les fans de votre site ne deviennent pas des fans sur les réseaux sociaux).

Mais n’en faites pas trop. Restez concis, simple et utile.

L’esthétique, ça compte aussi

Les contenus sont, à mon humble avis, le plus important, mais l’esthétique compte aussi, pourvu qu’elle soit au service de l’ergonomie.

• Séparez les sections de votre page d’accueil, grâce à des traits séparateurs, des visuels ou des couleurs différentes.
• Mettez en valeur une section plus qu’une autre, s’il est primordial que l’utilisateur en prenne connaissance (et passe à l’action ;)).
• Par contre, évitez l’arc-en-ciel. Respectez les couleurs de votre identité visuelle, jouez avec les camaïeux.
• Animez vos éléments, mais ne soyez pas tenté par une apparition « étoile », en mode powerpoint des années 2000.
• Jouez avec les titres, le gras, les visuels (en rapport avec ce dont vous parlez). Par contre, attention à ce que vos visuels ne soient pas trop lourds, au risque de ralentir votre site. Nous préférons avoir l’information en moins de 3 secondes, sinon on va voir ailleurs 😉

Des call-to-action dans la page d’accueil, en veux-tu, en voilà !

Vous avez mis un lien qui incite votre utilisateur à passer à l’action. Mais n’hésitez pas à le répéter dans la page d’accueil (2 à 3 fois maximum), sous forme de boutons.
Vous pouvez mettre d’autres call-to-action, mais pas plus de 2-3 différents. Trop de choix pour l’utilisateur, ça fait peur, il ne peut décider où cliquer.

De plus, définissez un call-to-action en lien avec le sujet que vous venez d’aborder. Par exemple, si dans l’une des parties de votre page d’accueil, vous vous présentez succinctement, le CTA pourra être « Mieux nous connaître » ou « Travaillons ensemble ». Et pas « Inscrivez-vous à notre newsletter » ou « Téléchargez notre ebook gratuit ». Cela n’a pas grand-chose à voir avec ce dont vous venez de parler.

Aussi, les énoncés de vos call-to-action doivent être explicites. Évitez donc les « cliquez ici » ou « en savoir plus » (de quoi on parle ?).

Arrêtons d’être égocentrés

Sur beaucoup de sites corporate, le tout premier contenu que l’on voit en page d’accueil, c’est la présentation de l’entreprise avec un édito de Jean-Charles, président du comité de direction. Ou un paragraphe sur l’existence de l’entreprise depuis 2017 (vous savez, comme les « since 1989 »).

Ce genre de contenus est axé sur le « Je/Nous » plutôt que le « Tu/Vous ». On s’en fout, tout du moins avant la ligne de flottaison, ce n’est pas le moment d’être égocentré.
Cela ne répond pas du tout à ce que l’internaute vient chercher sur le site.

Adressez-vous directement à votre interlocuteur.

En-dessous de la ligne de flottaison, vous pouvez toutefois vous présenter/présenter votre entreprise, de façon succincte. Vous pourrez renvoyer l’utilisateur vers une page plus détaillée (« À propos ») qui parle de votre histoire, de vos valeurs, etc.

Pensez surtout utilisateur plutôt que SEO

Ok, vous souhaitez amener du trafic sur votre site web. Et ce sont notamment les moteurs de recherche (notamment Google) qui vont vous en amener. Donc il faut se rendre visible d’eux, grâce à des techniques de SEO, ou autrement dit, d’optimisation du référencement naturel.

Mais vous savez quoi ? Les moteurs de recherche adorent les utilisateurs ! Ils développent leur algorithme pour leur rendre service.

Une page d’accueil (tout le site d’ailleurs !) orientée utilisateurs :

• Est une page d’accueil qui répond à leurs besoins.
• Donc ils reviennent ou en parlent à leurs proches, qui viennent ensuite y faire un tour.
• Donc la page devient populaire.
• Donc Google la met en avant dans son moteur de recherche.
• Et donc le trafic s’en porte encore mieux !

Misez sur la page d’accueil, mais point trop n’en faut

Finalement, le message principal de cet article est de donner envie à l’utilisateur de poursuivre sa découverte ou de passer à l’action, tout en restant concis. L’exercice n’est pas simple, des choix s’imposent.

• Répondez de suite aux questions « Où suis-je ? » et « Que m’apporte ce site ?» de l’utilisateur, avant la ligne de flottaison.
• Présentez vos services et pourquoi ils sont la bonne solution pour votre cible, en-dessous de la ligne de flottaison.
• Invitez-la à passer à l’action grâce à 2-3 call-to-action sous forme de boutons.
• Contrastez : les sections, les boutons, les titres, le gras, pour mettre en valeur les éléments primordiaux. Une page structurée permet d’accrocher l’internaute, qui a tendance à survoler.
• Pensez utilisateur : adressez-vous à lui.
• MAIS, restez simple et concis. Le texte doit être facile à lire, court, dans un langage compréhensible pour votre cible.

D’ailleurs, la simplicité et la concision concernent également le menu de votre site web : 5 onglets grand maximum, et qui sont explicites.
De même pour le bas de la page, communément appelée le « footer » : insérez quelques liens utiles (« À propos », « Mentions légales »), vos réseaux sociaux et votre contact.

Et pour vous, c’est un casse-tête la page d’accueil ? Que comporte-t-elle ?

UX Content Craft, la newsletter

Deux fois par mois, directement dans votre boîte e-mails :

• Bénéficiez d’un condensé de ressources pour progresser en UX writing
• Soyez au courant des actualités liées à l’UX writing & au Content design, notamment en francophonie – jobs, événements, etc.

S’inscrire à la newsletter 

On garde le contact ?

Vous avez aimé l’épisode ? Dites-le moi en laissant un commentaire, un like ou une note sur la plateforme sur laquelle vous l’écoutez.
N’hésitez à me faire des feedbacks sur l’épisode, pour prolonger le débat, ou sur le podcast en général. Cela m’aidera à l’améliorer, pour qu’il réponde à vos besoins.