CM1

Introduction à l’IHM

INFO
Stéphanie Jean-Daubias
[Link]-Daubias@[Link]
[Link]
L3
Plan du cours
➢ Introduction à l’IHM
 Historique

2
Vous avez dit IHM ?

 IHM
 Interface Homme – Machine
 Interactions Homme – Machine
 Mais aussi
 Communication Homme – Machine
 Dialogue Homme – Machine
 Interaction Personne – Machine

[Link]

3
IHM - définitions

 Interface Homme - Machine un peu d’étymologie...

 ensemble des dispositifs matériels et logiciels interface
permettant à un utilisateur humain d’interagir inter : entre
avec un système interactif facies: l’aspect
latin

Homme Machine

un peu d’étymologie...
 Interaction Homme - Machine interaction
 ensemble des actions permettant la inter : entre
actio : faculté d’agir
communication entre un système interactif et latin
son utilisateur humain 4
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
➢ point de vue concepteur

 Approche anthropocentrée un peu d’étymologie...

 centrée sur l’Homme et ses besoins anthropocentré
➢ la machine doit s’adapter à l’utilisateur ανθρωπος (anthropos) : l’homme
κɛντρον (kentron) : le centre
➢ point de vue utilisateur grec
5
Adapter l’IHM (1)

 Caractéristiques de l’utilisateur
 différences physiques (âge, handicap)
 connaissances et expérience (novice, expert, professionnel)
 dans le domaine de la tâche
 en informatique, sur le logiciel
 caractéristiques psychologiques
 visuel/auditif, logique/intuitif, analytique/synthétique…
 caractéristiques socioculturelles
 format des dates 05.10.2000
 sens d'écriture
 signification des icônes, des couleurs

6
 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
 usage occasionnel, régulier, quotidien, tâche répétitive
 sensible aux modifications de l'environnement, risquée,
contrainte par le temps...
 Contraintes techniques
 plateforme
 mémoire, bande passante
 écran, capteurs, effecteurs
COBOL  réutilisation de code ancien
7
IHM, domaine pluridisciplinaire
Informatique

program
image
mation
Psychologie
cognitive

système IA
Ergonomie
cognitive,
ergonomie des
logiciels
génie
parole
logiciel
Sciences de
l’éducation,
didactique

Anthropologie,
sociologie,
philosophie,
linguistique

Communication,
graphisme,
audiovisuel, design 8
Idées reçues 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

9
Plan du cours
✓ Introduction à l’IHM
➢ Historique

10
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

11
 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 - 1981 Apple Lisa - 1982 Macintosh - 1984 Windows 3.0 - 1990
12
É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

13
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

14
Sortie : visualisation d’informations 2D

 Représentation de fichiers  Fisheye : focus + contexte

15
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

16
Sortie : visualisation d’informations 3D

17
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

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

19
Dispositifs d’entrée visuelle 3D

 Capteurs de position, de direction, de vitesse

20
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…

21
Multimodalité

 Combinaison de moyens d’entrée

 interaction à deux mains

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

Mets-ça… …ici

22
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

23
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
 avec dispositif de sortie & dispositif d’entrée
24
Réalité diminuée

 Suppression d’un élément sur une image « réelle »

en temps réel

25
Interfaces tangibles

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

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

26
Informatique vestimentaire, « wearable »

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

27
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

28
Objets intelligents, web des objets

 Informatique dans les objets du quotidien

  distance entre informatique et non-informatique

29
Environnements pervasifs, ubiquitaires

 Environnement pervasif : 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
 Environnement ubiquitaire
 pervasif
 mobile

30
 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
Réalité augmentée collaborative

31
Retour à la réalité…

 Écran, clavier, souris…

32
Plan du cours
✓ Introduction à l’IHM
✓ Historique
➢ Questions

33