Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie...
Transcript of Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie...
![Page 1: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/1.jpg)
Interface Homme-Machine Cours 4 3
Techniques de visualisation
Philippe GaussierAlexandre Pitti
"On ne voit que ce qu'on regarde"
Maurice Merleau Ponty
![Page 2: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/2.jpg)
Plan du cours
1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception
et d’évaluation
2 Éléments d'une IHM Interfaces et Infrastructures, prototypage
3 Extraction et Traitement de l'information GUI Visualisation de l'information, Méthodes statistiques
4 & 5 Techniques d'interactions avancées Réalité Augmentée, Interface Tangible, projection 3D,
Analyse du mouvement
![Page 3: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/3.jpg)
IHM interaction humain-environnement
= perception + cognition + action
L'environnement
Exécution
Évaluation
Objectif
Ce que l'on va faireDans le prochain cours
Intention
Planification
Perception
Interprétation
Actionde l'utilisateur
Ce que l'on va faire
![Page 4: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/4.jpg)
Visualisation de l'information
«l’utilisation de représentations informatiques, visuelles et interactives de données abstraites amplifie la cognition »
● compréhension / comparaison de grandes quantités d’informations
● découverte de phénomènes / création d’idées
→ décisions / explications
Données abstraites
● pas de représentations physiques directes● contrairement à la visualisation scientifique
![Page 5: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/5.jpg)
Données > représentations
Modèle de références
– de correspondance des données vers les représentations visuelles
![Page 6: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/6.jpg)
Données > représentations
![Page 7: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/7.jpg)
Qu'est ce l'attention visuelle ?
Au niveau comportemental
L'attention est la capacité de sélectionner une région particulière de l'espace sensorielle• Région topologique de l'espace sensoriel → attention spatiale• Région saillante de l'espace sensoriel → attention portée sur une carac.• Objet en tant que tel → attention portée sur un objet
![Page 8: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/8.jpg)
Facteurs de l'attention visuelle
Attention visuelle dirigée par les propriétés des stimuli
• couleur • mouvement
• orientation • courbure
![Page 9: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/9.jpg)
Facteurs de l'attention visuelle
Attention visuelle orientée vers un but
![Page 10: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/10.jpg)
recherche visuelle
![Page 11: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/11.jpg)
recherche parallèle
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLXLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
Facile
![Page 12: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/12.jpg)
recherche parallèle
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLXLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
Toujours facile
![Page 13: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/13.jpg)
recherche parallèle
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLXLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
Toujours facile
![Page 14: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/14.jpg)
recherche séquentielle
FBYCPKNRAGCJSTIVNRWHMCDOFAIKULWZBASUBIFOBIWUEVEQOUHEWHKAFIYJFGLAMEQDPZKSHBJJQUUVCYOHINTDLLZSNLSGKTCNSVGLACRYLSJJIFMZFHATXJDZJRUMNRYBPCHTNINTHEUWBFRUWYBNYYYPPQOQFKIGJLNIDBPINWAQGYPTRCLYVRASAU
Plus dur
![Page 15: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/15.jpg)
Théorie de l'attention (Treismann & Gelade, 1980)
Recherche parallèle → attention pré-attentiveRecherche séquentielle → attention attentive
![Page 16: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/16.jpg)
Attention automatique vs controllée
Automatique vs Controllée (Stroop, 1935)
Désigner la couleur des mots le + vite possible
Jaune Rouge Vert Bleu Rouge Bleu
Jaune Bleu Rouge Vert Bleu Rouge
La lecture est quasi-automatique et désigner la couleur des mots requiert un certain contrôle, d'où la lenteur.
![Page 17: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/17.jpg)
Caractéristiques
Structures de données
– 1D, 2D, 3D, nD, temporelles
– arbres, réseaux, documents
– spécifiques
Types de variables
– nominales, ordinales, quantitatives
Types d’interaction
– filtrage, sélection/détails, navigation, linking/brushing...
Types de tâches
– globaliser, chercher, mettre en relation....
Types de représentations
– ...
![Page 18: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/18.jpg)
Types de représentations
Multiplexage spatial
– vues multiples
• brushing+linking, overview+detail
– focus+contexte
• fish eye/distorsions, vues hyperboliques
• métaphores 3D et pseudo-3D
Multiplexage temporel
– pan+zoom / interfaces zoomables / zoom sémantique
– requêtes dynamiques (filtrage interactif)
Autres techniques
– transparence / superposition (multiplexage en profondeur)
– hiérarchies, Treemaps...
– représentations spécifiques
![Page 19: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/19.jpg)
Vues multiples
Brushing + Linking
– plusieurs vues liées
– plusieurs attributs
Overview + Detail
–vue globale + vue(s) de détail
But
– voir le contexte et les détails
en même temps
Inconvénients
– discontinuité spatiale
– plusieurs focus d’attention
– encombrement écran
![Page 20: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/20.jpg)
Focus + Contexte
Intégration des détails à la vue globale
– évite les discontinuités, réduit l’encombrement spatial …
Mantra:
– Overview first : représentation graphique de données numériques
– zoom and filter : tri selon critère (colonnes)
– then details on demand : représentation textuelle (lignes de focus)
TableLens
[Rao & Card 94]
![Page 21: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/21.jpg)
Focus + Contexte
![Page 22: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/22.jpg)
Bifocal display
Distorsion géométrique
– contrairement au TableLens (distorsion logique)
– déformation mono-dimensionnelle sur chacun des 4 cotés du focus
– => discontinuités et non préservation de l’aspect ratio gênantes
Spence, Apperley
![Page 23: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/23.jpg)
Bifocal display
Spence, Apperley
![Page 24: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/24.jpg)
Bifocal display
Apple
![Page 25: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/25.jpg)
Fish eye géométrique
Approche
– déformation bi-dimensionnelle
non linéaire continue
– imite l’effet des objectifs à très courte
focale (fish eye, oeil de poisson)
– nombreuses variantes
Avantage
– continuité spatiale de la représentation
Exemple
– Sarkar et Brown
• G(x) = (d+1) x / (d x+1)
• d: facteur de distorsion
![Page 26: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/26.jpg)
Fish eyes
Exemples :
Moosburg
Schafer
Transformation linéaire/non-linéaire
contrainte à un domaine spatialKeahey, Robertson, 1996
Inconvénient des fish eyes
– manque de lisibilité dans la zone de distorsion
Plus ou moins brutale selon technique
texte particulièrement illisible
![Page 27: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/27.jpg)
Fish eyes
Vitesse
– Vernier, Nigay
– carte, colline, cylindre, pyramide, sphère
Types de distorsions
– cf. Carpendale, Leung et Apperley ...
![Page 28: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/28.jpg)
Vues hyperboliques
Approche
– effet ressemblant au fish eye
– pour représenter des arbres
Géométrie hyperbolique
– géometrie non euclidienne
(« 5e postulat » non vérifié)
– mapping entre l’espace hyperbolique
et l’espace euclidien
(modèles de Poincaré ou de Klein)
Principe
– disposer l’arbre dans le plan hyperbolique
– puis mapping sur un disque
Lamping et al.(cf. également Munzer)
![Page 29: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/29.jpg)
Vues hyperboliques
![Page 30: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/30.jpg)
Métaphores 3D
Approche– gradualité du niveau de détail obtenue « naturellement » via l’effet de perspective de la vision conique
– peuvent être vues comme des représentations focus + contexte
– souvent en pseudo 3D
Exemple :Perspective Wall
Mackinlay et al 91
– plan avant : zone de focus, taille nominale
– cotés : zones de contexte, déformées par effet de perspective
![Page 31: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/31.jpg)
Data Mountains
But
– retrouver facilement les
signets d’un navigateur Web
Facultés perceptives
– importance de la mémoire spatiale
(et du geste)
→ plus simple de se souvenir
d'un lieu que d'une information.
Résultats
– évaluation de Czerwinski
(Interact’99)
Robertson, Czerwinski, et al
![Page 32: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/32.jpg)
Textes et documents
Exemple: Document Lens
Approche
– métaphore 3D
– pages disposées selon une grille
– focus sur une page
– distorsion “pyramidale”
– greeking
Critique
– faible lisibilité du texte en perspective
Robertson & Mackinlay 93
![Page 33: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/33.jpg)
Wordle : word + clouds
La taillle, la couleur, la proximité des mots indiquent leur saillance.
![Page 34: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/34.jpg)
Espace de travail 3D
![Page 35: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/35.jpg)
Gestionnaire de fenetre vs Toolkit
![Page 36: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/36.jpg)
Cone-Trees/ Cam-Trees
![Page 37: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/37.jpg)
Zoom sémantique
![Page 38: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/38.jpg)
Zoom sémantique
![Page 39: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/39.jpg)
Transparence
![Page 40: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/40.jpg)
Transparence
![Page 41: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/41.jpg)
Synthèse
![Page 42: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/42.jpg)
Arbres
![Page 43: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/43.jpg)
Arbres
![Page 44: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/44.jpg)
temporel
![Page 45: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/45.jpg)
2D, réseaux sémantiques
![Page 46: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/46.jpg)
3D
![Page 47: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/47.jpg)
3D
![Page 48: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/48.jpg)
nD
Stock Exchange Visualizer (Visible Decisions)
![Page 49: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/49.jpg)
Exemples de toolkits
![Page 50: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/50.jpg)
Exemples de toolkits
![Page 51: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/51.jpg)
Exemples de toolkits
![Page 52: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/52.jpg)
Exemples de toolkits
![Page 53: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/53.jpg)
Networkx (python)
![Page 54: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/54.jpg)
Théorie de l'information
Quantifier l'information en fonction de
sa nouveauté,
sa rareté,
sa pertinence,
sa redondance
permet de structurer et d'organiser l'information
accessible à l'utilisateur, en des tables, arbres, graphes, etc...
![Page 55: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/55.jpg)
Incertitude, surprise, information et entropie
La probabilité d'un événement x, p(x) vaut 1.
→ résultat certain, pas de surprise
Grande prob. → moins de surprise
→ moins incertain La surprise et l'incertitude sont inversement proportionnel
à la probabilité d'apparition de cet événement.
Il y a gain d'information si l'on passe d'un état de grande incertitude à un état de plus faible incertitude.
![Page 56: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/56.jpg)
Information selon Shannon
Selon Shannon, l'incertitude/l'information peut être quantifiée comme inversement proportionnelle à la probabilité d'apparition de l'événement.
I(x) = -log(p(x))
0 1 p(x)
-log p(x)
![Page 57: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/57.jpg)
Entropie
L'Entropie est la quantité d'information moyenne associée à chaque symbole transmis
E(I(x)) = - Σ p(x) log(p(x))
Plus E est grand, plus le gain d'information rapporté au nombre d'observation est élevé.
0 1 p(x)
-log p(x)
![Page 58: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/58.jpg)
Quelques références
![Page 59: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/59.jpg)
FIN
![Page 60: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/60.jpg)
Théorie de l'information
![Page 61: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/61.jpg)
Théorie de l'information
![Page 62: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/62.jpg)
Plan du cours
1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception
et d’évaluation
2 Éléments d'une IHM Interfaces et Infrastructures
3 Acquisition et Traitement de l'information Capteurs, IA et Réseaux de Neurones, Vision et Son
4 Vision et représentation de l'information Vision, théorie information
![Page 63: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/63.jpg)
« Using vision to think »
Mieux exploiter les facultés perceptives et cognitives
– perception pré-attentive, Gestalt...
Aides graphiques externes
– amplifier la cognition via la perception
– utiliser la vision pour penser (« Using Vision to Think ») Exemples : papier pour multiplication, schémas,
diagrammes, panneaux de signalisation, bloc-notes, etc. « The power of the unaided mind is highly overrated. Without external
aids, memory, thought, and reasoning are all constrained. But human intelligence is highly flexible and adaptive, superb at inventing procedures and objects that overcome its own limits. The real powers come from devising external aids that enhance cognitive abilities. How have we increased memory, thought, and reasoning? By the inventions of external aids: It is things that make us smart. » Norman, 1993
![Page 64: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/64.jpg)
Mantra de l’infoviz
Perception d’abord globale puis locale
– Gestalt, Focus/contexte
– « Overview first, zoom and filter, then details on demand »
– Vue globale puis zoom et filtrage puis détails à la demande
Émergence de structures ou comportements
– représentations graphiques spécifiques
● dimension spatiale
– bouclage entre formes visuelles et contrôle interactif
● dimension temporelle Conséquence
– visualisation / interaction intrinsèquement liées
![Page 65: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/65.jpg)
Données > représentations
Proximity
Similarity
Enclosure
Closure
Continuity
Connection
![Page 66: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/66.jpg)
![Page 67: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/67.jpg)
![Page 68: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/68.jpg)
![Page 69: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/69.jpg)
![Page 70: Interface Homme-Machine · Plan du cours 1 Introduction à l'IHM, historique et ergonomie psychologie, handicap et théorie, méthodes de conception et d’évaluation 2 Éléments](https://reader033.fdocuments.net/reader033/viewer/2022060712/607905830d964f64276acdaa/html5/thumbnails/70.jpg)