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
3. LES DERNIÈRES TENDANCESO.SAUVAGE
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
7. / EXPÉRIENCE UTILISATEUR 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
18. Le 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
21. / ELEMENTS TIERS J.CALAIS 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


Comprend à la fois :
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.

L'expérience utilisateur : tendances et mesure de l'UX

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

L'expérience utilisateur : tendances et mesure de l'UX

Plus De Contenu Connexe

Similaire à L'expérience utilisateur : tendances et mesure de l'UX (20)

Plus récents (20)

L'expérience utilisateur : tendances et mesure de l'UX

Notes de l'éditeur

L'expérience utilisateur : tendances et mesure de l'UX

Vous êtes en train de lire un aperçu.

L'expérience utilisateur : tendances et mesure de l'UX

Suggestions

Plus De Contenu Connexe

Similaire à L'expérience utilisateur : tendances et mesure de l'UX (20)

Plus récents (20)

L'expérience utilisateur : tendances et mesure de l'UX

Notes de l'éditeur