1. CONCEPTION
Master 2 : Management et Ingénierie de la Communication Numérique Interactive
F. Utilisabilité
Janvier 2010
Ecole des Gobelins
David Raichman
Senior UX Designer @ OgilvyInteractive
2. Conception | Utilisabilité
Les cours de conception
A. Introduction au design d’expérience utilisateur (UXD)
B. Les livrables de l’UXD
C. Utilisabilité
D. Framework fonctionnel et stratégie des contenus
E. Design d’interaction, design d’interface et protoypage
F. Utilisabilité
3. Conception | Utilisabilité
“If the user can't use it, it doesn't work.”
Susan Dray, usability consultant.
4. Conception | Utilisabilité
“Usability rules the Web. Simply stated, if the customer
can't find a product, then he or she will not buy it.”
Jakob Nielsen
6. Conception | Utilisabilité
1. Introduction / Ergonomie et Utilisabilité
‣Ergonomie et Utilisabilité sont des notions très proches
‣L’ergonomie s’intéresse à la relation homme / travail
9. Conception | Utilisabilité
1. Introduction / Ergonomie et Utilisabilité
‣Ergonomie et Utilisabilité sont des notions très proches
‣L’ergonomie s’intéresse à la relation homme / travail
‣L’utilisabilité s’intéresse à l’utilisation d’un produit ou d’un
service dans un contexte qui n’est pas nécessairement lié au
travail
10. Conception | Utilisabilité
1. Introduction / Ergonomie et Utilisabilité
Usability Tree
Social
acceptability
System
acceptability
Practical
acceptability
D’après Jakob Nielsen, Usability Engineering, Academic Press, 1993
11. Conception | Utilisabilité
Modèle : courbe d’adoption de l'innovation
“ chasm ”
population %
2,5% 13,5% 34% 34% 16%
Premiers Majorité temps
Innovateurs Majorité
adopteurs en Retardataires
avancée
retard
12. Conception | Utilisabilité
Cycle de vie et paradigme technologique
Stabilisation / Fin
croissance
Croissance
rapide
Début
temps
Paradigme 1
13. Conception | Utilisabilité
Cycle de vie et paradigme technologique
Stabilisation / Fin
croissance
Croissance
rapide
Extinction du
Début
paradigme
temps
Paradigme 1
14. Conception | Utilisabilité
Cycle de vie et paradigme technologique
Début nouveau
paradigme
Stabilisation / Fin
croissance
Croissance
rapide
Début
temps
Paradigme 1 Paradigme 2
15. Conception | Utilisabilité
1. Introduction / Ergonomie et Utilisabilité
Usability Tree
Social
acceptability
System
acceptability
Practical
acceptability
D’après Jakob Nielsen, Usability Engineering, Academic Press, 1993
16. Conception | Utilisabilité
1. Introduction / Ergonomie et Utilisabilité
Usability Tree
Social
acceptability
System Usefulness
acceptability
Cost
Practical
acceptability Compatibility
Reliability
Etc.
D’après Jakob Nielsen, Usability Engineering, Academic Press, 1993
17. Conception | Utilisabilité
1. Introduction / Ergonomie et Utilisabilité
Usability Tree
Social
acceptability
Utility
System Usefulness
acceptability
Usability
Cost
Practical
acceptability Compatibility
Reliability
Etc.
D’après Jakob Nielsen, Usability Engineering, Academic Press, 1993
18. Conception | Utilisabilité
1. Introduction / Ergonomie et Utilisabilité
Usability Tree
Social
acceptability
Utility
System Usefulness
acceptability
Usability
Easy to learn
Cost
Efficient to use
Practical
acceptability Compatibility Easy to remember
Few errors
Reliability
Subjectively pleasing
Etc.
D’après Jakob Nielsen, Usability Engineering, Academic Press, 1993
20. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Tâche et activité
Tâche Activité
‣Ce qui doit être fait ‣Ce qui est fait
‣Objectif que cherche à atteindre ‣Moyens mis en oeuvres pour réaliser la
l’utilisateur tâche prévue
‣Décomposable en sous-tâches ‣Une même tâche prévue peut être
‣Se nomme également «tâche prévue» accomplie par différentes activités
‣Se nomme également «tâche effective»
21. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Modèles cognitifs
‣Model Human Processor (MHP) de Card, Moran et Newel
22. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Modèles cognitifs
Model Human Processor
Système moteur
Réponse Entrée
Système cognitif
Interface
Pensée Homme Application Calcul
Système perceptif
Lecture Sortie
23. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Modèles cognitifs
Model Human Processor
Paramètre Moy. Plage
Temps du mouvement occulaire 230 ms 70 - 700 ms
Cycle du processeur perceptuel 100 ms 50 - 200 ms Sens
Cycle du processeur cognitif 70 ms 25 - 170 ms
Cycle du processeur moteur 70 ms 30 - 100 ms
Capacité de la mémoire à court terme 7 mnèmes 5 - 9 mnèmes Processeur perceptif Système
perceptif
Stockage de l’image visuelle Stockage de l’image sonore
Mémoire à court terme Mémoire à long terme
Système
cognitif
Processeur cognitif
Processeur moteur Réponse Système
(mouvements des yeux, moteur
bras, bouche, jambes...)
24. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Modèles cognitifs
‣Modèle cognitif (MHP) de Card, Moran et Newel
‣Théorie de l’action de Norman
25. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Modèles cognitifs
Théorie de l’action
But de l’utilisateur
Distance Distance
sémantique sémantique
d’évaluation
d’exécution Plan Evaluation
Suite d’actions Interprétation
Distance Exécution Perception Distance
articulatoire articulatoire
d’exécution d’évaluation
Action motrice
27. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme
‣ La loi de la proximité : nous regroupons des blocs d'abord
les plus proches les uns des autres.
29. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme
‣ La loi de la proximité : nous regroupons des blocs d'abord
les plus proches les uns des autres.
‣ La loi de similitude : si la distance ne permet pas de
regrouper des blocs, nous nous attacherons ensuite à
repérer les plus similaires d’entre eux.
31. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme
‣ La loi de continuité : des parties en mouvement ayant la
même trajectoire sont perçues comme faisant partie de la
même forme.
33. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme
‣ La loi de continuité : des parties en mouvement ayant la
même trajectoire sont perçues comme faisant partie de la
même forme.
‣ La loi de clôture : une forme fermée est plus facilement
identifiée comme une figure (ou comme une forme) qu'une
forme ouverte.
35. Conception | Utilisabilité
2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme
Ces lois agissent en même temps et sont
parfois contradictoires.
37. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Introduction
‣Les principes d’utilisabilité sont des conséquences des
éléments théoriques d’IHM
38. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Introduction
‣Les principes d’utilisabilité sont des conséquences des
éléments théoriques d’IHM
‣Majoritairement, ces principes permettent d’optimiser la
distance sémantique d'exécution et d’évaluation
39. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Flux de lecture
Diagramme de Gutenberg
zone optique primaire
zone secondaire
Axe d’orientation
zone faible
zone terminale
40. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Flux de lecture
Diagramme de Gutenberg
zone optique primaire
logo
search field(s) zone OK
zone secondaire
cat Bt 1 cat Bt 2 cat Bt n Cart zone
Breadcrumbs zone
Browsing
area Contents area
Axe d’orientation
zone faible
Footer zone terminale
42. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Flux de lecture
Modèle en F
logo
search field(s) zone OK
cat Bt 1 cat Bt 2 cat Bt n Cart zone
Breadcrumbs zone
Browsing
area Contents area
Footer
47. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Les composants d’interfaces
Un composant d'interface est un élément de base
d'une interface graphique avec lequel un utilisateur
peut interagir
48. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Les composants d’interfaces
Les éléments d'affichage simple
o Étiquette (Label)
o Icône
Les boutons
o Bouton poussoir (button)
+ Boutons de barre d'outils
o Case à cocher (Check box)
o Bouton radio (Radio button)
Les menus
o Menu de commande (Command menu)
o Menu contextuel (Context menu)
o Menu circulaire, (Pie menu)
Les conteneurs
o Barre d'outils (Toolbar)
o Cadre (Frame)
o Onglet (Tabs)
o Barre de défilement (Scrollbar)
o Tiroir (informatique) (drawer) sous Mac OS X, un panel
déroulant attaché à une fenêtre
Les listes
o Liste arborescente (Tree view)
o Vue tabulaire Tableau (Grid view)
o Boîte combinée (Combo box)
Les champs utilisateur
49. o Barre d'outils (Toolbar)
Conception | Utilisabilité
o Cadre (Frame)
o Onglet (Tabs)
2. Principes d’utilisabilité des interfaces / Les composants d’interfaces
o Barre de défilement (Scrollbar)
o Tiroir (informatique) (drawer) sous Mac OS X, un panel
déroulant attaché à une fenêtre
Les listes
o Liste arborescente (Tree view)
o Vue tabulaire Tableau (Grid view)
o Boîte combinée (Combo box)
Les champs utilisateur
o Zone de texte (Text box ou Edit Field)
o Zone de mot de passe (Password Field)
o Zone de sélection numérique (Spin Box)
o Curseur (Slider) À ne pas confondre avec le curseur de
souris
Les aides au retour utilisateur
o Barre de progression (Progress bar)
o Barre d'état (Status bar)
o Bulle d'aide (Tooltip)
Les fenêtres (Window)
o Fenêtre simple
o Fenêtre modale (Modal window)
o Boîte de dialogue (Dialog box)
o Palette (flottante) (Utility window)
50. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Eviter la 3D et le photoréalisme
‣ Sauf dans le cas des icônes
51. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Eviter la 3D et le photoréalisme
‣ Sauf dans le cas des icônes
52. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Etre le plus universel possible
‣ Eviter de représenter un concept général avec une image
spécifique
53. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Simplifier les formes
‣ Ne garder que les traits caractéristiques minimaux
‣ Attention à ne pas trop simplifier le composant !
54. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Simplifier les formes
‣ Ne garder que les traits caractéristiques minimaux.
‣ Attention à ne pas trop simplifier le composant
55. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Visibilité
‣ Un composant d’interface doit être perçu comme
préhensible. Le rollover est insuffisant !
56. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
57. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Affordance
‣ La forme du composant doit donner des indices
sur son utilisation
58. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Affordance
‣ La forme du composant doit donner des indices
sur son utilisation
III
59. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Affordance
‣ La forme du composant doit donner des indices
sur son utilisation
III
60. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Feedback
‣ Toute interaction effective avec un composant
d’interface doit être marquée par un
changement d’état de celui-ci.
‣ Action réaction
‣ Les états off, rollover, clické, on... doivent se
distingués visuellement
61. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Loi de Fitt
‣ Une cible est d’autant plus rapide à atteindre
qu’elle est proche et grande.
‣ Cette «loi» permet d’optimiser la distance
articulatoire d'exécution et d’évaluation
"D % Distance à parcourir par le curseur
T = k.ln$ +1' k!100ms
!
#W &
D
Temps moyen
! du déplacement Largeur
du curseur (ms) de la cible
62. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Loi de Hicks
‣ Le temps de prise de décision d’un utilisateur
augmente en fonction du nombre de
possibilités qui lui sont offertes.
A B C
63. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Loi de Hicks
‣ Le temps de prise de décision d’un utilisateur
augmente en fonction du nombre de
possibilités qui lui sont offertes.
64. Conception | Utilisabilité
2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
‣ Loi de Hicks
‣ Le temps de prise de décision d’un utilisateur
augmente en fonction du nombre de
possibilités qui lui sont offertes.
‣ Trop d’options pour les utilisateurs augmentent
la distance sémantique d’exécution et d’évaluation
66. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Problèmatique
Easy to learn
Usability
Efficient to use
Easy to remember
Few errors
Subjectively pleasing
Comment mesure-t-on ces
paramètres ?
69. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Succès binaire d’une tâche
‣Succès (tâche) = 1 et Succès (tâche) = 0
‣Intervalle de confiance
I = X% " P(rmin < r < rmax ) = X%
!
Le calcul de l’intervalle de confiance est fondé sur la loi binomiale,
plusieurs techniques de calculs sont possibles, notamment la méthode
dite de Wald (cf http://www.measuringusability.com/wald.htm)
!
71. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Succès binaire d’une tâche
‣Succès (tâche) = 1 et Succès (tâche) = 0
‣Intervalle de confiance
Pour la tâche 1, P(39%<67% de réussites< 95%)=95%
73. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Succès binaire d’une tâche
‣Succès (tâche) = 1 et Succès (tâche) = 0
‣Intervalle de confiance
74. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Succès binaire d’une tâche
‣Critères de mesures
‣3 tentatives
‣Déterminer un temps seuil
78. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche
‣Problématique de la mesure
‣difficulté de manipulation du chronomètre
‣difficulté du reporting live
‣Techniques de mesures
‣enregistrement video
‣logiciel dédié
79. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche
Exemple
Les temps sont en secondes
80. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche
Exemple
Les temps sont en secondes
82. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche
Exemple
Pourcentage de participants ayant réalisé les tâches en moins d’une minute (comment détermine-ton un temps seuil ?)
84. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche
‣L’efficacité peut être envisagée comme la
combinaison de deux mesures
‣Le succès d’une tâche
‣Le temps de réalisation de la tâche
88. Conception | Utilisabilité
3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche
‣L’apprenabilité peut s’évaluer en mesurant
l’évolution de la réalisation d’une même tâche par
le même utilisateur
‣Durant la même session de mesures mais
espacés par des intervalles de temps assez longs
‣Sur plusieurs sessions
91. Conception | Utilisabilité
5. Tests utilisateurs / Introduction
Rappel
Types de données
Objectifs et Préférentielles Évaluatives Génératives Comportements
attitudes
Renseigne sur Renseigne sur un
Renseigne sur les
ce qui est compris ou accompli environnement mental dans lequel
opinions, goûts et désirs
avec un outil des tâches doivent être accomplies
92. Conception | Utilisabilité
5. Tests utilisateurs / Introduction
Rappel Qualitatif
Insight
Ethnographie
Design participatif
Tests d’utilisabilité
Interviews
Modèles mentaux
Focus groups
Tri de cartes
Objectifs & attitudes Comportements
Ce que les gens disent Ce que les gens font
Analyses des mots- Eye tracking
clefs de recherche
Tests d’utilisabilité automatisés
Questionnaires
Analyse trafic et data logs
Analyse de données
d’un service clients
A / B test
Quantitatif
Validation
93. Conception | Utilisabilité
5. Tests utilisateurs / Introduction
Rappel Qualitatif
Insight
Ethnographie
Design participatif
Tests d’utilisabilité
Interviews
Modèles mentaux
Focus groups
Tri de cartes
Objectifs & attitudes Ut il isa bilité Comportements
Ce que les gens disent Ce que les gens font
Analyses des mots- Eye tracking
clefs de recherche
Tests d’utilisabilité automatisés
Questionnaires
Analyse trafic et data logs
Analyse de données
d’un service clients
A / B test
Quantitatif
Validation
96. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Introduction aux prototypes
A quoi servent les prototypes ?
SHARED COMMUNICATION
USABILITY TESTING
WORKING THROUGH A
DESIGN
GAUGING TECHNICAL
FEASIBILITY
SELLING YOUR IDEA
INTERNALLY
97. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Introduction aux prototypes
A quoi servent les prototypes ?
‣ Communiquer avec l’équipe, le client
‣ Graphistes
‣ Développeurs (spécifications du motion design...)
‣ Montrer un concept interactif en action
‣ Mettre en évidence des aspects fonctionnels,
techniques ...
‣ Design
‣ Tester un principe d’interface
‣ Construire par itération
98. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Introduction aux prototypes
A quoi servent les prototypes ?
‣ Evaluer la logique de l’interface
‣ Mettre à l’épreuve les spécifications (cas non traités, erreurs
logiques....)
‣ Déceler les points techniques critiques (faisabilité)
‣ Tester l’utilisabilité de l’interface
‣ Repérage des zones principales de l’interface
‣ Utilisation des composants d’interface
‣ Wording (label, instructions...)
‣ Architecture d’information (logique de navigation, organisation
des contenus...)
‣ Efficacité du design graphique
99. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Introduction aux prototypes
A quoi servent les prototypes ?
Design visuel
Prototypage
Design d’interaction
Test
Wireframes
Optimisations
100. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Introduction aux prototypes
A quoi servent les prototypes ?
‣ Optimiser le temps et les ressources
‣ Anticiper les problèmes ergonomiques...
‣ Anticiper les problèmes logiques....
‣ Anticiper les problème techniques....
... Avant le graphisme et le développement
101. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Typologie des prototypes
Interactif
Prototype Prototype
papier digital
Low résolution Hi résolution
Sketching Ecrans
Statique
102. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Typologie des prototypes
Interactif
Prototype Prototype
papier digital
es
u rc
Low résolution
s so Hi résolution
Re
+
ps
Tem
Sketching Ecrans
Statique
103. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Typologie des prototypes
‣ Prototype papier
‣ Dessiné uniquement à la main
‣ Mixte : intégration de certains éléments imprimés par
(images, menus....)
104. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Typologie des prototypes
‣ Prototype papier
‣ Dessiné uniquement à la main
‣ Mixte : intégration de certains éléments imprimés par
(images, menus....)
105. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Typologie des prototypes
‣ Prototype papier
‣ Dessiné uniquement à la main
‣ Mixte : intégration de certains éléments imprimés par
(images, menus....)
‣ Prototype digital
‣ Codé (HTML, Flash...)
‣ Non-codé (Powerpoint, Keynote, Axure...)
106. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Typologie des prototypes
‣ Passer trop de temps sur le rendu du
prototype
‣ Les logiciels incitent souvent à parfaire le motion
design ou le graphisme alors qu’ils ne seront peut
être pas gardés après test !
‣ Souvent, un protoype rudimentaire peut être
suffisant pour tester la même chose qu’un
prototype plus abouti ! ... et donnera les mêmes
résultats.
‣ Croire à la réutilisabilité du code
‣ Très rare ou récupération d’une petite partie, sauf
framework spécifique ou méthode agile
107. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Critères d’un bon prototype
‣ Création
‣ A quelle vitesse le prototype peut-il être créé “from
scratch” ?
‣ Duplication
‣ Peut-on dupliquer rapidement les bases de l’interface du
prototype afin de décliner les différents états ?
‣ Modification
‣ Le prototype est-il facilement modifiable, réajustable pour
des tests ultérieurs ?
‣ Réalisme
‣ Le prototype présente-il un degré de réalisme visuel et
interactif nécessaire pour ce que l’on souhaite tester ?
108. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Arbre de décision
TEST
NON-STANDARD PROTOTYPE PAPIER
- étapes multiples
- orienté tâche
INFORMATIONNEL
- navigation non-standard
APPLICATIF
STANDARD WIREFRAME DIGITAL PROTOTYPE DIGITAL
DESSIN PAPIER - wording
D’INTERFACE - fonctions spécifiques
AUDIOVISUEL
TEST
STORYBOARD + MOTION DESIGN WIREFRAME ANIMÉ PROTOTYPE DIGITAL
- interactions
- transition et orientation de l’utilisateur
TEST
109. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Le matériel
‣ Support dur de taille supérieure au prototype
‣ Papier blanc
‣ Différentes tailles et couleurs de stylo et effaçables
‣ Papier transparent de couleur (jaune, rose..) (permet
de faire du highlighting)
‣ Papier transparent incolor (pour les formulaires)
‣ Ciseaux
‣ Scotch transparent (pour attacher les différents
composants)
‣ Pâte à fixe (pour poser les différents états de
l’interface)
110. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
111. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
112. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
113. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
114. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
115. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
116. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
117. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
118. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
119. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
120. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
‣ Support
‣ On peut utiliser une impression faite à partir de l’interface
réelle (OS, Navigateur, Carcasse d’un appareil mobile..)
‣ Les éléments d’interface
‣ Boutons et check box
‣ Onglets
‣ Menu déroulant
‣ Sélection et highlight
‣ Boite expandable
121. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Prototypes papiers
Les prototypes papiers supposent deux
personnes : celui qui doit simuler le
comportement de l’interface en fonction des
actions de l'utilisateur et le testeur.
123. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Préparation
‣ Phases
‣ Identification des éléments à tester
‣ Identification du public cible
‣ Recrutement du panel
‣ Rédaction du test : scénario du test, questionnaires
‣ Montage du Lab
‣ Test
‣ Analyses
‣ Rapport
124. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Préparation
‣ Redaction du test
‣ Questionnaire
‣ Guide d’entretien
‣ Exemple
125. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Préparation
‣ Recrutement du panel
‣ Segmentation du public
‣ Constitution de groupes
‣ Combien d’utilisateurs ?
126. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs
Montage du Lab
127. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Montage du Lab
128. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Montage du Lab
‣ Environnement
‣ isolé, calme
‣ conditions proche du contexte d’usage
‣ ne perturbe pas l’utilisateur l'utilisateur
129. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Montage du Lab
‣ Matériel
‣ Caméras / webcam
‣ Micro
‣ Eyetracker
‣ Logiciels
‣ Camtasia Studio
‣ ScreenFlow/silverback
‣ Snapz Pro
‣ www.clicktale.com
‣ crazyegg.com
130. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Montage du Lab
131. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Montage du Lab
133. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Protocoles
‣ Questionnaires
‣ Tri de carte (ouvert ou fermé)
‣ Test de perception
‣ Eyetracking
‣ Test de mémorisation
‣ Analyse du parcours utilisateur
‣ Capture vidéo de l’écran, actions de l'utilisateur
‣ HeatMap
‣ Feedback oral de l’utilisateur enregistré (thinking aloud)
‣ ...
Il est possible de combiner plusieurs protocoles
134. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs
Recommandations pour le testeur
135. Conception | Design d’interface et design d’interaction
5. Tests utilisateurs / Recommandations pour le testeur
Ce qu’il ne faut jamais dire aux utilisateurs...
1. Dire « rappelez vous, nous ne vous testons pas» plus de 3 fois
2. Ne vous inquiétez pas, le précédent participant n’y arrivait pas non plus
3. Personne n’a jamais ça avant !
4. HA! HA! HA!
5. C’est impossible ! je ne savais pas que ça pouvait fonctionner comme ça
6. Pouvons nous faire une pause, vous regarder comme ça me fatigue un peu...
7. Je ne crois pas que les boutons soient cliquables
8. Ne vous sentez pas mal, certain s’y sont repris à plus de 10 fois
9. Etes vous sûr d’avoir déjà utiliser internet avant ?
136. Conception | Utilisabilité
C. Utilisabilité
1. Enjeux de la stratégie UX
2. Typologie des méthodes de recherche
3. Segmenter les utilisateurs
4. Les personas
5. Premiers éléments de design fonctionnel
6. Références
137. Conception | Utilisabilité
6. Références / Bibliographie
Tullis & Albert, Measuring the User Experience, 2008, Morgan Kaufmann
Rubin, Chisnel, Spoll, Handbook of Usability Testing, 2008, Wiley
Snyder, Paper Prototyping, 2003, Morgan Kaufmann
Boucher, Ergonomie web : pour des sites web efficaces, 2007, Eyrolles
Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders
Spencer, Card Sorting, 2009, Rosenfeld Media
Brown, Communicating Design, 2007, New Riders
Baccino, Bellino, Colombi, Mesure de l'Utilisabilité des Interfaces, 2005, Hermès
138. Conception | Utilisabilité
6. Références / Webographie
http://www.useit.com/ (Jakob Nielsen)
http://www.infodesign.com.au/usabilityresources
http://www.measuringusability.com/index.php (Mesure de l’utilisabilité)
http://www.yorku.ca/mack/GI92.html (Loi de Fitt)
http://www.boxesandarrows.com/archives/card_sorting_a_definitive_guide.php (tri de cartes)