Tester différents styles dans les boutons de paiement

Aujourd'hui, je vous apporte un autre test A/B que nous effectuons depuis quelques mois. Comme toujours au sein de cette série d'articles mensuels, nous allons voir en détail l'hypothèse d'amélioration que nous avons faite, son application en créant des déclinaisons d'une page sur notre site, et les résultats que nous avons obtenus.

Il y a quelque temps, nous étudiions la couleur des boutons d'action sur la page principale de Nelio Content. Grâce à un test A/B des styles CSS, nous avons pu voir comment la couleur verte fonctionne le mieux pour nos visiteurs anglophones sur cette page.

Nous ne pouvons pas supposer que ce sera le cas pour n'importe quelle page. C'est pourquoi nous allons aujourd'hui tester la couleur et la taille des boutons de paiement à partir du tableau des prix qui apparaît sur la page d'achat de Nelio A/B Testing.

Définition du test A/B

Notre hypothèse d'amélioration est que changer la couleur et la taille des boutons de paiement dans le tableau des prix de Nelio A/B Testing obtiendra plus de clics sur ces boutons et, par conséquent, nous aurons plus de ventes.

La version originale du tableau des prix de Nelio A/B Testing montre les trois plans que nous vendons, chacun avec son prix, ses détails et un bouton pour s'abonner au service. Vous pouvez le voir dans la capture d'écran suivante :

Les boutons sont d'une couleur grise qui ressort peu, sauf pour le plan professionnel, qui a un bouton bleu foncé pour donner plus d'importance à ce plan par rapport aux deux autres.

La première chose que nous allons vérifier est de savoir s'il est préférable ou non de changer la couleur de ces boutons pour les rendre plus frappants. Pour cela, la version alternative que nous avons proposée inclut un changement de styles CSS avec de nouvelles couleurs, comme vous pouvez le voir ci-dessous :

Nous avons gardé le plan professionnel en surbrillance, mais maintenant les autres plans sont bleu foncé et ce plan intermédiaire a une couleur orange plus proéminente. Selon des études en psychologie des couleurs, l'orange est un bon choix pour les boutons d'action, nous avons donc décidé de choisir cet orange que vous avez vu dans l'image précédente pour le plan professionnel.

Comme notre hypothèse indiquait que la taille des boutons devait également affecter leurs performances, nous avons conservé les changements de couleurs proposés dans la variante précédente pour en créer une nouvelle dans laquelle les tailles des boutons ont été augmentées. Vous pouvez voir ce changement dans la capture d'écran suivante :

Par conséquent, nous avons trois versions différentes des styles CSS de la grille tarifaire Nelio A/B Testing :

• L'original, sans changement de style.
• Une première variante avec des couleurs plus proéminentes sur les boutons.
• Une deuxième variante avec des couleurs proéminentes et une taille de bouton plus grande.

Avec tout ce travail effectué, nous pouvons traduire cela en un test A/B des styles CSS. Pour cela, Nelio A/B Testing vous permet de créer un test A/B de différents styles CSS avec lequel vous pouvez facilement tester les changements de style dans WordPress.

Nous créons le nouveau test CSS A/B et les trois alternatives qu'il contient. En fait, les captures d'écran que vous avez vues auparavant des variations sont des captures d'écran de l'éditeur de style CSS que Nelio A/B Testing inclut pour créer les alternatives.

Comme vous pouvez le voir dans la capture d'écran ci-dessus, nous avons limité la portée du test à la page de tarification Nelio A/B Testing, ainsi que le fait que nous avons défini cinq objectifs à mesurer dans le cadre du test :

• Clique sur les boutons de n'importe quel plan.
• Clics sur les boutons du plan de base.
• Clics sur les boutons du plan professionnel.
• Clics sur les boutons du plan d'entreprise.
• Montant des achats.

Avec tout cela créé, quelque chose qui ne vous prendra pas plus de 10 minutes, nous commençons le test et attendons les résultats. C'est maintenant au tour de Nelio A/B Testing de faire le travail. Notre plugin se charge de répartir le trafic entrant entre les différentes variantes et de comptabiliser les conversions dans chaque objectif défini dans le test A/B.

Analyse des résultats du test A/B

Ce test A/B a duré trois mois sur notre site Web. Les résultats peuvent être vus ci-dessous. Nous allons analyser chaque objectif en détail pour comprendre les conclusions que nous avons tirées de ce test.

Le premier objectif était de mesurer les clics qui ont été effectués sur l'un des boutons des plans dans le tableau des prix. Dans ce cas, les résultats montrent que la variante avec les couleurs modifiées obtient 17,2 % de clics supplémentaires. En revanche, la variante qui a changé de couleurs et de tailles est 15% moins bonne que la version originale de la page.

Cependant, aucun de ces chiffres n'a atteint un niveau de confiance statistique suffisant pour identifier clairement une version gagnante pour cet objectif.

Le deuxième objectif comptabilisait les clics uniquement sur les boutons du plan de base. Dans ce cas, les résultats sont similaires à l'objectif précédent. Nous avons la version avec des couleurs modifiées comme la meilleure des trois et la version avec des couleurs et des tailles comme la pire.

De même, les statistiques ne sont pas en mesure d'identifier la version avec les nouvelles couleurs comme un gagnant clair avec suffisamment de confiance.

Le cas du troisième objectif, où l'on mesure les clics dans le plan professionnel, est un peu différent. Comme avant, la version avec les couleurs est meilleure et la version qui combine couleurs et tailles est moins bonne. Cependant, maintenant, les statistiques nous disent que la version gagnante a clairement assez de confiance.

Nous pouvons dire qu'en utilisant des couleurs plus proéminentes, nous obtenons un plus grand nombre de clics. Le bouton orange fonctionne mieux que le bouton bleu que nous avions auparavant.

Dans le cas des clics dans le forfait entreprise, on revient ici au même état qu'avec les deux premiers objectifs. Mais ici, les différences entre la variante d'origine et la variante avec les couleurs modifiées sont négligeables. La version qui semble bien pire est celle qui inclut des changements de couleur et de taille.

Tout ce truc de clic est bien. Mais si nous ne regardons que les résultats précédents, nous n'aurons qu'une vision partielle de la réalité.

Pour cette raison, j'ai ajouté le dernier objectif dans lequel nous mesurons le nombre d'achats réalisés par chaque variante. Vous pouvez obtenir une variante qui obtient plus de clics, mais si elle n'est pas en mesure d'obtenir plus de ventes également, vous choisirez un faux gagnant.

Dans les résultats suivants, nous voyons que c'est exactement ce qui se passe. La version avec les nouvelles couleurs réalise 24,5% de ventes en moins, tandis que la version qui combine couleurs et tailles se vend 16,6% de moins que la version actuelle de notre page (celle sans modifications).

Avec ces résultats, ce qu'il faut voir, c'est que l'entonnoir de conversion est complexe et, même si on le divise souvent en phases et qu'on compte les micro-conversions, il ne faut pas perdre de vue l'ensemble.

L'avantage de créer des tests A/B multi-objectifs est que nous pouvons avoir toutes les perspectives que nous voulons pour obtenir une image complète de la performance (ou de la mauvaise) performance de notre site Web. Ce n'est qu'en faisant cela que nous pourrons avoir la confiance nécessaire pour choisir un gagnant en toute tranquillité d'esprit en regardant les données des résultats des tests A/B.

Image sélectionnée par Grooveland Designs sur Unsplash.