11/04/23

Perception

Cédric Dumas

Elements from CS 7450 - Information VisualizationJan. 10, 2002 - John Stasko – Georgia Tech

2

L’origine ?

Un des premiers domaines de recherche de la psychologie expérimentale

Le plus important :

la visionLA VISION

3

Pourquoi ?

Système visuel– Ce que l’on perçoit n’est pas ce que l’on voit– L’information visuelle est traitée

Hommeconnaissancesphysiologieproblèmes

Systèmebien gérer/présenterl’information

Comment quelqu’un utilise le système ???

4

Activité perceptive

Interprétation des messages sensoriels Pour acquérir une connaissance du

milieu, de ses actions

organise en un tout cohérent et significatif l’ensemble des informations

5

Exemple

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

6

Sens

Vision Toucher Audition Goût Odorat + fonction kinesthésique

Système nerveuxstimuli réponse

récepteurs effecteursen

viro

nnem

ent environnem

ent

7

Fonction kinesthésique

Infos fournies par les capteurs proprioceptifs

Donne les postures du corps Permet de contrôler l’équilibre

8

Audition

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

9

Toucher

Le contact de la peau la pression sur la peau le mouvement du contact sur la peau la température perçue par la peau le façonnement en trois dimensions des

objets touchés etc...

10

Fonction visuelle

Iris Pupille Cornée Cristallin Fovéa Point aveugle

11

Fovéa Centre de l ’œil = macula Centre de la macula = fovéa

Cellules photo-réceptrices sensibles spécifiquement à des longueurs d’onde:– cônes– bâtonnets

12

Spectre électromagnétique

Color Models

HVS model– Hue - what people think of color– Value - light/dark, ranges black<-->white– Saturation - intensity, ranges hue<-->gray

white

black

Value

Hue

Saturation

Color Categories

Are there certain canonical colors?– Post & Greene ‘86

had people namedifferent colors on amonitor

– Pictured are oneswith > 75%commonality

Luminance

Important for fg-bg colors to differ in brightness

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Hello, here is some text. Can you read what it says?

Color for Categories

Can different colors be used for categories of nominal variables?– Yes– Ware’s suggestion: 12 colors

• red, green, yellow, blue, black, white, pink, cyan, gray, orange, brown, purple

– Fréderic Verniersuggestion : 6 hues + black-gray-white

• Red, yellow, blue, cyan, green, magenta

– Think to LCD screnn !

Color for Sequences

Can you order these (low->hi)

Possible Color Sequences

Gray scale Single sequencepart spectral scale

Full spectral scale Single sequencesingle hue scale

Double-endedmultiple hue scale

Color Purposes

Call attention to specific data Increase appeal, memorability 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

Using Color

Modesty! Less is more Use blue in large regions, not thin lines Use red and green in the center of the

field of view (edges of retina not sensitive to these)

Use black, white, yellow in periphery Use adjacent colors that vary in hue &

value

Using Color

Do not use adjacent colors that vary in amount of blue

Don’t use high saturation, spectrally extreme colors together (causes after images)

Use color for grouping and search Beware effects from adjacent color

regions (my old house - example)

22

Compositions difficiles

Magenta Bleu

Compuserve's WinCim 2.0

Microsoft Word

23

Perception de la brillance

Contraste = différence de luminance– contraste faible = lecture difficile– contraste fort = gêne

Le système visuel accentue les contrastes

Luminance/Brightness

Luminance– Measured amount of light coming from

some place Brightness

– Perceived amount of light coming from source

Different Brightness ?

Different Brightness ?

Brightness

Perceived brightness is non-linear function of amount of light emitted by source– Typically a power function– S = aIn

• S - sensation• I - intensity

Very different on screen versus paper

Grayscale

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

Problème de contraste

Apple's QuickTime 4.0 Player

IBM RealCD (IBM's User Interface Architecture and Design Group)

Key Perceptual Properties

Brightness Color Texture Shape

31

Perception de la profondeur

Image formée au niveau de la rétine est bi-dimensionnelle

perception de la 3ème dimension– indices monoculaires– indices binoculaires

32

Indices monoculaires Indices picturaux

– la taille relative des objets– l’intensité lumineuse– l’ombrage sur l’objet– l’interposition– la hauteur du champ visuel– le gradient de texture– la perspective linéaire– la parallaxe du mouvement

Indice non pictural : l'accommodation

33

Exemple d’ombrage

34

Problèmes de perception 3D

Pirates: Quest for the seas

35

Indices binoculaires

La disparité rétinienne

la convergence oculaire

A

B

36

La perception du mouvement

Le mouvement absolu Le mouvement relatif Le mouvement apparent

37

Problèmes d’animation

Drawing Board LT

Mouvement relatif et apparent

38

L’organisation perceptive

Loi de proximité

Loi de clôture

Loi de continuité

Loi de similitudeX XX X X X X

X XX X X X X

39

L’organisation perceptive (2)

Loi de destin commun

Loi de taille relative

Loi de symétrie

40

Traitement global de la forme

H

HHH

HH

H

H

HHH

41

Figure et Fond

42

Eléments de diagramme (1)

Extrait de Information Visualization: Perception for Design, Colin Ware, éd. Morgan-Kaufmann

43

Eléments de diagramme (2)

Le principe de monosémie

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

44

Le principe de l'effet proportionnel Les données doivent être traduites sous

une forme visuelle dont les variations sont interprétables en fonction des valeurs propres des données

Valeur quantitative– forme– gradient

45

Le principe du moindre coût

toujours opter pour la représentation la plus économique et la plus simple;

la compréhension et la communication obéissent spontanément à la loi du moindre effort.

46

Le principe de simplification

les dessins figuratifs et les illustrations sont plus lisibles s'ils sont simplifiés

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

Le principe de familiarisation

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.

Les composantes culturelles ou socioculturelles sont dans cette perspective très importantes.

48

49

Eléments de cartographie (1)

50

Eléments de cartographie (1)

Cartographie

http://cartographie.dessciences-po.fr

51

Sémiologie Graphique

La communication graphique se fonde sur des règles différentes de la communication linguistique

L’efficacité de la transmission visuelle n’est 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.

On appelle sémiologie graphique l’ensemble des règles qui permettent l’utilisation d’un système graphique de signes pour la transmission d’une information

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.

« 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 d’abord spatiaux et atemporels. D’où leur propriété essentielle : dans un instant de perception, les systèmes linéaires ne nous communiquent qu’un 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 d’un raisonnement logique, tel est l’objet de la graphique, niveau monosémique de la perception spatiale.» (Bertin, 1999, p.7)

52

Variables visuelles les variables ne possèdent pas

la même aptitude à exprimer les mêmes informations.

Tailles : variation quantitatives. Forme : identité de l’objet Variation intensité : relation

d’ordre Couleurs : identité, différences,

culturel, sens Grains (trames) = {formes,

taille}, différences relatives Orientation : exprime une

différence

53

54

Monde perçu et monde réel

Constance perceptive Ambiguïtés perceptives Illusion perceptive

55

Constance perceptive

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

Constance et consistance

« consistency makes the interface familiar and predictable » (The Windows User Interface Guidelines for Software Design, Microsoft Press)

Paint

WebZipVisual Basic 5.0

57

Les Ambiguïtés perceptives

Fonction :– des connaissances– des attentes– du contexte

A B

58

Problème d’ambiguïté

Zoc (envoi de fichier)• Send

• Send without carriage returns

• Send with quotes

• Send with CIS quotes

59

Les illusions perceptives

Illusions géométriquesA

B

AB

A B

60

Les illusions perceptives (2)

Figures paradoxales

Figures illusoires

Related Disciplines

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?

Cognitive psychology– Understanding how people think, here,

how it relates to perception

Perceptual Processing

Seek to better understand visual perception and visual information processing– Multiple theories or models exist– Need to understand physiology and

cognitive psychology

One (simple) Model

Two stage process– Parallel extraction of low-level properties of

scene– Sequential goal-directed processing

Ware 2000

Stage 1 Stage 2

Early, paralleldetection ofcolor, texture,shape, spatialattributes

Serial processing ofobject identification (usingmemory) and spatial layout,action

Stage 1 - Low-level, Parallel

Neurons in eye & brain responsible for different kinds of information– Orientation, color, texture, movement, etc.

Arrays of neurons work in parallel Occurs “automatically” Rapid Information is transitory, briefly held in iconic store Bottom-up data-driven model of processing Often called “pre-attentive” processing

Stage 2 - Sequential, Goal-Directed Splits into subsystems for object recognition and for

interacting with environment Increasing evidence supports independence of

systems for symbolic object manipulation and for locomotion & action

First subsystem then interfaces to verbal linguistic portion of brain, second interfaces to motor systems that control muscle movements

Stage 2 Attributes

Slow serial processing Involves working and long-term memory More emphasis on arbitrary aspects of

symbols Top-down processing

Preattentive Processing

How does human visual system analyze images?– Some things seem to be done

preattentively, without the need for focused attention

– Generally less than 200-250 msecs (eye movements take 200 msecs)

– Seems to be done in parallel by low-level vision system

How Many 3’s?

1281768756138976546984506985604982826762980985845822450985645894509845098094358590910302099059595957725646750506789045678845789809821677654876364908560912949686

How Many 3’s?

1281768756138976546984506985604982826762980985845822450985645894509845098094358590910302099059595957725646750506789045678845789809821677654876364908560912949686

What Kinds of Tasks?

Target detection– Is something there?

Boundary detection– Can the elements be grouped?

Counting– How many elements of a certain type are

present?

Example

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

Hue

Can be done rapidly (preattentively) by peopleSurrounding objects called “distractors”

Example

Determine if a red circle is present

Shape

Can be done preattentively by people

Example

Determine if a red circle is present

Hue and Shape

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

Example

Is there a boundary in the display?

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)

Example

Is there a boundary in the display?

Hue versus Shape

Left: Boundary detected preattentively based on hue regardless of shapeRight: Cannot do mixed color shapes preattentively

Example

Is there a boundary?

Hue versus brightness

Left: Varying brightness seems to interfereRight: Boundary based on brightness can be done preattentively

Caractéristique pré attentives

http://www.csc.ncsu.edu/faculty/healey/PP/index.html

83

84

Conclusion Vision

Bas niveau Générique L’information visuelle est traitée

ne pas créer d’illusions perceptives

85

Ergonomie des interfaces

Étroitement liée à la psychologie cognitive (human factors)

Les règles évoluent avec les systèmes informatiques

Ne pas augmenter inutilement la charge cognitive de l’utilisateur

86

Evaluation

Evaluation pour la conception, Evaluation pour la remédiation ...

• IHM• Compréhension de la manipulation de l ’objet • Usage

87

Evaluation

Orienter action Orienter signification

88

Critères ergonomiques

Aide à l ’évaluation des interfaces utilisateurs

8 critères (D. Scapin, INRIA)

89

Critères ergonomiques

Guidage– Incitation– Groupement/

distinction entre items• Localisation• Format

– Feed-back immédiat– Lisibilité

Charge de travail– Brièveté– Concision– Actions minimales– Densité

informationnelle

90

Critères ergonomiques

Contrôle explicite– Actions explicites– Contrôle utilisateur

Adaptabilité– Flexibilité– Expérience

utilisateur

Gestion des erreurs– Protection contre les E– Qualité des messages E– Correction des E

Homogénéité/Cohérence

Signifiance des codes et dénominations

Compatibilité

91

Critères ergonomiques

Conditions nécessaires mais non suffisantes

art délicat soigner les détails

– mais ne pas introduire de gadgets ou x les fonctions

étudier de nombreuses interfaces– regard critique / piquer les bonnes idées

regarder les guides et critères

92

Un Logiciel doit...

être adapté à l'utilisateur être adapté à la tâche reposer sur un langage cohérent être convivial fournir des aides à l'utilisateur

93

temps d’apprentissage d’un nouveau système = 6 mois

outil inadéquat :– utilisateur détourne les règles– activités et opérations supplémentaires

Mais...

40 % des fonctions utilisées

Au 1er janvier 2001 :– 8423 user studies– 63 412 parcipants– 111 000 hours video

2001 :– 1330 user studies– 12 798 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

Conclusion

Respecter l ’homogénéité et la cohérence: de la présentation de l'information

Étudier la connaissance des utilisateurs (vocabulaire, habitudes de travail, etc)