Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Interface Homme-Machine Cours 4 3
Techniques de visualisation
Philippe GaussierAlexandre Pitti
"On ne voit que ce qu'on regarde"
Maurice Merleau Ponty
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
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
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
Données > représentations
Modèle de références
– de correspondance des données vers les représentations visuelles
Données > représentations
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
Facteurs de l'attention visuelle
Attention visuelle dirigée par les propriétés des stimuli
• couleur • mouvement
• orientation • courbure
Facteurs de l'attention visuelle
Attention visuelle orientée vers un but
recherche visuelle
recherche parallèle
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLXLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
Facile
recherche parallèle
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLXLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
Toujours facile
recherche parallèle
LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLXLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL
Toujours facile
recherche séquentielle
FBYCPKNRAGCJSTIVNRWHMCDOFAIKULWZBASUBIFOBIWUEVEQOUHEWHKAFIYJFGLAMEQDPZKSHBJJQUUVCYOHINTDLLZSNLSGKTCNSVGLACRYLSJJIFMZFHATXJDZJRUMNRYBPCHTNINTHEUWBFRUWYBNYYYPPQOQFKIGJLNIDBPINWAQGYPTRCLYVRASAU
Plus dur
Théorie de l'attention (Treismann & Gelade, 1980)
Recherche parallèle → attention pré-attentiveRecherche séquentielle → attention attentive
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.
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
– ...
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
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
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]
Focus + Contexte
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
Bifocal display
Spence, Apperley
Bifocal display
Apple
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
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
Fish eyes
Vitesse
– Vernier, Nigay
– carte, colline, cylindre, pyramide, sphère
Types de distorsions
– cf. Carpendale, Leung et Apperley ...
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)
Vues hyperboliques
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
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
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
Wordle : word + clouds
La taillle, la couleur, la proximité des mots indiquent leur saillance.
Espace de travail 3D
Gestionnaire de fenetre vs Toolkit
Cone-Trees/ Cam-Trees
Zoom sémantique
Zoom sémantique
Transparence
Transparence
Synthèse
Arbres
Arbres
temporel
2D, réseaux sémantiques
3D
3D
nD
Stock Exchange Visualizer (Visible Decisions)
Exemples de toolkits
Exemples de toolkits
Exemples de toolkits
Exemples de toolkits
Networkx (python)
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...
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.
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)
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)
Quelques références
FIN
Théorie de l'information
Théorie de l'information
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
« 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
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
Données > représentations
Proximity
Similarity
Enclosure
Closure
Continuity
Connection