A/B testing : comment tester deux versions pour améliorer vos conversions ?

Question directe : qu’est-ce que l’A/B testing ?

La réponse tient en une phrase :

Tester deux versions d’un même élément pour déterminer laquelle fonctionne le mieux.

Le principe est simple. Au lieu de modifier votre site en vous fiant uniquement à votre intuition, vous comparez deux versions auprès de vos visiteurs et vous mesurez les résultats.

Dans cet article, découvrez :

• comment fonctionne concrètement un A/B test ;
• les cinq éléments les plus intéressants à tester ;
• les règles à respecter pour obtenir des résultats exploitables ;
• les erreurs qui peuvent fausser votre analyse ;
• les étapes à suivre pour lancer votre premier test.

La métaphore du stand de marché pour comprendre l’A/B testing

Imaginez que vous vendiez des pommes sur un marché.

Vous hésitez entre deux pancartes :

• Version A : « Pommes, 2 € le kilo » ;
• Version B : « Pommes bio du verger, 2 € le kilo ».

Laquelle attirera le plus d’acheteurs ?

Vous pouvez penser que la deuxième sera plus efficace, car elle donne davantage d’informations et valorise la qualité du produit. Mais tant que vous ne l’avez pas testée, cela reste une hypothèse.

Vous décidez donc de comparer les deux versions dans des conditions similaires, puis de compter le nombre de ventes générées par chacune.

La pancarte qui obtient les meilleurs résultats devient votre nouvelle version de référence.

Vous venez de comprendre le principe de l’A/B testing. Sur un site internet, le fonctionnement est presque identique.

Comment fonctionne un A/B test sur un site internet ?

Un A/B test compare deux versions d’une même page ou d’un même élément :

• la version A, qui correspond généralement à la version actuelle, aussi appelée version de contrôle ;
• la version B, qui contient la modification que vous souhaitez tester.

Le trafic est ensuite réparti entre les deux variantes.

• Une partie des visiteurs voit la version A.
• Une autre partie voit la version B.

Vous comparez ensuite les résultats selon un objectif défini à l’avance :

• le nombre de clics sur un bouton ;
• le taux d’ajout au panier ;
• le nombre de formulaires envoyés ;
• le nombre d’inscriptions ;
• le chiffre d’affaires ou le taux de conversion.

La version qui atteint le mieux l’objectif peut être déployée sur l’ensemble du site.

Exemple : un bouton bleu face à un bouton orange

Prenons un exemple fictif de site e-commerce.

Version A :

• bouton « Acheter » bleu ;
• taux de conversion de 1,8 %.

Version B :

• bouton « Acheter » orange ;
• tous les autres éléments restent identiques ;
• taux de conversion de 2,4 %.

Dans cet exemple, la version B obtient un taux de conversion supérieur de 33 % à celui de la version A.

Avec 10 000 visiteurs par mois, cela représenterait :

• 180 ventes avec la version A ;
• 240 ventes avec la version B ;
• 60 ventes supplémentaires sur la période observée.

Attention : ce résultat est un exemple pédagogique. Une couleur n’est pas automatiquement plus performante qu’une autre. Son efficacité dépend notamment du contraste, de la charte graphique et du contexte de la page.

Les cinq éléments à tester en priorité

Certains changements ont généralement plus de chances d’influencer le comportement des visiteurs. Commencez par les éléments directement liés à la compréhension de l’offre et au passage à l’action.

1. Le texte du bouton d’action

Le texte d’un bouton doit indiquer clairement ce qui se passera après le clic.

Vous pouvez par exemple comparer :

• « Acheter » et « Ajouter au panier » ;
• « S’inscrire » et « Commencer gratuitement » ;
• « Contact » et « Recevoir mon devis » ;
• « Découvrir » et « Réserver ma place ».

Le point à observer : un texte plus précis et orienté vers l’action génère-t-il davantage de clics ou de conversions ?

2. La couleur du bouton

La meilleure couleur n’est pas forcément l’orange, le rouge ou le vert.

Le critère principal est le contraste avec le reste de la page.

Un bouton bleu peut être très visible sur un site blanc, mais disparaître visuellement sur une interface déjà majoritairement bleue.

Vous pouvez donc tester :

• la couleur actuelle face à une couleur plus contrastée ;
• une couleur claire face à une couleur foncée ;
• une couleur issue de la charte face à une couleur réservée aux appels à l’action.

3. Le titre principal de la page

Le titre principal doit permettre au visiteur de comprendre rapidement l’offre et son bénéfice.

Exemple :

• Version A : « Solutions digitales pour entreprises » ;
• Version B : « Créez votre boutique en ligne et commencez à vendre sur internet ».

La deuxième formulation est plus précise. Un test permet toutefois de vérifier si elle améliore réellement les résultats auprès de votre audience.

4. Les images principales

Une image peut influencer la compréhension d’une offre, la confiance et l’attention portée au bouton principal.

Vous pouvez comparer :

• une photographie réelle et une image provenant d’une banque d’images ;
• une photographie du produit seul et une photographie du produit en situation ;
• une capture d’écran du service et une illustration générique ;
• une photographie avec une personne et une version sans visage.

5. La longueur du formulaire

Plus un formulaire comporte de champs, plus il demande d’effort au visiteur.

Vous pouvez tester :

• un formulaire court face à un formulaire détaillé ;
• un champ téléphone obligatoire face à un champ facultatif ;
• un formulaire affiché sur une seule page face à un formulaire en plusieurs étapes.

Un formulaire court peut augmenter le nombre de demandes. Un formulaire plus long peut toutefois permettre de mieux qualifier les prospects. La meilleure version dépend donc de votre objectif commercial.

Les trois règles essentielles pour réussir un A/B test

Règle n° 1 : ne modifier qu’un élément à la fois

Mauvais test :

• version A avec un bouton bleu, un titre court et une image générique ;
• version B avec un bouton orange, un nouveau titre et une photographie réelle.

Si la version B obtient de meilleurs résultats, vous ne saurez pas quelle modification a réellement fait la différence.

Test plus exploitable :

• version A avec un bouton bleu ;
• version B avec un bouton orange ;
• tous les autres éléments restent identiques.

Vous pouvez alors attribuer plus clairement l’évolution des résultats à la modification testée.

Règle n° 2 : attendre d’avoir suffisamment de données

Une différence observée après quelques visites peut simplement être due au hasard.

Exemple :

• version A : 10 visiteurs et 2 ventes ;
• version B : 10 visiteurs et 1 vente.

Il serait trop tôt pour conclure que la version A est réellement deux fois plus performante.

La taille nécessaire dépend notamment :

• du taux de conversion actuel ;
• de l’écart que vous souhaitez détecter ;
• du volume de trafic ;
• du niveau de confiance statistique recherché.

Évitez donc de vous fier à un nombre universel de visiteurs ou de conversions. Utilisez les indicateurs statistiques fournis par votre outil et laissez le test couvrir au minimum un cycle commercial représentatif, incluant différents jours de la semaine.

Règle n° 3 : tester les éléments à fort impact en premier

Commencez par les changements susceptibles d’influencer directement la compréhension de l’offre ou le passage à l’action.

À tester en priorité :

• le titre principal ;
• l’offre, le prix ou la garantie ;
• le bouton principal ;
• l’image principale ;
• la structure du formulaire.

À tester dans un second temps :

• la description du produit ;
• la présentation des avis clients ;
• l’ordre des arguments ;
• les éléments de réassurance.

À éviter au début :

• la couleur d’un texte secondaire ;
• l’espacement dans le pied de page ;
• une modification mineure de typographie sans lien direct avec l’objectif.

Exemple d’A/B test complet, étape par étape

Prenons le cas fictif d’une entreprise qui vend des cours de yoga en ligne.

Étape 1 : identifier le problème

La page reçoit 5 000 visites par mois, mais seulement 50 visiteurs s’inscrivent.

Objectif : augmenter le nombre d’inscriptions.

Étape 2 : formuler une hypothèse

Si nous remplaçons le titre « Cours de yoga en ligne » par un titre plus concret et orienté vers le bénéfice, davantage de visiteurs s’inscriront.

Étape 3 : créer les deux versions

Version A :

• « Cours de yoga en ligne ».

Version B :

• « Réduisez votre stress avec 15 minutes de yoga par jour ».

Le bouton, l’image, le tarif et le reste du contenu restent identiques.

Étape 4 : choisir l’indicateur principal

L’indicateur principal est le taux d’inscription au programme.

Les clics sur le bouton peuvent être suivis comme indicateur secondaire, mais ils ne doivent pas remplacer l’objectif final.

Étape 5 : lancer le test

Le trafic est réparti de manière aléatoire entre les deux versions.

• une partie des visiteurs voit la version A ;
• l’autre partie voit la version B ;
• le test reste actif pendant une période représentative.

Étape 6 : analyser les résultats

Supposons que le test obtienne les résultats suivants :

• version A : 2 500 visiteurs et 25 inscriptions, soit 1 % ;
• version B : 2 500 visiteurs et 45 inscriptions, soit 1,8 %.

La version B affiche une hausse relative de 80 % du taux d’inscription.

Avant de la déclarer gagnante, il faut toutefois vérifier que le résultat est suffisamment fiable sur le plan statistique.

Étape 7 : déployer la version gagnante

Si le résultat est confirmé, le nouveau titre peut être appliqué à l’ensemble des visiteurs.

Vous pouvez ensuite lancer un nouveau test, par exemple sur le texte du bouton d’inscription.

Les trois erreurs les plus fréquentes

Erreur n° 1 : arrêter le test trop tôt

Une version peut prendre temporairement l’avantage pendant les premiers jours, puis perdre cet avantage lorsque le volume de données augmente.

La solution : définissez vos conditions d’arrêt avant de lancer le test et évitez de vérifier les résultats dans le but de l’interrompre dès qu’une version passe devant.

Erreur n° 2 : tester plusieurs changements simultanément

Modifier le titre, le bouton, l’image et le formulaire dans la même variante rend l’analyse difficile.

La solution : pour un A/B test simple, conservez une seule différence majeure entre les deux versions.

Erreur n° 3 : ne pas appliquer les résultats

Un test ne crée aucune valeur si la version gagnante n’est jamais déployée.

La solution : documentez le résultat, appliquez le changement validé et utilisez cet apprentissage pour préparer le test suivant.

Quels outils utiliser pour faire de l’A/B testing ?

Le choix dépend de votre trafic, de vos compétences techniques et de la complexité du test.

Pour comprendre le comportement des visiteurs

Microsoft Clarity permet d’observer les cartes de chaleur et les enregistrements de sessions. Il peut vous aider à repérer une zone peu cliquée ou un problème de navigation, mais il ne remplace pas à lui seul un véritable outil de répartition aléatoire du trafic.

Pour lancer des expérimentations

Des plateformes spécialisées comme VWO, Optimizely ou AB Tasty proposent des fonctionnalités d’expérimentation, de ciblage et d’analyse des résultats.

Leurs fonctionnalités et leurs tarifs évoluent. Il est donc préférable de comparer leurs offres directement selon votre volume de trafic et vos besoins.

Et Google Optimize ?

Google Optimize et Google Optimize 360 ne sont plus disponibles depuis le 30 septembre 2023. Évitez donc les anciens tutoriels qui les présentent encore comme une solution active.

Checklist : lancer votre premier A/B test en sept étapes

1. Identifiez un problème précis : quelle page ou quelle étape du parcours convertit mal ?
2. Formulez une hypothèse : pourquoi la modification envisagée pourrait-elle améliorer le résultat ?
3. Créez deux versions : la version actuelle et une variante contenant un seul changement majeur.
4. Choisissez une métrique principale : clic, inscription, achat, demande de devis ou chiffre d’affaires.
5. Répartissez le trafic : les visiteurs doivent être affectés aux variantes de manière aléatoire.
6. Attendez suffisamment de données : ne tirez pas de conclusion après quelques visites.
7. Déployez et documentez : appliquez la version gagnante et conservez les enseignements du test.

Vous souhaitez tester votre site sans avancer à l’aveugle ?

Chez UXView, nous vous aidons à identifier les éléments à tester, à construire une hypothèse claire et à analyser les résultats de vos expérimentations.

Vous obtenez des recommandations basées sur le comportement réel de vos visiteurs, et non sur une simple préférence graphique.

Découvrir UXView

Conclusion : l’A/B testing permet d’arrêter de deviner

Sans A/B testing, vous pouvez penser qu’un bouton, un titre ou une image sera plus efficace.

Avec un test correctement construit, vous mesurez l’effet réel de la modification sur le comportement des visiteurs.

Un bon A/B test repose sur quatre principes :

• un objectif clairement défini ;
• une hypothèse précise ;
• une seule modification majeure à la fois ;
• un volume de données suffisant avant de conclure.

L’A/B testing ne garantit pas automatiquement une hausse des ventes. Il vous permet surtout de prendre des décisions plus fiables et d’améliorer progressivement votre site.

L’action à réaliser maintenant

Choisissez une page importante de votre site et identifiez un seul élément susceptible de freiner le passage à l’action.

Commencez par le titre principal, le bouton d’achat ou le formulaire.

Notez votre hypothèse avant de modifier la page. Vous aurez déjà posé la première base d’un A/B test utile.