Rouge ou vert pour mes boutons call to action ? (16 juin 2010)

Petite réflexion sur les recettes qui circulent pour améliorer le taux de conversion des boutons sur son site.

J'ai retweeté hier un article en anglais qui affirme qu'un bouton rouge incite plus au click qu'un bouton vert. L'auteur de l'article essaye de répondre à la question « Quelle couleur de bouton génère plus de clicks ? »

Après, une explication sur la symbolique du vert et celle du rouge, il a réalisé un test A/B montrant le fameux bouton sur une page plutôt neutre, sans couleur dominante.

tumblr_l2za0ad1h21qz8ohs.png

Ses résultats montrent que le bouton rouge génère 21% de clic en plus que le bouton vert.

Super ! Allez hop, je passe tous les boutons de mon site en rouge.

Dans la foulée, Sylvain de E-merchandising.net m'envoit un message pour me dire que, chez lui, le bouton vert transforme mieux que le rouge, preuve à l'appui. Il a fait aussi un test A/B sur son propre blog avec des boutons Contact en MVT (textes et call to action). Le design a changé depuis. Son blog est à dominante bleu clair / blanc, et il a essayé plusieurs couleurs. Le bouton rouge est loin derrière le vert, le orange, et le bleu !

couleur-cta.png

Bon alors, je repasse tous mes boutons en vert finalement ?

 

Enfin, intervention d'Olivier Sauvage, aka Capitaine Commerce : "Le contexte, ça change tout et ça montre qu'il n'y a pas de recettes toutes faites en ergonomie et en merchandising."

Il a eu les mots justes. Les bonnes recettes valables pour un site ne seront pas forcément valables pour les autres, tout simplement parce que votre site ne ressemble pas à celui des autres. L'analyse de l'efficacité d'un bouton Call to action n'est valable que dans l'environnement du test effectué, et ne peut pas être transposé ailleurs, tout comme n'importe quel autre élément de navigation ou de merchandising.

Le plus important pour garantir une bonne visibilité de vos boutons, c'est le contraste que vous allez créer entre le bouton et le reste des éléments constitutifs de la page.

Exemples basiques : si votre site a une dominante de couleur rouge, pensez-vous que le résultat du test en introduction de cet article sera aussi favorable pour vous avec un bouton rouge ? Idem pour le bouton vert si votre site est plutôt dans les tons verts ? Et s'il est de toutes les couleurs ?

Image 5.png
Image 1.png
Image 3.png
est le bouton important ? Et la ? Heu ...

C'est pour cette raison que j'affectionne particulièrement les sites avec des designs épurés car ils permettent de mettre facilement en valeur les éléments importants ou structurants de la page (call to action, visuel produit, titre, phrase clé, ...), sans entrer dans une surenchère graphique.

Image 6.png

Ce contraste se joue souvent sur le choix des couleurs, mais pas seulement :

Bouton-panier-efficace1.png
Bouton-panier-efficace2.png
Bouton-panier-efficace3.png
Bouton-panier-efficace4.png

Enfin, ultime conseil, valable pour toute question d'optimisation ergonomique ou d'e-merchanding sur un site internet : faites des tests A/B pour valider vos changements et prendre les bonnes décisions. Un excellent article de Sylvain vous explique comment mettre en place un test A/B avec Google Website Optimizer.

 

Pour compléter la réflexion sur le sujet, vous pouvez lire aussi :


1. http://www.proimpact7.com/ecommerce-blog/killer-buttons-that-increased-conversion-rates/

Un article court qui fait une bonne synthèse d'un bouton efficace :


2. http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/

Un excellent article sur les meilleures pratiques pour créer des boutons call to action efficaces, très pédagogique, avec des nombreux exemples à l'appui. Un killer article.

09:47 | Lien permanent | Commentaires (10) | | | |  Imprimer