Perception visuelle et conception graphique. La perception visuelle.

122
Perception visuelle et conception graphique

Transcript of Perception visuelle et conception graphique. La perception visuelle.

Page 1: Perception visuelle et conception graphique. La perception visuelle.

Perception visuelleet conception graphique

Page 2: Perception visuelle et conception graphique. La perception visuelle.

La perception visuelle

Page 3: Perception visuelle et conception graphique. La perception visuelle.

Pourquoi étudier la perception?

Du “RealCD” de IBM:Bouton noir sur font noir• Cool…• Mais difficile à voir!• L’étiquette juste à côté

ne devrait pas être nécessaire

Une bonne utilisation des couleurs, formes, etc. peut beaucoup améliorer l’utilisabilité, tout comme une mauvaise peut la nuire.

Exemple:

Page 4: Perception visuelle et conception graphique. La perception visuelle.

Spectre électromagnétique

Page 5: Perception visuelle et conception graphique. La perception visuelle.

L’oeil humain

Page 6: Perception visuelle et conception graphique. La perception visuelle.

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

Page 7: Perception visuelle et conception graphique. La perception visuelle.

Trichromie (“Trichromacy”)3 sortes de cônes: “bleu”, “vert”, “rouge”• Chacune sensible à une bande

de fréquences différente• Les rapports des niveaux de stimulation

déterminent la couleur perçue

(en pointillé:les bâtonnets)

Page 8: Perception visuelle et conception graphique. La perception visuelle.

Lumière blanch

e

Lumière blanche

Objet blanc

Oeil

Page 9: Perception visuelle et conception graphique. La perception visuelle.

Lumière blanch

e

Absence de lumière

Objet noir

Oeil

Page 10: Perception visuelle et conception graphique. La perception visuelle.

Lumière blanch

e

Lumière verte

Objet vert

Oeil

Page 11: Perception visuelle et conception graphique. La perception visuelle.

Lumière blanch

e

Lumière jaune

Objet jaune

Oeil

Page 12: Perception visuelle et conception graphique. La perception visuelle.

Cercle des couleurs:version « Rouge, Jaune, Bleu »

• Utilisé par les artistes (peintres),et en éducation primaire

• Basé sur des anciennesnotions de couleurs

• Couleurs primaires:rouge, jaune, bleu

• N’est pas basé sur lesnotions scientifiquesmodernes

Page 13: Perception visuelle et conception graphique. La perception visuelle.

Les couleurs primaires:versions modernes

• La lumière se mélange de façon additive. Une partie d’un é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

Page 14: Perception visuelle et conception graphique. La perception visuelle.

Oeil

Mélange additif de couleurs

Écran blanc

Page 15: Perception visuelle et conception graphique. La perception visuelle.

Oeil

Mélange soustractif de couleurs

Toile blanche

Page 16: Perception visuelle et conception graphique. La perception visuelle.

Question: Pourquoi le cerveau organise les couleurs perçues

de façon cyclique?

?

Page 17: Perception visuelle et conception graphique. La perception visuelle.
Page 18: Perception visuelle et conception graphique. La perception visuelle.

Question: y a-t-il des animaux avec plus que 3 sortes de cônes?

Page 19: Perception visuelle et conception graphique. La perception visuelle.

Oui!

• Certaines sortes d’oiseux 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 » ?

Page 20: Perception visuelle et conception graphique. La perception visuelle.

La crevette-mante (Stomatopoda)≈ 12 sortes de cônes!

Page 21: Perception visuelle et conception graphique. La perception visuelle.

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

Page 22: Perception visuelle et conception graphique. La perception visuelle.

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.edu/~sanstis/SABlur.html

Page 23: Perception visuelle et conception graphique. La perception visuelle.

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

Page 24: Perception visuelle et conception graphique. La perception visuelle.

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

Page 25: Perception visuelle et conception graphique. La perception visuelle.

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.

Page 26: Perception visuelle et conception graphique. La perception visuelle.

Focus

• Different wavelengths of light focused at different distances behind eye’s lens– need for constant refocusing

• causes fatigue

– be careful with certain colour combinations

• Pure (saturated) colours require more focusing then less pure (desaturated)– don’t use saturated colours in user interfaces unless you

really need something to stand out (e.g. a stop sign, cursor, warning, attention-grabber, etc.)

Page 27: Perception visuelle et conception graphique. La perception visuelle.

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

can’t discriminate colours dependent on R & G

• Colour-blind acceptable palette?– Yellow-blue variation and grey variation are ok

Page 28: Perception visuelle et conception graphique. La perception visuelle.

Colour spaces

• Because cones are only tuned to three different frequencies, the space of all visible colours(for humans) has 3 dimensions– Examples:

Red-Green-Blue (RGB) space,Hue-Saturation-Value (HSV) space,Cyan-Magenta-Yellow (CMY) space,etc.

Page 29: Perception visuelle et conception graphique. La perception visuelle.

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/html/primary_systems.html

Page 30: Perception visuelle et conception graphique. La perception visuelle.

Espace TSV (Teinte, Saturation, Valeur)ou « HSV » (Hue, Saturation, Value)

Teinte (angle)

Saturation(rayon)

Valeur (hauteur)

240° 120°

http://viz.aset.psu.edu/gho/sem_notes/color_2d/html/primary_systems.htmlhttp://msdn2.microsoft.com/en-us/library/aa511283.aspx

Page 31: Perception visuelle et conception graphique. La perception visuelle.

Les composantes TSVTeinte• Correspond à la fréquence “dominante”

Saturation• « pureté » de la teinte• Exemple: rouge est plus saturé que rose• Exemple: gris et blanc ne sont

pas saturés du tout

Valeur (ou luminance ou lumière)• Une mesure de la clarté

Valeurélevée

Valeurbasse

Saturationélevée

Saturationbasse

Page 32: Perception visuelle et conception graphique. La perception visuelle.

Coordonées de quelques points clés

Nom de couleurEspace 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)

Page 33: Perception visuelle et conception graphique. La perception visuelle.

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, utilisez:

Ces couleurs sont facilement distinguées, même d’une culture à une autre. Utiliser d’abord les 6 premières (rouge, vert, bleu, jaune, noir,

blanc), ensuite les 6 autres (gris, orange, brun, rose, magenta/mauve,

cyan/turquoise).

oui non

Page 34: Perception visuelle et conception graphique. La perception visuelle.
Page 35: Perception visuelle et conception graphique. La perception visuelle.

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 shouldn’t differ only by amount of red

– helps colour-deficient observers

Page 36: Perception visuelle et conception graphique. La perception visuelle.

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

Page 37: Perception visuelle et conception graphique. La perception visuelle.

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

Page 38: Perception visuelle et conception graphique. La perception visuelle.

Illusion de Akiyoshi KITAOKA

http://www.ritsumei.ac.jp/~akitaoka/index-e.html

Page 39: Perception visuelle et conception graphique. La perception visuelle.

L’effet “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 …

Page 40: Perception visuelle et conception graphique. La perception visuelle.

Couleur – un effet “pop-out”

Page 41: Perception visuelle et conception graphique. La perception visuelle.

Nombre d’objets

Temps de réponse « Y a-t-il un objet rouge

parmi les objets verts? »

effet « pop-out » préattentif O(1)

foca

liser

cha

que

obje

t - p

roce

ssus

con

scie

nt O

(N)

Page 42: Perception visuelle et conception graphique. La perception visuelle.

Orientation – un effet “pop-out”

Page 43: Perception visuelle et conception graphique. La perception visuelle.

Mouvement – un effet “pop-out”

Page 44: Perception visuelle et conception graphique. La perception visuelle.

Taille – un effet “pop-out”

Page 45: Perception visuelle et conception graphique. La perception visuelle.

Lissage ou ombrage – un effet “pop-out”

Page 46: Perception visuelle et conception graphique. La perception visuelle.

Conjonction de deux variables(taille et couleur): il n’y a pas d’effet “pop out”

Page 47: Perception visuelle et conception graphique. La perception visuelle.

Conjonction de d’autres paires de variables

Récemment (Driver et al. 1992), nous avons découvert qu’une 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 d’informations.)

Page 48: Perception visuelle et conception graphique. La perception visuelle.

Un autre exemple où il n’y apas d’effet “pop-out”

Page 49: Perception visuelle et conception graphique. La perception visuelle.

D’autres variables détectées de façon préattentive

Length Width

Collinearity Curvature

NumberAdded marksSpatial grouping

Shape

Enclosure

Page 50: Perception visuelle et conception graphique. La perception visuelle.

Un autre processus (presque?)pré-attentif: subitiser

Page 51: Perception visuelle et conception graphique. La perception visuelle.

Combien y a-t-il d’objets ?

Page 52: Perception visuelle et conception graphique. La perception visuelle.

Combien y a-t-il d’objets ?

Page 53: Perception visuelle et conception graphique. La perception visuelle.

Combien y a-t-il d’objets ?

Page 54: Perception visuelle et conception graphique. La perception visuelle.

Combien y a-t-il d’objets ?

Page 55: Perception visuelle et conception graphique. La perception visuelle.

Combien y a-t-il d’objets ?

Page 56: Perception visuelle et conception graphique. La perception visuelle.

Combien y a-t-il d’objets ?

Page 57: Perception visuelle et conception graphique. La perception visuelle.

Nombre d’objets

Temps de réponse

« Combien y a-t-il d’objets ? »

subitiser

com

pter

(pro

cess

us c

onsc

ient

)

≈ 4 objets

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

Page 58: Perception visuelle et conception graphique. La perception visuelle.

Comparaison: l’ouï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 d’image

• Seulement trois (bandes de) fréquences sont captées en même temps

• Formation d’une image de ≈106 "pixels" (un nombre très approximatif)

Page 59: Perception visuelle et conception graphique. La perception visuelle.

La conception graphique(« graphic design »)

Page 60: Perception visuelle et conception graphique. La perception visuelle.

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

Page 61: Perception visuelle et conception graphique. La perception visuelle.

(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

Page 62: Perception visuelle et conception graphique. La perception visuelle.

Takeshi Kono, Ideal Relationship, 1955

Page 63: Perception visuelle et conception graphique. La perception visuelle.

“[…] from a test designed by Maitland Graves to determine the artistic sensitivity of students” – reproduced by Rudolf Arnheim

Page 64: Perception visuelle et conception graphique. La perception visuelle.

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

Page 65: Perception visuelle et conception graphique. La perception visuelle.

Les gestalts

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

Page 66: Perception visuelle et conception graphique. La perception visuelle.

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.

Page 67: Perception visuelle et conception graphique. La perception visuelle.

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 d’une forme ou d’un 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.

Page 68: Perception visuelle et conception graphique. La perception visuelle.

http://www.cs.iupui.edu/~tuceryan/research/ComputerVision/perceptual-grouping.html

Similitude

Proximité

Clôture

Continuité

Page 69: Perception visuelle et conception graphique. La perception visuelle.

Exemples de regroupements: boîte de dialogue de Microsoft Word pour changer les bordures

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

Page 70: Perception visuelle et conception graphique. La perception visuelle.

Exemple tiré de Lotus Notes

Page 71: Perception visuelle et conception graphique. La perception visuelle.

: regroupements logiques

: regroupements perçus

Mauvaise utilisation de l’espace!

Page 72: Perception visuelle et conception graphique. La perception visuelle.

First

Last

Item 1

Item 2

Item 3

Page 73: Perception visuelle et conception graphique. La perception visuelle.
Page 74: Perception visuelle et conception graphique. La perception visuelle.

Quels sont les regroupements de boutons perçus ici ?Pourquoi ?

Page 75: Perception visuelle et conception graphique. La perception visuelle.

Exemple: du site web de IKEA

• Est-ce utile?

Page 76: Perception visuelle et conception graphique. La perception visuelle.

Key Ideas

• You can’t 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

• Don’t show too much at once, or use too many graphical effects, or you’ll create clutter !– Simpler graphical information can be interpreted faster and

with more accuracy and confidence

Page 77: Perception visuelle et conception graphique. La perception visuelle.

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

Page 78: Perception visuelle et conception graphique. La perception visuelle.

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

Page 79: Perception visuelle et conception graphique. La perception visuelle.

A Typographic Example: creating emphasis in paragraphs (Baecker and Marcus, 1990, p. 308)

Page 80: Perception visuelle et conception graphique. La perception visuelle.

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

Page 81: Perception visuelle et conception graphique. La perception visuelle.

Exemples de grilles (« grids »)

Exemples tirés de http://www.lab404.com/121/grids/

Page 82: Perception visuelle et conception graphique. La perception visuelle.

http://flowingdata.com/2010/02/15/data-underload-9-big-graphic-blueprint/

Page 83: Perception visuelle et conception graphique. La perception visuelle.

Attention: n’utiliser pas trop de polices ou de styles différents!

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

Page 84: Perception visuelle et conception graphique. La perception visuelle.

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

Page 85: Perception visuelle et conception graphique. La perception visuelle.

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

Page 86: Perception visuelle et conception graphique. La perception visuelle.
Page 87: Perception visuelle et conception graphique. La perception visuelle.
Page 88: Perception visuelle et conception graphique. La perception visuelle.
Page 89: Perception visuelle et conception graphique. La perception visuelle.
Page 90: Perception visuelle et conception graphique. La perception visuelle.

Exemples: métaphores visuelles

Page 91: Perception visuelle et conception graphique. La perception visuelle.

Autres exemples …

Page 92: Perception visuelle et conception graphique. La perception visuelle.

Indices visuels 3D,indices de profondeur(« visual depth cues »)

Page 93: Perception visuelle et conception graphique. La perception visuelle.

Click Me!!!

Click Me!!!

Click Me!!!

Cube de Necker

Page 94: Perception visuelle et conception graphique. La perception visuelle.

Exemple: indices de profondeur pour renforcer une métaphore

• Est-ce utile?

Page 95: Perception visuelle et conception graphique. La perception visuelle.

Exemple: lissage, reflets spéculaires

• Est-ce utile?

Page 96: Perception visuelle et conception graphique. La perception visuelle.

Dans un environnement 3D:Où suis-je ?

Page 97: Perception visuelle et conception graphique. La perception visuelle.

Dans un environnement 3D:Où suis-je ?

Page 98: Perception visuelle et conception graphique. La perception visuelle.

Dans un environnement 3D:Où suis-je ?

Page 99: Perception visuelle et conception graphique. La perception visuelle.

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

Page 100: Perception visuelle et conception graphique. La perception visuelle.

Exemple

http://www.angelfire.com/pa2/klb01/spheregallery2.html

Page 101: Perception visuelle et conception graphique. La perception visuelle.

Exemple: lissage et grosseur variable des lignes pour indiquer la profondeur

Page 102: Perception visuelle et conception graphique. La perception visuelle.

Exemple: lissage(Bezerianos et Balakrishnan 2005)

Page 103: Perception visuelle et conception graphique. La perception visuelle.

La transparence

Page 104: Perception visuelle et conception graphique. La perception visuelle.

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_Productions/Outside_In/blue-red-alpha.html

Page 105: Perception visuelle et conception graphique. La perception visuelle.

Des menus transparents

• Peuvent utiliser une police « anti-interférence »

(Harrison et al. 1995) (Harrison et Vicente 1996)

Page 106: Perception visuelle et conception graphique. La perception visuelle.

Le « hotbox »: un menu 2D dans Maya

Page 107: Perception visuelle et conception graphique. La perception visuelle.

Le « hotbox »: un menu 2D dans MayaTransparence partielle simulée avec tramage (« dithering »)

Page 108: Perception visuelle et conception graphique. La perception visuelle.

L’animation

Page 109: Perception visuelle et conception graphique. La perception visuelle.

Les animations• Pour attirer l’attention

– Mais n’attirez pas trop l’attention!– 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 l’ACM 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 d’un menu– (vidéo: barre d’outils 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 d’une scène 3D)

Page 110: Perception visuelle et conception graphique. La perception visuelle.

Icônes animées

• Baecker, Small, Mander, 1991, http://doi.acm.org/10.1145/108844.108845

Page 111: Perception visuelle et conception graphique. La perception visuelle.

Transitions animéesdans une visualisation

• Heer et Robertson 2007(voir vidéo)

Page 112: Perception visuelle et conception graphique. La perception visuelle.

DimP: Direct manipulation Player (Pierre Dragicevic et al. 2008; http://www.aviz.fr/dimp/ )

Page 113: Perception visuelle et conception graphique. La perception visuelle.

Exemples divers

Page 114: Perception visuelle et conception graphique. La perception visuelle.

Page Web Honteuse

The navigation bar has no indicationof what the buttons do

The navigation bar provides no indication of what the buttons do

The navigation bar has no indicationof what the buttons do

Only after the cursor is on a button does the label show up, and at a different location no less! (dividing the user’s attention)

Page 115: Perception visuelle et conception graphique. La perception visuelle.

Exemple: problème de conception

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

+ ?

Page 116: Perception visuelle et conception graphique. La perception visuelle.

• Dessiner tout en noir …

Page 117: Perception visuelle et conception graphique. La perception visuelle.

• Dessiner tout en blanc …

Page 118: Perception visuelle et conception graphique. La perception visuelle.

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

Page 119: Perception visuelle et conception graphique. La perception visuelle.

• Dessiner en XOR …

Page 120: Perception visuelle et conception graphique. La perception visuelle.

• Dessiner en blanc avec bordure XOR …

Page 121: Perception visuelle et conception graphique. La perception visuelle.

• Dessiner en blanc avec bordure noire …

Page 122: Perception visuelle et conception graphique. La perception visuelle.

Autres solutions possibles?

• Bordure pointillée et animée ?