L’expérience réellement vécue par les utilisateurs : Vers de nouveaux outils de visualisation pour vos tests UX

PIERRE-MAJORIQUE LÉGER, Ph.D.
Titulaire de la Chaire de recherche industrielle
CRSNG-Prompt en expérience utilisateur
Co-directeur Tech3Lab, Directeur ERPsim Lab
Journée UX internationale, 25 Octobre 2018, Québec
Vers de nouveaux
outils de visualisation
pour vos tests UX
L’EXPÉRIENCE RÉELLEMENT VÉCUE PAR LES UTILISATEURS :

© Copyright Léger (2018)
Prof. Pierre-Majorique Léger, Ph.D.
TITULAIRE DE LA CHAIRE DE RECHERCHE INDUSTRIELLE CRSNG-PROMPT
EN EXPÉRIENCE UTILISATEUR
DOCTORAT
POST-DOCTORAT
LABORATOIRES ET CHAIRE FINANCEMENT
PROFESSEUR INVITÉ
Lab Serious games to learn
enterprise systems and
business analytics
https://www.researchgate.net/profile/Pierre-Majorique_Leger
Co-directeur Tech3Lab
Directeur ERPsim Lab
pml@hec.ca

COGNITION
ATTENTION
ÉMOTIONS
1 gigaoctet/heure
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA
ENCYCLOPEDIA

© Copyright Léger (2018)© Copyright Léger et Fredette (2018)
Propulsé par :

Propulsé par :
© Copyright Léger et Fredette (2018)

est ﬁer partenaire de
PLUSIEURS BOURSES DE RECHERCHE
À TOUS LES NIVEAUX :
chaire_ux.hec.ca
INSCRIVEZ-VOUS COMME
PARTICIPANTS À NOS ÉTUDES :
panel.hec.ca
Propulsé par : Organismes subventionnaires :

chaire_ux.hec.ca
panel.hec.ca

Testez-le
svp!

Facile
à utiliser ?

Facile
à utiliser ?
3 sur 5

Conclusion ?
?

Utilisation des données neurophysiologiques
pour optimiser l'expérience utilisateur (UX)
COGNITION
ATTENTION
ÉMOTIONS
L'OCULOMÉTRIE
MÉSURES NÉUROPHYSIOLOGIQUES
1 gigaoctet / heure
par participant
AIDER LES DESIGNERS
À PRENDRE DES DÉCISIONS
AUTOADAPTER LES INTERFACES
A B

VALENCE ÉMOTIONNELLE
Malheureux Heureux

FRONTALIS
CORRUGATOR
ZYGOMATICUS

NEUTRAL
HAPPY
SAD
DISCUSTED
ANGRY
SURPRISED
SCARED

NEUTRAL
HAPPY
SAD
ANGRY
SURPRISED
SCARED
DISCUSTED

INTENSITÉ ÉMOTIONNELLE
Calme Excité

Activité
électrodermale

CHARGE MENTALE
Facile Difficile

2 x 3 = ?
FACILE
14 x 17 = ?
DIFFICILE

Tech3Lab:
Un véritable terrain de jeux en UX
150 3000PROJETS PARTICIPANTS À LA
RECHERCHE
3ANNÉES

5 questions importantes en UX
1
Quel est le parcours
réellement vécu
par mes utilisateurs ?
4
Est-ce que tous mes
utilisateurs vivent
la même expérience ?
2
D’où proviennent
les réactions émotionnelles
sur mon interface?
5
Comment je me compare
à mes concurrents en termes
d’expérience utilisateur?
3
Lequel de mes prototypes
génère la meilleurs
expérience utilisateur ?

1
émotionnel réellement vécu
Méthode Tech3Lab à deux dimensions
(intensité et valence)
1 2 3 ...
+
-ACTIVATION:
Intensitéémotionnelle
TEMPS
ÉTAPES
Point de friction
VALENCE
ÉMOTIONNELLE
+ -
Propulsé
par

1
Un exemple dans le domaine
agro-alimentaire

VALENCE
ÉMOTIONNELLENe sais pas
quoi inscrire
dans barre de
recherche
Inscription
adresse
courriel
Ajout de filtres
pour choix
produits Résultats de
Produits
sans photos
Clic sur
“achat”
Inscription
du No de tel.
recherche non
1 Quel est le parcours émotionnel réellement vécu par mes utilisateurs ?
Exemple de parcours émotionnel avec la méthode Tech3LabIntensitéémotionnelle
Intensité émotionnelle
Valence émotionnelle
Identification
des points
de friction
par étape

0 100 200 300 400 500 600 700 800 900 1000 1100 1200 1300 1400
Time (sec)
-0,7
-0,6
-0,5
-0,4
-0,3
-0,2
-0,1
0,0
0,1
Activation
Valence
-1,0000
-0,5000
0,0000
0,5000
1,0000
Tâche
Pain Point
Création de compte
Magasinage
Paiement
Sélection du lieu de collecte
Sélection du moment de collecte
Null
1
« Aucun stress pour moi,
j’ai rentré ma carte de crédit,
ça c’était bon »
1
Notre méthode d’identification des points
de friction permet de révéler une contra-
diction entre ce qui est réellement vécue
et ce que dit par l’utilisateur.
Propulsé
par
VALENCE
ÉMOTIONNELLE

0 200 400 600 800 1000 1200 1400 1600 1800 2000 2200 2400 2600 2800 3000 3200 3400
Time (sec)
-1,0
-0,8
-0,6
-0,4
-0,2
0,0
0,2
0,4
0,6
0,8
1,0
Activation
Valence
-1,000
-0,500
0,000
0,500
1,000
Tâche
Pain Point
Création de compte
Magasinage
Paiement
Sélection du lieu de collecte
Sélection du moment de collecte
Null
1
« La recherche,
ça j’ai aimé ça »
1
Notre méthode d’identification des points
de friction permet de révéler une contra-
diction entre ce qui est réellement vécue
et ce que dit par l’utilisateur.
Propulsé
par
VALENCE
ÉMOTIONNELLE

1
cognitif réellement vécu par
mes utilisateurs ?
(intensité émotionelle et
charge cognitive)

1
cognitif réellement vécu par
mes utilisateurs ?
(intensité émotionelle et
charge cognitive)
1 2 3 ...
+
-CHARGEMENTALE
TEMPS
ÉTAPES
Point de friction
Propulsé
par
VALENCE
ÉMOTIONNELLE

2500 2600 2700 2800 2900 3000 3100 3200 3300 3400 3500 3600 3700 3800 3900 4000 4100
Time
-0.9
-0.8
-0.7
-0.6
-0.5
-0.4
-0.3
-0.2
-0.1
0.0
0.1
0.2
0.3
0.4
0.5
WORKDAY_A_P14
pain
wkt1
wkt2
wkt3
wkt4
wkt5
pain
wkt1
wkt2
wkt3
wkt4
wkt5
Avg. Eda Re
-0.3955
-0.3000
-0.2000
-0.1000
0.0001
Inscription
de données
personnelles
Recherche
avec barre
d’outils non
fructueuse
Utilise le
menu de
naviguation
Navigue sur la
page d’accueil
pour trouver la
bonne application
Chargementale
1
Quel est
le parcours cognitif
réellement vécu par
mes utilisateurs ?
Exemple de parcours cognitif
avec la méthode Tech3Lab
Propulsé par
VALENCE
ÉMOTIONNELLE

D’où proviennent les réactions émotionnelles
sur mon interface?2

2
D’où proviennent
les réactions
émotionnelles
sur mon interface?
Propulsé par

DENSITÉ DE LA
FIXATION OCULAIRE
2
D’où proviennent
les réactions
émotionnelles
sur mon interface?
Propulsé par

ÉMOTIONS POSITIVES
ÉMOTIONS NÉGATIVES
2
D’où proviennent
les réactions
émotionnelles
sur mon interface?
Propulsé par

DENSITÉ DE LA
FIXATION OCULAIRE
ANCIENNE PAGE OCULOMÉTRIE CLASSIQUE APPROCHE TECH3LAB NOUVELLE PAGE
ÉMOTIONS
POSITIVES
ÉMOTIONS
NÉGATIVES
2 D’où proviennent les réactions émotionnelles
sur mon interface?
Réaction
au moment
de la fixation

Lequel de mes prototypes génère la meilleurs
expérience utilisateur?3

3
expérience utilisateur?
Exemple de la comparaison entre
deux protoypes d’un nouveau site web
Propulsé
par
Immobilier.ca Immobilier.ca
A B

VALENCE
ÉMOTIONNELLE
Malheureux Heureux
Calme
Excité

-1.0 -0.8 -0.6 -0.4 -0.2 0.0 0.2 0.4 0.6 0.8 1.0
Valence
-1.0
-0.8
-0.6
-0.4
-0.2
0.0
0.2
0.4
0.6
0.8
1.0
Arousal
Task 1
Task 4
Task 5
Task 6
Task 1
Task 6
global_modiﬁed
Platform
Firm 1
Firm 2
Average of Valence vs. average of Calculation1. Color shows details about Platform. The marks are labeled by Subtask.
INTENSITÉ
VALENCE
COGNITIVE LOAD
VALENCE
Negative Positive
Easy Hard
-0.40 -0.35 -0.30 -0.25 -0.20 -0.15 -0.10 -0.05 0.00 0.05 0.10 0.15 0.20 0.25
Valence
-0.1
0.0
0.1
0.2
0.3
0.4
0.5
Arousal
Task 4
Task 3
Task 2
Task 2
Task 4
Task 1
Task 5
Task 6
Task 7
Task 8
3
Prototype A génère une meilleure
expérience que le Prototype B
Malheureux Heureux
Calme
Excité
Propulsé
par
COGNITIVE LOAD
VALENCE
Negative Positive
Easy HardCHARGE MENTALE
Immobilier.ca Immobilier.ca
A B

VALENCE
ÉMOTIONNELLE
CHARGE MENTALE
Malheureux Heureux
Facile
Difficile

3
Exemple de lancement d’une nouvelle
fonctionnalité (A performe mieux de B)
Propulsé
par
-0.12 -0.10 -0.08 -0.06 -0.04 -0.02 0.00
Valence
-0.23
-0.22
-0.21
-0.20
-0.19
-0.18
-0.17
-0.16
-0.15
-0.14
-0.13
-0.12
-0.11
CognitiveLoad
WorkDay
B
WorkDay
B
WorkDay
A
WorkDay
A
slide3_WD
Activation
-0.1800
-0.1500
-0.1000
-0.0500
0.0000
Train
trained tasks
untrained tasks
Average of Valence Re vs. average of Pupille Re. Color shows details about Train. Size shows
average of Eda Re. The marks are labeled by system2 and Version. The data is ﬁ ltered on System,
which keeps WD.
Meilleur
déploiement de
la nouvelle
fonctionnalité
Fonctionnalité
actuelle
Fonctionnalité
nouvelle
CHARGEMENTALE
INTENSITÉ
ÉMOTIONNELLE

4
Est-ce que tous
mes utilisateurs vivent

Task Order / Representative Task / Task Des
1
2.1
2
2.2
3
2.3
4
1.5
5
2.4
6
2.5
8
3.1
9
3.2
10
3.3
11
3.4
12
3.5
13
3.6
14
3.7
15
4.1
Débranchez
le câble d'
alimentati..
Débrancher
le fil
téléphoniq..
Débrancher
la cable
Ethernet
entre le
Modem et le
Routeur
Wi-Fi
Lire les
instructions
Débrancher
le cordon d'
allimentati..
Dévisser la
douille de
sécurité et
Retirer le
câble
coaxial à
l'arrière du
Modem à ..
Visser le
câble
coaxial
derrière le
Gateway
Brancher le
fil téléphoni
que..
Brancher le
cordon d'
allimentati..
Identifier le
terminal
télé
Dévisser le
câble
coaxial
derrière le
terminal
Visser le
filtre dans
la prise
coaxiale du
terminal
Puis visser
fermement
le câble
coaxial sur
le filtre
Déposer les
équipemen..
-0.4
-0.2
0.0
0.2
0.4
0.6
Activation
Riddler_cluster_journey
Avg. Cognitive Load
-1.00
-0.80
-0.60
-0.40
-0.18 0.24
Avg. Valence
Average of Eda for each Task Des broken down by Task Order and Representative Task. Color shows average of Valence. Size shows average of Cognitive Load. The data is filtered on Cluster,
which keeps 1. The view is filtered on Task Order, which excludes Null.
1
1.5
2
2.3
3
2.2
4
2.1
5
2.5
6
2.4
7
3.2
8
3.1
9
3.3
10
3.4
11
3.5
12
3.6
13
3.7
14
4.1
Lire les
instructions
Débrancher
la cable
Ethernet
entre le
Modem et le
Routeur
Wi-Fi
Débrancher
le fil
téléphoniq..
Débranchez
le câble d'
alimentati..
Dévisser la
douille de
sécurité et
Retirer le
câble
coaxial à
l'arrière du
Modem à ..
Débrancher
le cordon d'
allimentati..
Brancher le
fil téléphoni
que..
Visser le
câble
coaxial
derrière le
Gateway
Brancher le
cordon d'
allimentati..
Identifier le
terminal
télé
Dévisser le
câble
coaxial
derrière le
terminal
Visser le
filtre dans
la prise
coaxiale du
terminal
Puis visser
fermement
le câble
coaxial sur
le filtre
Déposer le
équipemen
-0.4
-0.2
0.0
0.2
0.4
0.6
Activation
Average of Eda for each Task Des broken down by Task Order and Representative Task. Color shows average of Valence. Size shows average of Cognitive Load. The data is filtered on Cluste
1
1.5
2
2.1
3
2.2
4
2.3
5
2.5
6
2.4
7
3.1
8
3.2
9
3.3
10
3.4
11
3.5
12
3.6
13
3.7
14
4.1
Lire les
instructions
Débranchez
le câble d'
alimentati..
Débrancher
le fil
téléphoniq..
Débrancher
la cable
Ethernet
entre le
Modem et le
Routeur
Wi-Fi
Dévisser la
douille de
sécurité et
Retirer le
câble
coaxial à
l'arrière du
Modem à ..
Débrancher
le cordon d'
allimentati..
Visser le
câble
coaxial
derrière le
Gateway
Brancher le
fil téléphoni
que..
Brancher le
cordon d'
allimentati..
Identifier le
terminal
télé
Dévisser le
câble
coaxial
derrière le
terminal
Visser le
filtre dans
la prise
coaxiale du
terminal
Puis visser
fermement
le câble
coaxial sur
le filtre
Déposer les
équipemen..
-0.4
-0.2
0.0
0.2
0.4
0.6
Activation
-0.18 0.24
Avg. Valence
Avg. Cognitive Load
-1.00
-0.80
-0.60
-0.40
Average of Eda for each Task Des broken down by Task Order and Representative Task. Color shows average of Valence. Size shows average of Cognitive Load. The data is filtered on Cluster,
1
1.5
2
2.3
3
2.2
4
2.1
5
2.5
6
2.4
7
3.2
8
3.1
9
3.3
10
3.4
Lire les
instructions
Débrancher
la cable
Ethernet
entre le
Modem et le
Routeur
Wi-Fi
Débrancher
le fil
téléphoniq..
Débranchez
le câble d'
alimentati..
Dévisser la
douille de
sécurité et
Retirer le
câble
coaxial à
l'arrière du
Modem à ..
Débrancher
le cordon d'
allimentati..
Brancher le
fil téléphoni
que..
Visser le
câble
coaxial
derrière le
Gateway
Brancher le
cordon d'
allimentati..
Identifier le
terminal
télé
-0.4
-0.2
0.0
0.2
0.4
0.6
Activation
-0.18 0
Avg. Valence
Avg. Cognitive Load
-1.00
-0.80
-0.60
-0.40
Average of Eda for each Task Des broken down by Task Order and Representative Task. Color shows average of Valence. Size shows
average of Cognitive Load. The data is filtered on Cluster, which keeps NA. The view is filtered on Task Order, which excludes Null.
SUCCES
100%
SUCCES
0%
SUCCES
12.5%
SUCCES
73%
PERSONA 1 PERSONA 2
PERSONA 4PERSONA 3
4
Est-ce que tous
mes utilisateurs vivent
Propulsé
par

Comment je me compare à mes concurrents
en termes d’expérience utilisateur?5

-1.0 -0.8 -0.6 -0.4 -0.2 0.0 0.2 0.4 0.6 0.8 1.0
Valence
-1.0
-0.8
-0.6
-0.4
-0.2
0.0
0.2
0.4
0.6
0.8
1.0
Activation
Competitor (Gold standard)
New Version
Old Version
data_modified
Interface Name
New Version
Old Version
Avg. Pupille Re
-0.25
-0.20
-0.15
-0.10
-0.06
Average of valence_modified vs. average of eda_modified. Color shows details about Interface Name. Size shows average of Pupille Re.
The marks are labeled by Interface Name.
-1.0 -0.8 -0.6 -0.4 -0.2 0.0 0.2 0.4 0.6 0.8 1.0
Valence
-1.0
-0.8
-0.6
-0.4
-0.2
0.0
0.2
0.4
0.6
0.8
1.0
Activation
New Version
Old Version
Interface Name
New Version
Old Version
Avg. Pupille Re
-0.25
-0.20
-0.15
-0.10
-0.06
Average of Valence Re vs. average of Eda Re. Color shows details about Interface Name. Size shows
average of Pupille Re. The marks are labeled by Interface Name. The view is filtered on Interface Name,
which keeps Competitor (Gold standard), New Version and Old Version.
Negative
-0.5
-0.4
-0.3
-0.2
-0.1
0.0
0.1
0.2
0.3
0.4
Activation
New Version
Old Version
Interface Name
Competitor (Gold standa
New Version
Old Version
-0.25
-0.20
-0.15
-0.10
-0.06
5
Comment je me compare
à mes concurrents
en termes d’expérience
Propulsé
par
INTENSITÉ
VALENCE
Malheureux Heureux
Calme
Excité
Nouvelle
version
Ancienne
version
Concurrent
COGNITIVE LOAD
VALENCE
Negative Positive
Easy HardCHARGE MENTALE

VALENCE
ÉMOTIONNELLE
Malheureux Heureux
Calme
Excité
Créer un indice
pour comparer
les émotions
Propulsé
par

L’indice
d’expérience
émotionnelle
de Deloitte
VALENCE
ÉMOTIONNELLE
Malheureux Heureux
Calme
Excité
Y
X
Propulsé
par

En collaboration avec Deloitte Digital
0.45 0.46 0.47 0.48 0.49 0.50 0.51 0.52 0.53 0.54
Index Homepage
0.45
0.46
0.47
0.48
0.49
0.50
0.51
0.52
0.53
0.54
0.55
IndexInstagram
BMO
BNC
CIBC
Coast
Desjardins
RBC
Scotia
TD
Global Median
Global Median
Median
Median
Index: Homepage vs Instagram
Industry
Banks
Average of Index Homepage vs. average of Index Instagram. Color shows details about Industry. The
marks are labeled by Brand. The view is filtered on Industry and Exclusions (Brand,Industry). The Industry
filter keeps Banks. The Exclusions (Brand,Industry) filter keeps 25 members.
Note : Average of the first 20 sec.
La réaction émotionnelle des
milléniaux sur les différentes
platformes
Propulsé
par
L'industrie bancaire
canadienne

...

ORGANISATEURS :
Pierre-Majorique Léger, Ph.D.
Sylvain Sénécal, Ph.D.
Marc Fredette, Ph.D.
David Brieugne
Elise Labonte-LeMoyne, Ph.D.
Caroline Giroux-Huppé
Émilie Bigras
Annemarie Lesage, Ph.D.
Juliana Alvarez, Ph.D.
Laurence Dumont, Ph.D.
Chrystel Black (Element AI)
Éric Brangier (Univ. de Lorraine)
Marie-Laure Di Fabio (Desjardins)
Raphael Morin (Ubisoft)
Loic Nunez (Desjardins Digital)
Jean-Francois Poulin (Ergoweb)
Romain Pourchon (Deloitte)
Cynthia Savard Saucier (Shopify)
Luc Sirois (Prompt Innov)
Ariel Sim (Deloitte)
CONFÉRENCIERS :
6 novembre 2018 | HEC Montréal
L’UX sous toutes
ses formes
L’UX sous toutes
ses formes
Chaire UX et Tech3Lab :

L’expérience réellement vécue par les utilisateurs : Vers de nouveaux outils de visualisation pour vos tests UX

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie L’expérience réellement vécue par les utilisateurs : Vers de nouveaux outils de visualisation pour vos tests UX

Ähnlich wie L’expérience réellement vécue par les utilisateurs : Vers de nouveaux outils de visualisation pour vos tests UX (20)

Mehr von Pierre-Majorique Léger

Mehr von Pierre-Majorique Léger (20)

L’expérience réellement vécue par les utilisateurs : Vers de nouveaux outils de visualisation pour vos tests UX