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
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
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.