Interface Homme-Machine Cours 4 3

Transcription

1 Interface Homme-Machine Cours 4 3 Techniques de visualisation "On ne voit que ce qu'on regarde" Philippe Gaussier Alexandre Pitti Maurice Merleau Ponty

2 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

3 IHM interaction humain-environnement = perception + cognition + action Objectif Intention Action de l'utilisateur Ce que l'on va faire Évaluation Planification Exécution Ce que l'on va faire Dans le prochain cours Interprétation Perception L'environnement

4 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

5 Données > représentations Modèle de références de correspondance des données vers les représentations visuelles

6 Données > représentations

7 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

8 Facteurs de l'attention visuelle Attention visuelle dirigée par les propriétés des stimuli couleur mouvement orientation courbure

9 Facteurs de l'attention visuelle Attention visuelle orientée vers un but

10 recherche visuelle

11 recherche parallèle Facile LLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL LLLLXLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLL

12 recherche parallèle LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLXLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLL Toujours facile

13 recherche parallèle LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLXLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL Toujours facile

14 recherche séquentielle FBYCPKNRAGCJSTIVNRWHM CDOFAIKULWZBASUBIFOBIW UEVEQOUHEWHKAFIYJFGLA MEQDPZKSHBJJQUUVCYOHI NTDLLZSNLSGKTCNSVGLAC RYLSJJIFMZFHATXJDZJRUM NRYBPCHTNINTHEUWBFRU WYBNYYYPPQOQFKIGJLNID BPINWAQGYPTRCLYVRASAU Plus dur

15 Théorie de l'attention (Treismann & Gelade, 1980) Recherche parallèle attention pré-attentive Recherche séquentielle attention attentive

16 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.

17 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...

18 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

19 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

20 Focus + Contexte Intégration des détails à la vue globale évite les discontinuités, réduit l encombrement spatial TableLens [Rao & Card 94] 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)

21 Focus + Contexte

22 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

23 Bifocal display Spence, Apperley

24 Bifocal display Apple

25 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

26 Fish eyes Exemples : Moosburg Schafer Transformation linéaire/non-linéaire contrainte à un domaine spatial Keahey, 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

27 Fish eyes Vitesse Vernier, Nigay carte, colline, cylindre, pyramide, sphère Types de distorsions cf. Carpendale, Leung et Apperley...

28 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)

29 Vues hyperboliques

30 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

31 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

32 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

33 Wordle : word + clouds La taillle, la couleur, la proximité des mots indiquent leur saillance.

34 Espace de travail 3D

35 Gestionnaire de fenetre vs Toolkit

36 Cone-Trees/ Cam-Trees

37 Zoom sémantique

38 Zoom sémantique

39 Transparence

40 Transparence

41 Synthèse

42 Arbres

43 Arbres

44 temporel

45 2D, réseaux sémantiques

46 3D

47 3D

48 nd Stock Exchange Visualizer (Visible Decisions)

49 Exemples de toolkits

50 Exemples de toolkits

51 Exemples de toolkits

52 Exemples de toolkits

53 Networkx (python)

54 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...

55 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.

56 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)) -log p(x) 0 1 p(x)

57 Entropie L'Entropie est la quantité d'information moyenne associée à chaque symbole transmis E(I(x)) = - Σ p(x) log(p(x)) -log p(x) 0 1 p(x) Plus E est grand, plus le gain d'information rapporté au nombre d'observation est élevé.

58 Quelques références

59 FIN

60 Théorie de l'information

61 Théorie de l'information

62 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

63 «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

64 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

65 Données > représentations Proximity Similarity Enclosure Closure Continuity Connection

66

67

68

69

70