introduction à l’ihm - dphu · ihm et programmation o la plupart des applications informatiques...
TRANSCRIPT
![Page 1: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/1.jpg)
Introduction à l’IHM
Stéphanie Jean-Daubias
http://liris.cnrs.fr/stephanie.jean-daubias/
SJD
- L
IRIS
- U
CB
L : I
HM
- L
3 info
INFO
L3
![Page 2: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/2.jpg)
PLAN
Plan du cours
SJD
- L
IRIS
- U
CB
L : I
HM
- L
3 info
Introduction à l’IHM
o Historique
2
![Page 3: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/3.jpg)
Vous avez dit IHM ?
o IHM
Interface Homme – Machine
Interactions Homme – Machine
o Mais aussi
Communication Homme – Machine
Dialogue Homme – Machine
Interaction Personne – Machine
3 SJD - LIRIS - UCBL : IHM - L3 info
![Page 4: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/4.jpg)
IHM - définitions
o Interface homme - machine
ensemble des dispositifs matériels et logiciels permettant à un
utilisateur d’interagir avec un système interactif
o Interaction homme - machine
ensemble des aspects de la conception, de l’implémentation et de
l’évaluation des systèmes informatiques interactifs 4
SJD - LIRIS - UCBL : IHM - L3 info
homme machine
![Page 5: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/5.jpg)
Prise en compte de l’utilisateur
o Approche technocentrée centrée sur la machine et ses possibilités
l’utilisateur doit s’adapter à la machine
o Approche anthropocentrée centrée sur l’homme et ses besoins
la machine doit s’adapter à l’utilisateur 5
SJD - LIRIS - UCBL : IHM - L3 info
![Page 6: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/6.jpg)
Adapter l’IHM (1)
o Caractéristiques de l’utilisateur
différences physiques
âge
handicap
connaissances et expériences
dans le domaine de la tâche (novice, expert, professionnel)
en informatique, sur le système (usage occasionnel, quotidien)
caractéristiques psychologiques
visuel/auditif, logique/intuitif, analytique/synthétique…
caractéristiques socio-culturelles
sens d'écriture
format des dates
signification des icônes, des couleurs
6 SJD - LIRIS - UCBL : IHM - L3 info
![Page 7: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/7.jpg)
Adapter l’IHM (2)
o 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)
o Caractéristiques de la tâche
répétitive, régulière, occasionnelle, sensible aux modifications de
l'environnement, contrainte par le temps, risquée...
o Contraintes techniques
plate-forme
taille mémoire
écran, capteurs, effecteurs
réutilisation de code ancien
7 SJD - LIRIS - UCBL : IHM - L3 info
![Page 8: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/8.jpg)
IHM, domaine pluridisciplinaire
o Informatique
programmation
IA
synthèse et reconnaissance de parole, langue naturelle
image
système...
o Psychologie cognitive
o Ergonomie cognitive, ergonomie des logiciels
o Sciences de l’éducation, didactique
o Anthropologie, sociologie, philosophie, linguistique
o …
o Communication, graphisme, audiovisuel, design 8
SJD - LIRIS - UCBL : IHM - L3 info
![Page 9: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/9.jpg)
IHM et programmation
o La plupart des applications informatiques sont interactives
o L’IHM est souvent un élément clé du logiciel (en + ou -)
o La conception de l'interaction représente plus de 50% du
coût de développement
o 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 / cœur du système
9 SJD - LIRIS - UCBL : IHM - L3 info
![Page 10: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/10.jpg)
Mise en œuvre de logiciels interactifs
o C’est
difficile, long, coûteux
nécessite une approche précoce, méthodique, itérative, expérimentale
o Ce n'est pas
une opération esthétique de l'écran
une affaire de goût, de bon sens, d’intuition
o Méthode ?
pas de solution clé en main
des points de repères théoriques, expérimentaux, des savoir-faire,
des questionnements
des compromis
10 SJD - LIRIS - UCBL : IHM - L3 info
![Page 11: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/11.jpg)
PLAN
Plan du cours
SJD
- L
IRIS
- U
CB
L : I
HM
- L
3 info
11
Introduction à l’IHM
Historique
![Page 12: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/12.jpg)
Historique
1945-1970 : les prémisses
o Dispositifs d’entrée-sortie limités
perforateurs/lecteurs de cartes
tableaux de bord (voyants)
imprimantes
Langages de commandes
12 SJD - LIRIS - UCBL : IHM - L3 info
![Page 13: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/13.jpg)
Historique
1970s : les ordinateurs « modernes »
o « 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
13 SJD - LIRIS - UCBL : IHM - L3 info
Xerox 8010 Star
1981
Macintosh
1984
Apple Lisa
1982
Windows 3.0
1990
![Page 14: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/14.jpg)
Évolution des interfaces
o Systèmes plus conviviaux, faciles à comprendre et à utiliser
o 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
14 SJD - LIRIS - UCBL : IHM - L3 info
![Page 15: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/15.jpg)
Dispositifs de sortie
SJD - LIRIS - UCBL : IHM - L3 info 15
o Écrans
o Imprimantes 3D
o Retour tactile, retour de force
o Son : synthèse vocale
o Son spatialisé, son 3D
annonce devant : avenir
annonce derrière : passé
![Page 16: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/16.jpg)
Sortie : visualisation d’informations 2D
16 SJD - LIRIS - UCBL : IHM - L3 info
fisheye : focus + contexte
![Page 17: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/17.jpg)
o Entre 2D et 3D
puissance de calcul + faible
Sortie : visualisation d’informations 2,5D
17 SJD - LIRIS - UCBL : IHM - L3 info
représentation temporelle
![Page 18: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/18.jpg)
Sortie : visualisation d’informations 3D
18 SJD - LIRIS - UCBL : IHM - L3 info
![Page 19: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/19.jpg)
o Clavier (azerty, Dvorak…)
o Souris, trackball, joystick, pavé tactile
Dispositifs d’entrée (1)
19 SJD - LIRIS - UCBL : IHM - L3 info
![Page 20: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/20.jpg)
o Reconnaissance vocale, reconnaissance de son
o Capteurs de température, hygrométrie, composition de l’air…
o Capteurs d’odeurs, de mouvement, d’altitude…
Dispositifs d’entrée (2)
20 SJD - LIRIS - UCBL : IHM - L3 info
![Page 21: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/21.jpg)
Dispositifs d’entrée visuelle 2D
SJD - LIRIS - UCBL : IHM - L3 info 21
o Codes barres 2D : texte,
web, mail, carte…
o Écran tactiles
o Crayons optiques
o Reconnaissance de tracé,
d’écriture manuscrite
![Page 22: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/22.jpg)
o Capteurs de position, de direction, de vitesse
Dispositifs d’entrée visuelle 3D
22 SJD - LIRIS - UCBL : IHM - L3 info
![Page 23: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/23.jpg)
Mets-ça…
Multimodalité
o Combinaison de moyens d’entrée
interaction à deux mains
« mets-ça ici » : voix + geste
23 SJD - LIRIS - UCBL : IHM - L3 info
…ici
![Page 24: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/24.jpg)
Réalité virtuelle
o Simulation informatique d’un environnement dans lequel le
sujet a l'impression d'évoluer
immersion dans un monde 3D
utilisateur représenté par un avatar
24 SJD - LIRIS - UCBL : IHM - L3 info
![Page 25: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/25.jpg)
Réalité augmentée, réalité mixte
o Superposition de l'image d'un modèle virtuel
sur une image de la réalité
le virtuel est intégré dans le réel
en temps réel
sur écran
sur le réel
25 SJD - LIRIS - UCBL : IHM - L3 info
![Page 26: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/26.jpg)
Réalité diminuée
o Suppression d’un élément sur une image « réelle »
en temps réel
26 SJD - LIRIS - UCBL : IHM - L3 info
![Page 27: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/27.jpg)
Interfaces tangibles
o Association d’objets réels et numériques
action directement sur les objets
interaction plus simple et intuitive
27 SJD - LIRIS - UCBL : IHM - L3 info
![Page 28: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/28.jpg)
Informatique vestimentaire, « wearable »
o Informatique embarquée
dans les vêtements
dans les accessoires
28
![Page 29: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/29.jpg)
o Dispositifs mobiles
petits, puissants, connectés
o 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
Informatique mobile, nomade
29 SJD - LIRIS - UCBL : IHM - L3 info
![Page 30: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/30.jpg)
Objets intelligents, web des objets
o Informatique dans les objets du quotidien
distance entre informatique et non-informatique
30 SJD - LIRIS - UCBL : IHM - L3 info
![Page 31: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/31.jpg)
Environnements pervasifs, ubiquitaires
o 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
31 SJD - LIRIS - UCBL : IHM - L3 info
![Page 32: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/32.jpg)
Collecticiel
o Système interactif collaboratif
ensemble sur un même lieu
table, tableau
à distance
éditeurs partagés
intégrant des moyens de communication
32 SJD - LIRIS - UCBL : IHM - L3 info
Réalité augmentée collaborative
![Page 33: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/33.jpg)
Retour à la réalité…
o Écran, clavier, souris…
33 SJD - LIRIS - UCBL : IHM - L3 info
![Page 34: Introduction à l’IHM - DPHU · IHM et programmation o La plupart des applications informatiques sont interactives o L’IHM est souvent un élément clé du logiciel (en + ou -)](https://reader033.vdocuments.mx/reader033/viewer/2022052612/5f0d1a247e708231d438b057/html5/thumbnails/34.jpg)
PLAN
Plan du cours
SJD
- L
IRIS
- U
CB
L : I
HM
- L
3 info
34
Introduction à l’IHM
Historique