Cours (F) Gobelins Master 2 MICNI

3 378 vues

Publié le

Module de conception MICNI : Cours sur l'utilisabilité

Publié dans : Design, Technologie
1 commentaire
11 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
3 378
Sur SlideShare
0
Issues des intégrations
0
Intégrations
47
Actions
Partages
0
Téléchargements
263
Commentaires
1
J’aime
11
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours (F) Gobelins Master 2 MICNI

  1. 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. 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. 3. Conception | Utilisabilité “If the user can't use it, it doesn't work.” Susan Dray, usability consultant.
  4. 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
  5. 5. Conception | Utilisabilité F. Utilisabilité 1. Introduction 2. Eléments fondamentaux d’IHM 3. Principes d’utilisabilité des interfaces 4. Mesurer l’utilisabilité 5. Tests utilisateurs 6. Références
  6. 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
  7. 7. Conception | Utilisabilité 1. Introduction / Ergonomie et Utilisabilité Vue d’ensemble de l’ergonomie
  8. 8. Conception | Utilisabilité Vue d’ensemble de l’ergonomie
  9. 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. 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. 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. 12. Conception | Utilisabilité Cycle de vie et paradigme technologique Stabilisation / Fin croissance Croissance rapide Début temps Paradigme 1
  13. 13. Conception | Utilisabilité Cycle de vie et paradigme technologique Stabilisation / Fin croissance Croissance rapide Extinction du Début paradigme temps Paradigme 1
  14. 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. 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. 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. 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. 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
  19. 19. Conception | Utilisabilité F. Utilisabilité 1. Introduction 2. Eléments fondamentaux d’IHM 3. Principes d’utilisabilité des interfaces 4. Mesurer l’utilisabilité 5. Tests utilisateurs 6. Références
  20. 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. 21. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Modèles cognitifs ‣Model Human Processor (MHP) de Card, Moran et Newel
  22. 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. 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. 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. 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
  26. 26. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Synthèse Perception Action Distance sémantique Distance articulatoire
  27. 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.
  28. 28. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme proximité
  29. 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.
  30. 30. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme Similitude
  31. 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.
  32. 32. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme Continuité
  33. 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.
  34. 34. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme Clôture
  35. 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.
  36. 36. Conception | Utilisabilité F. Utilisabilité 1. Introduction 2. Eléments fondamentaux d’IHM 3. Principes d’utilisabilité des interfaces 4. Mesurer l’utilisabilité 5. Tests utilisateurs 6. Références
  37. 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. 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. 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. 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
  41. 41. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Modèle en F
  42. 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
  43. 43. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  44. 44. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  45. 45. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  46. 46. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  47. 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. 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. 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. 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. 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. 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. 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. 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. 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. 56. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
  57. 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. 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. 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. 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. 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. 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. 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. 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
  65. 65. Conception | Utilisabilité F. Utilisabilité 1. Introduction 2. Eléments fondamentaux d’IHM 3. Principes d’utilisabilité des interfaces 4. Mesurer l’utilisabilité 5. Tests utilisateurs 6. Références
  66. 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 ?
  67. 67. Conception | Utilisabilité 3. Mesurer l’utilisabilité Succès binaire d’une tâche
  68. 68. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Succès binaire d’une tâche ‣Succès (tâche) = 1 et Succès (tâche) = 0 Participants Tâche 1 Tâche 2 Tâche 3 Tâche 4 Tâche 5 P1 1 0 1 0 0 P2 1 0 1 0 1 P3 1 1 1 1 1 P4 1 1 1 1 1 P5 0 0 0 1 1 P6 1 0 1 1 1 P7 0 1 1 1 1 P8 0 0 1 1 0 P9 1 0 1 0 1 P10 1 1 1 1 1 P11 0 1 1 1 1 P12 1 0 1 1 1 Moyenne 67!% 42!% 92!% 75!% 83!% Intervalle de 28!% 22!% 29!% 29!% 29!% confiance
  69. 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) !
  70. 70. 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 Participants Tâche 1 Tâche 2 Tâche 3 Tâche 4 Tâche 5 P1 1 0 1 0 0 P2 1 0 1 0 1 P3 1 1 1 1 1 P4 1 1 1 1 1 P5 0 0 0 1 1 P6 1 0 1 1 1 P7 0 1 1 1 1 P8 0 0 1 1 0 P9 1 0 1 0 1 P10 1 1 1 1 1 P11 0 1 1 1 1 P12 1 0 1 1 1 Moyenne 67!% 42!% 92!% 75!% 83!% Intervalle de 28!% 22!% 29!% 29!% 29!% confiance (95%)
  71. 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%
  72. 72. 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 Participants Tâche 1 Tâche 2 Tâche 3 Tâche 4 Tâche 5 P1 1 0 1 0 0 P2 1 0 1 0 1 P3 1 1 1 1 1 P4 1 1 1 1 1 P5 0 0 0 1 1 P6 1 0 1 1 1 P7 0 1 1 1 1 P8 0 0 1 1 0 P9 1 0 1 0 1 P10 1 1 1 1 1 P11 0 1 1 1 1 P12 1 0 1 1 1 Moyenne 67!% 42!% 92!% 75!% 83!% Intervalle de 28!% 22!% 29!% 29!% 29!% confiance (95%)
  73. 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. 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
  75. 75. Conception | Utilisabilité 3. Mesurer l’utilisabilité Succès gradué d’une tâche
  76. 76. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Succès gradué d’une tâche ‣Succès (tâche sans aide) = 1 ‣Succès (tâche avec aide) = 0,5 ‣Succès (tâche) = 0
  77. 77. Conception | Utilisabilité 3. Mesurer l’utilisabilité Temps de réalisation d’une tâche
  78. 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. 79. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple Les temps sont en secondes
  80. 80. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple Les temps sont en secondes
  81. 81. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  82. 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 ?)
  83. 83. Conception | Utilisabilité 3. Mesurer l’utilisabilité Efficacité
  84. 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
  85. 85. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  86. 86. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  87. 87. Conception | Utilisabilité 3. Mesurer l’utilisabilité Apprenabilité (learnability)
  88. 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
  89. 89. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  90. 90. Conception | Utilisabilité F. Utilisabilité 1. Introduction 2. Eléments fondamentaux d’IHM 3. Principes d’utilisabilité des interfaces 4. Mesurer l’utilisabilité 5. Tests utilisateurs 6. Références
  91. 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. 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. 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
  94. 94. Conception | Utilisabilité 5. Tests utilisateurs / Introduction Design itératif Design itérations Tests Prototype utilisateurs
  95. 95. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Prototypes
  96. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  122. 122. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Préparation
  123. 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. 124. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs / Préparation ‣ Redaction du test ‣ Questionnaire ‣ Guide d’entretien ‣ Exemple
  125. 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. 126. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Montage du Lab
  127. 127. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs / Montage du Lab
  128. 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. 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. 130. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs / Montage du Lab
  131. 131. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs / Montage du Lab
  132. 132. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Protocoles
  133. 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. 134. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Recommandations pour le testeur
  135. 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. 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. 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. 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)
  139. 139. http://www.slideshare.net/davethepreacher

×