Cours 1

Introduction à l’IHM

[Link]
INFO
Stéphanie Jean-Daubias
[Link]-Daubias@[Link]

L3

Dernière mise à jour

09/09/2023 15:27
Déroulement VOUS ÊTES ICI

• Cours Organisation de l’UE Introduction

• Cours Introduction l’IHM
• Cours Conception
• TP en équipes
Conception • Vidéo en équipes
• Cours IHM maquettes
TP maquettage

Tests • Cours Théories générales pour l’ergo

• Cours Tests utilisateurs utilisateurs • TP évaluation ergo théories avec JADE
• TP test utilisateurs • Cours Éléments d’IHM – guides de style
• TP rapport d’évaluation ergonomique
• Cours Critères d’évaluation généraux
• TP évaluation ergo critères avec JADE
Ergonomie • Cours Critères d’évaluation Web
• TP noté rapport d’évaluation ergo Web
• Cours Critères d’évaluation mobile
• TP évaluation ergo mobile
• TP évaluation complète JADE Préparation • Cours Critères d’évaluation Handicap
• TP vidéo pédagogique de l’examen • TP maquettage

Examen
+ vraie vie

2
—
38
➢ Introduction à l’IHM
 Historique

—3
38
Vous avez dit IHM ?

 IHM
 Interface Humain – Machine
 Interactions Humain – Machine
 Mais aussi
 Communication Humain – Machine
 Dialogue Humain – Machine
 Interactions Humain - Robot

[Link] —4
38
IHM - définitions

 Interface Humain - Machine

 ensemble des dispositifs matériels et logiciels
permettant à un utilisateur humain d’interagir
avec un système numérique interactif
 Interaction Humain - Machine
 ensemble des actions permettant la communication entre
 un système numérique interactif
 et son utilisateur humain
un peu d’étymologie (latin)
 action réciproque (entre humain et machine) interface
inter : entre
 commande des machines par les humains
 retour/rétroaction de la machine vers l’humain
facies : l ’aspect
interaction
 Interfaces support des interactions inter : entre
actio : faculté d’agir
Humain Machine
—5
38
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 ’humain
➢ point de vue utilisateur κɛντρον (kentron) : le centre

—6
38
Prise en compte de l’utilisateur
La métaphore des céréales

—7
38
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, des nombres décimaux 17,42 / 17.42
 sens d'écriture
 signification des icônes, des couleurs

—8
38
 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)
 Aux 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...
 Aux contraintes techniques
 plateforme
 mémoire, bande passante
 écran, capteurs, effecteurs
COBOL  réutilisation de code ancien
—9
38
IHM/ergonomie, domaine pluridisciplinaire

 Disciplines concernées
 informatique
 système
 génie logiciel
 programmation
 IA
 image, parole
 psychologie cognitive, ergonomie cognitive (des logiciels)
 sciences de l’éducation, didactique
 sociologie, linguistique…
 communication, graphisme, design
 Ergonomie vs design
 design : dépendant des modes
 ergonomie : constant (aux évolutions de la science près)
 UI design /UX design 10
—
38
Micro-études de cas

11
—
38
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

12
—
38
✓ Introduction à l’IHM
➢ Historique : l’IHM de ses prémisses au futur

 Emmanuel Lazard, Pierre Mounier-Kuhn, Histoire illustrée de l'informatique, EDP Sciences, 2019 13
—
38
Historique
1945-1970 : les prémisses
 Dispositifs d’entrée-sortie limités
 perforateurs/lecteurs de cartes
 tableaux de bord (voyants)
 imprimantes

 Puis
 écrans / clavier
 langages de commandes

14
—
38
 Historique
1970s : les ordinateurs « modernes »
 « Nouveaux » dispositifs d’entrée-sortie
 1963 : écran graphique et stylo optique
 1963 : 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
15
—
38
É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

16
—
38
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

17
—
38
Sortie : visualisation d’informations 2D

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

18
—
38
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

19
—
38
Sortie : visualisation d’informations 3D

20
—
38
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

21
—
38
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

22
—
38
Dispositifs d’entrée 3D

 Capteurs de position, de direction, de vitesse

 Reconnaissance de visage, d’iris

23
—
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…

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

odeurs…
…GPS

24
—
38
Interaction multimodale
Interaction multisensorielle
 Interaction multimodale
 combinaison de moyens d’entrée
 modalités proches :  modalités différentes : voix + geste
interaction à deux mains Mets-ça… …ici

 Interaction multisensorielle
 implique plusieurs sens différents (vue, ouïe, toucher, goût, odorat)
 via des effets sensoriels
 vent, eau, lumière, vibrations,
mouvements corporels…
 produits par des effecteurs
 ventilateur, vaporisateur, lampe,
veste haptique, siège mobile… 25
—
38
RV : Réalité Virtuelle

 Principe
 simulation informatique d’un environnement
dans lequel l’utilisateur a l'impression d'évoluer
 immersion dans un monde 3D à 360°, temps réel
 utilisateur représenté par un avatar

 Réel/virtuel
 100% virtuel, monde réel occulté
 Interactions
 avec le virtuel, en 3D (gestes, mouvements,
déplacements, commandes vocales)
 Équipement
 casque de RV spécifique
 smartphone + casque (ou cardboard)
 Usages
 ludique, pédagogique, médical, recherche 26
—
38
RA : Réalité Augmentée

 Principe
 superposition d’une image (virtuelle) sur le réel (ou son image)
 l’utilisateur n’est pas coupé de la réalité
 Réel/virtuel
 le virtuel est projeté sur le réel, en temps réel
 la perception est centrée sur le réel avec les compléments du virtuel
 Interactions
 faibles avec le virtuel
 Équipement
 sur écran, éventuellement via des lunettes
 sur le réel
 Usages
 loisirs (sports), commercial
 professionnel, médical
 mais attention à la surcharge ! 27
—
38
Réalité diminuée

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

en temps réel

28
—
38
RM : Réalité Mixte

 Principe
 nouvelle réalité associant les environnements réel et virtuel
 superposition d’une image (virtuelle) sur le réel en temps réel
 dispositif de sortie d’information
 avec laquelle on peut interagir
 dispositif d’entrée d’information
 Réel/virtuel
 lien étroit du réel et du virtuel
 Interactions
 avec le virtuel et avec le réel
 Équipement
 spécifique
 Usages
 plutôt professionnels 29
—
38
XR : Extended reality
Réalités étendues / immersives
 Principe
 ensemble des technologies immersives associant réel et virtuel
 RV : réalité virtuelle
 RA : réalité augmentée
 RM : réalité mixte

continuum de la virtualité
réalité réalité augmentée virtualité augmentée réalité virtuelle
réalité mixte
réalité étendue 30
—
38
Interfaces tangibles

 Dispositifs hybrides : objets réels + objets numériques

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

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

32
—
38
Objets intelligents, web des objets

 Informatique dans les objets du quotidien (dont domotique)

  distance entre informatique et non-informatique

33
—
38
Informatique vestimentaire, « wearable »

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

34
—
38
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

35
—
38
Collecticiel

 Système interactif collaboratif

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

Réalité augmentée collaborative 36

—
38
Retour à la réalité…

 Écran, clavier, souris…

37
—
38
✓ Introduction à l’IHM
✓ Historique
➢ Questions

38
—
38