Faculté des sciences Année : 2017/2018

3ème année Licence Informatique

TD 3
Matière : Interface Homme Machine

Exercice 1 :
Pour chaque interface (de type site web) ci-dessous, indiquer si la loi ergonomique est respectée où
non.

Principe distinction Respecté Loi de destin Respecté

figure/fond Non Respecté commun Non Respecté

Respecté Respecté
Loi de clôture Loi de proximité
Non Respecté Non Respecté

Respectée Loi de familiarité Respecté

Loi de bonne
Non Respecté
continuité Non Respectée
 Exercice 2:

En se basant sur le modèle du processeur humain, justifiez l'utilisation d'association "icônes labels"
dans les logiciels bureautiques.
Exercice 3 :

Relier chaque mot à sa définition correspondante :

Qualité Définition
1. Utilisabilité A. L’interface doit minimiser le nombre d’erreurs de l’utilisateur et l’aider à réparer
ses erreurs
2. Utilité B. Préserve des données et des résultats acquis par l’utilisateur
3. Efficacité C. Prise en compte par le système des actions des utilisateurs ainsi que le contrôle des
utilisateurs sur le traitement de leurs actions
4. Efficience D. Ensemble des moyens mis en œuvre pour conseiller, orienter informer et conduire
l’utilisateur lors de ses interactions (incitation, groupement/distinction, feedback
immédiat, lisibilité)
5. Facilité E. Ensemble des moyens visant à réduire ou éviter les erreurs de l’utilisateur et lui
d’apprentissage permettre de les corriger (protection contre erreurs, qualité des messages d’erreur,
correction des erreurs).
6. Facilité de F. Façon avec laquelle les choix de conception de l’interface sont conservés pour des
mémorisation contextes identiques (et sont différents pour des contextes différents)
7. Réduction des erreurs G. Capacité d’un objet à être facilement utilisé par une personne donnée.
8. Satisfaction H. Ensemble des moyens visant à réduire la charge perceptive et mnésique (difficulté
subjective de mémorisation) de l’utilisateur (brièveté, densité informationnelle)
9. Transparence I. Capacité du système à réagir selon le contexte et l’expérience de l’utilisateur
(flexible, prise en compte de l’expérience de l’utilisateur)
10. Intuitive J. Adéquation entre l’information affichée ou le comportement présenté par
l’utilisateur et son référent.
11. Intégrité K. Interface respecte les contraintes fonctionnelles et opérationnelles
12. Compatibilité L. Interface s’adapte automatiquement au niveau d'expérience ou aux stratégies de
l'utilisateur
13. Guidage M. Capacité à produire une tâche donnée avec minimum d’effort (taux et nature des
erreurs, temps, nombre d’opérations requises)
14. Adaptabilité N. Ce qui se passe réellement dans le système informatique est caché pour
l’utilisateur
15. Adaptative O. Capacité de l’IHM à s’intégrer dans l’activité de l’utilisateur
16. Cohérence P. L’interface doit être plaisante à utiliser
17. Homogénéité Q. L’interface doit permettre à l’utilisateur de se souvenir facilement de son
utilisation
18. Contrôle explicite R. Précision ou degré d’achèvement des objectifs atteint par l’utilisateur
19. Charge du travail S. Interface dans laquelle il n’existe pas de contradiction
20. Gestion des erreurs T. Interface facile à apprendre
21. Signification des U. Système réalise ce que l'utilisateur pense naturellement ou naïvement qu'il va faire
codes et dénominations

Exercice 4 :

1. Quelle est la différence entre l’ergonomie normative et analytique?

2. Énoncez-les critères d’utilisabilité d’une interface ergonomique ?
3. Citez les principes qui réduisent la charge mentale de l’utilisateur ?
4. Comment construire un bon modèle mental ?
5. Citer les règles ergonomiques pour l’évaluation des interfaces web ?
Faculté des sciences Année : 2017/2018
3ème année Licence Informatique
TD 4
Matière : Interface Homme Machine

Exercice 1

- Énoncez les précautions essentielles d’utilisation de l’attribut couleur dans les IHM?
- Dicter les principes de lisibilité, signification et portabilité des couleurs ?
- Citer le principe d’affichage de texte sur écran ?
- Démontrer les principes des 2 secondes et des 3 clics ?

Exercice 2:

On vous propose le schéma général d’organisation d'écran:

- Déterminer les points qui vous paraissent à priori satisfaisants ? Pourquoi?

- Expliquer les points qui ne vous pas paraissent satisfaisants ? Pourquoi? Proposez une autre
organisation générale d'écran.

Exercice 3:

Soit les trois configurations de plaques de cuissons suivantes :

Selon vous, quel modèle de plaque de cuisson paraît le plus ergonomique ?

Exercice 4 :

Comparer les quatre IHM du point de vue ergonomique

Exercice 5 :

- Quelle est la différence entre raccourcis claviers et touches d’accès.

- Le menu ci-dessus appartient à l’application GIF Construction Set. Qu’y a-t-il de bizarre avec ce
menu ?
- Quand on utilise une interface sous Windows, devrait-on penser à de nouveaux raccourcis claviers
pour les opérations d’édition. De même quand on développe une nouvelle interface sous Windows.

Exercice 6 :

Décrivez (1ère ligne), expliquez (2ème ligne - critère ergonomique) et proposer une solution (3ème
ligne) des défauts d’ergonomie de l’interface du logiciel de la figure 01 (identifiez et numérotez les
erreurs sur la copie d’écran.
 1

Solution du TD4

Exercice 5 :
1) les raccourcis claviers consistent à appuyer simultanément sur deux touches de votre clavier.
Exemple Ctrl + C pour copier Les touches d’accès permettent d’accéder à une fonction : exemple (F2+
Suppr) pour accéder à la BIOS
2) Le bizarre c’est l’existence des fonctions Banner, Transition, Wide Palette GIF, LED Sign dans le
menu Edition.
3) Quand on utilise une interface sous Windows on devrait penser à utiliser les raccourcis standards
de Windows, exemple pour copier : Ctrl + C.
Exercice 6 :

1. Guidage( feedback immédiat) :indiquer par menu ou se trouve l’utilisateur.

2. Charge de travail -brévité-concision
3. Gestion des erreurs (protection contre les erreurs en précisant du code postale), en ce qui
concerne le bouton VALIDER , il faut corriger la lettre N.
4. Cohérence : tous le contenu de la fenêtre est écrit en français sauf la date, c’est une
contradiction.
Homogénéité : les boutons ne sont pas alignés correctement.
5. Signification des codes et dénomination : l’icone associé au bouton « insérer une photo » n’est
pas significative.
6. Guidage -groupement : il faut regrouper les boutons radio dans le formulaire « information
générale sur le contact».
7. Charge de travail –densité informationnel-: l’étiquète « ajout d’un contact » n’est pas
concise, par ailleurs la taille des mots est grande.
8. Guidage : les majuscules « CONTACT » sont moins lisibles que les minuscules, c’est un
problème de lisibilité)
Critère Ergonomique de l'Application:

1- Concevoir une interface simple (éviter les interface trop compliqué)

2- Adapter l'affichage au petite écran déduire les contenue

Simplifier l'affichage et c'est nécessaire de faire les moyen d'accès à des
informations plus détaillé

3- Agrandir les nom raisons clientèle dans le grid de microsoft, chaque élément
clickable doit avoir une taille mémoire nécessaire…

4- Indiquer à se trouver l'utilisateur dans les..

- Il est conseillé d'afficher pour chaque case son titre

5- Limier l'utilisation du clavier

Limiter au maximum le cause clause (car la taille des touches du clavier virtuel
est limité cela signifie que l'application devra récupérer toute information
permanente par l'auteur, solution)

6- Rendre les éléments clickable

reconnaissable:

Les icônes et les boutons de l'application devrait être visuellement soyonts

(visible), et « affordant » ( is doivent avoir un « aspect » bombé pour indiquer
qu'ils peuvent être informé)

7- Il est important d'utiliser des icônes claire, par ce que l'utilisateur comprend
facile

8- Exploitation le canal sonore et celui « haptique »:

Utiliser différent canaux de communication pour fournir un feedback à
l'utilisateur.
Sur un téléphone mobile, le canal sonore n'est pas souvent le meilleur choix car si
l'utilisateur est dans un environnement urbaine très bruidant , il ne peut pas
entendre les signaux émie par son téléphone.
En revanche, le canal haptique permet une communication sensoriel efficace:
- Une vibration lors de l'arrivé d'une mise à jour de l'application ainsi de suite.

9- Assurer la continuité des contenus:

Dans le cas d'une application qui s'inscrit dans la contuinité d'un site web.
Il est important que l'utilisateur puisse retrouvé à univers familier et des
contenus cohérent.
de plus s'il a la possibilité d'avoir un compte sur le site web il faut que le
login soit disponible aussi sur l'application mobile qui doit être synchronisé avec
le sit web.
Ceci permet de garantir à l'utilisateur une expérience dans laquel s'il modifie par
exemple des options de son compte sur le site web, elle seront automatiquement
prise en compte

10- Exploiter les outils mobile :

Une application mobile bien conçu pourra exploiter toute la puissance de ses
supports en permettant par exemple de chercher des personnes autour d'un
utilisateur donné grâce à la géolocalisation de scanner le code barre des produits
à mettre dans la liste des postes, de trouver des numéros de téléphones appareil
photo, microphone, GPS, accléléromètre sont donc des outils qui peuvent venir
compléter les fonctionnalité de l'application
11- Penser au contexte d'utilisation et adapter la charte graphique:
Il faut penser à une charte graphique qui tient au compte de l'éclairage et soit
suffisement contrasté pour rester lisible en plein soleils

Exercice supplémentaire:

|——————————————————————
|- Erreur -------- |-|X|
|——————————————————————|
| |
| /?\ Erreur inatendu |
| ____ |
| |OK| |
| ———— |
————————————————————————

Le principe Ergonomique non respecté dans l'exemple est:

- Assistance dans la gestion des erreurs: à travers ce message "ERREUR INATTENDU",
l'utilisateur n'arrive pas à identifier ses erreurs
- Assistance dans le travail:
Absence du bouton "détaille"
- Signification des codes et des nominations:
Utilisation d'un symbole non significative

|——————————————————————
|- Erreur -------- |-|X|
|——————————————————————|
| |
| /!\ Erreur inatendu |
| ____ _______ |
| |OK| |Détails| |
| ———— ———————— |
————————————————————————

2-
————————
|Fichier|
——————————————————————
Quitter Ctrl A |
Enregistrer |
Imprimer avec options |
Enregistrer-sous |
Collage |
——————————————————————

* Les principes Ergonomique non respecté:

- Cohérence entre le menu "fichier" & le menu "édition" (collage)
- Comptabilité (mauvais raccourcis pour le bouton "quitter" Ctrl + A)
- Homoginité : les fonctions "Enregistrer" "Imprimer" et "Collage" ne commencent
pas en majuscule de plus elles ne sont pas ordonnées
- Pas de raccourcis pour le boutton "enregistrer" "imprimer avec options" et
"enregistrer sous"
- mauvaise conjugaison du mot "collage"

————————————————————————————————————————————————
|Lancement de l'application de gestion des votes|
————————————————————————————————————————————————
Le principe ergonomique non respecté dans cet exemple est: la charge du travail ()