cours0809/cours/ergo/20090212-Seance1

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
Mise à jour (enfin!) du dernier semestre de cours 2009-05-17 14:54:30 +00:00			`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`