Perception

Cédric Dumas

Elements from CS 7450 - Information Visualization

Jan. 10, 2002 - John Stasko – Georgia Tech

31/10/23
 2

L’origine ?
 Un des premiers domaines de
recherche de la psychologie
expérimentale
 Le plus important :

LA VISION
la vision
 3

Pourquoi ?
Homme Système
connaissances bien gérer/présenter
physiologie l’information
problèmes

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

 Système visuel
– Ce que l’on perçoit n’est pas ce que l’on voit
– L’information visuelle est traitée
 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

environnement
environnement
récepteurs effecteurs
stimuli réponse
Système nerveux

 Vision
 Toucher
 Audition
 Goût
 Odorat + fonction kinesthésique
 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

Value

Hue

Saturation

black
Color Categories
 Are there certain
canonical colors?
– Post & Greene ‘86
had people name
different colors on a
monitor
– Pictured are ones
with > 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 Vernier
suggestion : 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 Full spectral scale Single sequence Single sequence Double-ended
part spectral scalesingle hue scale multiple 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

B
A

 la convergence oculaire
 36

La perception du mouvement
 Le mouvement absolu
 Le mouvement relatif
 Le mouvement apparent
 37

Problèmes d’animation
Mouvement relatif et apparent

Drawing Board LT
 38

L’organisation perceptive
 Loi de proximité

 Loi de clôture

 Loi de continuité

X XX X X X X
 Loi de similitude 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 H
H
H
H HH
H
H
HH
 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)

 44

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.):
 45

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
 46

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

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é.
 48

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

Eléments de cartographie (1)

 50

Eléments de cartographie (1)

 51

Cartographie
 http://cartographie.dessciences-po.fr
 52

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

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

WebZip
Visual Basic 5.0
 57

Les Ambiguïtés perceptives

A B

 Fonction :
– des connaissances
– des attentes
– du contexte
 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étriques
A

A
B

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
Stage 1 Stage 2

Early, parallel Serial processing of

detection of object identification (using
color, texture, memory) and spatial layout,
shape, spatial action
Ware 2000 attributes
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?

1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686
 How Many 3’s?

1281768756138976546984506985604982826762
9809858458224509856458945098450980943585
9091030209905959595772564675050678904567
8845789809821677654876364908560912949686
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 people

Surrounding 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 shape
Right: Cannot do mixed color shapes preattentively
Example
 Is there a boundary?
Hue versus brightness

Left: Varying brightness seems to interfere

Right: Boundary based on brightness can be
done preattentively
 83

Caractéristique pré attentives

 http://www.csc.ncsu.edu/faculty/healey/
PP/index.html
 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  Charge de travail
– Incitation – Brièveté
– Groupement/ – Concision
distinction entre items – Actions minimales
• Localisation – Densité
• Format informationnelle
– Feed-back immédiat
– Lisibilité
 90

Critères ergonomiques
 Contrôle explicite  Gestion des erreurs
– Actions explicites – Protection contre les E
– Contrôle utilisateur – Qualité des messages E
– Correction des E
 Adaptabilité  Homogénéité/
– Flexibilité Cohérence
– Expérience  Signifiance des codes
utilisateur 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

Mais...
 40 % des fonctions utilisées
 temps d’apprentissage
2% of Toolbar & Menu d’un nouveau
Items make up to 90%
système =88%
of all TB & Menu6usage
mois
of features are
by all users used by 5% or less of
Office users at least
once a month  Au 1er janvier 2001 :
– 8423 user studies
– 63 412 parcipants
 outil inadéquat : – 111 000 hours video
 2001 :
– utilisateur détourne les règles
– 1330 user studies

– activités et opérations– supplémentaires

12 798 participants
 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)