La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

01/03/2014 Perception Cédric Dumas Elements from CS 7450 - Information Visualization Jan. 10, 2002 - John Stasko – Georgia Tech.

Présentations similaires


Présentation au sujet: "01/03/2014 Perception Cédric Dumas Elements from CS 7450 - Information Visualization Jan. 10, 2002 - John Stasko – Georgia Tech."— Transcription de la présentation:

1 01/03/2014 Perception Cédric Dumas Elements from CS Information Visualization Jan. 10, John Stasko – Georgia Tech

2 2 Lorigine ? n Un des premiers domaines de recherche de la psychologie expérimentale n Le plus important : la vision LA VISION

3 3 Pourquoi ? n Système visuel –Ce que lon perçoit nest pas ce que lon voit –Linformation visuelle est traitée Homme connaissances physiologie problèmes Système bien gérer/présenter linformation Comment quelquun utilise le système ???

4 4 Activité perceptive n Interprétation des messages sensoriels n Pour acquérir une connaissance du milieu, de ses actions è organise en un tout cohérent et significatif lensemble des informations

5 5 Exemple Perception : phénomène dynamique analyse sens + connaissances

6 6 Sens n Vision n Toucher n Audition n Goût n Odorat+ fonction kinesthésique Système nerveux stimuli réponse récepteurs effecteurs environnement

7 7 Fonction kinesthésique n Infos fournies par les capteurs proprioceptifs n Donne les postures du corps n Permet de contrôler léquilibre

8 8 Audition n sens multidirectionnel –fonction de signalisation –fonction esthétique: la musique –fonction sociale: la langage

9 9 Toucher n Le contact de la peau n la pression sur la peau n le mouvement du contact sur la peau n la température perçue par la peau n le façonnement en trois dimensions des objets touchés n etc...

10 10 Fonction visuelle n Iris n Pupille n Cornée n Cristallin n Fovéa n Point aveugle

11 11 Fovéa n Centre de l œil = macula n Centre de la macula = fovéa n Cellules photo-réceptrices sensibles spécifiquement à des longueurs donde: –cônes –bâtonnets

12 12 Spectre électromagnétique

13 Color Models n HVS model –Hue - what people think of color –Value - light/dark, ranges black white –Saturation - intensity, ranges hue gray white black Value Hue Saturation

14 Color Categories n Are there certain canonical colors? –Post & Greene 86 had people name different colors on a monitor –Pictured are ones with > 75% commonality

15 Luminance n Important for fg-bg colors to differ in brightness Hello, here is some text. Can you read what it says?

16 Color for Categories n Can different colors be used for categories of nominal variables? –Yes –Wares suggestion: 12 colors red, green, yellow, blue, black, white, pink, cyan, gray, orange, brown, purple –Fréderic Vernier suggestion : 6 hues + black-gray-white Red, yellow, blue, cyan, green, magenta –Think to LCD screnn !

17 Color for Sequences n Can you order these (low->hi)

18 Possible Color Sequences Gray scaleSingle sequence part spectral scale Full spectral scale Single sequence single hue scale Double-ended multiple hue scale

19 Color Purposes n Call attention to specific data n Increase appeal, memorability n Increase number of dimensions for encoding data –Example, Ware and Beatty 88 x,y - variables 1 & 2 amount of r,g,b - variables 3, 4, & 5

20 Using Color n Modesty! Less is more n Use blue in large regions, not thin lines n Use red and green in the center of the field of view (edges of retina not sensitive to these) n Use black, white, yellow in periphery n Use adjacent colors that vary in hue & value

21 Using Color n Do not use adjacent colors that vary in amount of blue n Dont use high saturation, spectrally extreme colors together (causes after images) n Use color for grouping and search n Beware effects from adjacent color regions (my old house - example)

22 22 Compositions difficiles Magenta Bleu Compuserve's WinCim 2.0 Microsoft Word

23 23 Perception de la brillance n Contraste = différence de luminance –contraste faible = lecture difficile –contraste fort = gêne n Le système visuel accentue les contrastes

24 Luminance/Brightness n Luminance –Measured amount of light coming from some place n Brightness –Perceived amount of light coming from source

25 Different Brightness ?

26

27 Brightness n Perceived brightness is non-linear function of amount of light emitted by source –Typically a power function –S = aI n S - sensation I - intensity n Very different on screen versus paper

28 Grayscale n Probably not best way to encode data because of contrast issues –Surface orientation and surroundings matter a great deal –Luminance channel of visual system is so fundamental to so much of perception We can get by without color discrimination, but not luminance

29 29 Problème de contraste Apple's QuickTime 4.0 Player IBM RealCD (IBM's User Interface Architecture and Design Group)

30 Key Perceptual Properties n Brightness n Color n Texture n Shape

31 31 Perception de la profondeur n Image formée au niveau de la rétine est bi-dimensionnelle n perception de la 3ème dimension –indices monoculaires –indices binoculaires

32 32 Indices monoculaires n Indices picturaux –la taille relative des objets –lintensité lumineuse –lombrage sur lobjet –linterposition –la hauteur du champ visuel –le gradient de texture –la perspective linéaire –la parallaxe du mouvement n Indice non pictural : l'accommodation

33 33 Exemple dombrage

34 34 Problèmes de perception 3D Pirates: Quest for the seas

35 35 Indices binoculaires n La disparité rétinienne n la convergence oculaire

36 36 La perception du mouvement n Le mouvement absolu n Le mouvement relatif n Le mouvement apparent

37 37 Problèmes danimation Drawing Board LT Mouvement relatif et apparent

38 38 Lorganisation perceptive n Loi de proximité n Loi de clôture n Loi de continuité n Loi de similitude

39 39 Lorganisation perceptive (2) n Loi de destin commun n Loi de taille relative n Loi de symétrie

40 40 Traitement global de la forme

41 41 Figure et Fond

42 42 Eléments de diagramme (1) Extrait de Information Visualization: Perception for Design, Colin Ware, éd. Morgan-Kaufmann

43 43 Eléments de diagramme (2)

44 Le principe de monosémie n Faire correspondre à chaque variable cognitive (élément d'information, données ou relation) une et une seule variable visuelle (couleur, forme, etc.): 44

45 Le principe de l'effet proportionnel n Les données doivent être traduites sous une forme visuelle dont les variations sont interprétables en fonction des valeurs propres des données n Valeur quantitative –forme –gradient 45

46 Le principe du moindre coût n toujours opter pour la représentation la plus économique et la plus simple; n la compréhension et la communication obéissent spontanément à la loi du moindre effort. 46

47 Le principe de simplification n les dessins figuratifs et les illustrations sont plus lisibles s'ils sont simplifiés n le critère de pertinence n'est pas le réalisme de la représentation mais bien la reconnaissance de l'objet représenté. 47

48 Le principe de familiarisation n Préférable d'utiliser des pictogrammes (modèles graphiques normalisés), des symboles et des conventions dont l'usage s'est déjà répandu. n Les composantes culturelles ou socioculturelles sont dans cette perspective très importantes. 48

49 49 Eléments de cartographie (1)

50 50 Eléments de cartographie (1)

51 Cartographie n 51

52 Sémiologie Graphique n La communication graphique se fonde sur des règles différentes de la communication linguistique n Lefficacité de la transmission visuelle nest bien réalisée cependant que si le message a été préalablement codé en respectant un certain nombre de règles assez strictes de la communication par les moyens graphiques. n On appelle sémiologie graphique lensemble des règles qui permettent lutilisation dun système graphique de signes pour la transmission dune information n La sémiologie graphique est une discipline qui s'occupe : –de la transcription, dans le système graphique d'un signe, d'un ensemble de données ; –du traitement de ces données afin de faire apparaître l'information d'ensemble recherchée; –de la construction d'images les mieux adaptées à communiquer cette information. n « la perception visuelle dispose de trois variables sensibles : la variation des taches et les deux dimensions du plan, et ceci, hors du temps. Les systèmes destinés à lœil sont dabord spatiaux et atemporels. Doù leur propriété essentielle : dans un instant de perception, les systèmes linéaires ne nous communiquent quun seul son ou signe, tandis que les systèmes spatiaux, dont la graphique, nous communiquent dans le même instant les relations des trois variables. Utiliser au mieux cette puissance considérable de la vision dans le cadre dun raisonnement logique, tel est lobjet de la graphique, niveau monosémique de la perception spatiale.» (Bertin, 1999, p.7) 52

53 Variables visuelles n les variables ne possèdent pas la même aptitude à exprimer les mêmes informations. n Tailles : variation quantitatives. n Forme : identité de lobjet n Variation intensité : relation dordre n Couleurs : identité, différences, culturel, sens n Grains (trames) = {formes, taille}, différences relatives n Orientation : exprime une différence 53

54 54 Monde perçu et monde réel n Constance perceptive n Ambiguïtés perceptives n Illusion perceptive

55 55 Constance perceptive n Propriétés invariantes des objets perçus: –constance perceptive de la forme –constance perceptive de la taille –constance perceptive de la luminosité –constance perceptive de la couleur

56 56 Constance et consistance « consistency makes the interface familiar and predictable » (The Windows User Interface Guidelines for Software Design, Microsoft Press) Paint WebZip Visual Basic 5.0

57 57 Les Ambiguïtés perceptives n Fonction : –des connaissances –des attentes –du contexte

58 58 Problème dambiguïté Zoc (envoi de fichier) Send Send without carriage returns Send with quotes Send with CIS quotes

59 59 Les illusions perceptives n Illusions géométriques

60 60 Les illusions perceptives (2) n Figures paradoxales n Figures illusoires

61 Related Disciplines n Psychophysics –Applying methods of physics to measuring human perceptual systems How fast must light flicker until we perceive it as constant? What change in brightness can we perceive? n Cognitive psychology –Understanding how people think, here, how it relates to perception

62 Perceptual Processing n Seek to better understand visual perception and visual information processing –Multiple theories or models exist –Need to understand physiology and cognitive psychology

63 One (simple) Model n Two stage process –Parallel extraction of low-level properties of scene –Sequential goal-directed processing Ware 2000 Stage 1Stage 2 Early, parallel detection of color, texture, shape, spatial attributes Serial processing of object identification (using memory) and spatial layout, action

64 Stage 1 - Low-level, Parallel n Neurons in eye & brain responsible for different kinds of information –Orientation, color, texture, movement, etc. n Arrays of neurons work in parallel n Occurs automatically n Rapid n Information is transitory, briefly held in iconic store n Bottom-up data-driven model of processing n Often called pre-attentive processing

65 Stage 2 - Sequential, Goal- Directed n Splits into subsystems for object recognition and for interacting with environment n Increasing evidence supports independence of systems for symbolic object manipulation and for locomotion & action n First subsystem then interfaces to verbal linguistic portion of brain, second interfaces to motor systems that control muscle movements

66 Stage 2 Attributes n Slow serial processing n Involves working and long-term memory n More emphasis on arbitrary aspects of symbols n Top-down processing

67 Preattentive Processing n How does human visual system analyze images? –Some things seem to be done preattentively, without the need for focused attention –Generally less than msecs (eye movements take 200 msecs) –Seems to be done in parallel by low-level vision system

68 How Many 3s?

69 How Many 3s?

70 What Kinds of Tasks? n Target detection –Is something there? n Boundary detection –Can the elements be grouped? n Counting –How many elements of a certain type are present?

71 Example n Determine if a red circle is present n (2 sides of the room)

72 Hue Can be done rapidly (preattentively) by people Surrounding objects called distractors

73 Example n Determine if a red circle is present

74 Shape Can be done preattentively by people

75 Example n Determine if a red circle is present

76 Hue and Shape Cannot be done preattentively Must perform a sequential search Conjuction of features (shape and hue) causes it

77 Example n Is there a boundary in the display?

78 Fill and Shape Left can be done preattentively since each group contains one unique feature Right cannot (there is a boundary!) since the two features are mixed (fill and shape)

79 Example n Is there a boundary in the display?

80 Hue versus Shape Left: Boundary detected preattentively based on hue regardless of shape Right: Cannot do mixed color shapes preattentively

81 Example n Is there a boundary?

82 Hue versus brightness Left: Varying brightness seems to interfere Right: Boundary based on brightness can be done preattentively

83 Caractéristique pré attentives n PP/index.html PP/index.html 83

84 84 Conclusion Vision n Bas niveau n Générique n Linformation visuelle est traitée è ne pas créer dillusions perceptives

85 85 Ergonomie des interfaces n Étroitement liée à la psychologie cognitive (human factors) n Les règles évoluent avec les systèmes informatiques n Ne pas augmenter inutilement la charge cognitive de lutilisateur

86 86 Evaluation n Evaluation pour la conception, n Evaluation pour la remédiation... IHM Compréhension de la manipulation de l objet Usage

87 87 Evaluation n Orienter action n Orienter signification

88 88 Critères ergonomiques n Aide à l évaluation des interfaces utilisateurs n 8 critères (D. Scapin, INRIA)

89 89 Critères ergonomiques n Guidage –Incitation –Groupement/distincti on entre items Localisation Format –Feed-back immédiat –Lisibilité n Charge de travail –Brièveté –Concision –Actions minimales –Densité informationnelle

90 90 Critères ergonomiques n Contrôle explicite –Actions explicites –Contrôle utilisateur n Adaptabilité –Flexibilité –Expérience utilisateur n Gestion des erreurs –Protection contre les E –Qualité des messages E –Correction des E n Homogénéité/Cohéren ce n Signifiance des codes et dénominations n Compatibilité

91 91 Critères ergonomiques n Conditions nécessaires mais non suffisantes n art délicat n soigner les détails –mais ne pas introduire de gadgets ou x les fonctions n étudier de nombreuses interfaces –regard critique / piquer les bonnes idées n regarder les guides et critères

92 92 Un Logiciel doit... n être adapté à l'utilisateur n être adapté à la tâche n reposer sur un langage cohérent n être convivial n fournir des aides à l'utilisateur

93 93 n temps dapprentissage dun nouveau système = 6 mois n outil inadéquat : –utilisateur détourne les règles –activités et opérations supplémentaires Mais... n 40 % des fonctions utilisées n Au 1er janvier 2001 : –8423 user studies – parcipants – hours video n 2001 : –1330 user studies – participants 88% of features are used by 5% or less of Office users at least once a month 2% of Toolbar & Menu Items make up to 90% of all TB & Menu usage by all users

94 94 Conclusion n Respecter l homogénéité et la cohérence: de la présentation de l'information n Étudier la connaissance des utilisateurs (vocabulaire, habitudes de travail, etc)


Télécharger ppt "01/03/2014 Perception Cédric Dumas Elements from CS 7450 - Information Visualization Jan. 10, 2002 - John Stasko – Georgia Tech."

Présentations similaires


Annonces Google