Menu

Design

4 conseils design pour booster le taux de conversion de votre site

Arnaud BURDET le 01 avril 2016
Arnaud BURDET
4min

Après avoir évoqué dans l'article précédent 6 bonnes raisons de refondre un site internet dans l'industrie (que vous avez lu n'est-ce pas ?), je vais au cours de cet article me focaliser sur l'impact que le design a sur le taux de conversion de votre site. Effectivement, vous êtes en droit de vous demander : qu'est-ce qui fait la différence entre un site designé pour la performance et un autre conçu "juste" pour plaire ? Alors, commençons dès maintenant et voyons comment vous pouvez booster le taux de conversion de votre site web en suivant ces 4 conseils design.

1- Insérez vos boutons d’appels à l’action (CTA) dans des blocs visibles

Les boutons d’appel à l’action et les formulaires de génération de leads sont les éléments les plus importants de votre site. Alors, insérez-les dans des blocs visibles afin de les mettre en avant. Et surtout, ne les traitez pas comme tout autre élément de design.

Certes, les autres éléments de pages tels que les titres, les sous-titres, jouent aussi un rôle important mais ils permettent simplement de capter l’attention des visiteurs et de les pousser vers vos CTAs pour les convertir. Assurez-vous que ces derniers identifient en une fraction de seconde vos boutons, c’est-à-dire l’action que vous les encourager à accomplir.

Pour vous aider à mieux comprendre, rien de mieux que d'illustrer en images ces propos. Prenons l'exemple des carrousels (qui au passage seront de moins en moins utilisés si on se se réfère aux dernières tendances webdesign 2016) que l'on trouve la plupart du temps sur les pages d'accueil des sites robotiques.

CTA Intuitive Surgical non optimisé pour la conversion

>> Intuitive Surgical

CTA Stryker non optimisé pour la conversion

>> Stryker

CTA DroneVolt optimisé pour la conversion

>> Drone Volt

CTA Rockwell Automotion optimisé pour la conversion

>> Rockwell Automotion

Sur les deux premières images (et surtout la deuxième d'ailleurs), le moins que l'on puisse dire c'est que les boutons d'appel à l'action ne sont vraiment pas mis en avant. Le "Learn more" et le "Watch the video" sont à peine visibles. Et comme moi, je pense que la majorité des internautes ne les a pas remarqués et a passé son chemin sans avoir cliqué. Dommage !

Les deux dernières images présentent une mise en avant intéressante des calls-to-action. Drône Volt a choisi pour sa part un design épuré avec un titre et un bouton simple sur fond noir avec écriture blanche en lettres capitales. Nous aurions en revanche privilégié un verbe d'action.

Rockwell Automotion a quant à elle bien mis en avant son bouton en réalisant un fond rouge qui contraste bien avec l'image de fond et en utilisant un signal visuel (la flèche). Ici, nous aurions plutôt mis la question dans un sous-titre et inséré un verbe dans le call-to-action.

IDEA'LIRE : 6 astuces pour optimiser les taux de conversion de votre site

2- Utilisez des signaux visuels qui pointent vers vos CTAs  

Les internautes ne lisent pas vos landing pages comme ils liraient un livre. Ils ne lisent pas de gauche à droite, de haut en bas. Le design de votre site robotique et notamment les indices visuels (flèches, lignes, eye-tracking...), tout comme le constraste et les espaces blancs, doivent leur indiquer la manière de parcourir vos pages. Ce sont en effet des éléments clés du design car ils disent sur quoi se concentrer.

Pour chaque page, choisissez les deux éléments que vous souhaitez mettre en avant (ex : CTA, offre, USP…) et concevez votre design autour. Puis faites des tests A/B pour voir quel design attire le plus l’attention des internautes. Les signaux visuels permettent ainsi d'améliorer l'expérience utilisateur et de diriger l'internaute là où vous voulez qu'il aille.

Sur l'image ci-dessous, issu du site de la société Airinov qui produit des drônes pour l'agriculture, l'utilisation de signaux visuels (la flèche qui incite à regarder vers la droite) combinée à une bonne mise en valeur du CTA permet une compréhension simple de ce bloc et incite à découvrir le suivi d'essais.

 Indice visuel Airinov optimisé pour la conversion 

3- Etablissez une hiérarchie visuelle claire

Souvenez-vous que la décision de rester sur votre site est prise en une fraction de seconde par l'internaute. Vous devez donc établir une hiérarchie visuelle claire pour lui permettre de comprendre instantanément le but de votre page, et ce, sans qu'il n'ait à lire un seul mot. Vous devez tout faire lors de la conception du design de votre site pour faciliter la lecture et la rendre la plus agréable possible.

Une hiérarchie visuelle forte dirige ainsi l'oeil de l'internaute vers les informations les plus importantes afin qu'il puisse avancer dans le parcours d'achat. Les boutons d'appel à l'action et les formulaires de conversion doivent par exemple être insérés à des endroits stratégiques. A l'inverse, une hiérarchie visuelle faible rend la lecture difficile et désagréable ce qui augmente considérablement votre taux de rebond et vos taux de conversion.

4- Utilisez les espaces blancs lors de la conception du design de votre site robotique

Les espaces blancs (ou vides) sont très importants dans le design de votre site robotique et sont pourtant bien trop souvent oubliés. Ne voyez pas cela comme de la place perdue. Au contraire, ils permettront à l’œil de l’internaute de respirer, d’aérer vos pages et de mettre en avant les éléments importants, ce qui rendra la lecture beaucoup plus facile. 

Supposons que vos visiteurs doivent chercher vos boutons d’appel à l’action sur votre site ; croyez-moi, cela ne va pas les amuser longtemps ! Et ils le quitteront immédiatement. L’utilisation réfléchie des espaces vides permet de placer judicieusement vos CTAs ou formulaires et de les rendre plus visibles. Oui, j’ai bien dit « judicieusement » car il ne faut pas en abuser non plus. Trop d’espaces blancs entre votre offre de contenu et votre CTA pourrait aussi créer une sorte de déconnexion et suggérer l’idée que le CTA n’est pas lié à votre offre. 

Avec des exemples c'est plus parlant.

Page "corporate governance" du site stryker.com

Mauvais design de la page Stryker

 
Le design et l'organisation de cette page rend la lecture extrêmement difficile. En effet, il y a peu d'espace blanc entre les différents éléments (menu, titre, sous-menu, fil d'Ariane, corps de texte...). Tout est condensé. Il y a donc de grande chance que l'internaute "rebondisse" (=quitte la page). Pour une meilleure optimisation de la page, on pourrait par exemple rajouter des signaux visuels, de l'espace vide, insérer des boutons d'appel à l'action pour inciter l'internaute à effectuer une action précise, ajouter des images, augmenter la taille de la typographie...

Bas de la page "accueil" du site irobot.fr

Design sobre et épuré du site iRobot


Au contraire de la page précédente, le site iRobot présente une structure beaucoup plus aérée ce qui permet à l'internaute de bien visualiser les différents éléments du site et de pouvoir naviguer de façon simple et intuitive. Le bas de le page d'accueil présente en effet 3 blocs distincts, bien agencés autour d'espaces importants et présentant une organisation claire (titre, texte et CTAs). L'internaute n'est pas perturbé et peut aisément choisir l'action à réaliser.

Ces 4 éléments de design ne sont pas forcément très complexes mais impliquent un gros travail en amont. Le design de votre site robotique doit être soigné, analysé et amélioré en fonction de la performance de vos campagnes marketing. En suivant ces principes, vous gagnerez la confiance de vos visiteurs et augmenterez votre taux de conversion à coup sûr. Croyez-moi, j'en ai fait l'expérience.

Avez-vous trouvé ces conseils utiles ? Si oui, je vous invite dès maintenant à télécharger notre livre blanc ci-dessous "Est-ce temps de refondre votre site ?". N'hésitez pas non plus à partager cet article et à nous faire part des changements que vous avez apportés à votre site et l'impact qu'ils ont eus sur votre performance. 

Lecture sans distraction

eBook gratuit - Est-ce temps de refondre votre site ?

Ce sont des questions que toutes les personnes de l'industrie se posent à un moment ou un autre :

  • Dois-je faire une refonte complète de notre site ?
  • Ou dois-je plutôt faire une refonte partielle ?

Bien sûr, cela dépend ! Pour vous aider à y voir plus clair, téléchargez notre livre blanc ci-contre en remplissant le formulaire. Après l'avoir lu, c'est sûr, vous saurez quelle option choisir.

Vite, je télécharge le livre !

COMMENTAIRES

Rejoignez la communauté Ideagency

Découvrez chaque semaine de nouveaux articles sur l'industrie spécialisée (robotique, aéronautique, automobile, bâtiment)