Fondamentaux de l’IHM
Chapitre 1
Module: Interactions Homme Machine (IHM)
Département Mathématiques et Informatique
Université d’Alger 1- Benyoucef BENKHEDDA
DR. BELATTAR Khadidja
[Link]@[Link]
2019-2020
Interactions Homme Machine
Interactions Homme Machine
Intitulé de l’UE : UEF2
Nombre de crédits : 04
Coefficient de la Matière : 02
Volume horaire : 1h:30mn de Cours + 1h:30mn de TP
Prérequis
Les méthodes et le cycle de développement d’un logiciel,
Le langage de modélisation UML,
La programmation orientée objets
Objectifs du cours
Connaitre les bases de l’IHM
Apprendre à concevoir et réaliser des systèmes interactifs ergonomiques
Evaluation du cours (Interrogation écrite + examen final)
Interactions Homme Machine
Site : [Link]/[Link]/fall2019/ihm19/home
Code d’accès : ihm19
Contenu du cours
Chapitre 1 : Fondamentaux de l’IHM
Chapitre 2 : Sciences cognitives
Chapitre 3 : Ergonomie des IHMs
Chapitre 4 : Conception des IHMs
Chapitre 5 : Evaluation des IHMs
24/02/2020 3
Introduction
Comment Interagir avec ces système interactifs?
Interface Homme Machine
Interactions Homme Machine 4
Introduction
Dans les Interactions Homme Machine, il faut considérer :
Interface
Homme
Machine
IHM
Interface Homme Machine
Interactions (communication, dialogue)
Homme Machine
[Link]
Interactions Homme Machine 5
Interface Homme Machine
Interface Homme Machine
Définition 1
Ensemble des dispositifs matériels et logiciels mis en œuvre afin qu'un humain
puisse interagir avec système interactif dans l’objectif d’accomplir sa tâche.
Définition 2
Les dispositifs d’entrée et de sortie + les interfaces des logiciels exploitant la
machine.
Définition 3
Ensemble des aspects d’interaction avec un système: pousser un bouton, bouger
la souris, déplacer les doigts...etc.
Interactions Homme Machine 6
Interface Homme Machine
Exemples
Télécommande magique de LG Voiture intelligente de Toyota
Interactions Homme Machine 7
Interface Homme Machine
Exemples
Interactions Homme Machine 8
IHM plastique
Interface Homme-Machine plastique : une interface qui s’adapte au contexte
d’interaction tout en conservant son utilisabilité.
Exemple :
Si La batterie de PC est faible alors passer sur PDA
Interactions Homme Machine 9
Interactions Homme Machine
Interactions Homme Machine
Définition 1 : science de l’interaction englobant l’ensemble des aspects de la :
Conception
Développement
Evaluation des systèmes interactifs utiles et utilisables destinés aux humains
Définition 2 : étude des principaux phénomènes (cognitifs, matériels, logiciels,
sociaux) qui les entourent.
Mode d’interaction : style d’interaction caractérise la manière de
communiquer/dialoguer avec le système interactif.
Interactions Homme Machine 10
Styles d’interaction
Langage naturel écrit ou parlé
questions formulées en langage naturel
commande vocale
dicter des SMS
Conversationnel (langage de commandes/shell scripts)
Interactions Homme Machine 11
Styles d’interaction
Interaction par formulaire, requête et tableur
Navigation hypertextuelle (nœuds, ancre, liens):
Interfaces de type point and click
Interactions Homme Machine 12
Styles d’interaction
Interaction iconique (manipulation directe)
Représentation permanente des (Métaphore du
bureau) objets
Actions physiques directes sur les objets (icônes,…etc.)
Actions réversibles facilement
Feedback immédiat sur les objets
Interfaces graphique ou de type WIMP (Window, Icon, Menu,
Pointer)
Exemple : Editeurs de documents texte WYSIWYG
(What You See Is What You Get), logiciels de dessin,
simulateurs de jeux,…etc.
Interactions Homme Machine 13
Styles d’interaction
Interaction de type WIMP (Window, Icon, Menu, Pointer)
Interface graphique de type WIMP
Multifenêtrage : fenêtre active/inactive
Multifenêtrage avec/sans superposition
Hiérarchique
Avec superposition Sans superposition Fenêtre d’application
(mosaïque)
Interactions Homme Machine 14
Styles d’interaction
Interaction de type WIMP (Window, Icon, Menu, Pointer)
Type de fenêtres
(1) Fenêtres d’applications/fenêtres de documents
Styles d’interaction
Interaction de type WIMP (Window, Icon, Menu, Pointer)
Type de fenêtres
(2) Fenêtre utilitaire (flottante, jaillassante)
Palette d’outils flottante Fenêtres jaillissantes (pop-up)
(3) Boite de dialogue
Styles d’interaction
Interaction de type WIMP (Window, Icon, Menu, Pointer)
Icon: icône
- Symbole graphique interactif
- Représentation à une étiquette
- Configurable+placement automatique
Menu : menu
- Ensemble d’items
Trois activités de base sur les menus
Navigation (dans les hiérarchies des menus, information ressources, etc.)
Sélection (données , paramètres, etc.)
Activation (de programmes, accès aux documents, etc.)
Sélections faites par: souris, touches clavier, en touchant sur des écrans
tactiles, etc.
Interactions Homme Machine 17
Styles d’interaction
Interaction de type WIMP (Window, Icon, Menu, Pointer)
Menu déroulant Menu contextuel circulaire
Menu contextuel
Menu détachable Menu hiérarchique
Interactions Homme Machine 18
Styles d’interaction
Interaction de type WIMP (Window, Icon, Menu, Pointer)
- Curseurs
- Dispositifs de pointage (souris, joystick, trackball, …etc.)
: Positionnement du curseur
: Positionnement dans un texte
: Attente
: Lien hypertexte
: Déplacement
: Redimensionnement
Interactions Homme Machine 19
Styles d’interaction
Autres Widgets dans l’interaction de type WIMP
Un widget est un composant unique (état actif/inactif, position) dans une
interface graphique :
- Boutons (action, graphique, radio, case à cocher)
- Zone de texte
- Lien hypertexte
- Liste
- Tableau/grille
- Indicateur de progression
- Barre de séparation
- Molette d’incrément
- Etiquette
Tâches de saisie, de sélection, de tracé, de déclenchement, de pointage,
de défilement, de spécification d’arguments, de transformation des Widgets
Interactions Homme Machine 20
Styles d’interaction
Interaction gestuelle
(1) Geste 2D (stylo, doigts)
(2) Geste 3D (Kinect, Leap-Motion, …)
(3) Gestes multi-touche
Interaction tangible
Interactions Homme Machine 21
Périphériques d’entrées
Dispositifs de saisies
Clavier (Azerty, Dvorak,…)
Pavé numérique
Dispositifs de lecture
Lecteur de disque optique Lecteur de cartes Lecteur de codes barre
Interactions Homme Machine 22
Périphériques d’entrées
Dispositifs de pointage
Souris Trackball Pavé tactile
Tablette Crayon optique
Interactions Homme Machine 23
Périphériques d’entrées
Contrôleur de jeu (2D/3D)
Manette de jeu Joystick
Kinect Gant numérique
Interactions Homme Machine 24
Périphériques d’entrées
Dispositifs d’acquisition
Scanner
Webcam Microphone
Interactions Homme Machine 25
Périphériques d’entrées
Capteurs
Température Composition de l’air Lumière
Orientation Pression Fréquence cardiaque
Interactions Homme Machine 26
Périphériques de sorties
Périphérique à retours d’effort
Ecran Imprimante 3D
Périphérique à retours tactile Enceinte acoustique Dispositifs de visualisation
de données 2D/3D,…
Interactions Homme Machine 27
Périphériques de sorties
Collecticiels Dispositifs mobiles
Dispositifs vestimentaires
(objet intelligent)
Interactions Homme Machine 28
Système interactif
Un système interactif : un système physico-numérique en interaction avec
un (ou plusieurs) humain(s).
Application informatique (bureautique, mobile)
Site Web,
Appareil électronique… etc.
Entrées Système Sorties
Utilisateur
interactif
Modifier état
interne du système
Entrées/sorties de l’utilisateur
(1) Dans l'interaction en entrée (le mode langage, le mode action )
(2) Dans l'interaction en sortie (le mode visuel, le mode auditif, le mode tactile)
Interactions Homme Machine 29
Système interactif
Un système interactif
• Noyau fonctionnel : toute l’application
• IHM (Interface Homme Machine) : les éléments matériels et logiciels
Systèmes interactifs ouverts (dont le fonctionnement dépend d'informations
fournies par un environnement externe non contrôlé)
Interactions Homme Machine 30
Exemples des systèmes interactifs
Exemples des systèmes interactifs
Applications n-tièrs (site Web,…)
Robotique et apprentissage automatique
Application mobile
Applications de différentes réalités
Informatique vestimentaire
… etc.
Réalité augmentée Réalité mixte Réalité diminuée
Interactions Homme Machine 31
Exemples des systèmes interactifs
Réalité virtuelle Réalité tangible Collecticiels Informatique
(interface 3 D) vestimentaire
Milgram, Takemura, Utsumi et Kishino (1994)
Interactions Homme Machine 32
Exemples des systèmes interactifs
Outil de la reconnaissance Outil de la reconnaissance Outil de la reconnaissance
vocale de tracé manuscrite d’écriture manuscrite
Interactions Homme Machine 33
Evolution des IHMs
Interactions Homme Machine 34
Evolution des IHMs
Cartes perforées Console des commandes Linux Interface du logiciel Word
Mets -ça …ici
Interaction « mets ça ici »: parole + manipulation directe
[Link]
Interactions Homme Machine 35
Evolution des ordinateurs
(1) Préhistoire des ordinateurs (avant 1945)
Carte perforées
Interaction Homme-Machine est limitée aux traitements des cartes
Ruban perforé Perforateur Programme sur un ruban
perforé
[Link]
Interactions Homme Machine 36
Evolution des ordinateurs
(2) Ordinateurs de la première génération (1945-1956)
Calculateurs simples avec un temps d’exécution très long,
Interaction niveau matériel,
Utilisation réservée aux experts,
Interaction Homme-Machine quasiment-inexistante.
ENIAC Manchester Mark I EDVAC
(Eckert et Mauchly, 1946) (Newman et al., 1948) (Cambridge, Neumann – 1949)
Interactions Homme Machine 37
Evolution des ordinateurs
The Witch, plus vieil ordinateur encore fonctionnel
1949 Conception
1951-1957 Centre de Recherche Atomique d’Harwell (UK)
1957-1973 Enseignement informatique, Wolverhampton Univ.
2012 National Museum of Computing, Bletchley
Interactions Homme Machine 38
Evolution des ordinateurs
(3) Ordinateurs de 2 ème et 3ème génération (1956-1971)
Séparation matériel/logiciel
Systèmes d’exploitation (ex: OS/360, IT, DOS/360, Unix, …),
Langages de haut niveau (Fortran, Cobol, PL/1, Basic),
Syntaxe des commandes difficile à apprendre,
Ordinateur IBM 7030 Ordinateur DCE PDP-8 Compilateur UNIVAC1
(Grace Hopper)
Interactions Homme Machine 39
Evolution des ordinateurs
(3) Ordinateurs de 2 ème et 3ème génération (1956-1971)
Interaction est réalisée par des dispositifs d’entrée/sortie (dispositifs limités).
Logiciel graphique avec Souris
stylo optique (Doug Enghelbar, Standford)
(Ivan Sutherland ,MIT)
Interactions Homme Machine 40
Evolution des ordinateurs
(4) Ordinateurs modernes (1971-aujourd’hui)
Manipulation directe sur les objets représentés à l’écran,
Traitements de textes et images via des objets sur l’interface,
Affichage conforme à l’impression+ nouvelles forme d’interaction.
Interaction conviviale (adaptées) à toute personne novice.
Interactions Homme Machine 41
Evolution des ordinateurs
Centre de recherche PARC Xerox (Palo Alto Research Center):
Terminal bureautique avec interface graphique (GUI: Graphicial User Interface)
Langage orienté objet (smaltalk)
Société Apple:
Micro ordinateur bureautique Lisa
Macintosh
Société Microsoft:
Windows NT (système d’exploitation multitâches, multi processeurs, multi utilisateurs)
Windows 95, Windows 98, Windows 2000
Xp, Vista, Windows 7, Windows 8
Interactions Homme Machine 42
Intérêt de l’IHM
Exemples de mauvaises IHMs :
Le crash de SAINT ODILE (1992)
Un crash d’un avion Airbus A320 (pendant la descente) a provoqué 87 morts et 9
vivants une confusion entre deux indicateurs ; angle de descente (mode FPA : Flight
Path Angle) et vitesse verticale (mode VS : Vertical Speed) descente rapide de l’avion,
Erreurs ergonomiques liée à la conception du cockpit: Mauvaise visibilité de deux modes,
l’absence des unités de mesure des deux indicateurs, et l’absence de repères visuels.
Interactions Homme Machine 43
Intérêt de l’IHM
Exemples de mauvaises IHMs :
ELECTIONS US 2000
Lors des élections présidentielles américaines, un vote électronique de la population de la
Floride a eu lieu, aucun candidat n'était alors clairement déclaré vainqueur 1% des votes
était sous examen (écart entre les candidats était si serré).
Défauts ergonomiques, relatifs aux
problèmes d’illisibilité (lignes horizontales
alignées sur les trous ) et risque d’erreurs
(espacement réduit entre les trous)
dans le bulletin de vote électronique,
Interactions Homme Machine 44
Intérêt de l’IHM
Exemples de mauvaises IHMs :
Accident nucléaire Three-Miles Island
Mauvaise prise en compte du facteur humain dans la conception du poste de contrôle : étiquettes
de sécurité masquant les voyants d’alertes.
Interactions Homme Machine 45
Intérêt de l’IHM
La solution :
Concevoir des systèmes interactifs adaptés à l’utilisateur final, tâches à
réaliser, aux différents contextes d’usage et technologies en respectant
la qualité logiciel (utilisabilité et utilité).
Interactions Homme Machine 46
Adapter une IHM
Caractéristiques de l’utilisateur
Style d’apprentissage
Préférences pour les outils utilisés
Différences physiques
âge (vieux, enfant)
handicap (moteur, sensoriel, psychique, mental)
Problèmes de vision, sensibilité aux couleurs,…etc.
Différences physiologiques
(bonne/mauvaise) acuité visuelle
fatigabilité
Différences psychologiques
vitesse d’apprentissage
capacité de mémorisation
curiosité
capacité d’analyse/synthèse, de perception(visuel/auditif),…etc.
Interactions Homme Machine 47
Adapter une IHM
Caractéristiques de l’utilisateur
Connaissances et expériences
Dans le domaine de la tâche
(novice, expert, professionnel)
En informatique, sur le système utilisé
(usage occasionnel, quotidien)
Caractéristiques socio-culturelles
niveau d’éducation
profession
origine social, pays
sens d'écriture
format des dates (05.10.2000)
signification des icônes
des couleurs
culture et personnalité.
Interactions Homme Machine 48
Adapter une IHM
Caractéristiques de la tâche à réaliser
Connaitre les buts, les tâches (leurs séquencement) et actions
Faire l’Analyse du déroulement des étapes (Workflow)
Tâche répétitive, sensible aux changements de l’environnement
Tâche régulière, occasionnelle, critique
Le temps est il facteur critique ?
Accomplissement de la tâche seul ou avec collaboration
Exécution des tâches en parallèle (ou séquentielle)
Partage de décision entre l’homme et la machine
Interactions Homme Machine 49
Adapter une IHM
Au contexte
19/02/2019
Interactions Homme Machine 50
Adapter une IHM
Contraintes techniques
Contraintes matérielles
taille mémoire,
Bande passante,
Puissance de calcul
qualité des périphériques d’entré/sorties
capteurs
réutilisation de code ancien
Contraintes logicielles
plateforme
applications disponibles
Organisation des machines
machine isolées/en réseau
19/02/2019
Interactions Homme Machine 51
Disciplines connexes
Intelligence
Design
Artificielle
Communication,
Informatique Psychologie
Audio visuel,
cognitive Graphisme,
Reconnaissance
Programmation Sciences design
de parole
Ergonomie Informatique
cognitives
Langage
Génie logiciel Anthropologie,
Sciences cognitives Sociologie,
naturel
Philosophie,
Infographie
Linguistique
Imagerie
Interactions Homme Machine 52
Idées reçues sur l’IHM
La conception, développement et mise en œuvre des systèmes interactifs
C’est facile
difficile, long et coûteux
C’est une opération esthétique de l'écran
nécessite une approche précoce, méthodique, itérative, expérimentale
C’est seulement une affaire de goût, de bon sens, d’intuition
des règles standards à respecter
Il existe une méthode efficace
pas de solution magique
des principes théoriques et expérimentaux, des savoir-faire, de
l’expérience
des équilibres à trouver, des compromis à faire entres plusieurs aspects
Il faut prendre en compte tous les aspects relatifs l’IHM et d’une manière précoce et itératif
Interactions Homme Machine 53
Enjeux de l’IHM
La réalisation des systèmes interactifs qui soient à la fois utiles et
utilisables quelques soit le contexte d’usage,
Le compromis entre la puissance, la simplicité des interfaces et
l’interaction située.
Interactions Homme Machine 54
Perspectives de l’IHM
Comprendre
Décrire Expliquer Prédire
Innover
Proposer des nouvelles
formes d’interaction (optimisées)
Guider
Théorie, méthodes et outils
Interactions Homme Machine 55
Interactions Homme Machine 56
Références bibliographiques
[1] B. Shneiderman (1987). Designing the user Interface: Strategies for
effective human computers, Edition Wesley.
[2] J. Coutaz (1990). Interface homme-ordinateur, conception et
réalisation. Dunod informatique.
[3] J-B,Cramps(1998). Interfaces graphiques ergonomiques, conception
et modélisation.
[4] [Link] (2001). Analyse et conception de l'IHM : interaction
homme-machine pour les SI Volume1, Traité IC2, série Informatique et
Systèmes d'Information.
[5] S-A Serengul (2006). The FastTrack to Human-Computer Interaction,
(Paperback) Thomson Learning.
[6] D. Benyon (2013). Designing Interactive Systems: A Comprehensive
Guide to HCI, UX and Interaction Design, Pearson; 3 edition.
Interactions Homme Machine
Références bibliographiques
[7] Kolski, C, Ezzedine, H et Abed, M (2001). Développement du logiciel :
des cycles classiques aux cycles enrichis sous l’angle des IHM, ouvrage
collectif, Analyse et conception de l'IHM, Interaction homme-machine
pour les systèmes d'information Vol 1, Hermès, 2001, 250 p, ISBN 2
7462-0239-5, p. 23-49.
[8] Yvonne Rogers, Helen Sharp et Jenny Preece (2011). Interaction
Design: beyond human computer interaction (3rd edition).
Interactions Homme Machine
