Chapitre 1

Les Interfaces Homme-Machine

(IHM)

M. SOUALAH UMMTO
 Plan du cours

✔ Introduction
⚫ Définitions, Importance de l’IHM

✔ Evolution des Interfaces graphiques

✔ Notions de base des IHM

⚫ Programmes et Interfaces Homme-Machine
⚫ Les composants
⚫ Les interactions

✔ Méthode de conception : Modèle Conceptuel d’Interface

✔ Les interfaces orientées fenêtres/Interfaces orientées documents

✔ Les principes ergonomiques

✔ Le modèle logique d’interface

✔ Evaluation des IHM

 Plan du cours

✔ Chapitre 1 : Introduction à l'IHM

⚫ Qu’est ce que l’Interaction Homme- Machine ?
⚫ Petit Historique
⚫ Système interactif
⚫ Aspect pluridisciplinaire de l’IHM

✔ Chapitre 2 : Méthodes de conception des interfaces

⚫ Conception orientée utilisateur
⚫ Phase d’Analyse
⚫ Phase de Conception
⚫ Phase de Production
⚫ Phase d’Evaluation
 Plan du cours

✔ Chapitre 3 : Principes ergonomiques du web et du Logiciel

⚫ Différentes grilles de critères

⚫ Etude des critères ergonomiques de Bastien C. et Scapin D. , 1997
⚫ Principes de conception à respecter pour garantir une IHM ergonomique
✔ Chapitre 4 : Etude de quelques environnements de développement des
interfaces
⚫ Libraire SWING de JAVA
⚫ Environnement What You See Is What You Get ( NetBeans , JBuilder , ..etc)
⚫ Programmation évènementielle
✔ Chapitre 5 : Tendances « Interaction multimodale et réalité virtuelle»
Chapitre I - Introduction à l’IHM

I – Principes et Définitions

Terminologie utilisée :
✔ Interface graphique,

✔ design d’application,

✔ GUI : Graphic User Interface,

✔ IHM : Interface Homme-Machine,

✔ Charte ergonomique, …

IHM : Plusieurs expressions, un seul objectif

Assurer une communication aisée, rapide et

intuitive entre l’homme et la machine.
Chapitre I - Introduction à l’IHM

I – Principes et Définitions

Objets de l’IHM
✔ Les objets de l’interface sont présentés sous forme de figures :
Communication facile et intuitive avec l'utilisateur.

✔ Symboles commun à l’environnement quotidien :

▪ Ciseaux (Couper),
▪ Sablier (Attendre),
▪ Ascenseur (Monter et descendre),…
Chapitre I - Introduction à l’IHM

Mode de fonctionnement d’une IHM

✔ Principe de manipulation directe : Accès direct aux objets de l’interface à
l’aide la souris ou du clavier.

Objectifs :
Permettre à l’utilisateur d’accomplir ses tâches :
✔ de façon efficace,
✔ avec une bonne productivité,
✔ en toute sécurité,
✔ en prenant du plaisir à le faire,
✔ en apprenant rapidement à utiliser le système.
Chapitre I - Introduction à l’IHM

Définition : Qu'est ce que l'IHM ?

Une IHM est une application informatique qui prend en compte, au cours de
son exécution, des informations communiquées par le ou les utilisateurs du
système, et qui produit, au cours de son exécution, une représentation
perceptible de son état interne.

Noyau
Interface fonctionnel

✔ Les entrées fournies par l’utilisateur dépendent des sorties produites par le
système et inversement.
✔ Les applications « Batch » sont différentes des systèmes interactifs (Batch
processing versus Transaction processing : TP).
Chapitre I - Introduction à l’IHM

II – Historique de l'IHM
1963 : Travaux de Ivan Sutherland (Thèse de doctorat – USA)
▪ Ils décrit les bases d’un système appelé "SketchPad":"Le
bloc à dessin".
▪ "Sketchpad" a été le premier programme à proposer
une interface graphique, en utilisant un moniteur et
un crayon optique.

▪ L'idée du programme était d'avoir un dessin principal qui

puisse s'instancier en plusieurs répliques. Si l'utilisateur modifiait le dessin
principal à l'aide de son crayon-optique, toutes les instances changeaient
également.
▪ Prédiction : L’ordinateur fera un grand bond en avant quand il pourra
gérer des images et non pas uniquement du texte.
Chapitre I - Introduction à l’IHM

II – Historique de l'IHM
1968 : A Stanford Research Institute : Douglas EngelBart
✔ Pionnier du mode graphique comme interface Homme-Machine.
✔ Epoque de la carte perforée :
▪ Ecran 25 X 80 : Inspiré de la carte perforée.
▪ Seule la dernière ligne est active. L’accès aux lignes précédentes se fait par
commande.
▪ Douglas EngelBart : L’utilisateur pense en terme de page ⇒ Nouvelle philosophie
d’utilisation de l’écran : Accéder à toutes la surface de l’écran.
▪ Adressage spécifique de chaque point de l’écran : Introduction de la technologie point
à point (Naissance du BitMap).
▪ Invention de la souris : Système permettant à un pointeur d’être positionné à
n’importe quel endroit de l’écran.
▪ Invention du concept de fenêtre : Chaque fenêtre peut contenir un document différent
et placée à tout endroit de l’écran (Chevauchement, alignement, superposition,…etc.)
▪ Souris + Fenêtre = Naissance de l’interface graphique.
La carte perforée
La carte perforée

Appareil de perforation de cartes IBM

 La carte perforée

Archivage de cartons de cartes perforées archivés au service du NARA (National

Archives & Records Administration) en 1959. Chaque carton peut contenir 2 000
cartes d'une ligne de 80 colonnes chacune.
Chapitre I - Introduction à l’IHM

II – Historique de l'IHM
Années 70 : Xerox – Laboratoire de recherche – Alto Research Center (en Californie) :
✔ Mise en place de la première station à écran graphique + souris
✔ Conception d’un langage permettant de manipuler les fenêtres = SmallTalk
✔ Le système est commercialisé par Xerox en 1979 : Prix exorbitant.

Années 80 : Effervescence des constructeurs

✔ Apple, cède des parts à Xerox et accède aux travaux de Alto.
✔ 1981 : Macintosh (Apple) - Bureau, icones, technologie WYSIWYG.
✔ Autres constructeurs :
▪ Digital Research produit GEM pour ATARI,
▪ Quaterdeck Office Systems propose Desc,
▪ IBM annonce TopView (1984).
▪ Microsoft prépare Windows.
Chapitre I - Introduction à l’IHM

II – Historique de l'IHM

Années 90 : L’explosion grâce à Windows

✔ 1981 : Apple propose à Microsoft de développer des logiciels pour Macintosh.
✔ Microsoft accepte : Multiplan, Word, Chart et participe à l’amélioration de l’interface
graphique.
✔ Microsoft pense à créer son propre produit.
✔ Accord entre Apple et Microsoft : La présentation de Windows doit être différente de
celle de Macintosh et sa sortie pas avant 1983.
✔ 1990 : Windows version 3 ⇒ Trois millions d’exemplaires vendus dans les premiers
mois : Explosion des interfaces graphiques.
Chapitre I - Introduction à l’IHM

II – Historique de l'IHM
Années 90 : L’explosion grâce à Windows
✔ 1995 : Windows 95, complètement indépendante de DOS, 32 bits,
Multitâches: Savant mélange des interfaces du marché (OS/2, Macintosh,
...etc.).
✔ Microsoft met en avant une interface orientée "document" et pas orientée
"application", comme s’est le cas avec Windows 3
✔ La notion d’application est purement informatique, L’interface orientée
document est proche du monde réel : Proposition d’une série d’objets
(Calculatrice, gomme, stylo, classeurs, corbeille, imprimante, téléphone, boîte
postale) que l’utilisateur va utiliser pour produire son document final.
✔ A partir de cette date, les interface graphiques sont en continuelle évolution.
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique

Il est constitué de trois partis

Programme informatique

Les données

Les traitements

L’interface Homme-Machine
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique
1.1 – Les traitements
✔ Les traitements sont un ensemble d’opérations de calcul nécessaires pour obtenir un
résultat.
✔ Algorithme → Programme → Traitement → Résultat.
✔ Algorithme : Combine des opérations arithmétiques, logiques et des structures
répétitives (SI…ALORS…).
1.2 – Les données
✔ Ensemble des valeurs numériques, logiques, alphabétiques ou tout autre type qui
subissent un traitement.
✔ Elles peuvent être :
▪ locales au programme.
▪ Mémorisées à l’extérieur du programme dans un fichier ou une BDD.
▪ Saisies par l’utilisateur au moment ou le traitement en a besoin.
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique

Données
mémorisées

Données Traitement
Saisies
- Opérations arithmétiques
- Structures alternatives
- Structures répétitives

Données
locales
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique
1.3 – L’interface homme-machine ou IHM
✔ L’IHM se donne pour objectif de mettre en communication le programme avec
les utilisateurs.

Données
mémorisées

Affichage Données Traitement

des résultats Interface Saisies
- Opérations arithmétiques
Homme-Mac - Structures alternatives
hine - Structures répétitives

Données
locales
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique

1.3 – L’interface homme-machine ou IHM

On distingue trois types de programmes :

Types de programmes

Les programmes qui ne communiquent pas avec les utilisateurs

Les programmes qui communiquent de façon indirecte

Les programmes interactifs

Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique
Types de programmes :
a – Programmes qui ne communiquent pas avec l’utilisateur
✔ En général, ce sont les programmes de contrôle automatique de processus qui
récupèrent des données en provenance d’un processus externe (thermomètre,
baromètre, …etc.).
✔ Les programme fonctionnent de façon autonomes, mais parfois, ils affichent les
résultats. Ex : Pilotage automatique.

Actions sur le processus

Capteurs
Programme
Variables
affichées pour
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique
Types de programmes :
b – Programmes qui communiquent de façon indirecte

✔ Ce sont des programmes qui se contentent d’éditer les résultats fournis à

l’utilisateur sous forme de papier (impression), de disquette ou tout autre
support de communication.
✔ Ce sont les programmes batch : Fonctionnement désynchronisé.

Programme
Impression
de résultats
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique

Types de programmes :
c – Programmes interactifs
✔ Un programme interactif est celui qui exige la présence physique de l’utilisateur
devant le terminal au moment de l’exécution du programme et lui donner la
possibilité d’intervenir dans sa logique d’exécution.

✔ Trois types d’interactions :

▪ Affichage du résultat sur écran.
▪ Saisie de données par l’utilisateur.
▪ Entrée d’une commande par l’utilisateur.
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

1 – Structure générale d’un programme informatique
Types de programmes :

c – Programmes interactifs
Entrée de
commandes

Programme
Saisie des Affichage de
données résultats

Types d'IHM : Nous pouvons retrouver trois types d’IHM :

✔ IHM de type caractères ou texte : TUI (Text User Interface)
✔ IHM orientées fenêtres telles que Windows.
✔ IHM orientées documents dont l’objet de base est le document multimédia (HTML).
Chapitre I - Introduction à l’IHM

c – Programmes interactifs
- IHM de type caractères ou texte : TUI (Text User Interface)
Chapitre I - Introduction à l’IHM

c – Programmes interactifs
- IHM orientées fenêtres (Telle que Windows)
Chapitre I - Introduction à l’IHM

c – Programmes interactifs
- IHM orientées document (Hypermédia : Web)
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

2 – Système interactif
IHM : Plusieurs appellations sont candidates :
✔ Interfaces Homme-Machine
✔ Dialogue Homme-Machine
✔ Communication Homme-Machine
✔ Interaction Homme-Machine

Interface Homme-Machine versus Interaction Homme-machine

Interface Homme-Machine :
- Ensemble de dispositifs matériels et logiciels permettant à un usager humain de
communiquer avec la machine (La communication se fait en général, avec un système
interactif). IH
M
Chapitre I - Introduction à l’IHM

III – Programmes et Interfaces Homme-Machine (IHM)

2 – Système interactif
Interface Homme-Machine versus Interaction Homme-machine
Interaction Homme-Machine :
Ensemble des actions nécessaire pour assurer la communication entre le
système dit interactif et son utilisateur.
2.1. Définition (P. Wegner, 1997) :
Un système interactif est un système dont le fonctionnement dépend d'un
environnement externe, qu'il ne contrôle pas.
Remarque :
- Les systèmes interactifs sont dits ouverts ou autonome. Cela signifie qu'ils
interagissent en permanence avec leur environnement.
- Un système interactif doit être entièrement, décrit par un programme (Algorithme).
Chapitre I - Introduction à l’IHM

2 – Système interactif
2.2. Interface versus interaction
- L'interface désigne le vecteur de communication (le moyen, l'outil,
dispositif technique ou le média) par lequel deux éléments de types
distincts communiquent.
- Le système interactif est composé de deux éléments du vecteur de
communication :
▪ Les fonctionnalités proposées par la machine,
▪ L'utilisateur.
Chapitre I - Introduction à l’IHM

2 – Système interactif
2.2. Interface versus interaction
Remarque :
▪ L'interaction est représentée par la séquence d'actions nécessaire pour
exécuter une tâche. D'où la nécessité d'adéquation entre le système et
son utilisateur.
▪ L'interface est le dispositif permettant l'interaction entre l'homme et la
machine.
▪ Les deux concepts, sont indissociables.
 Chapitre I - Introduction à l’IHM

2.3. Importance d'un système interactif

✔ Les objets d'une IHM (Boutons, couleurs, Menus ou animation) ne
suffisent pas pour rendre le système utilisable !
✔ La séquence d'actions à effectuer pour exécuter une tâche est très
importante.
✔ L'utilisabilité d'une interface se mesure :
▪ À la rapidité d'utilisation,
▪ Au temps d'adaptabilité de l'usager (facilité d'apprentissage),
▪ Taux d'erreurs,
▪ Réponse aux besoins de l'utilisateur,
▪ Satisfaction subjective (couleur, mémorisation des actions,…etc.)
▪ …etc.
 Chapitre I - Introduction à l’IHM

2.4. Catégories de systèmes interactifs

✔ La catégorisation des systèmes interactifs se fait selon le style d'interaction.
✔ Un style d'interaction est représenté par l'ensemble des règles, des techniques et
des méthodes de communication des systèmes interactifs.
✔ Nous distinguons trois (03) styles d'interaction :
1. Style conversationnel,
2. Style par manipulation directe,
3. Style par reconnaissance de traces.
 Chapitre I - Introduction à l’IHM

2.4. Catégories de systèmes interactifs

2.4.1. Catégorie : Style conversationnel
a. Système conversationnel simple
✔ Taper le texte au clavier,
✔ Exécution de la commande après validation,
✔ Mode d'interaction le plus ancien, qui nécessite l'apprentissage du langage de commandes.
 Chapitre I - Introduction à l’IHM

2.4. Catégories de systèmes interactifs

2.4.1. Catégorie : Style conversationnel
b. Menus, formulaires
✔ Le système présente l'ensemble des fonctionnalités sous forme de menus,
✔ L'utilisateur interagit avec la machine via un formulaire : Saisie des données, puis
validation pour enfin lancer l'exécution.
Chapitre I - Introduction à l’IHM

2.4. Catégories de systèmes interactifs

2.4.1. Catégorie : Style conversationnel
c. Navigation hypertexte
✔ Un hypertexte est une fonction qui permet d'établir un lien direct entre deux
objets (texte, image, …etc.) différents d'un ou de plusieurs documents.
✔ La navigation hypertexte consiste à définir un ensemble de nœuds, liés entre eux
et d'accéder directement, d'un nœud à un autre par de simples clics de souris.
✔ Dans ce modèle d'interaction plusieurs actions sont possibles :
▪ Sélectionner un lien,
▪ Revenir en arrière,
▪ Aller vers l'avant…
 Chapitre I - Introduction à l’IHM

2.4. Catégories de systèmes interactifs

2.4.2. Catégorie : Manipulation directe
✔ Le principe d'accès direct consiste à se rapprocher le plus possible des concepts
physiques utilisés par l'homme, tels que le bureau, le classeur, …
✔ Le modèle d'accès direct utilise des métaphore sous forme de représentation
graphique appelé icône.
✔ La sélection d'une icône permet d'accéder directement à la fonction
représentative.
✔ Le mode d'accès direct offre une structuration plus intuitive.
Chapitre I - Introduction à l’IHM

2.4.2. Catégorie : Manipulation directe

Principe de fonctionnement du style "Manipulation directe" :
▪ Affichage permanent des objets du système
▪ Accès direct aux objets d'intérêt en utilisant le clic souris
▪ Toute action est réversible et dont l'effet est immédiat
▪ Structuration de l'interface sous forme de couches.
Deux modèles sont répondus :
- Modèle 1 : Edition de document – Principe WYSIWYG (What You See Is
What You Get : Le document sur écran est proche autant que possible que le
document imprimé).
- Modèle 2 : Interaction iconique – Pricipe WIMP (Window, Icons, Menus and
Pointing device : Les interfaces WIMP permettent à l’utilisateur d’interagir avec
le système depuis l’écran de l’ordinateur grâce à un dispositif de pointage "la
souris", et d’éléments d’interfaces comme des fenêtres, des menus déroulants et
des icônes, qui représentent les commandes actionnables.)
Chapitre I - Introduction à l’IHM

2.4.2. Catégorie : Manipulation directe

Principe de fonctionnement du style "Manipulation directe" :
- WIMP : Windows (Fenêtres), Icones, Menus et Pointage
✔ Présentation : Fenêtres, menus et représentation graphique
✔ Interaction : Menus, Boîtes de dialogues, zones de saisie,…etc.
✔ Entrée : Pointage, sélection, tracé
Exemple :
- Interface générique
- Approche métaphorique
- Drag and drop (Glisser-Déposer)
 Chapitre I - Introduction à l’IHM

2.4.3. Catégorie : Reconnaissance de traces

✔ On parle aussi d'interaction gestuelle
✔ Le principe repose sur la reconnaissance des mouvements du périphérique de
localisation par rapport à un vocabulaire gestuel prédéfini.
Exemple : Interface à stylo
Chapitre I - Introduction à l’IHM

2.4.4. Autres catégories (Exposés)

✔ Interaction sonores,
✔ Interaction temporaire,
✔ Interaction See Through
✔ Réalité virtuelle,
✔ Interface 3D
✔ Interaction 3D
✔ Réalité augmentée
✔ Interaction collaborative
✔ Interaction multimodale
✔ Crossing and steering
✔ Et encore d'autres….etc.
Chapitre I - Introduction à l’IHM

3 – Aspects pluridisciplinaires de l'IHM

✔ L'informatique a envahit le quotidien de l'homme.
✔ Quoi attendre d'une bonne interface ?
▪ Facilité d'apprentissage ?
▪ Evolutivité (Ajout de nouvelles fonctions) ?
▪ Universalité ?
...
IHM = Carrefour des compétences
✔ Informatique : Ingénierie, développement,…
✔ Ergonomie,
✔ Sociologie,
✔ Architecture (Design, …)
Chapitre I - Introduction à l’IHM

3 – Aspects pluridisciplinaires de l'IHM

Chapitre I - Introduction à l’IHM