Intervention dans le cadre du cours UI Mobiles, Haute-Ecole Arc, Neuchâtel, Avril 2016

1. USERVALUE
utilisabilité + expérience utilisateur, He-Arc le 29 avril 2016 (Julien Roland)
UI Mobiles

2. Julien
Dorit
USERVALUE

3. 3messages à retenir à propos d’UX
Bon pour les utilisateurs … mais aussi pour le business
Pas d’UX sans utilisateurs : des Tests … et encore des Tests
On peut mesurer, quantifier l’UX … et on doit le faire

4. - Easy to use
- Efficient
- Attractive
- Productive
- Generate Clicks
- Convincing
UX, Usability, Software
Ergonomics … ?
Make digital user
interfaces more
efficient, for Users and
for Businesses
Website
Apps
Smart TV
Software
Credit Photo: AP
User Interfaces that Work ?

5. Pourquoi améliorer l’UX ?
Maximiser les bénéfices (ROI) de
votre projet numérique
- des utilisateurs satisfaits qui
reviennent (loyauté)
- des interfaces qui optimisent
les conversions
- des applications plus
productives
Credit Photo: http://wallpaperus.org/laptops-angry-1366x906-wallpaper-836413/

6. L’expérience utilisateur
- En quelques chiffres
Source : Flickr
UX101,NielsenNormanGroup
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Quittent le site à cause
d'une mauvaise
expérience
Des acheteurs parlent de
leur mauvaise
expérience
On dépense 10% en
budget pour gagner 83%
en KPI
68%
44%
10%
83%

7. Une vraie prise de conscience de
l’importance de l’expérience utilisateur

8. Sources : www.userexperience.co.nz
… même s’il n’est pas toujours
simple de convaincre les clients
de « faire de l’UX »

9. RECONTRER DE VRAIS UTILISATEURS
USERVALUE

10. Planifier le processus
de conception centrée
sur l’opérateur humain
La solution conçue
satisfait les
exigences utilisateurs
Itérer le cas échéant
Comprendre et spécifier
le contexte d’utilisation
Spécifier les exigences
utilisateurs
Proposer des solutions de
conception satisfaisant
aux exigences utilisateurs
Évaluer les conceptions
par rapport aux
exigences utilisateurs :
Tests utilisateurs, Audit
ergonomique, surveillance
long terme
D’après ISO 9241:2010
UN PROCESSUS DE CONCEPTION CENTRÉE UTILISATEUR

11. Lab
Field
Without use
From C. Rohrer
What people
DO
What people
SAY
WHY and
HOW?
HOW
MUCH ?
User Tests
Eye Tracking
Remote User Tests
Contextual Inquiries
Online UX Surveys
Questionnaires –
Satisfaction
Card sorting
Focus Groups
A/B Testing
Top Tasks Analysis
DES MÉTHODES D’ÉVALUATION

12. Planifier le processus
de conception centrée
sur l’opérateur humain
La solution conçue
satisfait les
exigences utilisateurs
Itérer le cas échéant
Comprendre et spécifier
le contexte d’utilisation
Spécifier les exigences
utilisateurs
Proposer des solutions de
conception satisfaisant
aux exigences utilisateurs
Évaluer les conceptions
par rapport aux
exigences utilisateurs :
Tests utilisateurs, Audit
ergonomique, surveillance
long terme
D’après ISO 9241:2010

13. TEST UTILISATEUR, DANS NOTRE LAB
USERVALUE

14. TEST UTILISATEUR, DEPUIS LA SALLE D’OBSERVATION
USERVALUE

15. TEST UTILISATEUR, SUR UNE TABLETTE
USERVALUE

16. Discover usability problems
Assess the « quality » of
one or more interfaces
(incl. measures)
Formative Tests
Summative Tests
Vs.
?

17. WHEN TO DO USER TESTS ?
Define
what to
improve
Test
iteratively
Compare
2 designs
Assess the
quality of UX
Old design
New design

18. PRÉPARER UN TEST UTILISATEUR
qu’est-ce qui pose problème ?
quels sont les utilisateurs cibles concernés ?
recruter les utilisateurs cibles pour le test
spécifier les tâches que l’on veut tester à travers des scénarios
spécifier les données que l’on veut recueillir
préparer le guide d’entretien
valider le guide d’entretien avec le client
faire 1 ou +sieurs tests d’essai
préparer le setup technique

19. LES SCÉNARIOS
- « Vous voulez faire une randonnée autour du Col du
Mollendruz ce WE. Pouvez-vous me trouver la météo
pour Dimanche sur ce site Web ? »
- « Vos chaussures de course à pied sont usées et
vous souhaitez les remplacer. Pouvez-vous en
acheter une paire adaptée à vos besoins, dans votre
pointure sur ce site E-commerce ? »
- « Imaginons que vous souhaitiez boire un grand
Capuccino, fait avec des graines de café
moyennement fortes, un ajout de goût caramel et une
dose extra de café. Pouvez-vous préparer cette
boisson sur ce distributeur ? »

20. DES EXEMPLES DE SCÉNARIOS ?
1 2 3
4
5 6

21. LE GUIDE D’ENTRETIEN : BRIEFING / PRÉ-TEST

22. LE GUIDE D’ENTRETIEN : TÂCHES

23. LE GUIDE D’ENTRETIEN : POST-TEST

24. Guerilla
À distance, non
modéré
À distance,
modéré
En Lab
Desktop, Mobile / Responsive
Apps (Smartphone)
Intranet/App. Enterprise/App. Industrielle
Sélection des profils participants
Participants distribués géographiquement
Sessions dans plusieurs langues
Adapté à des tests fréquents, itératifs
Données qualitatives riches sur les comportements
et attentes
Sessions
Limitées
Pas de
modérateur
Nombre de participants (typiquement)
< 10
Non limité
8 – 16
8 - 16
Durée de chaque session
< 20 minutes
(3-5 tâches)
20 minutes
(* 5 tâches)
45min – 1h15
(* 15 tâches)
45min – 1h15
(* 15 tâches)
Données quantitatives, échantillon réduit (8 - 12)
Données quantitatives, échantillon large
Rapport, Vidéos
Minimal
Pas de vidéos
Observer les sessions en temps réel
Debriefing en temps réel avec les clients pendant les
sessions
Mode d’intervention
- Wireframing
- UX Coaching
- Combi. Lab
- UX Coaching
Stand alone
Stand alone

25. TEST UTILISATEUR À DISTANCE, NON MODÉRÉ
https://www.loop11.com/account/

26. MESURER L’EXPÉRIENCE UTILISATEUR

27. LES ÉVALUATIONS POST-TÂCHES
6 10 2 3 4 9 11 12 5 1 7 8
S N/A F S F N/A S F N/A N/A F N/A
S S S S S S S S S S S S
F F F F F F F F F S S S
S F S S S F S S F S S S
F F F F F F F S S S F S
S S S S S S S S S S S S
N/A N/A N/A N/A N/A N/A N/A N/A N/A S N/A N/A
F F F F F F F S S S S S
N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A
S S S S S S S S S S S S
N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A
F F S F F F S S S S S F
F S S S S F F F S F S S
F S S S S S S S N/A S S S
S F F F F S S F F S S S
F F F F N/A N/A F F N/A F S S
#tâche
# participant
1.00
2.00
3.00
4.00
5.00
6.00
7.00
PERFORMANCE
DIFFICULTÉ

28. LES QUESTIONNAIRES POST-TEST : LE SUS

29. LES QUESTIONNAIRES POST-TEST : LE SUS
0
10
20
30
40
50
60
70
80
90
100
SUS Score
49
Non acceptable
Marginal
Acceptable
Pauvre
OK
Bien
Excellent
(score, avec marge d’erreur, 95% confiance)

30. LES QUESTIONNAIRES POST-TEST : L’ATTRAKDIFF

31. LES QUESTIONNAIRES POST-TEST : L’UX SCORE

32. DÉSIRABILITÉ

33. Flickr
- Meet real users
- Test and observe their behaviour
- Don’t just listen to what they say

34. Tests Utilisateurs
≠
Focus Groups
A. Colville, « Cheval et Train »
WHY YOU NEED TO TEST,
NOT JUST ASK WHAT THEY WANT

35. WHY YOU NEED TO OBSERVE,
NOT JUST ASK WHAT THEY THINK
« Strangers to ourselves » book cover, Th. Wilson

36. FOCUS GROUP VS. TEST UTILISATEUR : TROUVER LES DIFFÉRENCES !

37. - Make the users real
- Show HCD in practice, don’t tell
- Convince with facts, not opinions
- Agree on what needs to be done
MAKE CHANGE HAPPEN THROUGH TESTING

38. - Shorter, lighter Tests
- Focus on Formative Testing
- UX « stream » is 1-step ahead
- Test on what’s available
- Do the UX « basics » upfont
WHAT DOES AGILE MEAN FOR UX TESTING ?

39. 4key messages about UX Testing
- Good for Users … but also good for Businesses
- No UX without Users : Test … and more Tests
- It’s possible to measure UX … and you should do it
- Design is a social process, and Testing is a tool for change

40. EXERCICE : REALISER UN TEST UTILISATEUR
Doodle
1 / "Vous voulez rencontrer vos amis pour un apéro à Neuchâtel
dans les semaines qui viennent. Pour cela vous souhaitez fixer une
date qui convienne à tous parmi le 4 mai, le 6 mai et le 11 mai.
Grâce à l'application pouvez-vous fixer avec vos amis une date
qui convienne à tout le monde ? »
2 / "Maintenant vous vous rendez-compte que vous n'êtes plus
disponible le 6 mai, comment pouvez-vous l'indiquer à vos amis
avec l’App ? »
3 / "Maintenant je vais vous poser une question : Si vous avez
invité 3 amis, Martine, Jean et Pierre - qui va voir les réponses de
Martine au sondage ? »
4 / "Vous souhaitez être la / le seul à voir les réponses au
sondage : Comment feriez-vous ? »
5 / "On imagine enfin, que vous décidez finalement d'appeler vos
amis au lieu d'utilisez Doodle, et voulez supprimer le sondage :
Comment feriez-vous ? Comment pensez-vous que vos amis vont
être informés ? »

41. Planifier le processus
de conception centrée
sur l’opérateur humain
La solution conçue
satisfait les
exigences utilisateurs
Itérer le cas échéant
Comprendre et spécifier
le contexte d’utilisation
Spécifier les exigences
utilisateurs
Proposer des solutions de
conception satisfaisant
aux exigences utilisateurs
Évaluer les conceptions
par rapport aux
exigences utilisateurs :
Tests utilisateurs, Audit
ergonomique, surveillance
long terme
D’après ISO 9241:2010

42. UNDERSTAND WHAT’S REAL
americanhistory.si.edu
- Real processes
- Hard to verbalize
- Rich picture

43. ETHNOGRAPHIES : OBSERVER ET COMPRENDRE
USERVALUE

44. TRI DE CARTES
USERVALUE

45. TRI DE CARTES
USERVALUE

46. Planifier le processus
de conception centrée
sur l’opérateur humain
La solution conçue
satisfait les
exigences utilisateurs
Itérer le cas échéant
Comprendre et spécifier
le contexte d’utilisation
Spécifier les exigences
utilisateurs
Proposer des solutions de
conception satisfaisant
aux exigences utilisateurs
Évaluer les conceptions
par rapport aux
exigences utilisateurs :
Tests utilisateurs, Audit
ergonomique, surveillance
long terme
D’après ISO 9241:2010

47. WIREFRAME : AVEC BALSAMIQ

48. UI DESIGN PATTERNS
1 2
3 4
5
6
8

49. https://en.wikipedia.org/wiki/NS_Savannah
ADAPTATION À LA TÂCHE
Lorsque l’interface
s’appuie sur les
caractéristiques de
la tâche plutôt que
sur la technologie

50. ADAPTATION À LA TÂCHE

51. Image from: http://en.3cbang.com/view/19925.
CARACTÈRE AUTODESCRIPTIF
Lorsqu’on sait à
tout moment où
on est, qu’est-ce
qu’on peut faire et
comment on peut
le faire

52. CARACTÈRE AUTODESCRIPTIF

53. https://www.flickr.com/photos/schluesselloch/4744914571/
CONFORMITÉ AUX ATTENTES DES UTILISATEURS
Lorsque l’interface
correspond aux
besoins prévisibles
de l’utilisateur et
aux conventions

54. CONFORMITÉ AUX ATTENTES DES UTILISATEURS

55. FACILITÉ D’APPRENTISSAGE
Lorsque l’interface
soutient et guide
l'utilisateur dans
l'apprentissage de
l'utilisation
du système

56. FACILITÉ D’APPRENTISSAGE

57. CONTRÔLE UTILISATEUR
Lorsque
l'utilisateur peut
contrôler
l'interaction
jusqu'à atteindre
son but

58. CONTRÔLE UTILISATEUR

59. TOLÉRANCE À L’ERREUR
Lorsque l’interface
permet d’obtenir le
résultat prévu avec
une action
corrective
minimale, malgré
des erreurs de
saisie
Image from: http://en.3cbang.com/view/19925.

60. TOLÉRANCE À L’ERREUR

61. APTITUDE À L’INDIVIDUALISATION
Lorsque les
utilisateurs
peuvent modifier
l’interface pour
l’adapter à leurs
capacités et à
leurs besoins

62. APTITUDE À L’INDIVIDUALISATION

63. hvincent2000.wordpress.com, uxmyths.com
QUELQUES MYTHES UX

64. MYTHE : LES UTILISATEURS VEULENT PLUS DE FONCTIONS
mcgovern

65. MYTHE : VOUS ÊTES COMME VOS UTILISATEURS
Flickr

66. Source : sandrinedet.wordpress.com
MYTHE : SI VOUS ÊTES UN EXPERT, PAS BESOIN DE TESTER

67. nielsen
MYTHE : IL FAUT FORCÉMENT BEAUCOUP D’UTILISATEURS POUR TESTER

68. 8 RÈGLES D’OR DE L’UX
concevez pour vos utilisateurs, avant tout
impliquez vos utilisateurs, ils vous le rendront bien
enlevez tout ce que vous pouvez, mais pas plus
chaque détail compte, vraiment
ne réinventez pas la roue, utilisez les patterns
testez méthodologiquement avec de vrais utilisateurs
restez détachés de « votre » design
défendez des choix éthiques, « bons » pour les utilisateurs

69. ONE THING WELL

70. ONE THING WELL

71. ONE THING WELL

72. MES 8 RÈGLES D’OR DE L’UX
concevez pour vos utilisateurs, pas pour vos clients
impliquez vos utilisateurs, ils vous le rendront bien
enlevez tout ce que vous pouvez, mais pas plus
chaque détail compte, vraiment
ne réinventez pas la roue, utilisez les patterns
testez méthodologiquement avec de vrais utilisateurs
restez détachés de « votre » design
défendez des choix éthiques, « bons » pour les utilisateurs

73. L’optimisation de la conversion

75. - Tester des CHANGEMENTS SIMPLES, mais avec un impact potentiel grand
- Tester chaque changement SUFFISAMMENT LONGTEMPS pour que ce soit
significatif, en intégrant au moins un cycle business complet
- Tester CONTINUELLEMENT pour optimiser sans cesse son service Web

76. Identifier des opportunités d’optimisation
-- avec le modèle LIFT
WiderFunnel

77. 1. Proposition de Valeur : Pas clair ce qu’on va
trouver sur ce Shop : « Pourquoi acheter là et
pas ailleurs ? »
2. Clarté : Le moteur de recherche est trop petit,
on ne le voit pas : « Comment trouver un
produit ? »
3. Clarté : Les menus sont peu visibles, et noyés
dans les autres infos : « Qu’est-ce qu’il y a dans
le Shop ? »
4. Distraction / Clarté / Urgence : La très grande
galerie attire toute l’attention sur des
« exclusivité » que l’on peut juste « découvrir » :
« Pourquoi me propose-t-on cela ? », « Est-ce
que l’offre va durer longtemps ? »
5. Pertinence : Titre = « Nos magasins » induit en
erreur, en fait il s’agit des promotions dans les
magasins, et non la liste des magasins
6. Anxiété : Les éléments qui rassurent « sûr et
pratique » sont peu visibles, car noyés dans la
masse d’images peu structurée et dans la
couleur de fond de page

78. Which Test Won ?

79. A
B
+ ? %
3 SUISSES

80. A
B
+ ? %
ETAM

81. A
B
+ 50 %
GOOGLE

82. SUZUKI
A
B
+ ? %

83. A
B
+ 46 %
THE GUARDIAN

84. A
B
+ 12 %
USTREAM

85. A
B
+ 23.3%
1-800-DENTIST
A

86. OXFAM (MOBILE)
A
B
+ ? %

87. EXTRASPACE STORAGE (MOBILE)
A
B
+ ? %

89. - UI « qui marche » = bonne pour les utilisateurs ET pour le business
- Améliorer l’Expérience Utilisateur = ROI ++ dans votre projet
- Faire de l’UX sans voir les utilisateurs, c’est pas faire de l’UX
- Observer ce que les utilisateurs font, pas demander ce qu’ils pensent
- Nous ne sommes pas rationnels dans nos décisions, mais influençables
- Il faut influencer les utilisateurs dans le bon sens (« good UI »)
- Pour optimiser il faut diminuer les frictions, et persuader

90. julien.roland@uservalue.ch
USERVALUE