Page d’accueil de Lemon & Mint : concept store anglais

La première impression est décisive dans le domaine du web. Elle va impacter les interactions futures avec votre site. Or, malgré l’utilisation de moteurs de recherche, la page d’accueil de votre site reste bien souvent la première qui sera vue par les internautes. Elle doit donc être convaincante et se distinguer de la concurrence. En effet, vous devez mettre en avant la valeur ajoutée de votre entreprise (texte accrocheur, slogan, …). Sans quoi, vous risquez de perdre des ventes en quelques minutes.

Une page un peu particulière.

Etant la première page de votre site, la page de garde dispose de plusieurs fonctions. En premier lieu, n’importe qui doit pouvoir comprendre votre offre en un coup d’œil. Quel est votre objectif, votre thématique ? Quel contexte ? Pourquoi ce site ? L’utilisateur doit pourvoir répondre à ces questions en un coup d’œil. Pour cela, votre page doit être simple, claire et pas trop surchargée. Les éléments importants doivent être mis en avant (menus de navigation, textes accrocheurs, visuels produits).

Il faut également réduire au maximum les textes qui découragent la plupart des internautes.  Privilégiez plutôt des images et des icônes. Si vous devez écrire un paragraphe ou deux privilégiez des phrases courtes et un vocabulaire simple (celui de vos cibles).

Sur ce site, les différents blocs sont clairement identifiés. Seules les offres les plus populaires sont présentées. Cette page est ainsi claire et pas trop chargée. L’utilisation de symbole est également intéressante. Ainsi, les éléments textuels sont réduits au minimum. Enfin, les couleurs restent sobres rendant cette page agréable à regarder sans être agressive.

Cette page doit être séduisante pour attirer l’internaute afin qu’il veuille en savoir plus. Pour cela, la charte graphique et le design vont être des éléments importants pour induire des émotions positives. En effet, un internaute content est un internaute plus enclin à acheter. Ainsi, l’apparence de cette page doit être au plus proche des valeurs et besoins de l’utilisateur. D’où l’intérêt de l’expérience utilisateur dans la conception et l’optimisation de pages web. Pour ce qui est des couleurs, privilégiez les couleurs complémentaires, des nuances (cf cercle chromatique). Ce choix donnera une certaine unité à votre page et la rendra agréable à regarder. Après tout, le but de cette page est aussi de séduire vos visiteurs afin de leur donner envie de rester. Il faut donc mettre toutes les chances de votre côté.

Il est également important de limiter la longueur du scroll (2 ou 3 longueurs d’écran, pas plus). En effet, la plupart des utilisateurs ne descendent pas en dessous de 3 longueurs d’écrans. En deçà de cette limite, vos efforts ne serviront donc à rien ! Pour les mêmes raisons, les informations importantes doivent être placées en haut de page.

Respectez les conventions pour votre Header.

Premièrement, le logo du site (cliquable et renvoyant à la page d’accueil) est placé en haut à gauche de la page. Il est souvent accompagné d’une baseline claire et explicite pour comprendre rapidement votre offre.

Le panier du client se trouve quant à lui en haut à droite sur cette page. Accompagnez ce dernier de son montant ainsi que du nombre d’articles qu’il contient. Cela aidera l’internaute à se situer sur votre site lors de sa navigation.

A côté du panier se trouve généralement un autre élément à savoir, un lien pour se connecter ou pour créer un compte. Lorsqu’un de vos internautes veut se connecter, il est intéressant de lui montrer qu’il est spécial, que vous lui réservez un accueil privilégié comme vous le feriez dans un commerce physique.  Cela aura pour effet d’instaurer  une proximité relationnelle.

Pour accueillir un client, ce site affiche un message personnalisé une fois qu’il est identifié.

Toujours dans un but relationnel, vous pouvez personnaliser l’interaction avec votre site en vous servant des informations fournies précédemment par votre visiteur (volontairement ou non). Ainsi, vous allez pouvoir utiliser l’historique d’achat, de consultation, les données personnelles ou autre pour faire des suggestions adaptées voir, du teasing (un message adapté pour éveiller la curiosité).

Orientez pour mieux vendre.

 Il n’y a rien de plus décourageant pour un visiteur que de faire face à un site complexe à utiliser. Pour se repérer parmi vos offres, l’utilisateur a deux moyens principaux : la barre de recherche et le menu de navigation. Ce dernier a pour avantage d’aider l’utilisateur à se repérer dans le site. Il constitue une carte de vos offres. Il doit donc être clairement identifiable par rapport au reste de la page et placé à côté ou sous votre logo (plus rarement sous forme d’un menu latéral). Il est même possible d’envisager un fond de couleur contrastant avec le reste de la page pour le mettre en avant. Attention cependant au contraste entre le fond et le texte. Afin de ne pas être illisibles et décourageants, les articles doivent être catégorisés de manière pertinente, en suivant la logique de vos utilisateurs et en reprenant leurs terminologie. Pour plus de détails, se référer à l’article « Les Astuces d’Ergoman : Faites des menus de navigation simples ! »

Ce site présente ses articles de manière organisée en catégories et sous-catégories. Malgré une gamme de produits importante, le menu reste clair grâce à l’utilisation de typologie et de couleur différentes pour les catégories.

Autre moyen de navigation, le moteur de recherche est très souvent sollicité par vos visiteurs. Aussi, il doit être clairement identifiable dans le header du site (au centre ou à droite). Pour plus de détails, voir l’article « Améliorez votre moteur de recherche ».

Pour orienter votre internaute, vous pouvez aller encore plus loin. En effet, avoir des menus et un moteur de recherche efficaces, c’est nécessaire mais pas suffisant pour vendre. Vous pouvez accompagner vos visiteurs dans leur première action et la faciliter. L’utilisateur doit pourvoir mesurer le coût de cette action et se sentir libre de la réaliser. Le coût doit être assez élevé pour ne pas être tenté de faire marche arrière, mais pas trop pour ne pas effrayer. Plus spécifiquement pour le ecommerce, il va s’agir de favoriser une inscription sur le site et de guider le visiteur dans l’apprentissage de l’utilisation du site. Les intitulés doivent être simples et attrayant. Autre exemple spécifique au ecommerce, l’adhésion à la newsletter qui va aussi permettre un engagement dans le temps de la part de l’utilisateur.

Pour accéder au contenu de ce site, il faut être membre. Les actions à effectuer pour adhérer sont claires et explicites.

Rassurez pour convertir.

Pour acheter, l’utilisateur a besoin d’être rassuré et ceux dès la première interaction. Pour cela, il existe plusieurs astuces. Premièrement, votre internaute a besoin d’être guidé lors de sa navigation afin qu’ils ne se perde dans toutes vos offres et se décourage. Pour aller un peu plus loin, vous pouvez le stimuler afin de lui donner envie de voir ce qu’il y a à l’étape suivante un peu à la manière d’un jeu. Ceci, dans l’objectif de captiver votre internaute et lui donner envie d’acheter et de revenir.

Utilisez cette page comme une vitrine virtuelle …

Cette page doit présenter globalement vos offres. Tout doit y être mais pas n’importe comment ! Attention à ne pas aller trop dans le détail sous peine de rendre cette page illisible et désagréable. Cette page étant symbolique, il ne s’agit pas de présenter tous vos produits mais plutôt de fournir des moyens d’accès à ces contenus et un aperçu (une vitrine montrant ce que vous vendez).

Sur ce site, les articles sont organisés en grandes catégories et tout est présenté sur cette première page avec un premier aperçu. Néanmoins, la présentation de toutes les sous-catégories surcharge un peu la page.

Plus bas sur la page, le site propose une entrée par marque et par service, toujours accompagnés d’un visuel. Ceci est intéressant pour satisfaire différents modes de navigation.

Généralement, un carrousel est utilisé pour mettre en avant certaines offres, services, nouveautés, promotions, meilleures ventes, articles saisonniers, etc. Ceci n’est pas obligatoire voir même déconseillé. Non seulement il est peu utilisé, mais il faut faire attention à la vitesse de défilement et à ne pas être redondant par rapport au reste de la page ! (voir l’excellent article de Wexperience sur le sujet)

Ici, les catégories sont toutes accompagnées d’un visuel qui facilite la compréhension. Un carrousel permet de mettre en avant certaines offres sans surcharger la page. Un système de pastilles est aussi appréciable pour déterminer le nombre d’écran du carrousel et pour pouvoir accéder à un écran en particulier. Petit bémol, ces pastilles fonctionnent au survol (alors qu’elles sont assez étroites) et non au clic.

Pour savoir comment mettre en avant vos offres, il existe là encore quelques astuces. Plus vous avez d’articles, plus c’est difficile. Aussi, il est conseillé d’identifier vos priorités notamment grâce à la technique des personas. Cela vous évitera d’accorder trop d’importance aux contenus secondaires.

Enfin, comme toute vitrine, le merchandising est important. Elle doit être séduisante et dynamique. En effet, fidéliser vos visiteurs n’est pas tout, il faut les garder ! Aussi, si votre page d’accueil comporte toujours les mêmes visuels, les mêmes offres, vos utilisateurs vont se lasser et se tourner vers la concurrence…

Privilégiez une présentation structurée en blocs.

Présentez votre bloc central sous forme d’encarts avec, pour chacun, un objectif notamment la présentation d’une thématique principale. Pour la forme, l’utilisateur va d’abord regarder les images. Aussi, il est plus judicieux de commencer la présentation par une image, sous laquelle se trouvent un titre et un lien renvoyant à l’emplacement concerné dans le site. Ceci va contribuer à donner une structure à la page et donc à faciliter la navigation de vos visiteurs. Qui plus est, ce type de présentation facilite la mise en place de reponsive design ou d’applications pour tablettes et smartphones.

Ce site met en avant certaines rubriques telles que « Collection été 2014 ». La page se lit facilement grâce notamment à sa structure et à la limitation en ce qui concerne le texte. Il est intéressant de voir que pour alléger la page, les blocs ne sont pas délimités par des bordures mais par un espace. De la même manière, les titres des encarts cliquables évitent l’utilisation de liens. Par contre, le contraste entre les titres et le fonds rend la lecture parfois difficile.

Mettez en avant vos éléments de rassurance.

Sur cette page doivent aussi être présentes toutes les informations pouvant être utiles à vos internautes. Soit notamment, les éléments de rassurance. Plus vous ferez preuve de transparences sur vos pratiques, plus vos internautes seront enclins à acheter vos produits.

Concernant les éléments de rassurance, ils sont généralement situés dans le footer de la page avec des liens également disséminés dans le corps de page et le header.

Le moyen de contact fait partie de ces éléments. Permettre à vos visiteurs de vous contacter va diminuer la distance qui vous sépare de vos clients et qui est inévitable dans le monde du web. Le téléphone (renforçant votre côté « humain ») et l’adresse mail sont généralement utilisés. Il est également possible de prévoir un formulaire mais avec certaines précautions. Un formulaire composé uniquement d’options à sélectionner aura pour conséquence la frustration et dans certains cas, l’abandon de vos internautes.

Dans les éléments de rassurance, nous allons également trouver tout ce qui donne de la crédibilité à votre enseigne, tout ce qui permet à votre visiteur de vous faire assez confiance pour acheter sur votre site. Cela permettra également de mettre en évidence la valeur ajoutée de votre enseigne par rapport à vos concurrents. Ainsi, la première étape pour rassurer vos internautes, c’est de vous présenter. Généralement nommée « Qui sommes-nous ? », cette page va présenter votre enseigne avec des chiffres et des informations précises et fiables. De la même manière certains sites présentent un label de qualité. Même si certains sont payants, il en existe des gratuits.

Il est également important de présenter une tarification claire, ainsi que les moyens de paiement et de retour. Avant d’acheter, les internautes souhaitent avoir un maximum d’informations notamment sur les garanties (livraison gratuite, satisfait ou remboursé, etc.). De plus, vous devez montrer que vous respectez vos engagements. Pour cela, il faut veiller à rester cohérent au fil des pages et donc, ne pas vous contredire.

Sur ce site, ces éléments sont détaillés dans le footer (qui sommes-nous ?, livraison gratuite, paiement sécurisé, paiement en 3x, Services et garanties, etc.). Certains éléments sont également repris dans le bloc central et le numéro de téléphone est présent dans le header.

L’être humain étant un animal social, il est aussi intéressant de montrer des avis favorables d’autres clients. Un visiteur néophyte aura tendance à s’identifier à d’autres personnes qu’il estime semblables. Aussi, si des personnes lui ressemblant ont déjà acheté sur votre site et ont été satisfaites, votre visiteur sera plus enclin à faire de même. Par contre, évitez les faux avis qui auront l’effet inverse s’ils sont démasqués …

Limitez les popup et popin à l’ouverture de la page.

Ces fenêtres sont généralement fermées avant même d’être lues et agacent les utilisateurs. Elles peuvent même devenir difficiles à gérer sur un support tablette ou smartphone.

Une page riche oui … mais légère !

Elément un peu plus technique, cette page doit s’afficher assez rapidement sous peine d’agacer le visiteur. Il faut donc qu’elle soit légère. Aujourd’hui, les internautes veulent de la vitesse et fuient les sites trop lents au chargement. Aussi, attention aux animations qui alourdissent votre page d’accueil !

Je partage cet article sur