Comment augmenter votre taux de transformation : A/B Testing Live & User Experience

Transcription

1

2 Comment augmenter votre taux de transformation : A/B Testing Live & User Experience

3 Interviendront sur les sujets : Les intervenants Comment optimiser le taux de transformation de son tunnel de conversion? Sébastien BAGUET Responsable E-commerce chez NRJ mobile Comment améliorer l expérience utilisateur et augmenter les ventes? Alexandre MURAT Président chez Adamence Opérateur de téléphonie mobile avec plus d 1 million de visiteurs par mois sur nrjmobile.fr Leader de la vente de bijoux sur internet 3

4 Jonathan CHERKI Président Fondateur Qui sommes-nous? Etudes: + ESSEC + Licence de Mathématique et de statistiques + Master de Marketing L équipe (composée de 20 membres) + Chargés de projet Marketing & Conseil + Maquettistes & Designer & Ergonomes + Analystes statistiques + Développeurs informatique + Ingénieurs serveur + Commerciaux Des investisseurs de renom + CEO de Microsoft Europe et Microsoft France + Vice président et CSO de Dassault Systemes + CEO de Cegid Group + CEO de Sidetrade + Autres membres du fond d investissement Seed4soft 4

5 Quelques références clients 5

6 Activité et objectifs Réactions utilisateurs Perception de marque Mouvements de souris Analyse quantitative de données humaines Comportement de surf Visibilité Interaction Organisation Ergonomie Eléments de réassurance Facteurs d achat 6

7 Activité et objectifs TESTS QUANTITATIFS Comprendre l expérience utilisateur pour améliorer l ergonomie des sites web TESTS COMPARATIFS LIVE TESTS QUALITATIFS Augmentation du taux de transformation de 30 à 100% Baisse du taux de rebond de 20% Multiplication du temps passé sur les sites par 1,2 à 2* 7 * pour les sites Branding et Corporate

8 Une gamme de solutions Publicitest Mousetest Ergotest Benchmark Etudes Quali & quanti sur le web User Screen Tracking A/B Testing Live Guide des bonnes pratiques Une gamme complète de solutions de tests et d optimisations 8 Mobiletest Brandingtest Socialtest Newstest Test Quali & Quanti sur mobile Mesure de l efficacité de campagnes publicitaires Test des applications Facebook et pages Fan Test de newsletters

9 Comment optimiser le taux de transformation de son tunnel de conversion?

10 Contexte 1 NRJ mobile : le contexte NRJ Mobile, opérateur virtuel de téléphonie mobile, Filiale du groupe Euro-Information (Groupe Crédit Mutuel-CIC), Opère les marques NRJ Mobile, CIC Mobile, Crédit Mutuel Mobile, Cofidis Mobile et BlanchePorte Mobile Parc de plus d 1 million de clients NRJMobile.fr : + d 1M VU / Mois mais une transformation améliorable But de la mission : cibler les imperfections, les quantifier pour motiver les développements Pour cela, il faut savoir quoi et comment optimiser 10

11 Contexte 2 NRJ mobile : le contexte Les outils «Analytics» donnent des valeurs de performance sur les pages : pages vues, taux de rebond, etc. Oui mais comment navigue un internaute sur les pages? Pour avoir une chance d optimiser la transformation, il faut savoir : ce que voit l utilisateur ses actions / réactions où il passe du temps ses hésitations ce qui le pousse ou ce qui le freine à acheter Comprendre l expérience utilisateur pour améliorer les parcours et augmenter la transformation

12 Objectif : Améliorer la transformation de notre Check Out 1 personne sur 5 atteint le TPE Résultats généraux Coordoonnées Personnelles Coordoonnées Bancaires Paiement -75% -11%

13 High Technology : User Screen Tracking User Screen Tracking L «User Screen Tracking» a permis d établir des KPIs fiables de l ergonomie du tunnel de souscription. Concrètement, nous avons «filmé» plus de sessions de commandes et de tentatives. Vidéo du surf de chaque utilisateur 13

14 High Technology : User Screen Tracking Process UST Tracking du déplacement de la souris et du surf des internautes Y Réalisation de cartes de chaleur : Clics Mouvements Exposition Visibilité Temps Interaction X PIXELS Enregistrement des coordonnées (X,Y,T) de la position de la souris Stockage des data toutes les 50 ms Nouvelles données statistiques clés : Temps d hésitation Temps de survol avant clic Nombre d interactions 14 Démonstration

15 Mesures Les vidéos Visualisation vidéo du parcours paiement des utilisateurs à travers différentes pages. 15

16 Les cartes Exposition Carte des clics Mesures Ecran d ordinateur Temps Carte des mouvements 16 Exposition : Zone affichée à l utilisateur sur son écran. Temps : Temps passé par l internaute. Interaction : Zone de temps survolée avec mouvement ou clic.

17 Qualité de service Analyse du formulaire principal - Fil d Ariane non cliquable: induit une erreur pour l internaute - Menu cliquable: provoque un taux de sortie plus important La checkbox de «Mme» est plus proche du texte «M.» que du texte «Mme». Il arrive que certains internautes cochent la mauvaise civilité! 17

18 Analyse des éléments périphériques Colonne de droite Eléments de réassurance (1) Carte d exposition de la page Etape 1 Carte de mouvement de la page Etape 1 Les éléments de réassurance sont dans une zone peu exposée, comme le montre la carte d exposition de gauche : les internautes ne les voient pas ou peu. Cette remarque se confirme grâce à la carte de mouvement : les éléments de réassurance sont peu survolés. 18 Objectif : Mettre plus en valeur les éléments de réassurance.

19 Parcours type : Benchmark & Recos

20 Parcours type : benchmark & recos Une fois les points de fuite identifiés, étude des best practices de la concurrence 20

21 Recommandations opérationnelles 21 Pages Recommandations Opérationnelles Types Toutes les pages Toutes Toutes Toutes Toutes Coordonnées personnelles Coordonnées bancaires Coordonnées personnelles Coordonnées bancaires Coordonnées personnelles Coordonnées bancaires Supprimer le Menu. Rendre cliquable les étapes précédentes du fil d Ariane et ajouter des pictogrammes informatifs simples. Afficher une barre de réassurance sur toute la largeur de la page, juste avant le bouton de validation, sur le modèle de la page «Boutique accessoires». Afficher tous les éléments réassurant de conseil téléphonique dans un même bloc, fortement exposé, au niveau du fil d Ariane sur la droite. Il contiendrait les éléments : - «Commander par téléphone au 1080» - «Conseillers et SAV joignables 6j/7 au » Supprimer les boutons «Abandonner» : ne laisser que les boutons «Retour» et «Suivant» pour naviguer entre les étapes et les positionner au dessus de la ligne de flottaison de manière optimale Pour compenser la suppression du Menu, ajouter dans la colonne de droite, un call-to-action «Modifier votre sélection Mobile/Forfait». Intégrer un système de légende interactif, sur la droite par exemple, qui ne s activerait que lorsque le champs commence à être rempli. Cela créerait une atmosphère d accompagnement essentielle lors des tunnels de paiement. Structurer visuellement le formulaire, il doit être appréhendable en un coup d œil Réarranger le formulaire par thèmes logiques : Qui êtes-vous? / Pour vous joindre? / D où êtes-vous? Potentiel d amélioration Faible Faible Faible Faible Faible Faible Faible Faible Fort Fort Fort Fort Fort Fort Fort Fort

22 Maquettes

23 Coordonnées personnelles V0

24 Coordonnées personnelles V1

25 Paiement V0

26 Paiement V1

27 Bilan Le test mené pendant 3 semaines nous a permis d identifier les erreurs de conception du formulaire : Conclusion Constat appuyé par des données statistiques fiables Etude menée par un tiers neutre à l entreprise Evaluation possible du ROI Mais comment valider la version cible idéale avant d enclencher le développement en interne? Du test Live! Nécessité d A/B tester plusieurs versions avant de déterminer la version cible.

28 28 Démonstration

29 Comment améliorer l expérience utilisateur et augmenter les ventes?

30 Contexte Adamence : le contexte Adamence, Leader de la vente de bijoux sur internet Achat réfléchi / Panier Moyen élevé Objectif : garantir la qualité d une grande joaillerie sur un site web Rassurer et convaincre tout au long du parcours d achat : répondre aux attentes et besoins identifier les difficultés d étapes cibler les freins et motivations d achat 30

31 Les versions à tester Niv1 AB Test de page panier Nouvelle Version V Ancienne Version V0

32 Niv1 Conversion Commande Evolution de la conversion Taux de transformation Commande (VU) : Pourcentage des utilisateurs qui sont passés de la page Panier à la page Confirmation. Taux de transformation Commande (VU) Version 0 Version 1 Gain de 28,10% Le taux de transformation Commande VU est un indicateur majeur. Il nous permet de savoir rapidement quelle version est plus performante que l autre. La version 1 de la page panier influe sur le taux de transformation final positivement : elle permet un gain de 28,10%. Un test statistique a été réalisé et a prouvé que cet écart est significatif et que les tendances ne s inverseront pas. 32

33 Evolution du taux de transformation 7/30/2012 8/1/2012 8/3/2012 8/5/2012 8/7/2012 8/9/2012 8/11/2012 8/13/2012 8/15/2012 Niv1 8/17/2012 8/19/2012 8/21/2012 8/23/2012 8/25/2012 8/27/2012 8/29/2012 8/31/2012 Conversion Commande NB : Moins de 1 % des visiteurs du site Adamence entrent dans le tunnel de paiement. Il faut donc du temps avant de récolter suffisamment de données sur les pages AB testées, notre but étant qu elles soient représentatives. Evolution du taux de transformation Commande VU Moyennes cummulées Ce graphique nous informe sur l évolution et la stabilité des performances des deux versions. 9/2/2012 9/4/2012 9/6/2012 9/8/2012 9/10/2012 Dates Version 0 Version 1 Compte tenu du trafic sur le tunnel de paiement de adamence.com, on estime qu au bout de 45 jours, les données sont stables. Ainsi on a 95% de chance que le taux de transformation de la version 1 reste supérieur à celui de la version 0. Plus les courbes sont horizontales, moins les taux de transformation ont de chances de varier. 33

34 Niv2 Attentes Attentes Carte de mouvement de la page Panier version 1 Sur la version 1, la démarche était de supprimer un maximum de portes de sorties à cette étape. Nous remarquons cependant que les utilisateurs survolent par réflexe la partie supérieure droite du header cherchant le bouton «Recevoir mon panier par mail». 34 => Il est donc nécessaire de conserver cette possibilité sous forme de pop-in

35 Version finale Niv1 Version finale page panier 35 35

36 36 Tests de maquettes & Test de parcours

37 Home Page Refonte et optimisation Home Page Home Page avant 37

38 Démonstration Test de maquette Test de parcours 38

39 Home Page Evolution de la Home Page Home Page après 39

40 Les bonnes pratiques d un A/B Testing Pour réussir son A/B Testing, il faut : Bonnes pratiques 1) Savoir quoi tester 2) Adapter la méthode de test à votre infrastructure technique 3) Mesurer le temps de chargement 4) Tester les versions sur différents navigateurs, OS, résolution 5) Vérifier la conformité et la cohérence des données 6) Vérifier la significativité des données dans le temps 40

41 Les bonnes pratiques d un A/B Testing Pour réussir son A/B Testing, il faut : Bonnes pratiques 7) Identifier des objectifs clairs, précis et mesurables sur différents niveaux pour comparer les résultats 8) Comprendre l'expérience utilisateur sur chaque version 9) Analyser les éléments positifs et négatifs de chaque version pour construire la version optimale Il ne vous reste plus qu'à vous lancer, sans aucun risque! 41

42 Merci de votre a,en.on Avez- vous des ques,ons? square.fr