L'expérience utilisateur : tendances et mesure de l'UX
•Télécharger en tant que PPTX, PDF•
0 j'aime•311 vues
Conférence du 18 Nov. 2016 par Jérôme CALAIS (NETVIGIE) et Olivier SAUVAGE (WEXPERIENCE) Capitaine Commerce est intervenu dans une première partie pour nous parler des dernières tendances en matière d'UX. Cas concret : refonte du tunnel de commande de WEBDISTRIB avec la présence de Rémy HAVET (DSI). - Intervention de Wexperience sur la partie ergonomie - Intervention de Netvigie sur la partie mesure de performances
Recommandé
Recommandé
Contenu connexe
Similaire à L'expérience utilisateur : tendances et mesure de l'UX
Similaire à L'expérience utilisateur : tendances et mesure de l'UX (20)
L'expérience utilisateur : tendances et mesure de l'UX
- 1. Petit-déjeuner Conférence 18 Nov. 2016 / Lille L’EXPÉRIENCE UTILISATEUR Pourquoi les temps de chargement ça compte !
- 2. PRÉSENTATION J.CALAIS O.SAUVAGE R.HAVET Rémy HAVET DSI + 14Années d’existence + 2MClients satisfaits + 25 K Références Jérôme CALAIS Directeur Général + 12Années d’expertise + 15 0 Clients satisfaits + 10 0 Points de mesures Olivier SAUVAGE Directeur Général + 6Années d’existence + 80Clients satisfaits + 50Sites testés
- 6. EXPÉRIENCE UTILISATEUR SHOULD HAVE Clarté de l’information Innovation des parcours Performances Bon fonctionnement Qualité graphique Une expérience MUST HAVE Une offre Produits Prix Services Conversion Image de marque Fidélisation TO HAVE Des objectifs J.CALAIS O.SAUVAGE
- 8. PROJET WEBDISTRIB Refonte technique Amélioration indicateurs marketing Garantir une expérience utilisateur optimum Optimisation du tunnel de commande R.HAVET
- 9. PROJET WEBDISTRIB O.SAUVAGE Tests utilisateurs Analyse experte Conception Personas, Experience Map, Wireframes + Processus itératif
- 10. PROJET WEBDISTRIB O.SAUVAGE Tests utilisateurs
- 11. PROJET WEBDISTRIB O.SAUVAGE Analyse experte
- 12. PROJET WEBDISTRIB O.SAUVAGE 11 versions produites V0 V11
- 13. / L’intérêt du feedback CTRL + F5 CTRL + F5 CTRL + F5 … #PASCONTENT C’EST BON CA CHARGE #PATIENCE € VS BON FONCTIONNEMENT : EXPERTISEO.SAUVAGE
- 14. PROJET WEBDISTRIB Instabilité du parcours Du 14/04 au 04/06 Stabilisation du parcours À partir du 04/06MAJ du scénario 14/04 Taux de disponibilité : 98,57% Durée moyenne d’une anomalie : 1h27 min Performances réseau : 9,69 sec Écart type : 2,89 sec Taux de disponibilité : 99,18% Durée moyenne d’une anomalie : 40 min Performances réseau : 5,83 sec Écart type : 2,38 sec J.CALAIS
- 15. PERFORMANCES : CAS CONCRET Etape 3 : sous catégorie Avant mise à jour : 0,84 sec Phase d’instabilité : 0,35 sec Parcours stabilisé : 0,34 sec Parcours instable Du 14/04 au 04/06 Parcours stabilisé À partir du 04/06 MAJ du scénario :14/04 Avant mise à jour : 1,25 sec Phase d’instabilité : 3,43 sec Parcours stabilisé : 0,67 sec Avant mise à jour : NC Phase d’instabilité : 2,95 sec Parcours stabilisé : 1,74 sec Temps de chargement Etapes 6 & 7 : Ajout & accès au panier Etapes 8, 9 & 10 : Validation panier, identification & mode de livraison J.CALAIS
- 16. / Taux de disponibilité : 98,80% 9 alertes Durée moyenne d’une anomalie : 19m09 Cumul des anomalies sur la période : 2h52 Temps de chargement total : 6,51sec Écart type : 5,78 sec Taux de disponibilité : 99,80% 2 alertes Durée moyenne d’une anomalie : 14m13 Cumul des anomalies sur la période : 28m26 Temps de chargement total : 3,96sec Écart type : 1,74 sec BON FONCTIONNEMENT : CAS CONCRETAvant le changement d’hébergeur Période du 25/05 au 03/06 Date de migration 04/06 Après le changement d’hébergeur Période du 05/05 au 14/06 J.CALAIS
- 17. Les métriques à surveiller Temps réseau Vision architecture APDEX Métrique de satisfaction Temps total Impact sur le SEO Poids de pages & nombre d’éléments Eléments anormaux ? Mais aussi : Speed Index, DomContentLoaded,… PERFORMANCES J.CALAIS
- 19. / Optimisation: Mise en place d’une solution pour améliorer les temps de chargement PERFORMANCES : CAS CONCRET Mise en place d’une solution d’optimisation des temps de chargement Temps DNS Temps connexion Temps 1er octet Temps chargement Eléments pages 85,71% 7,33% 2,56% Image/png Text/html Text/plain Image/jpeg Image/gif Application/x-js Text/js Text/css Application/js Application/x-font- woff Tempsavantutilisationdelapage 1,83%2,56% Temps de chargement Nombre total d’éléments Poids total des éléments 22,88% 12,66% 16,83% 21,01% 44,54% 52,11% 14,38% 9,53% J.CALAIS R.HAVET
- 20. / Des chargements qui impactent le ressenti utilisateur www. HTML JS CSS TAG.png .jpg .gif CDN HTM L JS TAG .png .jpg.gif CDN CSS Eléments visibles au dessus de la ligne de flottaison Eléments secondaires Eléments suivant la navigation (scroll … ) www. PERFORMANCES : EXPERTISE Chargement immédiat de tous les éléments Chargement progressif des différents éléments Temps ressenti utilisateur plus important Temps ressenti utilisateur moins important O.SAUVAGE
- 22. / REAL USER MONITORING : CAS CONCRET Temps DNS Temps connexion Temps 1er octet Temps html load Eléments pages Nbr. Pages vues Temps de chargement Temps ressenti utilisateur 1,09% 0,71% 44,04% Performances navigateur Temps ressenti par device 20,07% 3,65% 1,05% 6,35% 14,93% 4,1% J.CALAIS R.HAVET
- 23. REAL USER MONITORING GEOLOCALISATION PARCOURS Mise en œuvre TAG Trafic réel Corrélation Trafic / Performance/ / Segmentation des mesures NAVIGATEUR / OS www. DEVICE J.CALAIS
- 24. RÉSULTATS OBTENUS Entre ancien et nouveau tunnel de commande Taux de transformation : + 8,36% Valeur du panier par visiteur: + 3,64% Evolution des performances depuis janvier 2016 Temps de chargement réseau : - 11% Temps de chargement ressenti utilisateur : - 34% ERGONOMIE PERFORMANCE DÉMARCHE /Itérative Amélioration Continue Collaboration entre les acteurs/ J.CALAIS O.SAUVAGE R.HAVET
Notes de l'éditeur
- OLIVIER : Présentation des 3 sociétés et de leur activité + les intervenants
- Reconnaissance image
- chatbot
- Interface fluide /UX
- JEROME : => Exigence de l’internaute grandissante : la qualité de sa navigation est désormais un critère d’expérience. RAJOUTER LA NOTION D’OBJECTIF MARKETING Cette slide va peut-être remplacée ou du moins modifiée car Cyrille et Olivier ont une vidéo de présentation de l’expérience utilisateur.
- Amazon 500ms = 20% de perte = 2,9 milliards de $ de pertes par an 100ms = 4% de perte = 593 millionsde $ de pertes par an 1ms = 0.04% de perte = 5,9 millions de $ de pertes par an La dégradation de perf impacte aussi le taux de rebond : double peine : achat de trafic non convertie +altération du taux de conversion.
- Problématique de base : migration technique. Webdistrib en a profité pour revoir le tunnel de commande. Amélioration des indicateurs marketing : augmenter le taux de conversion, du moins ne pas le dégrader Garantir une UX de qualité comprend à la fois : Une présentation de l’information et des interactions selon les règles de l’art Une performance accrue des temps de chargement
- Problématique de base : migration technique. Webdistrib en a profité pour revoir le tunnel de commande. Amélioration des indicateurs marketing : augmenter le taux de conversion, du moins ne pas le dégrader Garantir une UX de qualité comprend à la fois : Comprend à la fois : Une présentation de l’information et des interactions selon les règles de l’art Une performance accrue des temps de chargement
- Problématique de base : migration technique. Webdistrib en a profité pour revoir le tunnel de commande. Amélioration des indicateurs marketing : augmenter le taux de conversion, du moins ne pas le dégrader Garantir une UX de qualité comprend à la fois : Comprend à la fois : Une présentation de l’information et des interactions selon les règles de l’art Une performance accrue des temps de chargement
- Problématique de base : migration technique. Webdistrib en a profité pour revoir le tunnel de commande. Amélioration des indicateurs marketing : augmenter le taux de conversion, du moins ne pas le dégrader Garantir une UX de qualité comprend à la fois : Comprend à la fois : Une présentation de l’information et des interactions selon les règles de l’art Une performance accrue des temps de chargement
- Problématique de base : migration technique. Webdistrib en a profité pour revoir le tunnel de commande. Amélioration des indicateurs marketing : augmenter le taux de conversion, du moins ne pas le dégrader Garantir une UX de qualité comprend à la fois : Comprend à la fois : Une présentation de l’information et des interactions selon les règles de l’art Une performance accrue des temps de chargement
- OLIVIER Les User test de Wexperience ont montré qu’il est primordial que l’internaute ait un feedback de la moindre action effectuée sur le site. S’il est informé que le chargement de la page est en cours, alors il sera plus patient et aura moins tendance à quitter le site.
- Projet en date de 2014. Durant la phase de stabilisation : augmentation du nombre d’anomalies + dégradation perfs. Double correction : optimisation fonctionnelle du tunnel + amélioration de la dispo et des perf. PERFORMANCES DU SCENARIO Etape 1 (HP) : perf stables Etape 2 (cat) : perf stables Etape 3 (sous-cat) : amélioration à partir du nouveau tunnel de commande Etape 4 (sous sous –cat ) : légère dégradation à partir du nouveau tunnel de commande Etape 5 (produit) : légère dégradation à partir du nouveau tunnel de commande Etape 6 (ajout panier) : grosse dégradation à partir du nouveau tunnel de commande – stabilisation à partir de juin Etape 7 (accès au panier) : dégradation à partir du nouveau tunnel de commande – stabilisation à partir de juin Etape 8 (validation panier) : rajout de cette étape / perfs très hautes / stabilisation à partir de juin Etape 9 (identification panier) : rajout de cette étape / perfs très hautes / stabilisation à partir de juin Etape 10 (mode livraison) rajout de cette étape / perfs stables.
- Pas possible de parler de ressenti utilisateur car pas encore de loadview Justifier l’intérêt d’un scénario utilisateur et d’une mesure dans le temps .
- JEROME Les erreurs 500 surviennent du côté serveur : Erreur interne / timeout / fonctionnalité réclamée non supportée par le serveur / service en maintenance. Expliquer l’écart type / focus sur la forte réduction entre les 2 périodes / stabilité des mesures. REMY - explication du cas concret
- JEROME => Expliquer l’importance de la double lecture : technique et du point de vue du ressenti utilisateur.
- JEROME DCL: première interaction entre la plateforme et l’internaute.
- Graphique : évolution du DCL sur la période englobant la mise en place de fasterize. Toutes les informations sont communiquées sur la HP
- OLIVIER Internaute : plus en plus exigent & les éléments gravitant autour d’un site internet de plus en plus nombreux. Faire apparaître tous les éléments en même temps : l’internaute se retrouve trop longtemps face à une page blanche. 7 Les faire apparaitre progressivement : la 1ère interaction a lieu plus rapidement car des éléments sont encore en cours de chargement. Définition même du DCL / faire le distingo avec la notion de speed index. Ecosystème digital Point de vue UX, exemple de la vidéo. Celle-ci est fortement prisée car côté immersif. En revanche le contre effet sera immédiat si les temps de chargement ne suivent pas le rythme. Reco: afficher en premier lieu une image afin de capter l’attention de l’internaute et de laisser le temps à la vidéo de se charger pour éviter tout temps de latence. tendance est encore plus risquée sur mobile : expérience de navigation = succession de micro connexion D’ailleurs , comment mesurer les temps de chargement sur mobile ? Transition vers le RUM.
- Valeur ergo : source rapport wexperience S12 Valeur qualité web : données extraites depuis l’extranet; Depuis un an, passage du temps archi moyen de 7,2 sec à 6,4 sec DCL moyen 1er semestre 2016 : 23,84 sec DCL moyen 01/07 au 15/11 : 15,64 sec Démarche qualitative : amélioration de l’expérience utilisateur / fluidité de navigation Démarche continue : écosystème digital, et internaute ( attente, exigences) en constante évolution : donc adaptation permanente / amélioration continue : cercle vertueux Démarche collaborative : fait intervenir les équipes marketing et informatique.