Si vous ne savez pas quoi changer, essayez de changer les couleurs de votre site Web

L'un des plus gros problèmes lorsqu'il s'agit d'améliorer les performances de votre site Web est de ne pas savoir quels changements apporter. Cela nous est tous arrivé à un moment donné. Dans de tels cas, la bonne chose à faire est de se concentrer sur les parties du Web les plus critiques. J'entends par là les sections de votre page qui attirent le plus l'attention ou qui sont les plus importantes pour votre modèle commercial.

Par exemple, si votre objectif est que ceux qui visitent votre site Web finissent par remplir un formulaire, concentrez-vous sur le formulaire lui-même : rendez-le plus visible et simplifiez-le autant que possible afin qu'il soit facile à remplir et à soumettre. Comme je l'ai déjà dit, recherchez d'abord les éléments qui, une fois modifiés, pourraient avoir un impact plus important sur vos visiteurs, car cela vous permettra d'obtenir des résultats intéressants plus rapidement.

Si vous ne savez toujours pas quoi changer, quelque chose qui ne déçoit jamais et qui est très facile à essayer est d'appliquer des changements aux couleurs de votre page Web. Sans aucune intention de laisser de côté les malvoyants, force est de constater que les couleurs de votre site internet sont très importantes. Bien plus que vous ne pouvez l'imaginer.

Il existe plusieurs études sur la théorie des couleurs et la façon dont nous, les humains, la percevons. Ce qui peut sembler n'être qu'une interprétation des différentes longueurs d'onde captées par notre système visuel (yeux, nerf optique et cerveau), cache un énorme arrière-plan psychologique.

Pour cette raison, je vous encourage à essayer de changer les couleurs de votre page Web (ou de certains éléments à fort impact qu'elle contient) et d'étudier comment l'interaction de vos visiteurs évolue face à ces changements. C'est justement ce que je vais vous expliquer aujourd'hui avec un exemple complet et réel que nous avons testé sur ce site.

Définition du test A/B

Pour tester les modifications apportées à votre site Web, vous devez utiliser un test A/B. En faisant cela, vous pouvez garantir avec des données réelles et en suivant la méthode scientifique que les changements appliqués fonctionnent mieux (ou pas) que votre version actuelle.

Dans l'exemple d'aujourd'hui, nous allons tester un changement des couleurs du premier pli de la page de tarification de Nelio A/B Testing. Ce premier pli a un grand impact sur notre activité, puisqu'il se charge d'afficher le tableau des prix à travers lequel nos visiteurs finissent par devenir clients lors de l'achat du plugin.

Dans la comparaison suivante, vous pouvez voir la version originale du premier pli (à gauche) et la version alternative (à droite) avec les différentes couleurs de boutons et de marges, et une nouvelle image de fond :

Pour tester les changements, nous avons utilisé Nelio A/B Testing comme plugin de test A/B de référence. La première chose que nous allons faire est de créer un nouveau test A/B de pages, qui est l'élément que nous allons tester.

Nous le faisons parce que nous pouvons changer les couleurs via l'éditeur de page WordPress lui-même. Si nous ne pouvions pas le faire comme ça parce que les couleurs proviennent d'un modèle de thème ou d'une autre manière moins orthodoxe - l'expérience nous dit que les styles de couleurs peuvent être définis de plusieurs manières dans WordPress -, une autre option qui fonctionnerait toujours serait de utiliser un test A/B des styles CSS, où nous pourrions appliquer les nouvelles couleurs en ajoutant de nouvelles règles de style CSS dans la variante.

Dans l'écran d'édition du test A/B, nous sélectionnons la page de base que nous voulons tester (notre page de tarification) et créons une nouvelle variante, que nous modifierons plus tard :

Un autre aspect important à souligner est de définir les mesures que nous voulons que l'outil de test A/B suive pour savoir plus tard laquelle des deux versions a le mieux fonctionné. Nous définissons cela dans la section objectifs et actions de conversion, comme vous pouvez le voir dans la capture d'écran ci-dessus.

Dans notre cas, nous avons défini cinq objectifs, ce qui nous donnera cinq résultats différents pour le même test A/B. Nous définissons d'abord l'objectif qui mesure le nombre de clics sur les boutons d'achat de l'un des plans figurant dans le tableau des prix. Ensuite, nous avons 3 objectifs supplémentaires qui mesurent les clics pour chaque plan individuellement. Et enfin, nous avons un objectif qui mesure le nombre réel d'achats effectués après avoir vu chaque version de la page testée.

Enfin, nous éditons la version alternative de la page. Cela nous amène à l'éditeur de page WordPress que nous utilisons (dans notre cas, l'éditeur de blocs), comme vous pouvez le voir dans la capture d'écran suivante :

Ici, nous n'avons qu'à changer les couleurs des boutons d'action de chacune des trois colonnes et de l'élément que nous utilisons pour créer la marge supérieure. Et nous avons également changé l'image d'arrière-plan pour une autre que nous avons téléchargée dans notre médiathèque WordPress.

Une fois que la page alternative avec les changements que nous voulons tester est prête, il est temps de revenir à l'écran d'édition du test A/B et de le démarrer. Cela divisera automatiquement le trafic vers notre page de tarification en deux. La moitié de nos visiteurs interagiront avec la version originale, l'autre moitié verra la variante.

De cette façon, nous pouvons vérifier quelle version de la page fonctionne le mieux par rapport aux cinq objectifs de conversion. Maintenant, nous n'avons plus qu'à attendre les résultats pour nous donner les informations que nous recherchons.

Analyse des résultats des tests

Finalement, si une variante est meilleure que l'autre, l'outil de test A/B lui-même nous le dira. Dans le test A/B que nous avons décrit précédemment, les résultats ont été clairs. La version avec les nouvelles couleurs est pire que ce que nous avions déjà. Vous pouvez voir le détail des résultats pour chacun des cinq objectifs définis dans le test dans la galerie suivante :

Non seulement la variante a obtenu moins de clics sur les boutons d'action, mais elle a également entraîné moins de ventes (près de 22 % de moins).

Cela peut sembler idiot, mais si au lieu de tester les modifications avec un test A/B vous les modifiez directement sur votre site Web sans les tester auparavant, vous risquez d'introduire des modifications qui pourraient fonctionner moins bien. Cela aurait pu être notre cas, car les changements que nous voulions apporter n'ont pas fonctionné aussi bien que nous le pensions.

Vous constaterez peut-être que changer les couleurs à un moment donné est une bonne solution, car vous aimez mieux les nouvelles. Vous avez trouvé une nouvelle palette de couleurs qui vous semble bien meilleure d'un point de vue stylistique et choisissez de l'utiliser directement. Mais c'est une grosse erreur. Le fait que vous aimiez une couleur plus qu'une autre n'a pas d'importance. L'important est de bien vérifier si c'est vraiment le cas pour votre audience et vos visiteurs. Et vous pouvez le faire dans un environnement contrôlé grâce à un test A/B.

Image sélectionnée par Jeremy Thomas sur Unsplash.