Le Guide de la Page d’Accueil Optimale

Pourquoi ce guide ?

Premier point de contact avec vos prospects, votre page d’accueil est l’élément fondamental de votre site Internet.

C’est elle qui définit vos choix stratégiques et qui donnera envie aux visiteurs d’en savoir plus sur votre activité.

Mettre en place une page d’accueil efficace peut être délicat. Et c’est normal de se sentir perdu. Je me rappelle de la création de mon propre site web. Je suis resté une matinée entière, dubitatif devant une page blanche, à ne pas savoir quoi faire !

Quel contenu mettre ? Comment le hiérarchiser et le rendre attractif ? Et enfin, quid de l’en-tête et du pied de page ?

Dans ce guide, nous aborderons chacun de ces points.

Afin de rendre cela plus clair et concret, j’ai décidé de partir d’un projet fictif :

Ana est consultante en pub Facebook et souhaiterait créer son site Internet. Dans la dernière partie de ce guide, nous verrons comment procéder, étape par étape, pour lui concevoir une page d’accueil optimale.

Voici le sommaire de ce guide :

I – Le choix du contenu pertinent

1. La proposition de valeur
2. L’apport de valeur
3. La présentation de votre offre / À propos de vous
4. Preuve sociale
5. Contenu / Derniers articles de votre blog

II – Organisez vos contenus pour un impact maximal

III – Les éléments forts de design

1. La colorimétrie
2. La typographie
3. La lisibilité
4. Les appels à l’action
5. Les éléments graphiques

IV – L’en-tête & le pied de page

1. Le logo et le menu
2. La bannière
3. Le pied de page

VI – Mise en pratique : création de la page d’accueil d’Ana

I – Le choix du contenu pertinent

Quel contenu allez-vous mettre sur votre page d’accueil ?

Si vous mettez trop d’informations, vous risquez de perdre vos visiteurs. Et à l’inverse, si votre page d’accueil est pratiquement vide, vos visiteurs ne comprendront pas ce qu’ils font là.

Dans cette partie, nous allons voir les 5 éléments de contenu que vous pouvez mettre sur votre homepage. Vous n’êtes bien sûr pas obligé de tous les mettre.

Ces 5 éléments n’ont qu’un seul but : capter l’attention de votre prospect, renforcer votre crédibilité et lui montrer comment vous pouvez l’aider à résoudre son problème.

1. La proposition de valeur

Captez l’attention.

La proposition de valeur résume en une phrase ce que vous faites.

Elle a pour but de capter l’attention de votre visiteur et lui donner envie d’en savoir plus sur vous.

Une bonne proposition de valeur doit être :

• Courte
• Spécifique
• Crédible
• Unique

Voici 3 exemples de propositions de valeur réussies :

• iPod : « 1000 chansons dans votre poche »
• Spotify : « Écoutez des millions de titres à la demande sans pub et hors connexion »
• Deliveroo : « Vos restaurants préférés, livrés chez vous en un clic »

Si vous êtes indépendant, vous pouvez utiliser la formule : « J’aide les [VOTRE CIBLE] à [PROBLÈME] grâce à [VOTRE EXPERTISE]. »

Idéalement, votre proposition de valeur doit apparaître dans la bannière de votre page d’accueil (tout en haut). En effet, les êtres humains ont tendance à se référer à leur première impression pour prendre des décisions. C’est ce que l’on appelle le biais d’ancrage.

Ainsi, après avoir lu votre proposition de valeur en découvrant votre site, vos visiteurs pourront “scanner” plus efficacement votre site pour trouver ce qui les intéresse.

2. L’apport de valeur

Sortez du lot.

Le meilleur moyen pour vous démarquer et renforcer votre crédibilité, c’est d’apporter de la valeur à vos visiteurs.

Comment ?

Il existe plusieurs solutions :

• Ebook gratuit
• Guide gratuit
• Projet test gratuit (audit, coaching, RDV téléphonique etc.)

À vous de voir en fonction de votre activité.

Cela représente du travail, mais le jeu en vaut la chandelle, car l’apport de valeur joue sur le sentiment de réciprocité. En plus, c’est un excellent moyen de récolter les emails de vos prospects.

Danilo Duchesnes (expert en pub Facebook) propose des guides gratuits à ses visiteurs.

3. La présentation de votre offre / À propos de vous

« Pouvez-vous résoudre mon problème ? » / « Qui êtes-vous ? »

Ici, c’est à vous de jouer 😉

Essayez de résumer d’une manière claire et persuasive comment vous pouvez aider votre visiteur à résoudre son problème… et lui donner envie d’en savoir plus !

4. Preuve sociale

« Est-ce que je peux vous faire confiance ? »

La preuve sociale est un élément très important de crédibilité.

Il existe plusieurs outils de preuve sociale :

• les témoignages clients
• les études de cas
• les retours sur vous dans les médias
• vos clients prestigieux

À vous de voir en fonction de votre situation.

Ramit Sethi (entrepreneur américain à succès) expose les témoignages de ses clients sur son site web.

5. Contenus / Derniers articles de votre blog

« Maitrisez-vous votre sujet ? »

Rien ne vaut la publication de contenu régulier pour asseoir votre expertise et renforcer votre référencement naturel.

Cette agence web anglaise présente ses 3 derniers articles sur sa page d’accueil

Idéalement, votre contenu devrait apporter de la valeur à vos visiteurs. Le contenu qui n’a pour but que le référencement naturel n’est pas pertinent.

II – Organisez vos contenus pour un impact maximal

Une fois le contenu sélectionné, il va falloir l’organiser.

Pour ça, nous allons réaliser un wireframe ou mock-up de la future page d’accueil.

Pas besoin d’être graphiste pour en faire un, une simple feuille de papier et un stylo suffisent.

Le but de cet exercice est de coucher vos idées sur le papier pour avoir une vision globale de votre page. Ça sera l’occasion de commencer à réfléchir à certains éléments graphiques (comme les images par exemple).

Reprenons l’exemple d’Ana, notre consultante en pub Facebook.

Elle aimerait mettre en avant son guide de la publicité Facebook. Elle a également quelques témoignages clients.

Par contre, elle n’a pas encore écrit d’articles de blog.

Voilà à quoi pourrait ressembler son wireframe :

Nous avons donc :

1. le haut de page, ou header comprenant le logo, le menu et la proposition de valeur du site.
2. l’apport de valeur : le guide de la pub Facebook d’Ana
3. la présentation de l’offre
4. les témoignages clients
5. la partie à propos d’Ana
6. le pied de page ou footer

Nous allons maintenant voir comment rendre tout cela impactant et mémorable grâce au design.

III – Les éléments forts de design

Pas besoin de trop en faire pour avoir un design persuasif et attractif.

Et de toute façon, le but de ce guide n’est pas de faire de vous des web designers professionnels.

Souvenez-vous qu’un bon design n’a pas besoin d’être complexe, il doit avant tout être cohérent.

Voyons rapidement quelques principes fondamentaux de la psychologie numérique :

Loi de Hick : pour bien comprendre cette loi, prenons un exemple : vous faites vos courses au supermarché. Soudain, vous apercevez 2 stands de dégustation de chocolat. On vous propose alors de goûter un chocolat au choix.

Sur le premier stand, il y a 4 chocolats à goûter.
Sur le deuxième, il y en a 20.

À votre avis, sur quel stand allez-vous faire votre choix le plus rapidement ?

C’est le concept de la loi de Hick : plus il y a de choix, moins la prise de décision est facile et plus les gens mettent de temps à passer à l’action.

Vous aurez donc compris qu’il faut éviter d’abuser de liens sur votre page d’accueil, auquel cas vos visiteurs se sentiront perdus et ne sauront pas où cliquer pour poursuivre leur visite.

Loi de Fitts : cette loi nous indique que la taille et la distance de vos boutons ont un impact direct sur le temps d’interaction de vos visiteurs. En d’autres termes, proposer des éléments cliquables visibles et faciles à atteindre.

Lois de proximité et de similarité :

Loi de proximité : nous percevons comme un ensemble des éléments proches les uns des autres.

Loi de similarité : les éléments visuellement similaires sont associés.

La compréhension de ces deux lois vous permettra de savoir comment guider le regard de vos utilisateurs.

Loi de Miller : une personne moyenne ne peut retenir que 4 à 9 informations dans sa mémoire à court terme. Nous pouvons prendre comme exemple les numéros des cartes de crédit : composés de 4 blocs de 4 chiffres pour faciliter la mémorisation. Il est donc important de séparer votre contenu en sections pour aider vos visiteurs à absorber l’information.

Maintenant que nous avons connaissance de ces principes fondamentaux, nous pouvons rentrer dans le vif du sujet.

1. La colorimétrie

Qui dit web design dit couleur !

Utilisez votre charte graphique (votre logo par exemple) pour définir la colorimétrie de votre site web.

Faites quand même attention à la monotonie. Si votre logo est monochrome, optez pour une couleur contrastée pour vos appels à l’action.

Vous ne savez pas quelle couleur choisir ?

Pour trouver de l’inspiration, je vous recommande d’utiliser un Color Matcher.

Reprenons notre exemple avec Ana.

Voici son logo :

Je me sers du Color Matcher pour trouver une colorimétrie pour son site :

Je vais garder la couleur rouge saumon de son logo pour les appels à l’action. Et je vais utiliser le rouge bordeaux et le bleu pour apporter de la couleur à la page.

2. La typographie

La typographie est un élément fondamental en web design. Une « typo » peut à elle seule définir le caractère de votre message et renforcer votre crédibilité.

Il existe de nombreuses typos gratuites pour le web. Vous pourrez les trouver sur des sites comme Google Fonts ou Font Squirrel.

Par habitude, je choisis d’abord une typo pour les titres et sous-titres.

Pour le projet d’Ana, j’ai opté pour la police « Dosis ». C’est une font élégante et moderne qui se prête bien pour un business B to B.

Pour définir la typo de vos paragraphes, vous pouvez utiliser un outil super intéressant : Fontjoy. Cet outil vous propose des combinaisons de typos basées sur le contraste et la lisibilité.

Après plusieurs tests, j’opte pour la police « Tenor Sans » pour les paragraphes.

Voici le rendu de ces 2 typos :

Pour finir sur la typo, faites attention à ne pas en abuser. À moins de savoir ce que vous faites, évitez d’en utiliser plus de deux. Pour apporter de la diversité, misez plutôt sur les variations de votre typographie.

Regardez l’exemple ci-dessous :

Dans cet exemple, tous les éléments textuels sont issus  de la même typographie : Montserrat.

Mais en jouant sur la couleur et différents styles (épaisseur de la graisse, majuscule, souligné, espacement entre les lettres), vous pouvez apporter de la variété à vos pages en conservant la cohérence de votre design.

3. La lisibilité

La bonne lisibilité de vos contenus est fondamentale.

Je traite ce sujet en profondeur dans le guide du site Internet performant.

Pour en résumer les grandes idées :

• Privilégiez du texte noir sur fond blanc
• Utilisez une police de paragraphe simple, suffisamment grande (au moins 16 pixels) et ne lésinez pas sur l’espacement entre les lignes (line-height)
• Utilisez une typo contrastée pour vos titres et sous-titres
• Faites attention à la largeur de vos contenus
• Évitez les pavés, faites des paragraphes, aérez vos textes
• Optimisez vos contenus pour les autres terminaux (tablette et mobile)

J’ajoute ici une petite astuce bonus 🙂

Pour renforcer la lisibilité de vos titres et sous-titres, vous pouvez mettre un espacement entre les lettres (letter-spacing) de quelques pixels.

4. Les appels à l’action

Souvenez-vous de la loi de Fitt’s : vos boutons doivent être facilement visibles et cliquables pour vos futurs visiteurs.

Voici les règles d’un bon bouton :

• Rare : n’en abusez pas et rappelez-vous la loi de Hick : trop de choix tue le choix !
• Direct : utilisez des verbes d’action directe : « Télécharger », « Lire », « Voir »…
• Visible : utilisez une couleur contrastée qui saute aux yeux

Pour notre exemple, j’utilise le rouge saumon comme couleur de fond et j’ajoute une ombre rouge bordeaux pour faire ressortir le bouton :

5. Les éléments graphiques

Les images, pictogrammes, fonds, espacements, séparateurs, bordures, ombres etc. servent à renforcer la hiérarchie visuelle de votre page. Mais attention à ne pas en abuser.

La hiérarchie visuelle doit être la pierre angulaire du design de votre page.

Ce concept peut être résumé en une image :

Une excellente hiérarchie visuelle repose parfois sur des éléments très simples : une bonne utilisation de la typographie, une colorimétrie bien pensée et une organisation intelligente des éléments.

Voici un exemple de très bonne hiérarchie visuelle :

Ce design s’appuie sur une bonne hiérarchie typographique et des variations intéressantes (le “for Women” en italique). Le contenu est centré, la colorimétrie est élégante et met bien en avant les appels à l’action.

La hiérarchie visuelle est un vaste sujet (passionnant) qui fera l’objet d’un article à venir.

IV – L’en-tête & le pied de page

L’en-tête ou header concerne tout ce qui se trouve au-dessus de la ligne de flottaison :

La ligne de flottaison du site de votre serviteur.

C’est un endroit très stratégique car c’est la première chose que verront vos visiteurs en arrivant sur votre page.

L’en-tête est souvent constitué du logo avec le menu de navigation et d’une bannière.

1. Le logo et le menu

Aujourd’hui, grâce aux constructeurs de page comme Divi ou Elementor, il est tout à fait possible de créer toutes sortes de menus sans compétence technique.

C’est tout à fait normal de vouloir tenter des choses, mais je vous recommande de faire au plus simple : votre logo en haut à gauche, et votre menu à droite.

Pourquoi ?

D’abord à cause du principe “d’affordance” : au cours de leurs nombreuses navigations sur le web, les utilisateurs développent des habitudes d’interaction. Ces habitudes leur permettent de savoir quel processus suivre ou quel bouton actionner pour effectuer l’action souhaitée. Et qui dit “briser les codes”, dit potentiellement faire réfléchir vos utilisateurs qui n’ont pas forcément le temps pour ça.

Ensuite, parce que votre menu n’est pas l’endroit le plus stratégique de votre haut de page. Il faut qu’il soit fin et discret pour mettre en valeur la chose qui importe le plus : votre contenu.

Vous pouvez, par exemple, utiliser une couleur atténuée pour les liens de votre menu.

Cela évitera que le regard de vos visiteurs soit attiré vers votre menu alors que vous voulez qu’ils lisent ce que vous avez à leur dire.

Cela nous amène à un dernier point important : votre menu doit-il se fixer en haut de la page ?

Chez Apple, ils ont fait le choix d’un menu fixe. Vous remarquerez au passage que les liens dans le menu son grisés et non blanc “flashy”.

C’est un vaste débat qui déchaîne les professionnels du web design. Il y a des points positifs et négatifs dans les deux cas. Personnellement je préfère les menus non fixes, moins distrayants pour les utilisateurs.

2. La bannière

Faut-il utiliser un diaporama (ou slider) dans votre bannière ?

Très à la mode il y a quelques années, le slider n’a plus vraiment le vent en poupe.

Si vous êtes photographe professionnel, cela peut avoir du sens. Un slider vous permettra de montrer vos plus beaux clichés.

Mais sinon, je vous déconseille d’en mettre. Des études ont montré que les gens ne regardent pas les slides, ils « scrollent » plus bas sur la page au bout de quelques secondes. Autre problème : un slider alourdit votre site et nuit donc à son temps de chargement.

Préférez plutôt une image ou une couleur de fond qui mette bien en valeur votre proposition de valeur.

Enfin, je vous recommande de mettre une photo de vous ou de votre équipe dans votre bannière. De manière consciente ou inconsciente, les photos d’êtres humains nous rassurent. Elles rendent l’expérience utilisateur plus humaine. Une illustration qui résume votre proposition de valeur peut aussi très bien marcher.

Sur le site d’elegant themes (fondateurs de Divi), ils appuient leur proposition de valeur avec une illustration de leur produit en action.

3 – Le pied de page

Le pied de page, ou footer est un élément trop souvent surchargé.

Il sert en général à insérer des liens vers les pages stratégiques, les informations de contact, les réseaux sociaux et les informations légales du site web.

Comme pour le menu, je vous recommande de faire au plus simple.

Le footer du site WPMarmite est très simple.

VI – Mise en pratique : création de la page d’accueil d’Ana

Maintenant que nous avons vu le contenu et les éléments de design, nous allons pouvoir commencer à créer notre page d’accueil.

Dans un premier temps, je vous conseille d’intégrer tout le contenu sur la page en l’organisant bien en section :

Titre 2 (H2) :

• Typo : Dosis
• Taille : 45 pixels
• Espacement des lettres : 2 pixels
• Couleur : #05004f

Paragraphe (p) :

• Typo : Tenor Sans
• Taille : 17 pixels
• Interligne : 1.8em
• Couleur : #505050

Si vous avez besoin de vous rafraichir la mémoire sur le balisage SEO (référencement naturel) des pages web, j’en parle dans le guide du site Internet performant.

J’ai également créé le menu ainsi que le pied de page. Vous remarquerez qu’ils sont très simples, ce n’est pas la peine de se compliquer la tâche sur ces éléments.

Maintenant, nous allons mettre tout cela en page grâce à des éléments de design simple.

1. Section en-tête

Ici le but est simple : que le visiteur comprenne immédiatement de quoi il est question.

La proposition de valeur est donc mise en avant grâce à un fond uni.

Le menu a un fond transparent afin de se fondre dans la bannière et ne pas perturber la lecture du visiteur.

Le bouton permet de descendre directement à la section suivante : le guide d’Ana.

2. Section apport de valeur

Ici, le design est également très sobre : un fond blanc et une boîte pour faire ressortir le contenu.

J’ai ajouté une bordure et une ombre à la boîte pour qu’elle soit visuellement mise en avant. Le pictogramme a été ajusté à la colorimétrie du site web.

3. Section présentation de l’offre

Un fond de couleur gris clair a été ajouté pour marquer la séparation avec la partie « Guide ».

La présentation est encore très simple. La typo, le bouton et l’image carrée suffisent à rendre l’ensemble clair et compréhensible.

4. Section témoignages

Ici, nous utilisons un fond (background) de couleur car il s’agit d’une section particulière et importante.

Si un visiteur scroll rapidement la page, son regard sera accroché par ce fond bleu situé en plein milieu de la page.

Le contenu est centré dans la section pour équilibrer la mise en page globale.

Les témoignages sont mis en valeur grâce à une boîte blanche comprenant un léger ombrage. Un petit pictogramme rouge saumon apporte un peu de pep’s à l’ensemble.

5. Section à propos

Comme pour la présentation de l’offre, la mise en page est très simple.

Cette fois, le texte est à droite et l’image à gauche afin d’harmoniser la mise en page globale.

La photo est de format carré pour renforcer l’effet miroir avec la présentation de l’offre.

6. Section pied de page

Comme nous l’avons vu dans la partie précédente, le footer présente les liens vers les pages importantes, les informations de contact et les réseaux sociaux.

7. Le rendu final

Voilà ! Notre page d’accueil est terminée !

J’espère que ce guide vous aidera à réaliser votre propre page d’accueil.

Vous l’avez sans doute constaté pendant votre lecture : une bonne page d’accueil, c’est avant tout un contenu pertinent et une bonne hiérarchie visuelle.

2 typographies, 3 couleurs et quelques éléments graphiques simples suffisent bien souvent à véhiculer votre message de manière claire, persuasive et professionnelle.

À votre succès.