l'expérience utilisateur : tendances et mesure de l'ux

Petit-déjeuner Conférence 18 Nov. 2016 / Lille

L’EXPÉRIENCE UTILISATEURPourquoi les temps de chargement ça

compte !

PRÉSENTATIONJ.CALAIS

O.SAUVAGER.HAVET

Rémy HAVETDSI

+ 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 demesures

Olivier SAUVAGE Directeur Général

+ 6Années

d’existence

+ 80Clients satisfaits

+ 50Sites

testés

LES DERNIÈRES TENDANCES O.SAUVAGE

LES DERNIÈRES TENDANCES O.SAUVAGE

LES DERNIÈRES TENDANCES O.SAUVAGE

EXPÉRIENCE UTILISATEUR

SHOULD HAVE

Clarté de l’information

Innovation des parcours

Performances

Bon fonctionnement

Qualité graphique

Une expérience

MUST HAVEUne offre

Produits

Prix

Services

Conversion

Image de marque

Fidélisation

TO HAVEDes objectifs

J.CALAISO.SAUVAGE

/

EXPÉRIENCE UTILISATEUR O.SAUVAGE

PROJET WEBDISTRIB

Refonte technique

Amélioration indicateurs marketing

Garantir une expérience utilisateur optimum

Optimisation du tunnel de commande

R.HAVET

PROJET WEBDISTRIB O.SAUVAGE

Tests utilisateurs Analyse experte ConceptionPersonas, Experience

Map, Wireframes

+

Processus itératif

PROJET WEBDISTRIB O.SAUVAGE

Tests utilisateurs

PROJET WEBDISTRIB O.SAUVAGE

Analyse experte

PROJET WEBDISTRIB O.SAUVAGE

11 versions produites

V0 V11

/

L’intérêt du feedback

CTRL + F5CTRL + F5CTRL + F5

…

#PASCONTENT

C’EST BON CA CHARGE #PATIENCE

€

VS

BON FONCTIONNEMENT : EXPERTISEO.SAUVAGE

PROJET WEBDISTRIBInstabilité du parcoursDu 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 minPerformances réseau : 9,69 secÉcart type : 2,89 sec

Taux de disponibilité : 99,18%Durée moyenne d’une anomalie : 40 minPerformances réseau : 5,83 secÉcart type : 2,38 sec

J.CALAIS

PERFORMANCES : CAS CONCRET

Etape 3 : sous catégorie

Avant mise à jour : 0,84 sec Phase d’instabilité : 0,35 secParcours stabilisé : 0,34 sec

Parcours instableDu 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 secParcours stabilisé : 0,67 sec

Avant mise à jour : NCPhase d’instabilité : 2,95 secParcours 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

/

Taux de disponibilité : 98,80%

9 alertesDurée moyenne d’une anomalie : 19m09Cumul des anomalies sur la période : 2h52Temps de chargement total : 6,51secÉcart type : 5,78 sec

Taux de disponibilité : 99,80%2 alertesDurée moyenne d’une anomalie : 14m13Cumul des anomalies sur la période : 28m26Temps de chargement total : 3,96secÉcart type : 1,74 sec

BON FONCTIONNEMENT : CAS

CONCRETAvant le changement d’hébergeurPériode du 25/05 au 03/06

Date de migration04/06

Après le changement d’hébergeurPériode du 05/05 au 14/06

J.CALAIS

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

Le DomContentLoaded

PERFORMANCES J.CALAIS

/

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 connexionTemps 1er octet

Temps chargementElé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

Tem

ps

ava

nt

utilis

atio

n d

e la

pag

e

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

/

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

/

ELEMENTS TIERSJ.CALAIS

O.SAUVAGE

/

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

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

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

R.HAVET