Perception visuelle et conception graphique

1
Perception visuelleet conception graphique
2
La perception visuelle
3
Pourquoi étudier la perception?
Une bonne utilisation des couleurs, formes, etc.
peut beaucoup améliorer lutilisabilité, tout
comme une mauvaise peut la nuire. Exemple

• Du RealCD de IBM
• Bouton noir sur font noir
• Cool
• Mais difficile à voir!
• Létiquette juste à côténe devrait pas être
  nécessaire

4
Spectre électromagnétique
5
Loeil humain
6
La rétine

• La lentille forme une image sur la rétine
• La rétine est couverte de cellules qui captent la
  lumière et qui stimulent le système nerveux
• Bâtonnets (rods en anglais)
• Utilisés pendant la nuit, et pour détecter le
  mouvement
• Détectent des intensités ou des teintes de gris
• Ne distinguent pas les fréquences (couleurs)
• Cônes (cones en anglais)
• Distinguent les fréquences (couleurs),nous
  donnant la vision en couleur pendant le jour
• 3 sortes, chacune sensible à une bande de
  fréquences différente

7
Trichromie (Trichromacy)

• 3 sortes de cônes bleu, vert, rouge
• Chacune sensible à une bandede fréquences
  différente
• Les rapports des niveaux de stimulation
  déterminent la couleur perçue

(en pointillé les bâtonnets)
8
Lumière blanche
Objet blanc
Lumière blanche
Oeil
9
Lumière blanche
Objet noir
Absence de lumière
Oeil
10
Lumière blanche
Objet vert
Lumière verte
Oeil
11
Lumière blanche
Objet jaune
Lumière jaune
Oeil
12
Cercle des couleursversion  Rouge, Jaune,
Bleu 

• Utilisé par les artistes (peintres),et en
  éducation primaire
• Basé sur des anciennesnotions de couleurs
• Couleurs primairesrouge, jaune, bleu
• Nest pas basé sur lesnotions scientifiquesmoder
  nes

13
Les couleurs primairesversions modernes

• La lumière se mélange de façon additive. Une
  partie dun écran blanc, illuminée par plusieurs
  cônes de lumière, va réfléchir toutes les
  couleurs des cônes.
• Les pigments se mélangent de façon soustractive.
  Un mélange de pigments va absorber toutes les
  couleurs absorbées par chaque pigment.

Couleurs primaires des lumières rouge, vert, bleu
Couleurs primaires despigments cyan, magenta,
jaune
14
Mélange additif de couleurs
Écran blanc
Oeil
15
Mélange soustractif de couleurs
Toile blanche
Oeil
16
Question Pourquoi le cerveau organise les
couleurs perçuesde façon cyclique?
?
17
Question y a-t-il des animaux avec plus que 3
sortes de cônes?
18
Oui!

• Certaines sortes doiseux de proie,et de
  papillons, ont 4-5 sortes de cônes!
• Ils voient donc un monde de couleurs composées de
  4-5 couleurs primaires
• À quoi pensez-vous ressembleraitleur  cercle de
  couleurs  ?

19
La crevette-mante (Stomatopoda)

• 12 sortes de cônes!

20
Retina

• Center of retina has most of the cones
• allows for high acuity of objects focused at
  center
• Edge of retina is dominated by rods
• allows detecting motion of threats in periphery

21
Peripheral acuity
With strict fixation of the center spot, each
letter is equally legible because it is about ten
times its threshold size. This is true at any
viewing distance. Chart shows the increasingly
coarse grain of the retinal periphery. Each
letter is viewed by an equal area of visual
cortex ("cortical magnification factor") (Anstis,
S.M., Vision Research 1974) http//www-psy.ucsd.e
du/sanstis/SABlur.html
22
Luminance contrast
Illustration of simultaneous luminance contrast.
The upper row of rectangles are an identical
gray. The lower rectangles are a lighter gray but
also identical
23
Distribution of cones

• Not distributed evenly
• mainly reds (64) very few blues (4)
• insensitivity to short wavelengths (cyan to
  deep-blue)
• Center of retina (high acuity) has no blue cones
• small blue objects you fixate on disappear

24
Colour Sensitivity (cont.)

• As we age
• lens yellows absorbs shorter wavelengths
• sensitivity to blue is even more reduced
• fluid between lens and retina absorbs more light
• perceive a lower level of brightness
• Implications

Blue text on a dark background to be avoided. We
have few short-wavelength sensitive cones in the
retina and they are not very sensitive. Older
users need brighter colours.
Blue text on a dark background to be avoided. We
have few short-wavelength sensitive cones in the
retina and they are not very sensitive. Older
users need brighter colours.
25
Focus

• Different wavelengths of light focused at
  different distances behind eyes lens
• need for constant refocusing
• causes fatigue
• be careful with certain colour combinations
• Pure (saturated) colours require more focusing
  then less pure (desaturated)
• dont use saturated colours in user interfaces
  unless you really need something to stand out
  (e.g. a stop sign, cursor, warning,
  attention-grabber, etc.)

26
Le daltonisme (Colour blindness)

• Trouble discriminating colours
• affects about 9 of population
• Different photopigment response
• reduces capability to discern small colour
  differences
• Red-green deficiency is best known
• lack of either green or red photopigmentcant
  discriminate colours dependent on R G
• Colour-blind acceptable palette?
• Yellow-blue variation and grey variation are ok

27
Colour spaces

• Because cones are only tuned to three different
  frequencies, the space of all visible
  colours(for humans) has 3 dimensions
• ExamplesRed-Green-Blue (RGB) space,Hue-Saturati
  on-Value (HSV) space,Cyan-Magenta-Yellow (CMY)
  space,etc.

28
Espace RVB (Rouge, Vert, Bleu)ou  RGB  (Red,
Green, Blue)
http//msdn2.microsoft.com/en-us/library/aa511283.
aspx
http//viz.aset.psu.edu/gho/sem_notes/color_2d/htm
l/primary_systems.html
29
Espace TSV (Teinte, Saturation, Valeur)ou
 HSV  (Hue, Saturation, Value)
0
240
120
Teinte (angle)
Saturation(rayon)
Valeur (hauteur)
http//viz.aset.psu.edu/gho/sem_notes/color_2d/htm
l/primary_systems.html
http//msdn2.microsoft.com/en-us/library/aa511283.
aspx
30
Les composantes TSV

• Teinte
• Correspond à la fréquence dominante
• Saturation
•  pureté  de la teinte
• Exemple rouge est plus saturé que rose
• Exemple gris et blanc ne sontpas saturés du
  tout
• Valeur (ou luminance ou lumière)
• Une mesure de la clarté

Saturationélevée
Saturationbasse
Valeurélevée
Valeurbasse
31
Coordonées de quelques points clés
Nom de couleur Espace RVB(Rouge, Vert, Bleu) ou  RGB  (Red, Green, Blue) Espace TSV(Teinte, Saturation, Valeur)ou  HSV  (Hue, Saturation, Value)
noir (0, 0, 0) (, , 0)
blanc (1, 1, 1) (, 0, 1)
rouge (1, 0, 0) (0, 1, 1)
jaune (1, 1, 0) (60, 1, 1)
vert (0, 1, 0) (120, 1, 1)
cyan (0, 1, 1) (180, 1, 1)
bleu (0, 0, 1) (240, 1, 1)
magenta (1, 0, 1) (300, 1, 1)
32
Couleurs recommendées

• Grandes superficies couleurs peu
  saturées.Petites regions et détails couleurs
  saturées.
• Pour encoder des catégories,par exemple dans une
  légende, utilisezCes couleurs sont
  facilement distinguées,même dune culture à une
  autre.Utiliser dabord les 6 premières (rouge,
  vert, bleu, jaune, noir, blanc), ensuite les 6
  autres (gris, orange, brun, rose, magenta/mauve,
  cyan/turquoise).

oui
non
33
Colour guidelines

• Avoid red green in the periphery - why?
• lack of red, green cones there -- yellows blues
  work in periphery
• Avoid pure blue for text, lines, small shapes
• blue makes a fine background colour
• avoid adjacent colours that differ only in blue
• Avoid single-component distinctions
• sets of colours should differ in 2 or 3
  components
• e.g., 2 colours shouldnt differ only by amount
  of red
• helps colour-deficient observers

34
La signification (culturelle,émotionelle) des
couleurs

• Rouge excité, bleu calme, vert nature,
  orange (?), etc.
• Vrai dans toutes les cultures?
• Blanc aux mariages, noir aux funérailles?
• Au Japon, noir porte bonheur aux mariages,et
  blanc est porté aux funérailles!
• Rouge arrêter, vert aller, jaune prudence
• Une norme internationale

35

• Une illusion lequel des carrés A et B est plus
  foncé?

36
Illusion de Akiyoshi KITAOKA
http//www.ritsumei.ac.jp/akitaoka/index-e.html
37
Leffet pop-out préattentif

• Pendant le traîtement pré-attentif (ou
  pré-conscient) du champ visuel par le système
  visuel humain, le champ visuel est traîté en
  parallèle.
• Certaines caractéristiques primitives du champ
  visuel peuvent être détectées très rapidement (en
  temps O(1)) pendant ce traîtement. Cela permet
  un effet de pop-out, où quelque chose nous
  saute aux yeux. On parle alors de traîtement
  préattentif, vision précoce, ou vision
  préattentive.
• Des exemples suivent

38
Couleur un effet pop-out
39
Temps de réponse
 Y a-t-il un objet rouge parmi les objets
verts? 
focaliser chaque objet - processus conscient O(N)
effet  pop-out  préattentif O(1)
Nombre dobjets
40
Orientation un effet pop-out
41
Mouvement un effet pop-out
42
Taille un effet pop-out
43
Lissage ou ombrage un effet pop-out
44
Conjonction de deux variables(taille et
couleur) il ny a pas deffet pop out
45
Conjonction de dautres paires de variables
Récemment (Driver et al. 1992), nous avons
découvert quune conjonction de mouvement et de
couleur permet une détection préattentive. (Voir
chapitre 5 dans Colin Ware, "Information
Visualization Perception for Design", 2ième
édition, 2004, pour plus dinformations.)
46
Un autre exemple où il ny apas deffet pop-out
47
Dautres variables détectées de façon préattentive
48
Un autre processus (presque?)pré-attentif
subitiser
49
Combien y a-t-il dobjets ?
50
Combien y a-t-il dobjets ?
51
Combien y a-t-il dobjets ?
52
Combien y a-t-il dobjets ?
53
Combien y a-t-il dobjets ?
54
 Combien y a-t-il dobjets ?
Temps de réponse

• Subitiser coûte 40 à 100 ms par objet
• Compter coûte 250 à 300 ms par objet

compter (processus conscient)
subitiser
Nombre dobjets
4 objets
55
Comparaison louïe versus la vue

• Plus de 1000 fréquences différentes sont captées
  en même temps un échantillonnage relativement
  riche du timbre du son
• Aucune formation dimage

• Seulement trois (bandes de) fréquences sont
  captées en même temps
• Formation dune image de 106 "pixels" (un nombre
  très approximatif)

56
La conception graphique( graphic design )
57
Graphic Design

• Primarily an art concerned with aesthetics
• Graphic designers design
• Logos, fonts, posters, book CD covers,
  pamphlets, brochures, reports, websites,
• Sub-disciplines within graphic design
• Photography, illustration, symbolism, typography

58
(Graphic, Visual, Artistic) Design

• Elements
• Line
• Shape
• Form
• Space
• Texture
• Colour (hue, value)

• Principles
• Repetition
• Variety
• Rhythm
• Balance
• Emphasis
• Contrast
• Proportion / scale
• Economy
• Harmony
• Unity

59
Takeshi Kono, Ideal Relationship, 1955
60
from a test designed by Maitland Graves to
determine the artistic sensitivity of students
reproduced by Rudolf Arnheim
61
Graphic Design

• Has distilled hundreds of years of
  experimentation with composition on paper
• Even divorced from aesthetic concerns, graphic
  design can teach us useful lessons on visual
  communication

62
Les gestalts

• Une gestalt est une configuration ou un patron
  déléments formant (ou perçus comme) un tout
  unifié. Cest une forme structurée, complète et
  prenant sens pour nous.

63
Quelques  lois  de la gestalt

• Loi de la proximité les éléments proches les uns
  des autres ont tendance à être perçus comme une
  forme ou un groupement.
• Loi de la similitude les éléments semblables les
  uns des autres ont tendance à être perçus comme
  une forme ou un groupement.

64
Quelques  lois  de la gestalt (2)

• Loi de la clôture les contours partiels qui
  peuvent être prolongés pour former un tout ont
  tendance à être perçus comme le contour complet
  dune forme ou dun objet.
• Loi de la continuité les éléments qui semblent
  former une ligne ou une courbe lisse ont tendance
  à être perçus comme une ligne ou une courbe lisse.

65
Similitude
Proximité
Clôture
Continuité
http//www.cs.iupui.edu/tuceryan/research/Compute
rVision/perceptual-grouping.html
66
Exemples de regroupements boîte de dialogue de
Microsoft Word pour changer les bordures

• Où se trouve les regroupement par proximité /
  clôture/ similitude ?

67
Exemple tiré de Lotus Notes
68
regroupements logiques regroupements
perçus Mauvaise utilisation de lespace!
69
(No Transcript)
70
Quels sont les regroupements de boutons perçus
ici ? Pourquoi ?
71
Exemple du site web de IKEA

• Est-ce utile?

72
Key Ideas

• You cant show everything at once
• Choose only the most important, high-level, or
  common interface elements
• Frequently accessed elements should be easier to
  get to
• Use graphical elements, attributes, and
  principles to
• Create distinctions
• Emphasize important features
• Show similarities and groupings
• Dont show too much at once, or use too many
  graphical effects, or youll create clutter !
• Simpler graphical information can be interpreted
  faster and with more accuracy and confidence

73
Designing a Visible Language(or Visual
Language)

• Elements at your disposal
• Typography
• Symbolism
• Icons
• Graphics, illustrations
• Colour, texture, and value
• Page composition and spatial layout
• Grids, rules, space
• Sequencing, timing, animation
• Design principles
• Emphasis
• Guiding the eye
• Consistency and clarity

Example textures
74
Visual Language

• Establishing a visual language that is consistent
  across your interface will help the user
  interpret and make sense of the interface
  elements and data
• Care must be taken to keep the language simple
  and consistent, otherwise it will loose its
  effectiveness
• Example consistent look for a set of widgets
  used across applications

75
A Typographic Example creating emphasis in
paragraphs (Baecker and Marcus, 1990, p. 308)
76
Typical page layout with primary and secondary
features (Baecker and Marcus, 1990, p.
295).Note the restrained use of borders and
separators. Some interfaces use deeply nested
rectangular borders or bevelling to group items
this is going too far.
Use a grid to organize elementsand suggest
relationships
77
Exemples de grilles ( grids )
Exemples tirés de http//www.lab404.com/121/grids/
78
Attention nutiliser pas trop de polices ou de
styles différents!

• Texte
• noir
• rouge
• bleu
• noir gras
• rouge gras
• rouge italique

79

• Texte
• noir
• bleu
• noir gras
• bleu gras
• souligné
• souligné en italique
• surligné en jaune

80
Example Source Code Design Typesetting

• Typesetting source code to enhance readability
• Sophisticated prettyprinting
• Experimental evidence of effectiveness
• Programs as publications
• See Baecker Marcus, Human Factors Typography
  for More Readable Programs, 1990, ACM Press

81
(No Transcript)
82
(No Transcript)
83
(No Transcript)
84
(No Transcript)
85
Exemples métaphores visuelles
86
Autres exemples
87
Indices visuels 3D,indices de profondeur( visua
l depth cues )
88
Cube de Necker
Click Me!!!
Click Me!!!
Click Me!!!
89
Exemple indices de profondeur pour renforcer une
métaphore

• Est-ce utile?

90
Exemple lissage, reflets spéculaires

• Est-ce utile?

91
Dans un environnement 3DOù suis-je ?
92
Dans un environnement 3DOù suis-je ?
93
Dans un environnement 3DOù suis-je ?
94
Indices de profondeur, et autres indices utiles,
dans les mondes 3D

• Occlusion, transparence
• Parallaxe du mouvement ( motion parallax )
• Ombres, lissage, reflets spéculaires ( specular
  highlights )
• Taille relative ( foreshortening )
• Lignes convergentes
• Plan horizontal
• Dégradé du ciel
• Points de repère
• Direction de boussole

95
Exemple
http//www.angelfire.com/pa2/klb01/spheregallery2.
html
96
Exemple lissage et grosseur variable des lignes
pour indiquer la profondeur
97
Exemple lissage(Bezerianos et Balakrishnan 2005)
98
La transparence
99
Exemple la transparence et le lissage utilisés
pour montrer un retournement de la sphère
( sphere eversion )
http//www.geom.umn.edu/graphics/pix/Video_Product
ions/Outside_In/blue-red-alpha.html
100
Des menus transparents

• Peuvent utiliser une police  anti-interférence 

(Harrison et al. 1995)
(Harrison et Vicente 1996)
101
Le  hotbox  un menu 2D dans Maya
102
Le  hotbox  un menu 2D dans Maya
Transparence partielle simulée avec tramage
( dithering )
103
Lanimation
104
Les animations

• Pour attirer lattention
• Mais nattirez pas trop lattention!
• Exemples curseurs de souris ( cursor
  trails )annonces dans les pages web (fichiers
  .GIF animés)
• (vidéo page web de la bibliothèque virtuelle de
  lACM avec une courte animation)
• Pour illustrer un processus ou un algorithme
• (vidéo icônes animées)
• (vidéo  sorting out sorting )
• Pour montrer un changement ou transition détat
• Exemples défilement animée ouverture animée
  dun menu
• (vidéo barre doutils dans MacOS X)
• Les transitions animées dans les visualisations
  montrent les relations entre différents points de
  vue, entre différentes perspectives
• (vidéo transitions animées entre différentes
  points de vue dune scène 3D)

105
Icônes animées

• Baecker, Small, Mander, 1991, http//doi.acm.org/1
  0.1145/108844.108845

106
Transitions animéesdans une visualisation

• Heer et Robertson 2007(voir vidéo)

107
DimP Direct manipulation Player (Pierre
Dragicevic et al. 2008 http//www.aviz.fr/dimp/ )
108
Exemples divers
109
Page Web Honteuse
110
Exemple problème de conception

• Comment montrer la région rectangulaire
  sélectionnée par-dessus une image?

?

111

• Dessiner tout en noir

112

• Dessiner tout en blanc

113

• Dessiner le rectangle rempli en XOR(bits
  inversés)

114

• Dessiner en XOR

115

• Dessiner en blanc avec bordure XOR

116

• Dessiner en blanc avec bordure noire

117
Autres solutions possibles?

• Bordure pointillée et animée ?