Et si on essayait ça ? C'est joli, non ?
Un débat essentiel enflammait la blogosphère la semaine dernière : « Vaut-il mieux peindre en vert ou en rouge les call-to-actions ? » Vous savez, ces gros boutons qui servent à attirer inéluctablement le regard du chaland pour qu’il clique dessus presqu’inconsciemment et faire gonfler son panier moyen ou bien son taux de transfo.
Vert, c’est permis, rouge, c’est interdit, et cacadois, tu l’as dans le doigt
Certes la question passionnera les emerchandisers et autres ergonomes de Marseille à Lille en passant par la Garennes Bezons, mais la vérité, il est le temps de la dire : ce n’est pas parce qu’un bouton est vert (comme un feu vert, oh, la belle allégorie) qu’il transformera forcément mieux qu’un bouton rouge (couleur de l’interdit, oh oh !) ou l’inverse (voir à ce propos cet article). Qu’est-ce à dire ? Eh bien, que ces codes colorés, même s’ils ont de fortes résonances culturelles, ne répondent pas forcément dans un cadre donné aux mêmes significations.
En français dans le texte, ça veut dire qu’un bouton rouge transformera mieux dans un certain contexte qu’un bouton vert et l’inverse dans un autre contexte.
Alors quoi ? Est-ce que tout cela n’est qu’affaire de hasard et de vaste fumisterie ergonomique ?
Culture et observation sont les 2 mamelles du emerchandiser
Que nenni, mes amis. Tout cela est surtout affaire d’observation et d’une petite dose de culture.
1) la culture (si vous n’en avez pas, il est de temps de vous y mettre), c’est tout simplement le minimum de savoir et de connaissances qui vous permettront d’orienter votre première réflexion quand à une problématique d’architecture d’information, de merchandising ou d’ergonomie. Certains appellent ça le bon sens, en réalité, il s’agit bien d’une somme de savoirs communément acceptés et reconnus. Exemple : un bouton d’ajout au panier, ça doit être suffisamment visible, suffisamment grand, tout le monde à peu près le sait. C’est logique et ça repose sur un savoir acquis inconsciemment au fil du temps : « Vous voulez être visible, soyez gros » relève effectivement du bon sens.
2) l’observation est la partie la plus importante de notre méthodologie. Elle peut prendre plusieurs formes. Par exemple, dans le web : tests utilisateurs ou tests multivariés. Ces méthodes de tests permettent d’observer les utilisateurs dans un contexte et « voir » ce qui marche le mieux (ou ne marche pas). Seule cette observation, si elle est scientifiquement menée, permet de tirer de véritables conclusion quand à une architecture d’information ou au merchandising d’un bouton. Plutôt que de vous en remettre à votre bon sens, faites des tests, vous seriez très souvent surpris du résultat.
Sus à l’obscurantisme du doigt mouillé
Depuis toujours, dans le web, pour faire des interfaces, on se fiait à son bon sens, à son instinct. Les développeurs avaient le leur (assez bizarre, il faut le dire) et les graphistes aussi (différent, mais tout aussi curieux) et on s’en tenait à leurs convictions assenées avec force. Rajoutez à ça une couche de Plus Gros Salaire (PGS) et vous aurez le résultat que vous méritez : le Nimportaouak au doigt mouillé. Ah, j’oubliais d’inclure dans la liste les Amazon Lovers, spécialiste du « Puisque Amazon le fait, c’est que ça doit marcher ». Mais oui, ça semble logique. Faisons une simple analogie avec le foot : si les brésiliens sont si forts, c’est parce qu’ils ont des maillots jaunes, alors donnons des maillots jaunes à l’équipe de France et elle devrait gagner son prochain match (encore que…).
Bien sûr, on pourra dire que l’ergonomie, l’achitecture d’information et le merchandising répondent à un ensemble de règles de bon sens, sans doute, mais il arrive un moment où une conception « au feeling », des modifications au « je le sens bien celui là » ne répondent plus à la demande. Lorsque vous êtes en charge d’un site ecommerce faisant plusieurs milliers de transactions par mois, il serait temps de travailler un peu plus professionnellement. Autremenent dit : analysez, testez, appliquez, recommencez et ainsi de suite.
3 Suisses l'a fait
Tati l'a refait ("Puisque 3 Suisses l'a fait, c'est que ça doit marcher")
Je sors mon doigt mouillé pour le lever en l’air et dire « M’sieur, M’sieur, je sais, je sais ! ».
J’ai lu aussi, effectivement, sur le sujet : rouge ou vert ? Au delà des codes des couleurs, ce qui importe c’est le contraste et la complémentarité : si le site est vert, un bouton rouge (couleur complémentaire du vert) attirera l’oeil beaucoup plus qu’un bouton jaune, le jaune étant une couleur constituante du vert (dans la « vie réelle », pas en RVB). Un exemple : si tu mets un maillot rouge à Gourcuff, peut-être que ses petits copains sur le terrain le verront mieux et finiront par lui faire une passe.
Ah le football ! C’est une excellente illustration : as-tu noté que les équipe qui jouent avec des chaussettes blanches donnaient une impression de plus grande puissance sur le terrain ? Regarde bien : lorsque les mecs courent sur le terrain, les chaussettes blanches font un tel contraste avec la pelouse que les foulées ont l’air plus « lisibles », les joueurs plus grands… il s’agit du même phénomène de contraste. Ce qui serait top, pour allez vraiment dans le bon sens, ce serait que chaque « savoir faire » puisse s’exprimer dans un projet web. Les graphistes ont des connaissances que les développeurs et les marketeurs n’ont pas, et Lycée de Versailles… c’est pour ça que chez nous, le travail en équipe est privilégié et que la règle est que les ergonomes, les graphistes, les intégrateurs et les programmeurs s’enrichissent du travail des autres.
Alors vert ou rouge ? Attends, je mouille mon doigt…
[...] This post was mentioned on Twitter by Camille Jourdain and Poncept Gabriel, Tatiana Ormanis. Tatiana Ormanis said: Merchandaising des sites e-commerce : http://bit.ly/bOu8jI [...]
Tiens! Il ne me semblais pas que le bouton était aussi gros et rouge sur le site Gucci, c’est un Fake non ?
Ok! c’est bon je viens de comprendre…
@Franck : c’était pour voir si quelqu’un le remarquerait
Je trouve que ce genre de débat, bien qu’il ne donne pas de « loi » applicable partout, garde un certain intérêt pour les petits sites ou les sites en construction, qui n’ont pas de statistiques suffisantes pour que les tests soient très révélateurs.
Par exemple, le billet sur la présence des flèches sur les boutons m’a beaucoup intéressé. Et je comprends bien que l’on débatte sur la couleur après avoir débattu des flèches.
OK, ne soyons pas des imbéciles qui appliquent sans réfléchir. Mais pour réfléchir à ce genre de sujet, je trouve que les résultats de test envoyés par les webmasters sont intéressants. Et le billet sur lequel tu mets un lien au début présente un résultat que je trouve intéressant (les deux premiers screenshot avec la stat +21% pour le bouton rouge)
Il me parait claire que l’évolution du design des sites nous pousse à retravailler notre vision de l’ergonomie, ainsi le bouton doit être de plus en plus intégrer au site pour ne pas déranger le visiteur, mais doit aussi être assez visible pour satisfaire le client qui ne souhaite pas chercher 4 heure l’information. Donc je vous conseille de faire du test utilisateurs pour réussir à avoir une vison équilibré entre le marketing, l’ergonomie et le design.
punaise, je viens de donner mon premier conseil sur le blog, bientôt la consécration des colloques internationaux
@ Sebastien :
C’est bien là le problème : sauf exception un site qui se lance n’a pas suffisamment de données à analyser, on est donc bien obligés de partir sur des a priori. C’est donc en phase 2 qu’il est important de pratiquer les tests.
Cette approche par le test n’a plus à démontrer que c’est la seule façon de faire évoluer un site vers le « plus de conversion », c’est pourquoi de notre côté on y réfléchi de façon poussée pour permettre de gérer les tests A / B sur la plate-forme… gros chantier en perspective pour début 2011
Rouge c’est aussi la couleur de la passion, de l’impulsion.
Par ailleurs, ce qui est en rouge paraît plus gros, plus visible.
Les couleurs jouent un rôle dans notre inconscient.
Mais ce qui compte, c’est le positionnement et surtout le respect de la charte : avoir toujours la même couleur pour les actions similaires.
Quand votre visiteur aura assimilé (même inconsciemment) que le bouton vert au bords arrondis permet d’activer une fonctionnalité (chercher, ajouter au panier ou autre), il cherchera ce bouton que votre choix initial ait été jaune, vert ou rouge.
Ensuite, il faut tester ce qui fonctionne le mieux.
++
Peut-être que plus qu’un bouton, ce qui donne envie c’est une alchimie entre :
Le produit / Le site / Le graphisme / La marque / l’Ambiance dégagé de l’ensemble / Etre rassuré / Le produit / Savoir qui est derriere / Le produit / La popularité et pour finir, une question.
Si j’ai un très, très beau produit, soit unique, soit innovant, en tout cas a forte valeur ajouté, ai-je besoin d’un site super optimisé pour vendre ?
Ma réponse est oui, et pourtant encore hier j’ai acheté un article sur un site tout bancale…
Déjà, avec 10 % de daltonien dans la population masculine, les couleurs c’est mal parti !
Le moyen le plus efficace pour inciter à l’action, de loin devant la couleur ou la taille, c’est de faire pulser doucement le bouton. J’ai bien dit « pulser » et pas clignoter, un léger changement de contraste sur un cycle de 5 à 10 secondes.
Moi je testerais bien un bouton bleu avec la mention « claquez ici » – rapport à l’allégorie footballistique de François. Je suis sûre qu’on aurait des clics !
Pour continuer dans l’allégorie footballistique, tant qu’à faire : « coup de boule ici : fais ton Zizou »
La solution c’est de mettre deux boutons :
- 1 rouge
- 1 vert
En fait mieux vaut en mettre 4 :
- 1 rouge à gauche
- 1 vert à gauche
- 1 rouge à droite
- 1 vert à droite
Ou plus ?
———————————
Sur le blog de Malinea Conseil, ils parlent de ça aussi ::::> faut tester
Oui, et puis un rose pour les filles. Il parait que toutes les filles aiment le rose.
À titre personnel, je préfère le rose quand il y a du vert ou du bleu dans les environs.
(excellent article, sinon ^^)
[...] This post was mentioned on Twitter by . said: [...]
Je pense qu’en cette période le bleu est à proscrire
Y en a qui ont osé [au passé] le bleu blanc rouge.
Bientôt en recoupant les infos que prennent google ou apple avec leurs navigateurs, ont pourra certainement construire l’interface à la volée en fonction des goûts de chacun !
Avec les soft hadopi en plus ont pourra renvoyer l’internaute sur ce qui est VRAIMMENT bien pour lui avant qu’il le décide ou qu’il y ai penssé : toi tu veux une mégane
nan toi t’as une tête a Audi, nan toi t’es SNCF t’es chômeur.
et la je pense que nos supper marketeux qui eux savent tout (contrairement aux designer, et developpeur : paix a leurs âmes incultes de tachons), arreterons de discutter pendant des journées entière autour d’une table en se disant, un peut plus bleu, un peut moins rouge … et si ont le faisait orange … nan revenons a la première version (celle que tu avais proposé, mais que je voulais pas car elle est pas de moi), en déplacant de 5 px sur la gauche … ha la tu vois en persévérant c’est parfait ONT a fait du bon boulot !!!!!
mais c’est pas pour tout de suite : LOL
Chais plus dans quelle conférence récente il était annoncé que le orange était la couleur idéale pour le call to action.
Oui, c’est vrai qu’on en entend, des conneries, dans les conférences….