Mise à jour (enfin!) du dernier semestre de cours

cours/ergo/20090212-Seance1

@@ -0,0 +1,140 @@
+Jeudi 12 février 2009
+Cours d'ergonomie
+M. PULVERMULLER : pulvermuller@dpt-info.u-strasbg.fr
+
+Ergonomie et ICHM
+
+====== Cours ======
+
+===== Exemples =====
+
+Pour savoir qu'une information parvienne à destination, il faut un panel d'utilisateurs qui iront tester la chose, histoire d'avoir un retour.
+
+Feed - back = retour utilisateur
+
+Guidage : quelque chose qui permet de guider l'utilisateur, soit par un ensemble d'exemples, soit pas un schéma.
+
+Il existe également des guidages textuels par une page adaptée, plus précises, prévue à cela.
+
+Dynamique d'utilisation : quand est ce que cela est utile ? (exemple : panneau d'affichage des trams qui sont visibles que de la voie d'en face ou sur la voie elle même)
+
+Exemple de guidage utile : mettre un libellé devant un code (exemple : carte d'étudiant, on met "Code étudiant", puis on met le code (en comparaison avec les autres codes))
+
+Distinction : comment faire la différence entre deux compteurs comme un compte - tour et un compteur de vitesse ?
+
+=> inutile de faire un lien en gras, tout comme des citations en gras. Il faut distinguer les comportements et les composants de l'IHM pour éviter de les confondre.
+
+Densité d'information : on ne doit pas avoir trop d'informations, il ne FAUT PAS chercher partout. (exemple: quand on a trop d'onglets, on s'y perd)
+
+Pertinence : L'information doit être pertinente à l'utilisateur, bien que cela demande un coût de conception, réalisation, etc.
+
+Compréhension : il faut savoir à quoi sert quoi ! (exemple: si on a des boutons dans l'interface, il faut savoir ce qu'il fait)
+
+NB : Ergonomie = la plus adaptée à l'utilisateur et au métier. L'ergonomie n'est PAS "la plus belle IHM" qui existe.
+
+Confirmation : Toujours être clair pour que la personne sache qu'un clic critique soit parlant. (exemple : au clic pour suppression, afficher un message de confirmation et il doit CONTENIR un détail pour UN objet donné)
+
+===== Ergonomie : Définition =====
+
+L'ergonomie (ou l'étude des facteurs humains) est la discipline scientifique qui vise la compréhension fondamentale des interactions entre les êtres humains et les autres composantes d'un système, et la mise en œuvre de principes et de méthodes afni d'améliorer le bien - être des hommes et l'efficacité globale du système.
+
+En informatique : L'ergonomie informatique a pour objectif l'amélioration du dialogue homme - ordinateur.
+
+On distingue en général l'ergonomie du logiciel et celle du web.
+
+===== ICHM =====
+
+Interface de Communication entre l'Homme et la Machine
+
+===== Directive =====
+
+Les directives sont des recommandations visant à guider l'action des concepteurs dans la réalisation d'une interface entre l'homme et la machine.
+
+===== La couleur et le champ visuel =====
+
+Derrière l'œil nous avons la rétine : bâtonnets et les cônes.
+
+C = captent la couleurs (déficience => daltonisme)
+B = contraste + luminosité
+
+Les déficiences font qu'il faille faire attention à ce que nous faisons sur un site pour des utilisateurs potentiellement daltoniens.
+
+Comment décrire une couleur : 
+  * Teinte (hue) => couleur
+  * Saturation (Saturation) => degré de pureté de la couleur
+  * Luminosité (Lightness) => plus ou moins de blanc sur la couleur
+
+Dans une IHM on évite de multiplier le nombre de teintes utilisées !!!!
+
+On utilise 5 couleurs MAXIMUM + ou - 2 !
+
+Dans une barre d'outils, trop de couleurs bruitent l'œil de l'utilisateur. il faut donc éviter de mettre trop de couleurs.
+
+Cohérence et attention visuelle : une même couleur doit donner le même effet / même fonctionnalité, même champ de fonctionnalité. (exemple : si on prend des liens bleus pour naviguer, il ne faut PAS de mots en bleu, sinon ambigüité)
+
+Signaux d'attention : HAUTE luminosité et saturation !!!
+
+Le système perceptif aime bien les couleurs complémentaires (à l'exception du rouge/vert).
+  * Bleu / orange
+  * Jaune / violet
+  * Rouge / vert
+
+  * Blanc / noir : couleur fondamentales
+  * Rouge : alarmes erreurs stop
+  * Jaune : avertissement ou données exigeant de l'attention
+  * Vert : Normal, OK, Allez
+  * Bleu saturé : mise en retrait
+  * Bleu dé-saturé : froid, eau
+  * Rose (magenta) : alarme secondaire, différenciation de données
+
+Autre couleur : différencation de données
+
+La sensation des couleurs : 
+  * Couleurs chaudes autour du rouge
+  * Couleurs froides autour du vert/bleu
+
+L'œil perçoit des couleurs en fonction des distances.
+
+CHSCT = condiitons de travail qui viennent et peuvent interdire l'utilisation d'une IHM (à cause des soucis de vision)
+
+Deux couleurs proches sur la bande chromatique ont un effet de profondeur diminué.
+
+L'orange attire l'œil.
+
+Ne JAMAIS juxtaposer le rouge et le vert !
+
+Généralement le jaune et le bleu sont bien reconnus.
+
+Lecture iconographique d'une image, d'une photo, d'un journal, se fait en Z. De en haut à gauche vers en bas à droite.
+
+Mnème = Quantité d'information connu, familière traitée par la mémoire à court terme et caractérisée par son unité.
+
+Le cerveau humain a un certain nombre de mnème (système mnèmotechnique). Donc on garde pas énormément d'information. Lors de l'utilisation d'un logiciel il ne faut pas qu'il garde trop de choses en mémoire.
+
+Implication sur la conception des interfaces :
+  * minimiser la quantité des données à traiter
+  * améliorer la qualité des données
+
+===== Les critères d'ergonomie =====
+
+Une interface informatique doit satisfaire deux grands critères :
+  * Utilité : L'application doit servur un besoin (un système peut respecter tous les critères d'utilisabilité mais peut être inutile)
+  * utilisabilité : capacité d'un produit à être utilisé avec efficacité dans un contexte d'utilisation défini, pour un besoin déterminé, par des utilisateurs spécifiques
+
+De façon générale, l'utilisabilité d'un système concerne : 
+  * facilité d'utilisation
+  * facilité d'apprentissage
+  * efficacité d'utilisation
+  * utilisation sans erreurs
+  * satisfaction de ses utilisateurs
+
+==== Vocabulaire ====
+
+  * Anxiété de l'information : stress causé par l'incapacité de l'utilisateur à trouver ou à comprendre l'information dont il a besoin  : surcharge d'information, manque de clarté de son organisation, insuffisance, présentation trop complexe
+  * Achitecture de l'information : C'est l'organisation de l'information : comment organiser l'information efficacement pour éviter le phénomène d'anxiété de l'information
+  * Design centré utilisateur (DCU) : Processus de design effectué autour des besoins et des objectifs des utilisateurs. L'utilisabilité étant une priorité dans cette démarche, les utilisateurs participent au processus
+  * Design d'interface : Processus global de conception, comment l'utilisateur pourra interagir avec une application (phases d'analyse des besoin, d'architecture de l'information, du design)
+  * Design de l'information : structure, sélection et présentation de l'information. Englobe l'architecture, la visualisation et la recherche de l'information.
+  * Facteurs humains
+  * Guide de l'interface utilisateur (GIU)
+  * Visualisation de l'information

cours/ergo/20090213-Seance2

@@ -0,0 +1,179 @@
+Vendredi 13 février 2009
+Cours d'ergonomie
+M. PULLVERMULLER
+
+====== Cours ======
+
+Plusieurs critères après avoir fait des centaines et des centaines d'IHM : critères de Bastien
+
+===== Compatibilité =====
+
+Compatibilité entre le logiciel et son utilisateur (pour une cible particulière d'utilisateur)
+
+  * Adéquation du logiciel vis à vis de son utilisateur
+    * de ses habitudes de travail
+    * de son contexte (physique et social) de travail (simplifier la vie de l'utilisateur)
+  * La logique d'utilisation du système doit correspondre à la logique de l'utilisateur : par exemple des liens raccourcis pour des habitudes qu'on a quand on lance le logiciel
+  * Objectif : minimiser le transcodage de la connaissance entre le métier et le logiciel (utiliser le vocabulaire de l'utilisateur)
+  * Présenter les informations sous forme utilisable : parler le langage de l'utilisateur
+
+===== Guidage =====
+
+  * Moyens mis en ½uvre pour orienter l'utilisateur et lui permettre de s'orienter :
+    * faire connaître l'état du système : quand on commence des billets SNCF, pendant la recherche il faut informer l'utilisateur qu'on est en cours de recherche
+    * établir des liens de causalité entre les actions de l'utilisateur et l'état du système
+  * Objectif : faciliter l'apprentissage et l'utilisation
+  * Deux niveaux de guidage :
+    * guidage explicite (on explique des choses à l'utilisateur via un message d'aide ou d'erreur)
+    * guidage implicite (on s'arrange pour guider l'utilisateur en agissant sur la présentation et l'organisation des informations)
+
+==== Guidage par l'incitation (implicite) ====
+
+Amener l'utilisateur à mener des actions spécifiques :
+  * Griser les commandes non disponibles
+  * Donner le format de saisie des données (explicite)
+  * Compléter les saisies partielles non ambiguës (exemple : Ja -> Janvier)
+  * Fournir une liste des saisies attendues (liste de sélection par exemple)
+  * établir des liens explicites entre les différentes valeurs à saisir
+
+==== Guidage par groupement/distinction ====
+
+  * Par le format : distinguer visuellement les informations de types différents
+  * Par la position : rapprocher les commandes de même type (Functional chunking)
+
+NB : Ordre d'utilisation par la fréquence de l'utilisation ou l'importance de l'utilisation !!!
+
+==== Guidage : lisibilité ====
+
+  * Les minuscules sont moins discriminantes que les majuscules => dans une page Web il ne faut pas écrire en majuscule, sauf quand c'est indiqué de le faire !
+
+==== Lisibilité et typographie ====
+
+  * Choisir une taille correcte : mini 8points, maxi 16 points
+  * Police de caractère en fonction des critères de lisibilité : une police de caractère à empattement prend plus de place qu'une police sans
+  * éviter plus de 3 polices de caractères différentes dans une même fenêtre (ou sur plusieurs fenêtres affichées simultanément)
+
+Attention, très contextuel à l'applicatif.
+
+===== Homogénéité =====
+
+  * La logique d'utilisation du système doit être constante, tant au niveau des procédures que de la représentation
+  * Graphsime, localisation, vocabulaire, etc.
+  * Homogénéité syntaxique des items de menu (courts de préférence)
+
+Les trois petits points indiquent à l'utilisateur qu'il y aura une confirmation ou l'ouverture d'une nouvelle fenêtre.
+
+===== Fléxibilité =====
+
+Souplesse, flexibilité = Capacité de l'IHM à s'adapter à une population variée d'utilisateur : 
+  * différents types d'utilisateurs
+  * différentes stratégies d'utilisation
+
+Donner tout les moyens/procédures possibles pour atteindre le même objectif mais de façon différente.
+
+Objectif : L'utilisateur choisit la procédure qui lui convient le mieux 
+
+Exemple: 
+  * accès par menu, pour les débutants
+  * par raccourcis clavier (experts)
+  * Défauts utilisateur / Paramètrage => avec les macros on peut automatiser une tâche, ce qui assure une rapidité optimale !
+
+===== Contrôle explicite =====
+
+  * Moyens pour permettre à l'utilisateur de maîtriser/contrôler les traitements réalisés par le système
+    * Les effets d'une commande doivent être prévisibles aux yeux de l'usager
+  * Objectifs : Meilleure compréhension du système (modèle mental exact)
+  * Facteur important d'acceptation du système
+  * Ex : 
+    * Valider explicitement les commandes importantes ou difficilement réversibles
+    * Autoriser les interruptions
+
+----
+
+7 mai et 15 Mai TD
+
+22 mai TP : présentation de notre première charte graphique
+28 mai TP : pour seconde présentation
+
+Mi - juin rendre la charte d'ergo, la charte graphique et quelques captures d'écran, une ou deux pages HTML de nos écrans montés
+
+----
+
+==== Actions explicites ====
+
+Le système ne doit exécuter que des opérations demandées par l'utilisateur
+
+Ex : action physique de validation, bouton ok ou clic.
+
+===== Les erreurs =====
+
+  * Prévoir que l'utilisateur fera des erreurs
+  * Concevoir des moyens de pallier ce problème
+  * On doit pouvoir : 
+    * protéger l'utilisateur contre des erreurs : détection de la part du système (saisie des dates, décimaux)
+    * l'avertir losqu'il a commis une erreur que l'on peut détecter
+    * corriger ou l'aider à corriger ses erreurs : guider l'utilisateur (étapes à suivre pour rectifier l'erreur)
+  * Minimiser le risque d'erreur améliore l'utilisabilité du système car les erreurs : 
+    * rallongent le temps de réalisation de la tâche
+    * perturbent la planification
+    * diminuent la performance
+  * Prévenir des erreurs par une analyse des causes
+
+Ne pas disperser l'utilisateur dans son objectif métier.
+
+On doit toujours caller un libellé à gauche (plus simple à parcourir pour faire une recherche dans un écran).
+
+==== Prévention ====
+
+  * Rendre clairement visible les changements de mode et les états du système
+  * éviter les erreurs cognitives (exemple : raccourcis clavier A, B, C, D pour Create, Delete, Append, Backup => il aurait fallu attacher Backup à B, etc.)
+  * éviter les incohérences
+  * Mettre en jeu la reconnaissance plutôt que le souvenir : 
+    * Reconnaissance : choisir parmi plusieurs possibilités
+    * Souvenir : Se rappeler de la valeur à saisir
+    * La reconnaissance est moins sujette à l'erreur (exemple : utilisation des menus, listes)
+  * Erreurs motrices
+    * mouvements difficiles : F1, puis F12 : déplacement de la main d'un bout à l'autre du clavier
+    * contraintes temporelles
+    * faciliter le mouvement de la main
+      * augmenter la taille des objets sélectionnés
+      * Minimiser l'utilisaterion des modifieurs (Ctrl Alt Shift)
+      * Agrandir la taille des objets à sélectionner (éventuellement "au survol")
+
+==== Comment gérer les erreurs ? ====
+
+2 niveaux de protection contre les erreurs : prévention et détection (par correction)
+
+Prévenir des erreurs en guidant l'utilisateur (Guidage/incitation) :
+  * Griser les commandes non disponibles
+  * Fournir la liste des valeurs possibles
+  * Indiquer les modes de fonctionnement du systèmes (feed-back)
+
+Détecter les erreurs au plus tôt.
+
+Faciliter la correction des erreurs :
+  * Message d'erreur pertinent :
+    * Nature de l'erreur
+    * Moyens de la corriger
+  * Rendre possible la correction
+    * accès et modification partielle => ne pas "scroller pour arriver à l'erreur"
+
+Messages : 
+  * mettre en évidence le champ erroné
+  * placer le message d'erreur là où l'utilisateur est sensé regarder
+  * Messages d'erreurs explicits, brefs, non réprobateurs et auto - suffisants
+
+Correction de l'erreur : 
+  * Retour en arrière ("Undo") avec Ctrl + Z
+
+Rendre le message d'erreur **instructif**
+
+Les messages doivent énoncer : 
+  * quelle erreur a été détecté
+  * quel champ de saisie contient l'erreur
+  * quelle action correctrice doit être effectuée
+
+===== Charte mentale =====
+
+
+