Suivre les bonnes pratiques sur le web, attention danger ?

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 point de vue sur le sujet avec l’exemple de la couleur miracle ! Vous savez, celle qu’il faut absolument utiliser sur nos boutons pour mieux convertir, vous vous souvenez ? Très bien.

É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 souvent de comprendre la démarche, les réflexions et le contexte d’un site pour arriver au même niveau d’optimisation. Dans le cas de la couleur d’un bouton sur une landing page, ça reste assez simple et rapide à réaliser avec un bon outil de test A/B.

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

Laisser un commentaire

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