Centre Universitaire Abdelhafid Boussouf - Mila

3éme INF

Interaction
Homme -
Machine

Chapitre1
Notions
d’interaction

1
2020 - 2021
Objectifs du cours
• Apprendre les concepts de base d’une IHM
ergonomique
• En évitant les erreurs les plus courantes
• Acquérir une vision élargie des IHM ergonomiques
• Apprendre à concevoir une IHM ergonomique
• Se familiariser avec les différentes approches de
conception d’interface
• Apprendre à évaluer une IHM ergonomique
2
IHM ?

3
IHM ?

4
Interface / Interaction
L'interface Homme – Mahine
dispositifs matériels et logiciels
qui permettent à un utilisateur
de commander, contrôler,
superviser un système interactif
5
Interaction Homme – Machine
•Relation entre l’homme et la
machine par l’interface
•Ensemble des aspects
d’interaction avec un système:
pousser un bouton, bouger la
souris, deplacer les doigts...
Pourquoi interaction et pas interface ?
• Les boutons, les menus, les couleurs ou les animations
ne suffisent pas à rendre un système utilisable
• Comment se mesure l’utilisabilité ?
– temps nécessaire pour apprendre
– rapidité d’utilisation (benchmarks)
– taux d’erreurs
– facilité à se souvenir
– satisfaction subjective
– etc.
6
Pourquoi interaction et pas interface ?
• Ce n’est pas seulement l’interface qui compte,
mais l’interaction :
– la séquence d’actions nécessaires pour accomplir une tâche

– l’adéquation entre le système et le contexte dans lequel il est

utilisé

• Les deux sont indissociables dans les

programmes d’aujourd’hui

7
Historique des interfaces

8
 Historique des interfaces
Phase 1 (Interface de matériel)
• 1950s
• Ingénieures / programmeurs

• Électrotechnique

9
 Historique des interfaces
Phase 2 (Interface logiciel)
• 1960s-1970s
• Programmeurs
• Cartes perforées,
traitement par lot
• Utilisateurs
• Informatique
10
 Historique des interfaces
Phase 3 (terminal d’utilisateur)
• 1970s-1990s
• Temps et ressources partagés
• L'illusion d'une machine personnelle
• L'utilisateur peut se permettre de réfléchir pendent l’utilisation
• Les facteurs humains, la psychologie, la conception graphique
• Focus sur le comportement des utilisateurs et la productivité
• Collogiciel : messages / systèmes de fichiers partagés

11
Historique des interfaces
Phase 4 (Interface de dialogue)
• 1980s-
• Ordinateurs personnels
• Plus en psychologie, conception graphique

12
Historique des interfaces
Phase 5 (Interface dans le travail)
• 1990s-
• Réseaux
• Groupes et communautés d’utilisateurs
• Sociologie, anthropologie, études organisationnelles

13
Historique des interfaces
Phase 6 (?)
• 2000s-
• Informatique mobile, Utilisateurs mobiles,
communautés ad-hoc
• Informatique omniprésente (Ubicomp)
• Informatique à la maison
• Informatique sociale
• Arts, design, jeux et divertissement
14
interfaces en lots

15
interfaces jeux

16
Sketchpad – Ivan Sutherland (1963)
Doctorat au MIT
• 1ère interface graphique
http://www.youtube.com/watch?v=mOZqRJzE8xg
• écran graphique
• dispositif de pointage (stylo optique) et boutons
• dessin, zoom, copier-coller, icônes, contraintes géometriques

17
NLS/Augment – Douglas Engelbart
(1968)
Stanford Research Institute
• l’idée est d’augmenter l’intellect humain (Augment) et d’utiliser
un réseau (oNLine System)
• invention de la sourie, clavier & systèmes des boutons
• liens hypertexte (Vannevar Bush (1945)
• travail collaboratif, visio-conférence, partage de documents

18
interfaces textuelles

19
Xerox PARC (années ‘70)

20
Xerox Star (1981)

21
Xerox Star (1981)

22
Xerox Star (1981)

23
Apple Macintosh (1984)

24
Apple Macintosh (1984)

25
Système X Windows (1984)
• issu du projet Athena du MIT : 4000 machines UNIX à
connecter, fournies par les nombreux sponsors (DEC,
IBM, Motorola, etc.)

• modèle le client/serveur:
 séparation quoi/comment
qui facilite la portabilité
 utilisation transparente du réseau qui permet
l’affichage déporté
26
MS Windows (1985)
• Passage des fenêtres sans recouvrement, aux fenêtres
avec recouvrement

27
 Interface bureau (1984 - )
• Plus de puissance graphique et de nouveaux usages
(réseau), mais peu de changement du point de vu de
l’interaction: WIMP (Window, Icone, Menu & Pointer)

• .... Ceci dit cela n’est pas forcement une mauvaise

28
chose !
Evolution de l'interface graphique
• Interfaces à lignes de commande
donnent accès à une commande (une fonction) du système
• Menus et écrans de saisie
donnent accès à une application (un sous-ensemble des
fonctions du système)
• Multi-fenêtrage, interfaces iconiques et
manipulation directe
donnent accès à l'ensemble des fonctions du système, et
au-delà, à celles du réseau

29
Evolution de l'interactivité
• Le degré d'interactivité d'un système peut se mesurer
au nombre et à la nature de ses échanges avec les
utilisateurs
• Deux éléments importants ont contribué à
l'augmentation du degré d'interactivité :
– la possibilité d'exécution en parallèle de plusieurs tâches

– l'avènement des interfaces graphiques

• Le nombre des échanges a beaucoup augmenté, mais

leur nature n'a pas vraiment évolué
30
Evolution des interfaces
 Systèmes plus conviviaux, faciles à comprendre et à utiliser
 Interfaces graphiques
 manipulation directe
 action directe pour les objets représentés à l’écra n
 WYSIWYG
 What You See Is What You Get
 ACAI : Affichage Conforme A l'Impression

31

14
Dispositifs de sortie
 Écrans  Son
 synthèse vocale

 Imprimantes 3D  Son 3D spatialisé

 devant : futur
 derrière : passé

 son 3D holophonique

 Retour de force, retour haptique

 son 3D binaural

32
Sortie : visualisation informations 2D

 représentation des fichiers

33
Sortie : visualisation d’informations 2,5D

 Entre 2D et 3D
 plus riche que le 2D
 moins gourmand en puissance de calcul que le 3D

représentation temporelle

34
Sortie : visualisation d’informations 3D

35
Dispositifs d’entrée

 Claviers
 azerty/qwerty…
 « ergonomiques » : Dvorak, bépo…

 Dispositifs de pointage
 souris, trackball, joystick, pavé tactile
 entrée tactile

 Son
 reconnaissance vocale
 reconnaissance de son/musique
36

18
Dispositifs d’entrée visuelle 2D

 Codes barres 2D : texte, web,  Crayons optiques

mail, wifi, carte de visite…

 Reconnaissance de tracé,
 Écran tactiles d’écriture manuscrite

37
Dispositifs d’entrée visuelle 3D

 Capteurs de position, de direction, de vitesse

38
Autres dispositifs d’entrée : capteurs

 Température, hygrométrie, composition de l’air, lumière…

 Orientation, proximité, mouvement, altitude, direction,

accélération, rotation, champ magnétique…

 Pression, fréquence cardiaque, lecteur d'empreintes digitales,

niveau sonore, baromètre, odeurs…

39
Multimodalité

 Combinaison de moyens d’entrée

 interaction à deux mains

 « mets-ça ici » : voix + geste

Mets-ça… …ici

40
Réalité virtuelle

 Simulation informatique d’un environnement dans lequel

l’utilisateur a l'impression d'évoluer
 immersion dans un monde 3D
 utilisateur représenté par un avatar

41
Réalité augmentée, réalité mixte

 Réalité augmentée
 superposition d’une image (virtuelle) sur le réel (ou son image)
 le virtuel est projeté sur le réel, en temps réel
 sur écran

 sur le réel …ou presque

 Réalité mixte
42  avec dispositif de sortie & dispositif d’entrée
Interfaces tangibles

 Association d’objets réels et numériques

 action directement sur les objets
 interaction plus simple et intuitive

43
Informatique vestimentaire, « wearable »

 Informatique embarquée
 dans les vêtements
 dans les accessoires

44
Collecticiel

 Système interactif collaboratif

 ensemble sur un même lieu
 tableau blanc interactif
 table multitouch
 à distance
 éditeurs partagés
 intégrant des moyens de communication

45

Réalité augmentée collaborative

Définitions d’une IHM
• IHM: Discipline qui s’intéresse à la
conception, le développement, l’évaluation
de systèmes interactifs homme-machine et
les phénomènes autour d’eux.

“Human Computer Interaction is a discipline concerned with the

design, evaluation and implementation of interacting computing
systems for human use and with the study of major phenomena
surrounding them.”
ACM SIGCHI
46
Les interactions Homme -Machine

47
Quelques définitions
• 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 [Wegner, 1997]
• 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

48
système (interactif) homme-machine
• système interactif dont l’environnement est
un ou plusieurs êtres humains

49
Importance des IHM
• Constat :

– L’informatique envahit la vie:

• au quotidien : PC, distributeur de billet, borne de réservation
(aviontrain), téléphone portable, etc.

– au travail : réseau, bureautique professionnelle

• systèmes embarqués (airbus), etc.

– Or, tout le monde n’a pas les mêmes capacités

• Question :
50
– que doit-on attendre d’une bonne interface ?
Importance des IHM
• Les sous questions qui en découle :
– interface invisible, facilité d’utilisation ?

– apprentissage ?

– universelle ?

– évolutive (ajout de fonctionnalités), etc.

• Aspects socio-économiques (rejet, argument

de vente) contre les aspects techniques
(réalisation et utilisabilité)
51
Importance des IHM
IHM = carrefour des compétences
• En informatique : ingénierie (génie logiciel), système,
développement
• Psychologie cognitive
• Ergonomie
• Sociologie
• L’approche est compliquée par l’intégration et la
généralisation de nouvelles techniques d’interaction

52
Importance des IHM

53
Problématique actuelle

54
Les enjeux de la mutation

55
Les enjeux de la mutation

56
Les enjeux des IHM
• Population croissante d'utilisateurs de systèmes
informatiques
• Puissance grandissante des ordinateurs
• Nouveaux dispositifs d'interaction
• Explosion du multimédia : son, image, vidéo etc.
• Développement des réseaux informatiques

CONVERGENCE NUMERIQUE
57
Enjeux pour l’avenir
• L’interaction homme-machine est un domaine
fondamentalement inter-disciplinaire qui touche à plusieurs
enjeux sociétaux majeurs. La conception de systèmes interactifs
n’est pas seulement un problème technique, c’est d’abord un
problème humain qui doit associer la créativité du designer,
l’analyse du psychologue et du sociologue et les outils de
l’informaticien.

• l’interaction homme-machine est confrontée au paradoxe de

l’invisibilité : une interface réussie apparaît “évidente” pour ses
utilisateurs; le travail de conception ne se voit que lorsqu’il est
mal fait. Pour les concepteurs d’interface, la mesure du succès
est élusive. Concevoir l’interaction, c’est créer l’invisible.

58
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 / coeur du
système
59
IHM et programmation
• Nécessite une approche précoce, méthodique, itérative,
expérimentale
• Ce n'est pas simplement
une opération esthétique de l'écran
 une affaire de goût, de bon sens, d’intuition
• Méthode ?
pas toujours de solution prête à l'emploi
des points de repères théoriques, expérimentaux, des
savoirfaire
60
Quel enjeu pour vous ? (long terme)

• Savoir concevoir une IHM

• Savoir réaliser une IHM
• Savoir évaluer une IHM

Faire appel à des

spécialistes ou créer
une équipe
pluridisciplinaire
61
IHM : un domaine pluridisciplinaire

62
Pour quels objectifs ?
Permettre à l’utilisateur d ’accomplir ses tâches :
• De façon efficace
• Avec une bonne productivité
• En toute sécurité
• En prenant plaisir à le faire
• En apprenant rapidement à utiliser le système

63
Idées recues sur l’IHM
 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 à respecter, qui ont des sources scientifiques
 Il existe une méthode miracle
 pas de solution clé en main
 des points de repères théoriques et expérimentaux, des savoir-faire,
des questionnements
 des équilibres à trouver, des compromis à faire
64
Causes de rejets de certaines
applications
• Informations incomplètes.
• Ne respecte pas les termes de l'accord de licence du programme
Développeurs
• L'interface utilisateur est trop complexe.
• Le nom, la description ou les screenshots ne correspondent pas
au contenu et aux fonctionnalités de l'application
• L'application utilise un nom ou une icône similaire à une
application déjà existante, ou contient des déclarations fausses,
frauduleuses ou fallacieuses.
• L'application est en version "béta", "démo", "essai" ou "test"
65
 styles d’interaction

66
Styles d’interaction
• Conversationnel
• Manipulation directe
• Gestuelle
• Crossing
• …

67
interface conversationnelle

68
manipulation directe

69
manipulation directe : mise en œuvre

70
manipulation directe : exemples

71
interaction gestuelle

72
crossing et steering

73
réalité virtuelle
• Immersion sensori-motrice de l’utilisateur

• Un masque et un « cave »
74
interaction tangible
• Interaction avec l’information digitale en manipulant
des objets physiques

75
papier augmenté

76
interaction multi-touche
• Dans la vie réelle, nous faisons des actions avec les 2
mains, pas avec un seul doigt L’interaction multi-
tactile ou multi-touche
• permet des actions parallèles
• réduit la complexité de la tâche
• augmente le parallélisme et réduit le temps

77
Questions

78