SlideShare une entreprise Scribd logo
1  sur  139
Télécharger pour lire hors ligne
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
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é
Conception | Utilisabilité




     “If the user can't use it, it doesn't work.”
                                   Susan Dray, usability consultant.
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
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
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
Conception | Utilisabilité

1. Introduction / Ergonomie et Utilisabilité

  Vue d’ensemble de l’ergonomie
Conception | Utilisabilité




Vue d’ensemble de l’ergonomie
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
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
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
Conception | Utilisabilité




Cycle de vie et paradigme technologique




                                Stabilisation / Fin
  croissance




                       Croissance
                       rapide


               Début




                                                      temps
                         Paradigme 1
Conception | Utilisabilité




Cycle de vie et paradigme technologique




                                Stabilisation / Fin
  croissance




                       Croissance
                       rapide


                                                      Extinction du
               Début
                                                      paradigme




                                                                      temps
                         Paradigme 1
Conception | Utilisabilité




Cycle de vie et paradigme technologique




                                                      Début nouveau
                                                      paradigme

                                Stabilisation / Fin
  croissance




                       Croissance
                       rapide


               Début




                                                                                    temps
                         Paradigme 1                                  Paradigme 2
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
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
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
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
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
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»
Conception | Utilisabilité

2. Eléments fondamentaux d’IHM / Modèles cognitifs




‣Model Human Processor                        (MHP) de Card, Moran et Newel
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
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...)
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
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
Conception | Utilisabilité

2. Eléments fondamentaux d’IHM / Synthèse




                   Perception                      Action


           Distance sémantique              Distance articulatoire
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.
Conception | Utilisabilité

2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme




                                          proximité
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.
Conception | Utilisabilité

2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme




                                           Similitude
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.
Conception | Utilisabilité

2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme




                                           Continuité
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.
Conception | Utilisabilité

2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme




                                            Clôture
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.
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
Conception | Utilisabilité

2. Principes d’utilisabilité des interfaces / Introduction




‣Les principes d’utilisabilité sont des conséquences des
éléments théoriques d’IHM
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
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
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
Conception | Utilisabilité

2. Principes d’utilisabilité des interfaces / Flux de lecture

  Modèle en F
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
Conception | Utilisabilité

2. Principes d’utilisabilité des interfaces / Flux de lecture

  Flux réels
Conception | Utilisabilité

2. Principes d’utilisabilité des interfaces / Flux de lecture

  Flux réels
Conception | Utilisabilité

2. Principes d’utilisabilité des interfaces / Flux de lecture

  Flux réels
Conception | Utilisabilité

2. Principes d’utilisabilité des interfaces / Flux de lecture

  Flux réels
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
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
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)
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
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
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
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 !
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
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 !
Conception | Utilisabilité

2. Principes d’utilisabilité des interfaces / Guide pour le design des composants d’interface
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
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
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
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
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
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
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.
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
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
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 ?
Conception | Utilisabilité

3. Mesurer l’utilisabilité




Succès binaire d’une tâche
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
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)
            !
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%)
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%
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%)
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
Conception | Utilisabilité

3. Mesurer l’utilisabilité / Succès binaire d’une tâche




    ‣Critères de mesures
        ‣3 tentatives
        ‣Déterminer un temps seuil
Conception | Utilisabilité

3. Mesurer l’utilisabilité




Succès gradué d’une tâche
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
Conception | Utilisabilité

3. Mesurer l’utilisabilité




Temps de réalisation d’une tâche
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é
Conception | Utilisabilité

3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche

  Exemple




                           Les temps sont en secondes
Conception | Utilisabilité

3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche

  Exemple




                 Les temps sont en secondes
Conception | Utilisabilité

3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche

  Exemple
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 ?)
Conception | Utilisabilité

3. Mesurer l’utilisabilité




Efficacité
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
Conception | Utilisabilité

3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche

  Exemple
Conception | Utilisabilité

3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche

  Exemple
Conception | Utilisabilité

3. Mesurer l’utilisabilité




Apprenabilité (learnability)
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
Conception | Utilisabilité

3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche

  Exemple
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
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
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
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
Conception | Utilisabilité

5. Tests utilisateurs / Introduction

  Design itératif




                                             Design


                                            itérations

                                 Tests
                                                         Prototype
                             utilisateurs
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs




Prototypes
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
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
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
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
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
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
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
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....)
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....)
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...)
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
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 ?
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
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)
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
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
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
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
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
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
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
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
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
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
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
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.
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs




Préparation
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
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs / Préparation




     ‣ Redaction du test
              ‣ Questionnaire
              ‣ Guide d’entretien
              ‣ Exemple
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 ?
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs




Montage du Lab
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs / Montage du Lab
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
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
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs / Montage du Lab
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs / Montage du Lab
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs




Protocoles
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
Conception | Design d’interface et design d’interaction

5. Tests utilisateurs




Recommandations pour le testeur
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 ?
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
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
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)
http://www.slideshare.net/davethepreacher

Contenu connexe

En vedette

Redes de computadores
Redes de computadoresRedes de computadores
Redes de computadoresMarcefg
 
Bloque2_Tarea3B. Versión b decálogo del buen comer
Bloque2_Tarea3B. Versión b decálogo del buen comerBloque2_Tarea3B. Versión b decálogo del buen comer
Bloque2_Tarea3B. Versión b decálogo del buen comertutoresaa
 
Álbum de fotografía: El teatro
Álbum de fotografía: El teatroÁlbum de fotografía: El teatro
Álbum de fotografía: El teatroinicial4jfk
 
Presentation - motion-induced blindness aka mib - 2011
Presentation -  motion-induced blindness aka mib - 2011Presentation -  motion-induced blindness aka mib - 2011
Presentation - motion-induced blindness aka mib - 2011Franck Dernoncourt
 
Bloq1.Act3. Versión En el mercado
Bloq1.Act3. Versión En el mercadoBloq1.Act3. Versión En el mercado
Bloq1.Act3. Versión En el mercadotutoresaa
 
Fotos macrophotographie
Fotos   macrophotographieFotos   macrophotographie
Fotos macrophotographiejmpcard
 
Exposicion de analisis de los componentes
Exposicion de analisis de los componentesExposicion de analisis de los componentes
Exposicion de analisis de los componentesMane_Rex
 
Podcast.BlogAutomobile.Show1
Podcast.BlogAutomobile.Show1Podcast.BlogAutomobile.Show1
Podcast.BlogAutomobile.Show1Clem B
 
ACHAT APPARTEMENT PARIS 16 MUETTE
ACHAT APPARTEMENT PARIS 16 MUETTE ACHAT APPARTEMENT PARIS 16 MUETTE
ACHAT APPARTEMENT PARIS 16 MUETTE Marc Foujols
 
Volcan islandais
Volcan islandaisVolcan islandais
Volcan islandaiscatavrio
 
Formation html3 css3
Formation html3 css3Formation html3 css3
Formation html3 css3Thierry Gayet
 
2010-04-19 firefox cenabumix orleans
2010-04-19 firefox cenabumix orleans2010-04-19 firefox cenabumix orleans
2010-04-19 firefox cenabumix orleanslgilbon
 
Cp 21e Festival Du Livre De Mouans Sartoux
Cp 21e Festival Du Livre De Mouans SartouxCp 21e Festival Du Livre De Mouans Sartoux
Cp 21e Festival Du Livre De Mouans Sartouxbrichardcaroline
 
MAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLEMAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLEMarc Foujols
 
Evolución de la comunicación humana G8
Evolución de la comunicación humana G8Evolución de la comunicación humana G8
Evolución de la comunicación humana G8Lizeth Muñoz Cobos
 

En vedette (20)

Eprd Janvier 2012
Eprd Janvier 2012Eprd Janvier 2012
Eprd Janvier 2012
 
Redes de computadores
Redes de computadoresRedes de computadores
Redes de computadores
 
Unidad 4
Unidad 4  Unidad 4
Unidad 4
 
Bloque2_Tarea3B. Versión b decálogo del buen comer
Bloque2_Tarea3B. Versión b decálogo del buen comerBloque2_Tarea3B. Versión b decálogo del buen comer
Bloque2_Tarea3B. Versión b decálogo del buen comer
 
Álbum de fotografía: El teatro
Álbum de fotografía: El teatroÁlbum de fotografía: El teatro
Álbum de fotografía: El teatro
 
Presentation - motion-induced blindness aka mib - 2011
Presentation -  motion-induced blindness aka mib - 2011Presentation -  motion-induced blindness aka mib - 2011
Presentation - motion-induced blindness aka mib - 2011
 
Bloq1.Act3. Versión En el mercado
Bloq1.Act3. Versión En el mercadoBloq1.Act3. Versión En el mercado
Bloq1.Act3. Versión En el mercado
 
Fotos macrophotographie
Fotos   macrophotographieFotos   macrophotographie
Fotos macrophotographie
 
Exposicion de analisis de los componentes
Exposicion de analisis de los componentesExposicion de analisis de los componentes
Exposicion de analisis de los componentes
 
Podcast.BlogAutomobile.Show1
Podcast.BlogAutomobile.Show1Podcast.BlogAutomobile.Show1
Podcast.BlogAutomobile.Show1
 
ACHAT APPARTEMENT PARIS 16 MUETTE
ACHAT APPARTEMENT PARIS 16 MUETTE ACHAT APPARTEMENT PARIS 16 MUETTE
ACHAT APPARTEMENT PARIS 16 MUETTE
 
Volcan islandais
Volcan islandaisVolcan islandais
Volcan islandais
 
Formation html3 css3
Formation html3 css3Formation html3 css3
Formation html3 css3
 
Planificador de proyectos
Planificador de proyectosPlanificador de proyectos
Planificador de proyectos
 
2010-04-19 firefox cenabumix orleans
2010-04-19 firefox cenabumix orleans2010-04-19 firefox cenabumix orleans
2010-04-19 firefox cenabumix orleans
 
Cp 21e Festival Du Livre De Mouans Sartoux
Cp 21e Festival Du Livre De Mouans SartouxCp 21e Festival Du Livre De Mouans Sartoux
Cp 21e Festival Du Livre De Mouans Sartoux
 
MAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLEMAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLE
 
Evolución de la comunicación humana G8
Evolución de la comunicación humana G8Evolución de la comunicación humana G8
Evolución de la comunicación humana G8
 
Manuel silva
Manuel silvaManuel silva
Manuel silva
 
Catedra upecista
Catedra upecistaCatedra upecista
Catedra upecista
 

Plus de David Raichman

Design Game Brainstorm
Design Game BrainstormDesign Game Brainstorm
Design Game BrainstormDavid Raichman
 
UX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisibleUX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisibleDavid Raichman
 
Cours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNICours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNIDavid Raichman
 
Cours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNICours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNIDavid Raichman
 
Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNIDavid Raichman
 
Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)David Raichman
 
Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)David Raichman
 
Interface Design Crma 2009
Interface Design Crma 2009Interface Design Crma 2009
Interface Design Crma 2009David Raichman
 

Plus de David Raichman (10)

Design Game Brainstorm
Design Game BrainstormDesign Game Brainstorm
Design Game Brainstorm
 
UX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisibleUX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisible
 
Cours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNICours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNI
 
Cours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNICours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNI
 
Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
 
Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)
 
Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
 
Interface Design Crma 2009
Interface Design Crma 2009Interface Design Crma 2009
Interface Design Crma 2009
 
MMI Web Design P1
MMI Web Design P1MMI Web Design P1
MMI Web Design P1
 

Cours (F) Gobelins Master 2 MICNI

  • 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
  • 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. 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. Conception | Utilisabilité 1. Introduction / Ergonomie et Utilisabilité Vue d’ensemble de l’ergonomie
  • 8. Conception | Utilisabilité Vue d’ensemble de l’ergonomie
  • 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
  • 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. 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
  • 26. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Synthèse Perception Action Distance sémantique Distance articulatoire
  • 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. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme proximité
  • 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. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme Similitude
  • 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. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme Continuité
  • 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. Conception | Utilisabilité 2. Eléments fondamentaux d’IHM / Gestalt théorie : psychologie de la forme Clôture
  • 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. 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. 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
  • 41. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Modèle en F
  • 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. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  • 44. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  • 45. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  • 46. Conception | Utilisabilité 2. Principes d’utilisabilité des interfaces / Flux de lecture Flux réels
  • 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
  • 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. 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. Conception | Utilisabilité 3. Mesurer l’utilisabilité Succès binaire d’une tâche
  • 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. 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. 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. 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. 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. 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
  • 75. Conception | Utilisabilité 3. Mesurer l’utilisabilité Succès gradué d’une tâche
  • 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. Conception | Utilisabilité 3. Mesurer l’utilisabilité Temps de réalisation d’une tâche
  • 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
  • 81. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  • 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. Conception | Utilisabilité 3. Mesurer l’utilisabilité Efficacité
  • 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. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  • 86. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  • 87. Conception | Utilisabilité 3. Mesurer l’utilisabilité Apprenabilité (learnability)
  • 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. Conception | Utilisabilité 3. Mesurer l’utilisabilité / Temps de réalisation d’une tâche Exemple
  • 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. 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
  • 94. Conception | Utilisabilité 5. Tests utilisateurs / Introduction Design itératif Design itérations Tests Prototype utilisateurs
  • 95. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Prototypes
  • 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.
  • 122. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Préparation
  • 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
  • 132. Conception | Design d’interface et design d’interaction 5. Tests utilisateurs Protocoles
  • 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)