LE DÉFI ?

« Nous souhaitons réduire notre coût d’acquisition et avons détecté un taux de sortie important sur l’étape de création de compte. Nous avons demandé  à l’équipe d’Altima° d’analyser et d’optimiser cette étape au sein de notre roadmap d’optimisation continue.», Gwenola Toulemonde, Responsable e-Commerce Cyrillus.

NOTRE RÉALISATION

L’analyse des données analytics met en évidence un point de friction sur l’étape de connexion du tunnel de commande. En segmentant par type d’utilisateur (nouveau vs ancien), nous nous apercevons rapidement que le problème est lié aux nouveaux utilisateurs et donc à l’étape de création de compte.

Etape de création de compte Cyrillus avant refonte

Cyrillus compte client original avant optimisation

Le principal problème de cette page est sa lisibilité. Les labels sont peu lisibles (taille de 12px, couleur claire, italique), les boutons radio inutilisables sur device tactile et les champs sont peu visibles et très espacés de leur label. Cette somme de détails pénalise réellement l’accessibilité de la page !

Nous listons d’autres hypothèses pour augmenter le taux de transformation de cette étape :

  • Messages d’aide perturbants : A l’ouverture du formulaire des messages d’aide et de rassurance sur l’utilisation des données s’affichent. Leur design reprend les codes (couleur rouge) des messages d’erreur et peuvent donc être perturbants / anxiogènes. Ils ne sont pas indispensables et nous décidons de tester leur pertinence.
  • Le bloc « Carte de fidélité » peut être perturbant : Un client boutique qui vient pour la première fois acheter sur le site peut pré-remplir le formulaire avec son numéro de carte de fidélité. C’est pratique mais ce cas est relativement rare. Lors de tests utilisateurs avec eye-tracking, j’ai souvent vu l’utilisateur ouvrir un formulaire et remplir mécaniquement le premier champ du formulaire sans vérifier l’information demandée. Ce cas génère souvent une erreur et une incompréhension de l’utilisateur.
  • Rassurance : Les nouveaux utilisateurs connaissent moins la marque et ses services, faut-il les rassurer à cette étape ?
  • Fil d’Ariane : La création de compte se déroule en 2 étapes (compte et livraison). Afficher un second formulaire peut être déceptif pour l’utilisateur et un point de fuite. C’est peu conventionnel et malheureusement je ne peux pas modifier cet élément (contrainte technique). Un fil d’Ariane est utilisé pour indiquer à l’utilisateur que la création de compte se déroule en 2 temps.

Un test MVT a été lancé avec 8 combinaisons !

 

LE RÉSULTAT

Optimisation de +10% de l'étape de création de compte via un test MVT.

Redesign de la création de compte et gain de +10% de valeur de la session.

La version gagnante permet d’augmenter la valeur de la visite de +10% (ratio CA/sessions) !!

Suite au test, nous obtenons 3 enseignements intéressants :

Ergonomie et éléments perturbants : Le formulaire devient l’élément principal de la page, il est plus lisible et n’est plus perturbé par les infobulles. L’impact est direct puisque le taux de sortie sur l’étape n°1 est en baisse de -8,89% et sur l’étape n°2 de -25,67% !

Rassurance : Les différentes formes de rassurance testées sont contre-productives et l’utilisateur n’a pas besoin d’être rassuré à cette étape du parcours.

Fil Ariane et 2 étapes : Le fil d’Ariane n’a pas d’impact sur le parcours utilisateur. L’idéal serait de refondre le formulaire sur une seule étape pour correspondre aux conventions actuelles.

CONCLUSION

Il est indispensable de suivre ou de s’approcher des règles d’ergonomie notamment en terme d’accessibilité et de lisibilité. L’impact sur les performances de votre site est fort et nous le voyons sur la plupart de nos tests.

Téléchargez l’étude de cas au format .pdf

Capture d’écran 2016-04-13 à 12.09.25

Téléchargez l’étude de cas au format .pdf

Mathieu Fauveaux

Directeur Conseil Conversion & Analytics.

More Posts - Website

Follow Me:
TwitterLinkedIn