Vous devez surement faire votre veille sur Twitter comme moi, et on voit souvent des articles de bonnes pratiques web de ce style : « 3 astuces pour la fiche produit parfaite ! » ou « Augmenter de 5% la conversion de son tunnel de commande avec des boutons orange. », …etc. Des titres racoleurs, un peu comme les rabatteurs de ces restaurants à touristes. Peu recommandé dans le guide du Routard.

En plus de ces articles, vous avez peut-être déjà entendu lors d’une réunion de projet, la citation de ces articles qui ressemblent à des légendes…bien ancrées dans les esprits de chacun. Alors faut-il les suivre à la lettre ? s’en inspirer ? ou y prendre garde ? Voici mon avis sur le sujet avec l’exemple du CTA parfait !

Études de cas pour une couleur de bouton parfaite

Le premier test A/B est réalisé par Hubspot test la couleur de 2 boutons sur une landing page, vert VS rouge. La version rouge convertit 21% de plus que la version verte :

red_green_button

 

Je vous invite à lire cette étude de cas très intéressante pour comprendre le résultat final. Hubspot a par exemple eu peur que le rouge soit perçue comme l’information stop ou danger.

Un autre cas ici, le bouton rouge gagne avec +34%  :

buttons

 

Alors, la couleur rouge est-elle parfaite ? Bien sur que non. Ces optimisations s’expliquent et suives une démarche particulière. Dans ces 2 exemples, le bouton vert est noyé au milieu d’autres éléments de même couleur ce qui réduit sa visibilité. Le bouton rouge a un taux de contraste beaucoup plus important (le rouge étant opposé au vert), il attire donc plus le regard. Basique ? Tout à fait mais efficace.

Si votre site contient plus d’éléments rouge, cette technique ne fonctionnera pas, j’en suis sur ! Démonstration avec Darty.com.

L’exemple made in France, Darty.com

Cette fiche produit est composé principalement de rouge  et de jaune, 2 couleurs agressives, qui attirent l’œil :

Darty

Voici la palette de couleur généré par Pictaculous utilisée sur la fiche produit de Darty :

palette-couleur-darty

 Testons la règle du bouton rouge sur le bouton d’ajout au panier, qu’est ce que vous en pensez ? vous avez l’impression d’augmenter sa visibilité ? Normalement non.

darty-bouton-rouge

Cherchons une couleur à fort taux de contraste grâce à l’outil Color Scheme Designer, c’est à dire opposée aux couleurs principales de la page. Repérez la couleur en face du rouge et du jaune, une sorte de « vert canard » :

Color-scheme-design-darty.de

Voici le résultat :

Darty-bouton-vert

Est-ce plus visible et adaptée à la page ? Allons un peu plus loin, en mettant toute la zone de cette couleur :

Darty-zone-verte-fiche-produit-conversion

Voici le résumé de ces 4 versions :

Optimisation-call-to-action-fiche-produit-darty-ergonomie

 Vous l’aurez compris ici le rouge n’est clairement pas la couleur à utiliser, trop d’éléments l’utilisent déjà (prix, informations secondaires, publicité, encart…) tout comme le jaune. La couleur « vert canard » reste une hypothèse de test, mais a de fortes chances d’attirer plus le regard et doit être testée.

Que faut-il faire alors ?

Le plus difficile est de comprendre l’hypothèse de départ et les réflexions pour arriver à tirer parti d’une optimisation.

Ces articles ou retour d’expérience sont bien souvent de très bonne qualité, mais il faut avoir conscience que tout est propre à une marque, un site et à ses utilisateurs ! Si votre concurrent passe son bouton en jaune, et qu’il annonce plus de résultats, faut-il le suivre ? Non, pourtant c’est assez tentant. Il a peut-être les mêmes produits que vous, ou un marketing assez proche, mais il a surement des utilisateurs différents ! Attention donc.

Réalisez des tests A/B vous mêmes ou faites-vous encadrer par une agence pour valider des hypothèses et effacer les légendes urbaines qui pourraient courir dans vos couloirs ! C’est la clef pour augmenter vos CA rapidement.


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.