Cours
Interface Homme Machine
Pour les étudiant Licence 3 - ISIL
Chapitre 1: Introduction à l’IHM
Dr. Guezouli L. – Cours des
1
IHM 2021-
Outline
Introduction aux IHM
Objectif des IHM
Définition des IHM
Prise en compte de l’utilisateur
Evolution des IHM
Pourquoi s’intéresser aux IHM
Difficultés des IHM
Dr. Guezouli L. – Cours des
2
IHM 2021-
Outline
Introduction aux IHM
Objectif des IHM
Définition des IHM
Prise en compte de l’utilisateur
Evolution des IHM
Pourquoi s’intéresser aux IHM
Difficultés des IHM
Dr. Guezouli L. – Cours des
3
IHM 2021-
Introduction aux IHM
IHM
• Interface Homme – Machine
• Interactions Homme – Machine
Mais aussi
• Communication Homme – Machine
• Dialogue Homme – Machine
Dr. Guezouli L. – Cours des
4
IHM 2021-
Objectif des IHM
Comment choisir entre deux ou plusieurs
systèmes qui ont le même fonctionnement?
Dr. Guezouli L. – Cours des
5
IHM 2021-
Objectif des IHM
Dr. Guezouli L. – Cours des
6
IHM 2021-
Objectif des IHM
Comment choisir entre deux ou plusieurs
systèmes qui ont le même fonctionnement?
Réponse:
Nous devons choisir
•Le système le plus facile à utiliser, à installer, à
manipuler, à porter, etc.
•Le système Le moins fatiguant
•Même ci c’est cher?
Dr. Guezouli L. – Cours des
7
IHM 2021-
Objectif des IHM
•Un système ou une machine se manipule par
un humain via son interface
•Une interface: Matériel ou logiciel
•Une interface logiciel est : textuelle ou
graphique
•Nous nous intéressons dans ce cours aux
interfaces homme- machine, logiciel,
graphique
Dr. Guezouli L. – Cours des
8
IHM 2021-
IHM - définitions
Interface homme - machine
ensemble des dispositifs matériels et logiciels permettant
à un utilisateur d’interagir avec un système interactif
Dr. Guezouli L. – Cours des
9
IHM 2021-
IHM - définitions
Interaction homme - machine
La conception, la mise en œuvre et a l’évaluation de
systèmes informatiques interactifs destinés à des
utilisateurs humains ainsi qu’a l’étude des principaux
phénomènes qui les entourent
Un système interactif est un système dont le
fonctionnement dépend d’informations fournies
par un environnement externe qu’il ne contrôle
pas
Les systèmes interactifs sont également appelés
ouverts, par opposition aux systèmes fermés - ou
autonomes - dont le fonctionnement peut être
entièrement décrit par des algorithmes
Interface ≠ Interaction
Dr. Guezouli L. – Cours des
10
IHM 2021-
IHM - définitions
Un système?
Système = ensemble d’éléments en
interaction
B
Environnement C
Dr. Guezouli L. – Cours des
11
IHM 2021-
IHM - définitions
Un système?
Système interactif
B
Environnement C
Interaction
A
Dr. Guezouli L. – Cours des
12
IHM 2021-
IHM - définitions
Un système?
Système fermé
B
Environnement C
Interaction
A
Dr. Guezouli L. – Cours des
13
IHM 2021-
IHM - définitions
Un systèmeinteractif
Système interactif
I
N
T
E
B
Environnement R
F
C
Interaction A
C A
E
Dr. Guezouli L. – Cours des
14
IHM 2021-
IHM - définitions
Le système interactif est divisé en deux parties:
partie Interface et partie fonctionnelle
C’est la partie interface qui assure l’échange entre
l’environnement et la partie fonctionnelle du
système interactif
Si le système interactif est une machine et
l’environnement contient un humain qui fait
l’interaction alors on parle d’une interaction
homme machine.
Dr. Guezouli L. – Cours des
15
IHM 2021-
IHM - définitions
Dr. Guezouli L. – Cours des
16
IHM 2021-
IHM - définitions
Interaction Homme - Machine I-HM : est l’échange
entre l’homme et la machine
C’est l’interface Homme Machine IHM qui assure cette
interaction
I Machine
H (Système
I-
M interactif)
HM
Dr. Guezouli L. – Cours des
17
IHM 2021-
IHM - définitions
Définition
Interface Homme - Machine IHM: c’est l’ensemble
des dispositifs matériels et logiciels permettant à un
utilisateur d’interagir avec une machine (système
interactif)
I Machine
H (Système
I-
M interactif)
HM
Dr. Guezouli L. – Cours des
18
IHM 2021-
Prise en compte de l’utilisateur
Approche techno-centrée
centrée sur la machine et ses possibilités
l’utilisateur doit s’adapter à la machine
Approche anthropo-centrée
centrée sur l’homme et ses besoins
la machine doit s’adapter à l’utilisateur
Dr. Guezouli L. – Cours des
19
IHM 2021-
Adapter l’IHM (1)
Caractéristiques de l’utilisateur
différences physiques
âge
handicap
connaissances et expériences
dans le domaine de la tâche (novice, expert, professionnel)
en informatique, sur le système (usage occasionnel,
quotidien)
caractéristiques psychologiques
visuel/auditif, logique/intuitif, analytique/synthétique…
caractéristiques socio-culturelles
sens d'écriture
format des dates
signification des icônes, des couleurs
Dr. Guezouli L. – Cours des
20
IHM 2021-
Adapter l’IHM (2)
Contexte
grand public (proposer une prise en main immédiate)
loisirs (rendre le produit attrayant)
industrie (augmenter la productivité)
systèmes critiques (assurer un risque zéro)
Caractéristiques de la tâche
répétitive, régulière, occasionnelle, sensible aux
modifications de l'environnement, contrainte par le
temps, risquée...
Contraintes techniques
plate-forme
taille mémoire
écran, capteurs, effecteurs
réutilisation de code ancien
Dr. Guezouli L. – Cours des
21
IHM 2021-
IHM, domaine pluridisciplinaire
Informatique
programmation
IA
synthèse et reconnaissance de parole, langue naturelle
image
système...
Psychologie cognitive
Ergonomie cognitive, ergonomie des logiciels
Sciences de l’éducation, didactique
Anthropologie, sociologie, philosophie, linguistique…
Communication, graphisme, audiovisuel, design
Dr. Guezouli L. – Cours des
22
IHM 2021-
IHM et programmation
La plupart des applications informatiques sont
interactives
L’IHM est souvent un élément clé du logiciel (en +
ou -)
La conception de l'interaction représente plus de
50% du coût de développement
L’IHM peut représenter 80% du code d’une
application
elle peut être modifiée/reconstruite de multiples fois
importance de l’indépendance interface / cœur du système
Dr. Guezouli L. – Cours des
23
IHM 2021-
Mise en œuvre de logiciels interactifs
C’est
difficile, long, coûteux
nécessite une approche précoce, méthodique, itérative,
expérimentale
Ce n'est pas
une opération esthétique de l'écran
une affaire de goût, de bon sens, d’intuition
Méthode ?
pas de solution clé en main
des points de repères théoriques, expérimentaux, des savoir-
faire, des questionnements
des compromis
Expérience
Dr. Guezouli L. – Cours des
24
IHM 2021-
Outline
Introduction aux IHM
Objectif des IHM
Définition des IHM
Prise en compte de l’utilisateur
Evolution des IHM
Pourquoi s’intéresser aux IHM
Difficultés des IHM
Dr. Guezouli L. – Cours des
25
IHM 2021-
Historique
1945-1970 : les prémisses
Dispositifs d’entrée-sortie limités
perforateurs/lecteurs de cartes
tableaux de bord (voyants)
imprimantes
Langages de commandes
Dr. Guezouli L. – Cours des
26
IHM 2021-
Historique
1970s : les ordinateurs « modernes »
« Nouveaux » dispositifs d’entrée-sortie
1963 : écran graphique et stylo optique
1968 : première souris
1980 : applications grand public
manipulation directe
restent notre référence
Xerox 8010 Star Apple Lisa Macintosh Windows 3,0
1981 1982 1984
Dr. Guezouli L. –1990
Cours des
27
IHM 2021-
Évolution des interfaces
Systèmes plus conviviaux, faciles à comprendre et à
utiliser
Interfaces graphiques
manipulation directe
action directe pour les objets représentés à l’écran
WYSIWYG
What You See Is What You Get
ACAI : Affichage Conforme A l'Impression
Dr. Guezouli L. – Cours des
28
IHM 2021-
Dispositifs de sortie
Dr. Guezouli L. – Cours des
29
IHM 2021-
Sortie : visualisation d’information 2D
Dr. Guezouli L. – Cours des
30
IHM 2021-
Sortie : visualisation d’information 3D
Dr. Guezouli L. – Cours des
31
IHM 2021-
Dispositifs d’entrée (1)
Dr. Guezouli L. – Cours des
32
IHM 2021-
Dispositifs d’entrée (2)
Dr. Guezouli L. – Cours des
33
IHM 2021-
Dispositifs d’entrée visuelle 2D
Dr. Guezouli L. – Cours des
34
IHM 2021-
Dispositifs d’entrée visuelle 3D
Dr. Guezouli L. – Cours des
35
IHM 2021-
Dispositifs d’entrée - Multimodalité
Dr. Guezouli L. – Cours des
36
IHM 2021-
Réalité virtuelle
Simulation informatique d’un environnement
dans lequel le sujet a l'impression d'évoluer
› immersion dans un monde 3D
› utilisateur représenté par un avatar
Dr. Guezouli L. – Cours des
37
IHM 2021-
Réalité augmentée, réalité mixte
Superposition de l'image d'un modèle virtuel sur
une image de la réalité
› le virtuel est intégré dans le réel
› en temps réel
› sur écran
Dr. Guezouli L. – Cours des
38
IHM 2021-
Réalité diminuée
Suppression d’un élément sur une image « réelle
» en temps réel
Dr. Guezouli L. – Cours des
39
IHM 2021-
Interfaces tangibles
Association d’objets réels et numériques
› action directement sur les objets
› interaction plus simple et intuitive
Dr. Guezouli L. – Cours des
40
IHM 2021-
Informatique vestimentaire, «wearable»
Informatique embarquée
› dans les vêtements
› dans les accessoires
Dr. Guezouli L. – Cours des
41
IHM 2021-
Informatique mobile, nomade
Dispositifs mobiles
› petits, puissants, connectés
Problème de compatibilité entre les différents
dispositifs
› plateforme
› contraintes techniques
bande passante
mémoire
espace de stockage
taille de l’écran plasticité des interfaces
Dr. Guezouli L. – Cours des
42
IHM 2021-
Objets intelligents, web des objets
Informatique dans les objets du quotidien
› distance entre informatique et non-informatique
Dr. Guezouli L. – Cours des
43
IHM 2021-
Environnements pervasifs,
ubiquitaires
Informatique diffuse
› les objets communicants (ordinateurs, smartphones,
objets)
se reconnaissent
se localisent
interagissent entre eux (transfert d’information,
synchronisation des données)
sans action de l'utilisateur
à tout moment
Dr. Guezouli L. – Cours des
44
IHM 2021-
Collecticiel
Système interactif collaboratif
› ensemble sur un même lieu
table, tableau
› à distance
éditeurs partagés
intégrant des moyens de communication
Dr. Guezouli L. – Cours des
45
IHM 2021-
Retour à la réalité…
Écran, clavier, souris…
Dr. Guezouli L. – Cours des
46
IHM 2021-
Dr. Guezouli L. – Cours des
47
IHM 2021-
Outline
Introduction aux IHM
Objectif des IHM
Définition des IHM
Prise en compte de l’utilisateur
Evolution des IHM
Pourquoi s’intéresser aux IHM
Difficultés des IHM
Dr. Guezouli L. – Cours des
48
IHM 2021-
Pourquoi s’intéresser aux IHM
Dr. Guezouli L. – Cours des
49
IHM 2021-
Difficultés des IHM
Un système interactif est différent d’un système
algorithmique :
il doit pouvoir réagir à tout moment, même lorsqu’il
est déjà entrain de faire quelque chose
1. les informaticiens sont souvent formés à
l’algorithmique, au calcul, mais pas à
l’interactivité...
2. les langages de programmation les plus utilisés
ont été conçus pour le calcul, pas pour
l’interactivité
3. Les concepteurs d’interfaces doivent faire face à
de nombreux défis:
Dr. Guezouli L. – Cours des
50
IHM 2021-
Difficultés des IHM
Dr. Guezouli L. – Cours des
51
IHM 2021-
Etapes de développement d’une
IHM
Déterminer l’ensemble des tâches que l’IHM devra permettre de réaliser : une bonne IHM est une IHM dont les
objectifs fonctionnels sont clairement identifiés;
Déterminer les caractéristiques principales des utilisateurs qui seront amenés à utiliser l’IHM (leur profil): la qualité
d’une IHM est directement dépendante de son adéquation avec la population d’utilisateurs pour laquelle elle est prévue;
Proposer plusieurs prototypes d’interface qui seront discutés et évalués par les concepteurs et les utilisateurs
potentiels : une bonne IHM naît le plus souvent de la diversité... et plusieurs pistes doivent donc être explorées;
Produire une spécification explicite de l’IHM, décrivant à la fois les contraintes fonctionnelles et les contraintes de
layout; un manuel d’utilisation et une référence technique pourront également être produits durant cette phase;
Réaliser l’IHM proprement dite (phase d’implémentation effective);
Evaluer l’IHM produite sur la base d’indicateurs reconnus.
Dr. Guezouli L. – Cours des
52
IHM 2021-
IHM - Résumé
Un système est un ensemble d’éléments en interaction
Un système est soit ouvert (interactif) soit fermé
Le Système interactif a une partie interface et une
partie fonctionnelle
Interface homme machine IHM: le dispositif matériel /
logiciel pour assurer l’interaction entre l’homme et la
machine
Dr. Guezouli L. – Cours des
53
IHM 2021-
IHM - Résumé
Dans ce cours:
Nous nous intéressons aux Interfaces Homme Machine
Nous nous intéressons à la question suivante:
Comment construire une interface qui assure une
interaction simple, facile et efficace avec la partie
fonctionnelle du système interactif?
Dr. Guezouli L. – Cours des
54
IHM 2021-
