La vérité sur les meilleures couleurs de bouton d'appel à l'action pour votre site Web

On a beaucoup parlé sur Internet des couleurs qui fonctionnent le mieux sur une page Web. Vous trouverez des milliers d'articles à ce sujet. De celui où un utilisateur demande quelle couleur est la meilleure et reçoit des réponses contradictoires (quelle surprise, hein ?), à l'article bien connu qui explique les tests que Google a fait avec de nombreuses nuances de bleu pour ses liens.

La réalité derrière tout cela est que personne ne peut garantir qu'une couleur spécifique fonctionnera mieux ou moins bien sur un site Web sans l'essayer. S'ils vous disent le contraire, ils vous mentent. Et je suis sûr que tu n'aimes pas qu'on te mente.

Moi non plus, alors quand je lisais cet article de Yahoo! Small Business où ils disent que les meilleures couleurs à utiliser sur les boutons sont le rouge, le vert et l'orange ou le jaune, la première chose à laquelle j'ai pensé est que je devrais l'essayer sur notre propre site Web.

Si vous avez suivi la série d'articles que j'écrivais chaque mois sur les tests A/B, vous savez sûrement déjà que l'une des pages les plus importantes de notre site Web est la page d'accueil de Nelio Content, ainsi que sa page de tarification. Sur les deux pages, les boutons d'appel à l'action que nous avons sont orange.

Le rouge ou le vert fonctionneront-ils mieux par rapport à la couleur orange que nous utilisons déjà sur notre site Web pour les boutons d'appel à l'action ? C'est la question que je me suis posée et à laquelle je vais répondre ici avec des données réelles de nos visiteurs. Pas d'avis subjectif. Données réelles.

Allons-y!

Créer un test A/B de CSS

La façon la plus simple de changer la couleur des boutons sur une page est d'ajouter quelques règles CSS supplémentaires pour appliquer la nouvelle couleur. Vous mettez une nouvelle règle de background-color sur le bouton avec la couleur que vous voulez et c'est tout. Peasy facile.

Avec Nelio A/B Testing, vous avez la possibilité de créer un test A/B de styles CSS pour tester différentes variantes de règles CSS supplémentaires. Il vous suffit de créer un nouveau test et de sélectionner l'option CSS dans le sélecteur de type de test :

Cela vous mènera à l'éditeur de test, où la première chose à faire est de créer les variantes. Gardez à l'esprit que dans ce type de test, la première variante est celle qui affiche la page avec son apparence actuelle, sans CSS supplémentaire.

Ensuite, vous créez une variante pour, dans notre cas, chacune des couleurs supplémentaires que nous allons tester : une pour le vert et une pour le rouge. La première variante est déjà orange, donc avec cela, tout est prêt.

Pour chaque variante supplémentaire, vous pouvez aller la modifier pour ajouter les règles CSS supplémentaires qui modifient la couleur des boutons. Les règles CSS dont vous aurez besoin dépendront du thème que vous utilisez dans votre WordPress. Dans l'éditeur CSS fourni par Nelio A/B Testing, vous pouvez voir en temps réel comment vos nouvelles règles CSS modifient l'apparence de votre site. Cela vous aidera à vérifier si vous le faites correctement.

Voici à quoi ressemblent les boutons d'action depuis l'éditeur de style CSS de chaque variante du test A/B que nous mettons en place. Comme mentionné ci-dessus, vous avez d'abord la version originale, avec les boutons orange. Les deux autres variantes incluent le CSS pour rendre les boutons verts et rouges, respectivement :

Une fois que nous avons les variantes prêtes, il est temps de définir les objectifs de conversion que nous voulons mesurer. Dans ce cas, comme vous pouvez le voir sur la capture d'écran de l'éditeur de test, nous avons deux objectifs.

Le premier objectif mesurera les clics sur les boutons d'action, tandis que dans le second, nous mesurons également ces clics, mais uniquement ceux qui se produisent sur la page de tarification de Nelio Content.

Enfin, notez que les tests A/B de CSS affecteront toutes les pages de votre site Web. Pour limiter ce comportement dans Nelio A/B Testing, dans la barre latérale droite de l'éditeur de test A/B, vous avez la possibilité de limiter la portée du test. Je l'ai fait pour que cela n'affecte que la page principale de Nelio Content et la page de tarification.

Tout est prêt pour commencer le test. Une fois que nous l'avons fait, Nelio A/B Testing se charge de diviser le trafic qui visite ces deux pages pour vous et de montrer les différentes variantes de couleur, ainsi que de suivre les conversions (clics sur les boutons).

N'oubliez pas qu'il vous suffit d'attendre que vos visiteurs parcourent ces pages pour commencer à voir les résultats.

Analyser les résultats

Nous avons eu le test A/B des couleurs des boutons en cours d'exécution sur notre site Web pendant un mois et demi sur le site Web espagnol et près d'un mois sur le site Web anglais. Dans la version anglaise, nous l'avons arrêté plus tôt car nous avons obtenu des résultats statistiquement significatifs plus rapidement avec une valeur de confiance élevée.

Mais commençons par les résultats du test sur notre site en espagnol :

Comme vous pouvez le voir dans la capture d'écran ci-dessus, dans le but de mesurer les clics sur les deux pages, il semble que les variantes verte et rouge des boutons fonctionnent un peu mieux que la version orange d'origine. Cependant, les statistiques nous disent que l'amélioration n'est pas substantielle et, par conséquent, nous ne pouvons pas dire que ces couleurs sont meilleures que l'orange.

Pour le deuxième objectif, qui ne mesurait que les clics sur la page de tarification de Nelio Content, nous constatons qu'il n'y a pas non plus de couleur gagnante claire. Nous pouvons même observer à quel point le vert est ici moins performant que l'orange. Bien que nous ne puissions pas tirer de conclusions solides avec les données que Nelio A/B Testing a recueillies auprès de nos visiteurs :

Allons maintenant voir les résultats du test dans la version anglaise de la page. Ici, dans le premier objectif, qui mesurait les clics sur l'une ou l'autre des deux pages de Nelio Content, nous voyons que le vert et le rouge sont des couleurs qui produisent un meilleur taux de clics.

De plus, ici on peut affirmer que la couleur verte est la couleur gagnante du test. Les résultats sont statistiquement significatifs avec un degré de confiance supérieur à 99 %. Le vert est la meilleure couleur que nous pouvons utiliser sur notre site Web en anglais pour les boutons des pages de contenu Nelio.

Si on ne regarde que les clics sur la page de tarification de Nelio Content (deuxième objectif du test), on constate que les résultats sont cohérents avec ceux du premier objectif du test :

Ayant vu cela, nous pouvons dire que le vert est la couleur qui a le mieux fonctionné pour notre public en anglais sur les pages Nelio Content. Cependant, pour notre public espagnol, nous n'avons pas été en mesure de trouver une couleur qui fonctionne mieux que celle que nous avions déjà.

conclusion

Ici, j'ai montré les résultats d'un test A/B avec des données réelles des visiteurs qui ont parcouru deux des pages les plus pertinentes de notre site Web. Et vous avez pu vérifier que ce qui fonctionne le mieux pour un public spécifique n'a pas besoin de fonctionner mieux pour un autre.

Les boutons verts fonctionnent mieux pour nos visiteurs anglophones. Mais cela ne veut pas dire qu'il en est de même pour les autres visiteurs. Pour cette raison, nous n'avons changé la couleur des boutons d'action des pages Nelio Content en vert que dans la version anglaise de ces pages. Celles en espagnol restent orange.

Je serais stupide si je vous disais que vous devez utiliser la couleur verte sur votre page. Personne ne devrait vous le dire. Ni moi, ni personne. Je ne sais pas si le vert fonctionnera pour vous.

Pour cette raison, avant de prêter attention aux nombreux gourous que vous trouverez sur Internet, faites le test vous-même. La création du test A/B est très simple. Et c'est le seul moyen de découvrir ce qui fonctionne (ou pas) mieux sur votre site web. Avec votre vrai public.

Image sélectionnée par Robert Katzki sur Unsplash.