interface homme-machine · plan du cours 1 introduction à l'ihm, historique et ergonomie...

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