Augmenter votre taux de conversion avec une hiérarchie visuelle et un design web qui convertit!
Tous les sites web (ou sinon une grande majorité) ont l’objectif commun de transformer les visiteurs en clients qui génèrent des revenus. Pour réussir, vous devez guider l’utilisateur au travers de sa navigation. La clé? Avoir une hiérarchie visuelle et un design web qui aide à la conversion!
Selon les statistiques, on évalue à environ trois secondes le temps de réflexion d’un visiteur pour se faire une idée globale et rapide sur l’essence même d’une page web et donc de l’entreprise.
Il vous est probablement déjà arrivé d’atterrir sur une page web qui regroupe tellement d’options et de contenu qu’il est tout simplement impossible de s’y retrouver. Dans la très grande majorité des cas, vous allez tout simplement fermer l’onglet et relancer votre recherche pour trouver un site web qui vous donnera une solution plus rapide chez un compétiteur. Et tant et aussi longtemps que votre page web n’aura pas une hiérarchie visuelle et un design web fort, le comportement des visiteurs sera le même et votre taux de rebond sera très élevé.
Pour éviter tout ça, le design du site web doit orienter le client dans sa navigation afin de le diriger vers l’action que nous attendons de lui (acheter un produit, remplir un formulaire de contact, faire une demande de soumission, etc.)
Bien diriger le visiteur : un art en soi
C’est certain que le visiteur n’a pas le temps de lire l’ensemble du contenu présent sur votre page en trois secondes. Il s’agit donc d’attirer son attention rapidement et de le guider tout au long de sa navigation pour conserver son intérêt et le transformer d’un simple visiteur à un client.
En imaginant que le visuel ci-dessus est une page de site web, nous pouvons rapidement constater que le visuel A comporte une hiérarchie visuelle où le visiteur sera facilement dirigé et que le visuel B semble être un bloc uniforme où aucun élément n’est mis de l’avant.
Le choix des couleurs
La manière la plus simple d’attirer l’oeil humain est l’utilisation de couleurs en contraste avec le reste de votre contenu et du design web. Le choix des couleurs va vous permettre de mettre en valeur l’élément le plus important, ou au contraire, mettre en retrait d’autres éléments.
Souvent, nous allons l’utiliser sur les CTAs (Call To Action) afin de communiquer clairement la prochaine étape au client dans le processus d’achat ou tout autre processus que vous cherchez à accomplir avec votre site web (inscription à l’infolettre, appel téléphonique, etc).
Comme exemple, voici une portion d’une page produit d’Amazon. La grande majorité du site web est blanc et gris, mais nous retrouvons dans cette petite section plusieurs couleurs différentes. Nous pouvons aussi inclure le contraste qu’Amazon utilise avec l’option de mettre en gras certaines phrases-clés.
Amazon veut clairement que l’on ajoute ce produit au panier ou qu’on l’achète immédiatement. Vous pouvez même remarquer que ces deux appels à l’action l’un en dessous de l’autre sont de teintes différentes afin de les différencier facilement et d’attirer le focus sur chacun d’eux.
Avec l’aide du principe des contrastes, les avantages sont rapidement mis de l’avant en mettant la livraison gratuite ainsi que la date de livraison en gras. Ce sont instinctivement ces deux phrases qui retiendront notre attention.
Nous pouvons aussi voir que l’élément ‘’En stock’’ est en vert ainsi que le prix en rouge afin de donner les informations décisives rapidement au client.
La taille des éléments
Il est important de garder une corrélation entre la taille de vos éléments et leur importance. L’oeil humain regarde automatiquement les éléments occupant le plus grand espace dans une page web. Plus vous allez mettre de l’emphase sur la grosseur d’un élément, plus il sautera aux yeux pour les visiteurs.
Un exemple qui est bien ancré dans notre logique est l’utilisation des balises H1, H2, H3, etc. dans le contenu texte d’une page web. La grosseur des différents titres et sous-titres dans l’article que vous lisez présentement vous guide dans votre lecture.
Vous pouvez aussi remarquer dans le coin inférieur gauche de votre écran un bouton pour nous contacter. Ce dernier est d’une couleur frappante, mais il est surtout l’élément le plus gros dans l’écran.
L’emplacement des éléments
Le placement de votre contenu sur votre page est très important dans la hiérarchie visuelle de votre site web. Le but est de faire comprendre rapidement aux visiteurs ce que vous désirez leur communiquer. Dans la conception de site web, nous parlons souvent du «premier scroll», c’est-à-dire tout le contenu visible dans l’écran sans que le visiteur n’ait besoin de «scroller» sur la page.
C’est à cet endroit que vous devez optimiser votre contenu, donc mettre au clair rapidement ce que le client pourra retrouver dans cette page. Et pour mettre cette information claire, vous pouvez utiliser les conseils que nous avons abordés plus haut.
De manière générale, nos yeux se comportent de façon prévisible. Chaque personne a ses habitudes uniques, mais si nous analysons notre comportement vis-à-vis la lecture d’une page web, nous décernons rapidement une tendance.
Cette tendance est le survol en Z. C’est une règle que nous intégrons plus souvent qu’autrement dans la hiérarchie visuelle d’un design de site web ayant peu de contenu écrit et beaucoup de visuels, principalement des commerces en ligne.
Instinctivement, le regard suivra ce chemin, principalement à cause de la barre horizontale qui regroupe l’ensemble des onglets. Vous devez donc placer vos CTAs en fonction de ce cheminement ou tout autre incitatif important.
Dans l’exemple ci-dessus, Amazon a ordonné ses onglets dans le haut, et dans la majorité des cas, les utilisateurs vont lire les 2 ou 3 premiers onglets rapidement. Donc mettez l’emphase sur ceux-là. Pour Amazon, ils ont choisi les onglets «Meilleures ventes» et «Offres spéciales», ce qui est loin d’être un hasard!
Ensuite, vous descendez en diagonale jusqu’au point en bas à gauche. C’est donc dans cet espace que vous pouvez mettre de l’avant vos produits, vos rabais, vos nouveautés ou tout autre élément que vous désirez communiquer à vos visiteurs.
J’ai parlé plus tôt du «premier scroll». Nous pouvons voir dans l’exemple qu’Amazon a superposé quatre catégories de produits par-dessus son slider afin de les mettre de l’avant dans le fameux «premier scroll».
Par la suite, le dernier mouvement vous permettra de voir les «Offres du jour à moins de 25$» ce qui est une autre occasion de convertir les visiteurs facilement.
Capitalisation des bonnes pratiques
Maintenant que nous avons parcouru les éléments afin de réaliser une hiérarchie visuelle forte, il faut aussi les agencer avec certaines pratiques qui optimiseront votre hiérarchie et votre design web.
Répéter vos éléments
La première chose à faire est maintenir une répétition dans certains éléments, notamment dans vos couleurs, vos formes, vos CTAs et dans le design web de vos pages répétitives. Tentez le plus possible d’agencer une action avec une répétition, comme par exemple, un ajout au panier avec une couleur et une forme.
Le fait de répéter vos éléments vous permettra d’avoir une cohérence visuelle qui facilitera sans aucun doute la compréhension de vos visiteurs, mais qui rendra aussi la navigation plus accommodante et intuitive.
Pour appuyer cette théorie, il existe un exemple de biais cognitif du nom de «Effet de simple exposition». En résumé, ce biais cognitif démontre que plus nous sommes exposés à quelque chose, ou même quelqu’un, plus les probabilités de l’aimer augmentent de fois en fois. En d’autres mots, plus nous sommes familiarisés avec quelque chose, plus que nous avons des chances de l’aimer. En fait, c’est l’essence même de la publicité.
N’ayez pas peur du blanc!
Utilisez le contraste! Plus souvent qu’autrement, cette technique sera utilisée dans les photos de produit lorsque l’on veut que le focus soit sur le produit et rien d’autre.
Le meilleur exemple est le site web d’Apple. Malgré le budget gigantesque qu’ils ont en leur possession, leur design demeure très simple et épuré. C’est blanc! Dans l’exemple ci-dessous, vous remarquerez qu’il y a uniquement l’essentiel et absolument rien d’autre qui nous distrait. Nous y retrouvons le produit, sa courte description et le bouton pour acheter qui ressort du lot avec sa couleur bleue.
Il faut, bien sûr, doser cette pratique pour ne pas se retrouver avec un site web entièrement blanc, mais c’est très efficace lorsque nous voulons mettre de l’avant un produit ou un élément-clé.
