Académique Documents
Professionnel Documents
Culture Documents
Cédric Dumas
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
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
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
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
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
Problème de contraste
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
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
Loi de symétrie
40
H H
H
H
H HH
H
H
HH
41
Figure et Fond
42
Extrait de Information Visualization: Perception for Design, Colin Ware, éd. Morgan-Kaufmann
43
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 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
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
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
Paint
WebZip
Visual Basic 5.0
57
Fonction :
– des connaissances
– des attentes
– du contexte
58
Problème d’ambiguïté
A
B
A B
60
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
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
Conclusion Vision
Bas niveau
Générique
L’information visuelle est traitée
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
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)