Test A/B Reverse engineering #1 : Darty expérimente un nouveau formulaire de connexion

Darty optimise son étape d’identification et de création de compte. L’enseigne a pour cela lancé un test A/B pour challenger l’ergonomie, la hiérarchie de l’information et d’autres points particuliers. Cette étape dans le tunnel de commande est souvent sous-performante de par l’engagement qu’elle crée et sa contrainte (long formulaire + données personnelles). Quelles sont les bonnes idées de ce test A/B ? Quels sont les KPIs suivis par l’équipe ? Comment peut-il être amélioré pour augmenter son taux de réussite ?

 

Version originale du formulaire d’identification.

Analyse de la variation de test

La conception doit donc inciter les utilisateurs à valider cette étape en se connectant ou en créant un compte le plus rapidement possible. Voici la nouvelle interface testée :

Nouvelle variation de test A/B développée par Darty.

Le premier point qui est travaillé est l’ergonomie des formulaires. Ici les champs traditionnels sont remplacés par une simple ligne grise. C’est plus design mais c’est aussi moins visibles et réduit l’accessibilité du formulaire… dommage, c’est une dégradation de l’interface.

Valorisation du prix total du panier dans la page d’identification. Utile ?

 

Vient ensuite la valorisation du panier, en haut à droite. Sa visibilité est renforcée grâce à un traitement graphique plus contrasté. C’est le premier élément visible dans la page et il est difficile d’imaginer l’impact sur la motivation de l’utilisateur. L’utilisateur venant de voir cette information sur la page panier, faut-il lui présenter à nouveau ici ? Ce petit détail demande de la réflexion utilisateur, sur une page déjà complexe (détection des colonnes, compréhension de l’entrée à sélectionner, …).

Valorisation du formulaire de connexion client par défaut.

La zone de connexion pour les anciens clients est valorisée grâce à son titre plus contrasté. Cette proposition peut être intéressante si Darty à une majorité d’anciens clients. Dans mon cas, j’étais nouveau client et ce design n’était pas cohérent.

Pour terminer, l’intégration du test est très problématique sur Firefox et Chrome (desktop). Dans ces conditions, il est difficile de croire que cette version puisse gagner. Y-a-t-il eu une recette de l’intégration ? Aucune idée et cette étape est indispensable pour ne pas pénaliser votre business (ici 10% du trafic est exposé à cette version…).

Optimisation n°1 : réduire la densité d’information

Il peut être intéressant de réduire la densité d’informations secondaires et de tester leur impact sur le comportement utilisateur. Le service client, la date, le fil d’Ariane ou la description (très long) dans le formulaire de création de compte ont-ils un intérêt pour l’utilisateur ? Par expérience, plus cette étape est simple, plus elle fonctionne.

Optimisation n°2 : corriger l’ergonomie

Revenir à une ergonomie optimale avec des champs conventionnels est recommandé. Sur un formulaire, l’ergonomie et l’accessibilité sont 2 paramètres importants (label à l’extérieur des champs, largeur des champs, contraste des polices, …).

Optimisation n°3 : wording call to action

Le wording « Valider » est identique aux 2 formulaires alors que les actions sont différentes. Il peut-être intéressant de les challenger pour que l’utilisateur puisse rapidement identifier les formulaires.

Optimisation n°4 : personnalisation

Valoriser un formulaire avec un effet graphique ou une pré-sélection en fonction du type d’utilisateur, peut accélérer le repérage pour l’utilisateur. Un exemple très simple et efficace de cette technique chez Asos :

 

Personnalisation : Pré-sélection du formulaire en fonction du type d’utilisateur.

Optimisation n°5 : valorisation marketing

Rappeler à l’utilisateur qu’une offre marketing est toujours appliquée sur son panier, peut être un moyen de l’inciter à l’étape suivante.

Optimisation n°6 : processus sans inscription

Développer un parcours de commande sans inscription est une autre manière d’optimiser cette étape. C’est bien plus chronophage et le R.O.I de chantier est très incertain. Cette technique peut être envisagée après de longues recherches. Voici un exemple chez Walmart :

Commande guest checkout sans identification.

Structure disruptive : Tester une structure disruptive par rapport à l’existant peut avoir plus d’impact. Le design « type » Amazon avec un seul formulaire et une sélection avec un bouton peut avoir un impact. Voici l’exemple de Sarenza :

Formulaire d’identification simplifié et disruptif, type Amazon.

KPI du test A/B et priorisation

Pour suivre la performance du test A/B, l’équipe Darty s’appuie sur Kameleoon et configure ses KPIs comme ceci :

  • KPI principal : Taux d’inscription
  • KPI secondaire : Taux de conversion
  • KPI secondaire : Taux de passage à l’étape suivante (destinataire ou transporteur)

La priorisation des objectifs est surprenante puisqu’il n’y a pas d’ordre particulier. Ici sont mêlés objectifs macro et micro dans le désordre. Le KPI principal recommandé est lié à la performance business de votre marque et est un objectif macro (exemple : la valeur de la visite = CA / nombre utilisateurs). Les KPIs secondaires sont souvent liés aux comportements utilisateurs ou objectifs micro (taux d’inscription, parcours, …).

Si l’équipe Darty suit les performances uniquement dans Kameleoon, ce dernier déclarera le test A/B gagnant si le taux d’inscription augmente. Ce résultat ne tiendra donc pas compte des performances business réelles et le risque de voir un faux positif est… très grand.

Étrange ?

Non, la hausse d’un KPI de micro-conversion (taux d’inscription, action sur un élémen t) ne traduit pas une hausse systématique d’amélioration d’un KPI macro (taux de conversion, souscription, …).

Utilisez des KPIs macro et micro pour suivre les performances de vos tests A/B. Le KPI principal recommandé pour du eCommerce est la valeur de la visite (VV = CA / visite). Il tient compte du taux de conversion et du panier moyen. Définissez vos micro-conversions, priorisez les pour chacun de vos tests. Ces indicateurs vous permettront de vérifier la fiaibilité de vos résultats et les éventuels effets de bord. Enfin, pensez aux KPIs liés à l’expérience utilisateur comme le temps de session, nombre de pages vues, etc…

La liaison avec Google Analytics ne semble pas active, ce qui ne facilite pas une analyse avancée. Par exemple, comment comprendre le comportement des nouveaux et anciens visiteurs à cette étape ? Ces segments sont bien visibles dans l’outil de testing, mais par défaut un outil de testing identifie un nouveau visiteur comme quelqu’un qui arrive pour la première fois sur le test A/B. Dans votre outil analytics, l’historique est bien plus ancien et réaliste. Attention à cette interprétation très différente qui peut fausser vos analyses.

Conclusion : un test intéressant ?

Cette étape est bien souvent peu performante dans un tunnel de commande. Faut-il néanmoins lancer y dépenser de l’énergie et des ressources CRO ? Difficile de prioriser ce test A/B en haut d’une roadmap et je ne le ferais pas, d’autant plus que c’est compliqué de savoir pourquoi l’utilisateur s’arrête ici. Est-il prêt à commander ? a-t-il le temps de se créer un compte ?

Je vous recommande de questionner vos utilisateurs pour comprendre leurs freins et d’analyser les comportements sur les différents champs des formulaires. Un outil comme Hotjar ou LuckyOrange répondra rapidement à cette question.

Vous avez d’autres hypothèses d’optimisation pour cette page ? Donnez-nous votre avis dans les commentaires !

Devenez expert en CRO !

Découvrez une méthode structurée pour obtenir des résultats visibles pour votre organisation à chaque test A/B !