Cours 1

Introduction à l’IHM

http://perso.liris.cnrs.fr/stephanie.jean-daubias/lifIHM/
INFO
Stéphanie Jean-Daubias
[email protected]

L3
Plan du cours
➢ Introduction à l’IHM
 Historique

—2
35
Vous avez dit IHM ?

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

http://www.luc-damas.fr/humeurs/

—3
35
IHM - définitions

 Interface Homme - Machine un peu d’étymologie(latin)

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

Humain Machine

un peu d’étymologie(latin)
 Interaction Homme - Machine interaction
 ensemble des actions permettant la inter : entre
communication entre un système interactif actio : faculté d’agir
et son utilisateur humain —4
35
Prise en compte de l’utilisateur

 Approche technocentré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 (grec)

 centrée sur l’humain et ses besoins anthropocentré
➢ la machine doit s’adapter à l’utilisateur
ανθρωπος (anthropos) : l ’homme
➢ point de vue utilisateur
κɛντρον(kentron) : le centre
—5
35
Prise en compte de l’utilisateur
La métaphore des céréales

—6
35
Adapter l’IHM (1)

 Aux 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

—7
35
 Adapter l’IHM (2)

 Au 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
—8
35
IHM/ergonomie, 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 —9
35
Micro-études de cas

10
—
35
Idées reçues sur l’ergonomie

 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

11
—
35
Plan du cours
✓ Introduction à l’IHM
➢ Historique

12
—
35
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

13
—
35
 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
14
—
35
Évolution des interfaces

 Systèmes plus conviviaux, faciles à comprendre et à utiliser

 Interfaces graphiques
 manipulation directe
 action directe sur les objets représentés à l’écran
 WYSIWYG
 What You See Is What You Get
 ACAI : Affichage Conforme A l'Impression

15
—
35
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

16
—
35
Sortie : visualisation d’informations 2D

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

17
—
35
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

18
—
35
Sortie : visualisation d’informations 3D

19
—
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 (de parole)
 reconnaissance de son/musique

20
—
35
Dispositifs d’entrée visuelle 2D

 Codes barres 2D : texte, web,

mail, wifi, carte de visite…

 Reconnaissance de tracé,
d’écriture manuscrite

 Écran tactiles

 Autres…
 Lecteur  Crayons
d'empreintes optiques

21
—
35
Dispositifs d’entrée 3D

 Capteurs de position, de direction, de vitesse

 Reconnaissance de visage, d’iris

22
—
35
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…

 fréquence cardiaque, niveau sonore, pression atmosphérique,

odeurs…
…GPS

23
—
35
Multimodalité

 Combinaison de moyens d’entrée

 interaction à deux mains

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

Mets-ça… …ici

24
—
35
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

25
—
35
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
26
—
35
Réalité diminuée

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

en temps réel

27
—
35
Interfaces tangibles

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

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

28
—
35
Informatique vestimentaire, « wearable »

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

29
—
35
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

30
—
35
Objets intelligents, web des objets

 Informatique dans les objets du quotidien

  distance entre informatique et non-informatique

31
—
35
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

32
—
35
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 33

—
35
Retour à la réalité…

 Écran, clavier, souris…

34
—
35
Plan du cours
✓ Introduction à l’IHM
✓ Historique
➢ Questions

35
—
35