Interaction homme-

machine(IHM)
Cours 3
 Définition
• L’ergonomie est « l'étude scientifique de la relation entre
l'homme et ses moyens, méthodes et milieux de travail»
et l'application de ces connaissances pour avoir des
systèmes « qui puissent être utilisés avec le maximum de
confort , de sécurité et d'efficacité par le plus grand
nombre» .
• L'ergonomie informatique (ou ergonomie des interfaces)
est une branche de l'ergonomie, qui a pour objectif
d'améliorer l'interaction homme-machine, la facilité
d’utilisation et d’apprentissage des produits interactifs.
 Définition
Les deux points les plus importants défendus par l'ergonomie
informatique sont l’utilité et l'utilisabilité.
• L'utilité est le caractère de ce qui est utile : l’application/
logiciel doit répondre à un besoin et être pertinente au
regard des objectifs de l'utilisateur cible.
• L’utilisabilité a été définie par l'ISO 9241-11 comme la
mesure dans laquelle un système, un produit ou un service
peut être utilisé par des utilisateurs spécifiques pour
atteindre des objectifs spécifiés avec efficacité (atteinte du
résultat prévu), efficience (consommation d’un minimum
de ressources) et satisfaction (confort et évaluation
subjective), dans un contexte d'utilisation spécifiée.
Objectifs de l’ergonomie
• Objectifs centrés sur les personnes
Adapter les postes de travail aux caractéristiques
physiologiques et psychologiques de la personne
Santé, sécurité
Confort, facilité d’usage, satisfaction, plaisir
Diminuer les erreurs, le temps d’apprentissage
èComment concevoir des systèmes qui favorisent le
développement de compétences
Objectifs de l’ergonomie

• Objectifs centrés sur la performance

Efficacité,
Productivité,
Fiabilité,
Qualité
Domaines d’applications

• Ergonomie physique
• Ergonomie cognitive
• Ergonomie organisationnelle
• Ergonomie des interfaces
 Ergonomie physique
• Vise à adapter les postes de travail aux caractéristiques
suivantes d’une personne :
Anatomique,
Physiologiques,
Psychologiques
Biomécaniques

• Exemples:
Postures de travail,
Mouvements répétitifs,
Disposition du poste de travail,
La sécurité et la santé.
 Ergonomie cognitive
• Focus sur les processus mentaux dans les interactions
humain-systèmes
perception,
mémoire,
raisonnement,
réponses motrices
• vise à adapter les logiciels à l’utilisateur
pour diminuer les erreurs, le temps d’apprentissage
rendre le logiciel le plus facilement utilisable
Ergonomie organisationnelle
• Optimisation des systèmes sociaux-techniques:
structures organisationnelles,

règles
et processus

• Exemples :
Communication et gestion des ressources des collectifs,
conception du travail,
conception des horaires de travail,
travail coopératif,
télétravail, ...
Ergonomie des interfaces
 Lisibilité des couleurs

• Privilégier un bon contraste caractères/fond

caractères sombres sur fond clair
de préférence caractères noirs sur fond blanc
• Le fond doit être de couleur unie
• Éviter certaines combinaisons de couleurs
• Limiter le nombre de couleurs (7 maximum)
• Uniformiser sur lʼensemble des interfaces
Portabilité des couleurs
• Attention à la portabilité des couleurs
selon les écrans (penser au nombre de couleurs des
écrans)
selon les personnes : choisir des couleurs faciles à
distinguer
• daltonisme :
8-10% des hommes, 0,5% des femmes
par exemple pas de différenciation entre vert et rouge
Signification des couleurs
• Respecter les habitudes culturelles
en occident : rouge = stop / vert = go
en chine : rouge = joie, mariage
• Utiliser les couleurs pour signifier quelque chose
même type d’information àmême couleur
types d’information différents àcouleurs contrastées
types d’information similaires àcouleurs peu
contrastées
 Langage utilisé
• Langage courant, le moins technique possible (selon user)
• Présenter les options possibles, regrouper les information
importantes
• Concis mais sans abréviation
• Etre dans lʼaction, affirmation
 Organisation des interfaces:
lisibilité à l’écran

• 1ère visualisation de l’écran : parcours en Z

• Ensuite : parcours sélectif
• Meilleure visibilité et accessibilité au centre de l’écran
 Organisation des interfaces:
lisibilité à l’écran
• Eye tracking : étude du parcours que suit le regard et
identification du temps et des points de fixation.
• Se fait grâce à une caméra oculaire intégrée ou non dans
un écran d’ordinateur ou par le port d’un casque
spécifique.
 Organisation des interfaces:
lisibilité à l’écran
• Application sur Google :
 Organisation des interfaces:
lisibilité à l’écran
• Définition des zones de l’écran :
 Organisation des interfaces:
lisibilité à l’écran
• Ordre de fixation oculaire :
 Utilisabilité : définition

• Utilisabilité : norme ISO 9241

degré selon lequel un produit peut être utilisé, par des
utilisateurs identifiés, pour atteindre des buts définis avec
efficacité, efficience et satisfaction, dans un contexte
d’utilisation spécifié.
 Utilisabilité : critères
• Efficacité : atteinte du résultat/objectif prévu
• Efficience : consommation d’un minimum de
ressources
• Satisfaction de l’utilisateur : confort et évaluation
subjective
• Facilité d’apprentissage
• Facilité d’appropriation : prise en main du logiciel
• Facilité d’utilisation
• Fiabilité : pas ou peu d’erreurs d’utilisation
 Techniques d’évaluation de
l’utilisabilité

• Évaluation expérimentale
observation et recueil de données
entretiens, questionnaires
• Évaluation analytique
scénario d’utilisation, jugements d’experts
critères d’évaluation ergonomique
Les jugements d’experts
• Caractéristiques
nécessité d’avoir plusieurs experts
utiles pour éliminer les grosses erreurs
nécessité de disposer de scénarios d’utilisation du
système et d’une description des futurs utilisateurs
• Mais…
les experts ne peuvent pas remplacer complètement les
utilisateurs
les experts ont souvent des domaines privilégiés qui
constituent des biais d’évaluation
 Critères d’évaluation
ergonomique

• Performanceducoupleordinateur-utilisateur de Meinadier
• 5 critères centraux d’évaluation de Shneiderman
• 10 heuristiques de Nielsen
• 7 règles d’or de Coutaz
• 8 critères ergonomiques de Bastien et Scapin (INRIA)
 Critères de Bastien et Scapin
(INRIA)
• Guidage
• Charge de travail
• Contrôle explicite
• Adaptabilité
• Gestion des erreurs
• Homogénéité/cohérence
• Signifiance des codes et dénominations
• Compatibilité
 Guidage
• Définition
moyens mis en œuvre pour conseiller, orienter, informer et
conduire l’utilisateur lors de ses interactions avec
l’ordinateur.
• 4 sous-critères
incitation
groupement/distinction entre items
feedback immédiat
lisibilité
 Guidage : incitation
• Exemple:
 Guidage : incitation
• Exemple:
 Guidage : groupement/distinction entre
items
— A faire — A ne pas faire
Guidage : feedback immédiat

• A faire :
changer l’apparence d’un objet
changement de curseur pour les attentes courtes
indicateur de progression pour les tâches plus longues
(>5s)
• A ne pas faire
 Guidage : lisibilité
• A faire : contraste

Ce texte est plus lisible : noir sur fond

blanc, caractères sans empattement

• A ne pas faire
 Charge de travail
• Définition
réduction de la charge perceptive des utilisateurs
augmentation de l’efficacité du dialogue
• 2 sous-critères
brièveté
concision
actions minimales
densité informationnelle
Charge de travail : concision
• A faire

• A ne pas faire
 Charge de travail : actions
minimales
• A faire
 Charge de travail : actions
minimales
• A ne pas faire
 Charge de travail : densité
informationnelle
• A faire
 Charge de travail : densité
informationnelle
• A ne pas faire
 Charge de travail : densité
informationnelle
• A ne pas faire
 Contrôle explicite

• Définition : ce critère regroupe 2 aspects différents

la prise en compte par le système des actions des
utilisateurs
le contrôle des utilisateurs sur le traitement de leurs
actions
• 2 sous-critères
actions explicites
contrôle utilisateur
 Contrôle explicite : actions
explicites
• Seules les opérations explicitement demandées par
l'utilisateur doivent être effectuées par le système (Sauf
des automatismes explicitement acceptés au préalable).
• Recommandations:
Ne pas déclencher d'opérations sans le
consentement explicite de l’utilisateur.
Déclencher l'opération immédiatement après l'action
de l'utilisateur ou, sinon, indiquer clairement que
l'opération sera différée (ou qu'elle ne peut pas être
effectuée).
 Contrôle explicite : actions
explicites
• Exemple :
Ne pas effectuer de
modification dans un
document sans demander
confirmation à l’utilisateur
 Contrôle explicite : actions
explicites
• A ne pas faire :
Une traduction non demandée !
« Cette page a été traduite.
Voulez-vous afficher l’originale? »
 Contrôle explicite : Contrôle
utilisateur
• L'utilisateur doit toujours avoir la main et pouvoir
contrôler le déroulement (interrompre, reprendre) les
traitements effectués par l’application.
• Recommandations:
Offrir à l'utilisateur une validation explicite des
commandes importantes ou difficilement réversibles
Offrir la possibilité d'interrompre les traitements longs
Autoriser les retours en arrière (Undo)
Permettre, en tout temps, de quitter la fonction
courante ou même, le logiciel
 Contrôle explicite : Contrôle
utilisateur
• Exemple: Offrir à l'utilisateur une validation explicite des
commandes importantes ou difficilement réversibles
 Contrôle explicite : Contrôle
utilisateur
• Exemples: laisser l'initiative à l'utilisateur

• Laisser l’utilisateur
basculer d'une activité à une autre
arrêter/interrompre une activité
 Adaptabilité

• Définition
capacité du système à réagir selon le contexte, et selon
les besoins et préférences des utilisateur
• 2 sous-critères
flexibilité : plusieurs façons d’effectuer la même action
prise en compte de l’expérience de l’utilisateur
Adaptabilité : flexibilité
• Exemple :
• copie de fichiers vers un support externe dans l’explorateur
glisser - déposer
copier - coller
menus
édition
contextuel
envoyer vers
raccourcis clavier
boutons
 Adaptabilité : expérience de
l’utilisateur
• Adaptabilité
modification de l’interface/du contenu du fait du
système
 Adaptabilité : expérience de
l’utilisateur
• Configuration
 Gestion des erreurs

• Définition : ce critère regroupe tous les moyens

permettant
d’éviter ou de réduire les erreurs
de les corriger lorsqu’elles surviennent
• 3 sous-critères participent à la gestion des erreurs
protection contre les erreurs
qualité des messages d’erreurs
correction des erreurs
 Gestion des erreurs :
protection contre les erreurs
• A faire :
• protéger les actions sensibles

• griser les commandes indisponibles

 Gestion des erreurs :
protection contre les erreurs
• A faire :
• fournir des valeurs
attendues :
 Gestion des erreurs :
protection contre les erreurs
• A faire :
Validation en direct
Double validation
 Gestion des erreurs :
protection contre les erreurs
• A faire :
Captcha / tips : permettant de différencier de manière
automatisée un utilisateur humain d'un ordinateur.

Distorsion des reCAPTCHA : Imbrication des

lettres et ajout d’un ajout d'une ligne lettres les unes dans
dégradé de couleur brisée les autres
en fond (CAPTCHA actuel de
Yahoo).
 Gestion des erreurs :
protection contre les erreurs
 Gestion des erreurs :
messages d’erreurs
• A faire :
• messages informatifs, constructifs, compréhensibles, amicaux,
montrant la cause et la solution
• 4 types de messages
information
avertissement
erreur bloquante
indication de progression
 Gestion des erreurs :
messages d’erreurs
• A na pas faire :
 Gestion des erreurs :
correction d’erreurs
• A faire:
la commande annuler
messages explicites
 Gestion des erreurs :
correction d’erreurs
• A faire :
• la vérification des saisies
• Mettre en évidence le champ/élément erroné
 Gestion des erreurs :
correction d’erreurs
• A ne pas faire :
Homogénéité/cohérence

• Définition : façon avec laquelle les choix de conception de

l’interface sont :
conservés pour des contextes identiques
Et différents pour des contextes différents
• cohérence :
de la présentation (apparence, graphisme, localisation,
vocabulaire, format, syntaxe, ...)
du comportement (réaction du système, messages,
retours sonores, ...)
Homogénéité/cohérence

• A faire :
• Même schéma d'agencement pour toutes les fenêtres
(gabarit d'écran appelé tracé régulateur)
• Sémantique constante des boutons de la souris
• Même vocabulaire pour désigner les mêmes fonctions
• Une organisation et une syntaxe cohérente pour les
menus
• Apparence cohérente des symboles graphiques (icônes,
couleurs, ...)
 Homogénéité/cohérence :
dans un même logiciel
• Alignements

• Espacements
 Homogénéité/cohérence :
entre logiciels d’une suite
• Exemple : bonne
cohérence visuelle entre
versions destinées à
différents pays
 Homogénéité/cohérence :
entre logiciels d’une suite
— A ne pas faire :
 Signifiance des codes et
dénominations

• Définition : adéquation entre

l’objet ou l’information affichée ou entrée
et son référent
 Signifiance des codes et
dénominations
— A faire :

— A ne pas faire :
 Compatibilité

• Définition : La compatibilité se réfère à l’accord pouvant

exister entre :
les caractéristiques des utilisateurs (mémoire,
perceptions, habitudes, compétences, âge, attentes,
etc.) et des tâches,
et l’organisation des sorties, des entrées et du dialogue
d’une application donnée
• concerne également le degré de similitude entre divers
environnements ou applications
 Compatibilité : adaptation aux
utilisateurs
• A prendre en compte
âge
niveau « technologique »
fréquence d’utilisation
handicaps
 Compatibilité : entre
applications
— A faire :
Rédaction d’une évaluation
ergonomique
1. Tester (on ne juge pas ce qu’on n’a pas essayé)
2. Observer les utilisateurs (leurs
caractéristiques)
3. Croiser les sources (guides de style, critères
ergonomiques...)
4. Faire des arbitrages, trouver un équilibre
5. Être diplomate (attention aux formulations)
6. Être constructif (proposer des solutions)
7. Être pédagogue (justifier les remarques et
solutions)
Une check-list
Une check-list
Une check-list
Une check-list
Une check-list
Une check-list
 Sources du cours
• Bastien, J. C. (1993). Ergonomic criteria for the evaluation of
human-computer interfaces. Thèse de doctorat. Inria. France.
• Bastien, J. C., Scapin, D. L. (2001). Évaluation des systèmes
d'information et Critères Ergonomiques. Environnements
évolués et évaluation de l’IHM, Interaction homme-machine
pour les SI.
• Cours Interaction Homme-Machine RICM (Réseau
Informatique et Communication Multimédia) : http://
iihm.imag.fr/nigay/ENSEIG/RICM5/IHM/
• Nadia Elouali: Cours Interaction Homme-Machine (IHM)
• Cours IHM (Master Ingénierie des Médias) ERGONOMIE :
PRINCIPES ET ÉVALUATION