Les éléments indispensables d'une bonne page d'accueil

La page d'accueil est un élément essentiel du site Web de chaque entreprise et il important de bien comprendre à quoi elle et l'expliquer à votre client.

À la différence d'une landing page qui n'a que pour seul objectif de convertir le visiteur à passer à l'étape suivante (ex. : donner son adresse email, acheter, etc.) la page d'accueil est le "hub" de votre site. Comme la place central d'un village, qui guide dans la bonne direction et montre les plus beaux atouts de celui-ci.

Son rôle peut se résumer à ces 3 points :

• Faire état des bénéfices du produit ou service de l'entreprise
  
• Instaurez la confiance entre le client et l'entreprise
  
• Et surtout orienter les visiteurs vers la prochaine étape
  

Et c'est le plus important : la rue principale du village est clairement en vue et vous devez indiquer aux visiteurs que c'est la qu'il doivent aller même s'il y a d'autres petites rues à explorer pour découvrir le village.

La navigation principale

La navigation est un élément extrêmement important d'un site et tout particulièrement la page d'accueil : c'est l'endroit où les visiteurs du site iront immédiatement pour en savoir plus sur les produits .

Restez à l'essentiel et gardez le menu ultra simple. Vous voulez limiter les alternatives d'actions sur le bouton d'appel à l'action (call to action, CTA).

Essayez de convaincre votre client de passer un maximum de pages dans le pied de page (footer) plutôt que la nav principale.

Par exemple, le menu principal de Qonto est vraiment pas mal. Le CTA principal est en haut à droite, et tous les éléments du menu offrent plus d'informations sur l'ouverture du compte. Pas de page «À propos» ou «Blog» ou autres informations qui ne seraient pas lié à l'objectif .

L'accroche

L'accroche est sans doute le premier élément que regardent les visiteurs sur un site, vous devez donc vous assurer qu'il soit bon !

Je ne vais pas vous faire un cours sur le copywriting (ça vous dirait ? faites-le moi savoir par email) mais une accroche efficace se résume à 1 chose :

• L'accroche doit expliquer que la solution aux problèmes que rencontre le prospect se trouve sur ce site
  
• L'accroche s'adresse directement au prospect
  
• L'accroche doit capter l'attention et donner envie de lire la suite
  

La bannière

Sur une page d'accueil l'accroche du site se trouve souvent dans une bannière accompagnée d'une image de fond pour illustrer le propos. Le choix de cette image peut avoir un impact donc il est important de bien la choisir.

Astuce : cette image d'arrière-plan doit servir à appuyer le propos de votre accroche, ou la compléter en montrant au visiteur ce qu'il sera ou ressentira après avoir utilisé le produit. Ça marche pas mal avec des visages d'humain (sans forcément utilisé les images de banques d'images que l'on voit absolument partout). Quand on voit le visage d'une autre personne, on s'assimilie instinctivement à la personne dans cette image. C'est une technique très puissante pour aider les gens à ressentir une émotion souhaitée.

L'appel à l'action

On veut l'appel à l'action le plus claire et le plus distinct possible du reste de la page. Il faut que le bouton saute au yeux et nous accroche immédiatement. Utilisez donc une couleur qui contraste clairement avec le reste de la page.

Vous pouvez aussi ajouter un deuxième appel à l'action juste à côté, un bouton "fantôme" avec fond transparent et une bordure qui redirigerai vers une page moins importante (mais complémentaire).

La "trust bar"

Juste dessous de la bannière, on veut immédiatement ajouter une "trust bar", une section avec les logos alignés de marques qui utilise le produit pour montrer l'autorité du site et gagner la confiance des visiteurs.

Si les logos sont connues et reconnues par le public cible du site, c'est bingo. Comme pour l'utilisation d'un visage humain dans la bannière, l'assimilation marche à fond également ici : "si la NASA utilise ce produit alors il doit être de qualité et moi aussi je dois l'utiliser".

Essayez donc d'utiliser les logos de

• d'entreprises partenaires ou qui utilise le produit si c'est du B2B
  
• de journaux, chaines de télé, média, etc qui ont mentionné le produit
  
• des certifications et de labels
  

Si vous n'en avez pas, des témoignages et histoires raconté par les clients marchent très bien aussi !

La démonstration

Ça peut paraître évident mais il faut maintenant expliquer comment tout ça ça marche. Rajoutez un titre "Comment ça marche" et en dessous 3 à étapes sur le process à suivre. Une mise en page d'images et textes en quinconce avec un texte à gauche et une image à droite (et inversement en dessous) marche bien dans ces cas la.

On peut aussi simplement faire 3 colonnes

Remarquez que le texte est court (3 lignes max) et qu'il y a un souvent un lien ou un bouton pour en savoir plus.

Il y a plein d'idée à prendre partout pour ce composannt. Ci-dessous Shopify...

Trainline

Le market callout

Le market callout (ou l'appel au marché) est le fait d'interpeller directement notre public cible pour qu'il sache que tout ce qu'on lui raconte c'est bien pour lui. Vous pouvez évidemment le faire dans le titre, mais si vous avez plusieurs avatars, avec des informations différentes à donner a chacun, rajoutez une section "c'est pour qui ?" (ou "nos services sont spécifiquement adaptés pour...") et 3 colonnes en dessous.

Dans chaque colonne vous avez l'un de nos avatars cibles que l'on peut orienter vers le produit / service qui leur conviendrait.

💡Astuce : en installant et en configurant Google Analytics on peut rapidement voir la segmentation de notre marché.

La prochaine action

Comme je le disais au début de ce chapitre, l'objectif principal de la page d'accueil est d'orienter le visiteur vers la prochaine étape.

Donc tout en bas de la page, avant le footer, rajoutez une dernière section avec un bouton d'appel à l'action.

Le fait d'avoir un autre appel à l'action en bas de page facilite la tâche au visiteur. Et puis c'est logique : un visiteur qui scroll jusqu'en bas est quelqu'un qui cherche de l'information pour ensuite peut-être convertir.

This is some text inside of a div block.

👓A voir : Rendez vous sur https://app.crayon.co/ pour trouver de l'inspiration. Il y a des centaines d'exemples de page d'accueil !

Conclusion

Tout ces composants sont évidemment modulable et on peut en ajouter d'autres, mais je voulais m'assurer, avant de commencer à prototyper le site, que vous ayez de bonnes bases pour construire de bonne page d'accueil.

Des exemples de composants que l'on peut ajouter en plus ?

• Les derniers articles du blog
  
• Un tableau des fonctionnalités + les prix
  
• Les informations de contact (comme un formulaire, une carte, etc)
  
• Une vidéo (peut avoir un gros impact sur la page d'accueil !)
  

N'oublions pas le footer. Je vous disais dans les premiers paragraphes de limiter la navigation principale. C'est dans le footer que vous allez mettre toute la navigation : qui sommes nous, blog, support, CGV, politique de confidentialité, etc. Et les icônes des réseaux sociaux. Et l'adresse postale, le switcher de langue. On peut aussi remettre le logo...

Le footer c'est un peu le fourre-tout du site.

‍