Francis Drubigny

Comment construire la page d’accueil de votre site web ?

La qualité de la page d’accueil, premier pilier de votre site web par sa centralité, a des impacts déterminants sur la performance de votre activité, le reflet de votre image de marque ou encore l’efficience de la navigation. Construire, agencer, structurer, designer puis optimiser la page d’accueil nécessite une démarche méthodique mariant l’astreinte et la complexité d’un travail de fond comme de forme. Que doivent faire les visiteurs en arrivant sur votre page principale ? Comment présenter clairement ce que vous faites ? De quelle manière orienter le trafic entrant vers les landing pages clés ? Pour répondre à ces questions, des basics, intuitifs et indispensables aux yeux des visiteurs, sont aujourd’hui clairement reconnus mais la bonne construction d’une homepage laisse aussi une grande place à la créativité et aux tests.

Les pré-requis en amont de la création de votre page d’accueil

La page d’accueil, le reflet de votre proposition de valeur

Facteur important du taux de conversion, la proposition de valeur est l’élément de contenu essentiel de la page d’accueil de votre site web. A la différence d’un slogan, cette formulation présente à vos visiteurs le problème que vous tentez de résoudre ou le besoin que vous souhaitez combler et dévoile pourquoi vous êtes meilleur que vos concurrents. Qu’est-ce-qui fait une bonne proposition de valeur ? Deux étapes principales sont nécessaires pour écrire un USP (‘Unique Selling Point’) pertinent sur sa page d’accueil :

• L’identification : Trouver sa proposition de valeur repose sur un travail de fond lié la détermination des besoins de votre cible, la confrontation avec l’offre que vous apportez puis la mise en évidence des éléments différenciants par rapport à ce que propose vos concurrents.

• La formulation : Tenant sur une phrase, la proposition de valeur doit être claire, compréhensible en 5-10 secondes aux yeux de votre cible et facile à retenir pour vos visiteurs. Trouver la tournure clé est fondamentale mais peut être complexe.
  • Allez à l’essentiel : ce ‘gros titre’ contient souvent le bénéfice final et immédiat qui sera offert à l’utilisateur. La simplicité est souvent la clé.
  • Mettez en valeur : un visuel ou une vidéo peuvent être associés et les explications détaillées sont à insérer dans les ‘sous-titres’.
  • Testez votre formule : une proposition doit être testée. En parallèle de l’A/B testing, un premier test qualitatif simple peut être d’annoncer votre proposition de valeur à des personnes correspondant à votre cible pour analyser leur réaction, leur demander quelques minutes après ce que vous faites, afin de faire ressortir les éléments marquants. De plus, un historique listant les messages qui convertissent et ceux qui n’ont pas converti peut être intéressant. Sur son blog, Neil Patel présente une infographie qui résume bien l’ensemble des enjeux et des bonnes pratiques pour rédiger une proposition de valeur.

Plus largement, la page d’accueil doit être le reflet de votre stratégie d’entreprise et, selon les business, traduire visuellement :

Votre positionnement marketing : la homepage reflète les grands axes de différenciation sur lesquels vous vous appuyez que le visiteur doit pouvoir distinguer (low-cost VS luxe, moderne VS traditionnel, etc).

Votre image de marque : la homepage doit ‘marquer’ le visiteur par les éléments graphiques qu’elle comporte (code couleur, logo, design global, etc). La charte graphique de celle-ci est donc également indispensable pour dégager une image de marque claire, cohérente avec le positionnement et reflétant votre proposition de valeur.

La page d’accueil, le sommet de la pyramide

1.   Le carrefour pour la majorité de vos visiteurs

Au coeur de l’arborescence de votre site web, la page d’accueil constitue généralement un point d’entrée, de passage ou encore de repère pour toutes vos sources de trafic : des visiteurs issus du direct ou provenant de campagnes marques, à ceux qu’un contenu a intéressé et qui souhaitent creuser, jusqu’aux utilisateurs perdus sur le site. La navigation de votre site doit donc être pensée puis planifiée à partir de cette page centrale afin qu’elle réponde à tous ces besoins et soit adaptée aux comportements de vos cibles.

• Dessiner des scénarios de navigation : construire en amont des personae reflétant l’expérience de vos différents types de visiteurs est indispensable pour que votre homepage marque une bonne orientation pour chacune des cibles. Dès l’arrivée sur son ancienne page d’accueil, HubSpot demandait – voire contraignait – ces nouveaux visiteurs à effectuer un choix déclaré entre les deux principaux personae d’acheteurs propriétaires d’entreprise et professionnels du marketing, afin de les rediriger vers des landing pages appropriées.
• Choisir des modes de navigation : la navigation réfléchie, votre page d’accueil devra alors mettre en avant les modes de navigation appropriés tels qu’un menu avec méga-menu pour guider efficacement vos visiteurs vers les pages secondaires du site, un moteur de recherche interne pour simplifier le parcours de vos prospects directement vers un contenu spécifique ou encore des push visuels en coeur de page pour emmener directement vers des pages plus profondes.

2.   Le coeur de votre stratégie de référencement

Pour la partie référencement naturel, la page d’accueil est une nouvelle fois au sommet de la pyramide mais doit suivre une optique d’amélioration différente, davantage centrée user-experience. Le ‘Homepage SEO’ ne peut généralement être tourné vers une logique de ‘focus keyword research’ soit une optimisation de votre page d’accueil pour Google à travers un mot clé spécifique. Cependant, sa valeur SEO est indéniable et doit donc être travaillée. Le choix des pages vers lesquelles elle pointe est primordiale pour retransmettre efficacement la forte réception de trafic, provenant des liens entrants, de la homepage vers des pages plus profondes. Pensez donc à ne pas encombrer votre page d’accueil de trop de liens mais faites plutôt des choix stratégiques. La balise title doit aussi être centrée sur votre marque ou votre produit principal. Egalement, assurez-vous que votre meta-description soit remplie et contienne votre proposition de valeur. Insérer Facebook OpenGraph et Twitter Cards pour favoriser les partages dès la homepage. Le choix des balises et du contenu sont donc fondamentaux puisque cette page va apparaître en SEO de marque comme en SEO générique si le travail sémantique mené est bon.

La conception ergonomique de votre page d’accueil

Les aspects fondamentaux d’une page d’accueil e-commerce

Une homepage e-commerce classique doit contenir une série d’éléments standards qui sont aujourd’hui devenus des ‘must-have’ en étant mis en évidence par la littérature existante, riche sur le sujet, vérifiés empiriquement par de nombreux tests et véritablement ancrés dans les expériences de navigation des visiteurs.

Les indispensables du header

• Menu de navigation et méga-navigation

Pensez à accompagner votre menu principal horizontal d’un menu de méga-navigation qui, très pratique pour les sites complexes avec de nombreuses sections, améliorera significativement l’usabilité. Le méga-menu peut être en dimension relative afin de l’adapter au contenu, textuel ou graphique en comprenant des images de produits, en fond plein ou transparent pour un design plus attractif. Son ouverture peut se faire par survol ou au clic. Mal implémentés, par exemple placés sur la trajectoire d’autres objets de navigation, les ‘mega drop down menus’ peuvent toutefois produire des frictions sur votre page d’accueil et donc potentiellement augmenter votre taux de rebond.

• Moteur de recherche interne

Placé dans le header, le moteur de recherche interne peut alors être à constante disposition des visiteurs. Au-delà du positionnement, le design et la formulation sont également essentiels. Vous pouvez ainsi afficher des call-to-action différents ou présenter des icônes standards comme la loupe et tester des mots clés engageants comme ‘rechercher’ ou ‘trouver’.

• Accès au panier et connexion au compte client

Même vide, l’accès au panier doit toujours être visible depuis le header. Placé à sa proximité, le bouton de connexion au compte client est aussi un point de repère important. Evitez de déplacer ses fonctionnalités e-commerce mais groupez-les de façon immuable en haut à droite afin de suivre les habitudes de navigation de vos utilisateurs – pensez à amazon.com  ! – plutôt que de chercher la différenciation sur ce point, source éventuelle de tension à l’achat.

Sony respecte bien cette logique, en y ajoutant les ‘favoris’ à l’endroit clé et un menu déroulant permettant d’atteindre les sous-rubriques lié à l’onglet compte.

Les indispensables en cœur de page et du footer.

• Proposition de valeur et avantages concurrentiels

S’il est préférable que la formulation de votre proposition de valeur apparaisse dès le haut de votre page d’accueil, son approfondissement en coeur de page avec l’exposition de vos avantages concurrentiels est tout aussi fondamental.

Sur la page de Cdiscount, un court tagline ‘n°1 du e-commerce en France !’ précisant clairement le positionnement marketing du site e-commerce est incorporé à proximité du logo. Ce slogan se vérifie alors sur l’ensemble des emplacements et à travers l’identité graphique de la homepage. La mise en avant de nombreux bénéfices tels que la carte de fidélité, la livraison offerte puis surtout l’omniprésence de prix bas font qu’au fur-et-à-mesure qu’il scrolle la homepage, l’utilisateur devient réellement convaincu que Cdiscount est bien le premier e-commerçant français.

• Eléments d’animation commerciale 

Il n’y pas que les nouvelles visites. Au-delà de la première session, votre page d’accueil est aussi la voie de retour principale pour vos visiteurs récurrents. Son animation est donc primordiale. Sans changement visible dès la homepage, vos visiteurs penseront logiquement qu’il n’y en a aucun sur l’ensemble de votre site, les possibilités de reconvertir s’éloigneront et le taux de rebond de la page d’accueil risque aussi d’augmenter. Pour faire vivre la home, retenez deux grandes catégories d’actions en lien avec l’actualité du marchand : nouveautés et promotions. Difficiles à concilier sans surcharger la homepage, vous devrez parfois, là encore, faire des arbitrages stratégiques en fonction de votre image de marque, des attentes de vos cibles et de la structuration du contenu sur votre page d’accueil. Autre conseil, éditorialisez vos animations selon une bonne fréquence de rotation afin d’habituer l’utilisateur tout en conciliant le respect de votre calendrier commercial et votre habillage saisonnier.

Zalando fait le choix délibéré de présenter les promotions d’une autre couleur dans une rubrique dédiée au sein du menu pour éviter d’en parsemer la page d’accueil. En accord avec son image de marque, le e-commerçant préfère consacrer l’intégralité du carrousel et du coeur de home aux nouveautés et recommandations.

• Eléments de rassurance

A la base de toute conversion, la confiance doit ressortir dès votre homepage. Pour les leaders du e-commerce comme les e-commerçant en phase de lancement, les éléments de rassurance sont aujourd’hui des codes afin de créer un environnement favorable à l’achat pour vos e-shoppers. Donner des engagements ‘satisfait ou remboursé’, présenter une URL sécurisée (type https), mettre en avant un label sécurité de paiement (type McAfee Secure ou Versign), afficher des témoignages clients ou encore donner les numéros et disponibilités de votre SAV sont autant d’éléments à votre disposition pour rassurer vos utilisateurs. Pensez toujours à tester les éléments que vous souhaitez présenter ainsi que leurs emplacements car les effets des éléments de rassurance peuvent parfois avoir des effets inverses et susciter le doute de vos visiteurs. Par exemple, la solution d’A/B testing Unbounce a ainsi mis en évidence un cas particulier dans lequel l’ajout de la mention ‘TRUSTe certifier piracy’ lors d’un formulaire de contact conduisait à une baisse significative du nombre de leads générés par rapport à la version initiale.

Sur sa page d’accueil française, le géant chinois Alibaba présente ses engagements clients sous forme graphique avec un bandeau renvoyant vers une page dédiée comprenant des témoignages utilisateurs.

Concevoir ses maquettes, du macro-zoning au wireframe

La construction de la page d’accueil est une étape déterminante qui s’inscrit plus largement dans la création de la maquette de votre site web. Respecter ces étapes permet d’éviter des erreurs de structures importantes et difficilement modifiables par la suite.

Le macro-zoning : le découpage de votre homepage

Le zoning permet de lister et commencer à hiérarchiser les contenus présents sur la page d’accueil pour dégager une vision sommaire de son organisation. Afin de réaliser votre macro-zoning, différents outils sont utilisables, allant du traditionnel croquis sur papier aux solutions types Cacoo, Balsamiq ou Axure RP. Ces logiciels de mockups sont plus ou moins poussés et facile à prendre en main.

Le wireframe : la structuration précise du contenu de votre homepage

Aussi centré sur le fond, le wireframe permet de définir plus précisément l’emplacement des différents éléments de votre page d’accueil. Cette structuration aboutit ensuite à un prototype de homepage qui offre la possibilité de travailler sur une maquette fonctionnelle « à l’échelle » avec de réels liens cliquables pour davantage de précisions. Vous pouvez alors coupler ce prototype à votre mockup et tester si le scénario utilisateur est bon ou si la charte graphique convient avant le développement.