Transcript Perception visuelle et conception graphique

La perception visuelle
et le graphisme
La perception visuelle
Pourquoi étudier la perception?
Une bonne utilisation des couleurs, formes, etc. peut
beaucoup améliorer l’utilisabilité, 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
D’autres exemples de
choses à éviter …
http://www.ssw.com.au/ssw/standards/Rules/Images/badui2.jpg
http://uploads.jazzsequence.com/2010/04/geocities-izer.jpg
http://4.bp.blogspot.com/_v7Nd6pidYeQ/S9nGUFLcPpI/AAAAAAAACz4/VxMB6Dyhlgo/s1600/gah.jpg
Icône de réseau sans-fil sur Ubuntu
30×25 pixels
Essaye de
connecter
Connecté
Spectre électromagnétique
L’oeil humain
La rétine
À retenir!
• 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
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)
Objet blanc
Oeil
Objet noir
Oeil
Objet vert
Oeil
Objet jaune
Oeil
Cercle des couleurs:
version « Rouge, Jaune, Bleu »
• Utilisé par les artistes (peintres),
et en éducation primaire
• Basé sur des anciennes
notions de couleurs
• Couleurs primaires:
rouge, jaune, bleu
• N’est pas basé sur les
notions scientifiques
modernes
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 des
pigments: cyan, magenta, jaune
Mélange additif de couleurs
Écran blanc
Oeil
Mélange soustractif de couleurs
Toile blanche
Oeil
Question: Pourquoi le cerveau
organise les couleurs perçues
de façon cyclique?
?
Question: y a-t-il des animaux avec
plus que 3 sortes de cônes?
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 ressemblerait
leur « cercle de couleurs » ?
La crevette-mante (Stomatopoda)
• 12 sortes de cônes !
• … et chaque oeil se déplace
indépendamment
• … et ils voient la lumière ultraviolète
• … et chaque oeil possède une vision en
profondeur trinoculaire
• … et leurs pinces peuvent briser le vers
normal d’aquarium !
Rétine
• Le centre de la rétine a la plupart des cônes
– Permet une acuité élevée sur les objets au centre
focal
• La périphérie de la rétine est dominée par les
bâtonnets
– Permet de détecter des mouvements dans la
périphérie
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
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
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 shortwavelength 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 shortwavelength sensitive cones in
the retina and they are not very
sensitive.
Older users need brighter colours.
Évitez aussi jaune
sur blanc !
Évitez aussi jaune
sur blanc !
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.)
http://onlinebusiness.volusion.com/assets/co
lor3.jpg
http://www.realfreewebsites.com/blog/wpcontent/uploads/2008/09/vibration.png
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
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
http://colorvisiontesting.com/ishihara.htm
Simulateurs de daltonisme
• http://colorfilter.wickline.org/
• http://www.vischeck.com/
SmartMoney's "Map of the Market"
http://www.smartmoney.com/map-of-the-market/
Théorie des couleurs opposées
(“opponent process”)
• Signal rouge_vert = rouge – vert
• Signal bleu_jaune = bleu – (rouge + vert)
http://www.visualexpert.com/sbfaqimages/RGBOpponent.gif
Types de daltonisme
Grosso-modo :
• Rouge-vert (plus courant)
• Bleu-jaune
Types de daltonisme (en détail)
• Trichromatie réduite :
– * Protanomalie : mutation du "gène rouge", rapprochant sa
fréquence vers le vert.
– * Deutéranomalie : mutation du "gène vert", rapprochant sa
fréquence vers le rouge. Le daltonisme le plus courant
(6-8% des hommes).
À retenir!
– Tritanomalie : mutation du "gène bleu".
• Dichromatie véritable :
– * Protanopie : absence des cônes rouges.
– * Deutéranopie : absence de cônes verts.
John Dalton (1766-1844) en était atteint.
– Tritanopie : absence des cônes bleus.
• Achromatopsie ou monochromatie : absence de 2 ou 3
sortes de cônes (très rare, sauf sur l’île de Pingelap dans
l’océan Pacifique)
* : ces conditions rendent difficile la distinction rouge/vert
Un fait
intéressant!
Chromosomes, gènes, locus, allèles
• Les chromosomes sont situés dans le noyau des
cellules, et sont composés de ADN, c.-à-d. des
chaînes de nucléotides (symbolisés par les lettres A,
T, C, G)
• Les gènes sont des sous-chaînes de nucléotides qui
sont transcrits + traduits en protéines (chaînes
d’acides aminés)
http://fr.wikipedia.org/wiki/Th%C3%A9orie_fondamentale_de_la_biologie_mol%C3%A9culaire
• On distingue entre la position (locus) d’un gène, et
sa valeur (allèle)
– Exemple: le groupe sanguin est déterminé par un seul
gène, le gène ABO, pour lequel il y a des allèles possibles
pour A, B, et O
– Analogie en programmation : un gène est comme une
variable, un allèle est comme sa valeur, et son locus est
comme son adresse en mémoire
Chromosomes homologues
père
• Avec la plupart des chromosomes, il y a des
paires de chromosomes homologues, qui
ont les mêmes gènes mais pas
nécessairement les mêmes allèles.
mère
A
B
O
A
A
AB
A
B
AB
B
B
O
A
B
O
– Exemple: chaque humain a un allèle du gène
ABO de chaque parent (sur deux chromosomes
homologues). Les allèles A et B sont codominants sur l’allèle O, donnant les groupes
sanguins A, B, AB, ou O.
( http://en.wikipedia.org/wiki/ABO_gene )
• Lorsqu’on retrouve le même allèle sur les
deux chromosomes, on parle de gène
homozygote. Lorsqu’on retrouve des allèles
différents, on dit que le gène est
hétérozygote.
B
B
Homozygote
A
B
Hétérozygote
Dominant et récessif
• Lorsqu’on a un gène hétérozygote, c’est l’allèle
dominant qui va emporter, et l’allèle récessif n’est
pas exprimé
• Habituellement, les maladies génétiques chez les
humains sont récessifs (pourquoi?), donc
typiquement il faut deux copies de l’allèle néfaste
(gène homozygote) pour que la maladie soit
exprimée
• Plus que les parents sont semblables
génétiquement, plus que leur enfant aura de
gènes homozygotes, et donc plus de chances
d’avoir des maladies génétiques
Chromosomes
• Les humains ont 23 paires de chromosomes
(23 chromosomes de chaque parent)
– 22 paires de chromosomes homologues (autosomes)
– 1 paire de chromosomes sexuels (allosomes)
• Chez les femelles: XX
• Chez les mâles: XY (dont le X vient de la mère, le Y du père)
• Remarquez: chaque ovule a un chromosome X, tandis que le
spermatozoïde peut avoir un X ou un Y. C’est donc le
spermatozoïde qui détermine le sexe d’un enfant.
Génétique des cônes chez les humains
• Un gène “bleu” sur le chromosome #7
• Un gène “vert” et un gène “rouge” sur le
chromosome X
7
7
X
X
femme normale
(trichromate)
7
7
X
Y
homme normal
(trichromate)
Allèle vert
normal
7
7
X
X
7
7
X
Y
femme normale
homme normal
7
7
7
X
X
femme avec vision normale
mais porteuse
7
7
X
X
femme daltonienne
(deutéranomalie)
7
X
Allèle anormal
plus près du
rouge
Y
homme daltonien
(deutéranomalie)
Chacun des gènes (bleu, vert, rouge) peut avoir un allèle
anormal qui aura un effet néfaste sur la vision. Exemple ici:
un allèle vert anormal qui rapproche la fréquence des cônes
verts vers le rouge (associé avec le daltonisme le plus
courant). Les allèles anormaux rouge et vert sont récessifs,
donc seulement exprimés chez les femmes qui les ont sur
les deux chromosomes X. Les hommes ont donc beaucoup
plus de chances d’être daltonien.
Allèle récessif
sur le
chromosome X
http://en.wikipedia.org/wiki/File:Xli
nkRecessive.jpg
Chez les singes du Nouveau Monde
(platyrhiniens): seulement un gène sur le X
7
7
X
X
femelle homozygote
(dichromate)
7
7
X
X
femelle hétérozygote
(trichromate!)
7
7
X
Y
mâle (dichromate)
Chez les platyrhiniens, seules les femelles hétérozygotes sont
trichromates, mais chez les catarhiniens (singes de l'Ancien
Monde, comprenant les humains), il semble avoir eu une
duplication du gène sur le X, et tous les individus sont
maintenant trichromates. Comme la trichromatie permet de
distinguer le rouge et le vert, elle est utile pour identifier des
fruits mûrs dans la forêt.
Question théorique: est-ce qu’une femme humaine ayant des
gènes hétérozygotes pourrait être tétrachromate ?!
• Est-ce qu’une femme humaine ayant des
gènes hétérozygotes pourrait être
tétrachromate ?!
La Dr Gabriele Jordan semble avoir trouvé une
tétrachromate humaine (une femme),
anonyme, identifié par le code cDa29
http://discovermagazine.com/2012/jul-aug/06-humans-with-super-human-vision/ ;
http://scholar.google.ca/scholar?q=jordan+deeb+bosten+mollon+dimensionality+color+visio
n+carriers+trichromacy
• En 2009, des chercheurs ont utilisé de la
thérapie génique pour donner une vision
trichromate à des singes-écureuils (singes du
Nouveau Monde) adultes mâles
http://scholar.google.ca/scholar?q=mancuso+neitz+gene+therapy+red+green+colour+blindn
ess+adult+primates
Pour plus d’informations
• http://webvision.med.utah.edu/ (livre en ligne de Kolb et al.,
“Webvision: The Organization of the Retina and Visual System”)
• http://www.youtube.com/watch?v=BJm5jHhJNBI&t=16m41s
(présentation de la prof. Aoife McLysaght)
• http://www.handprint.com/HP/WCL/color2.html (Bruce MacEvoy,
“The Geometry of Color Perception”)
• http://www.yorku.ca/eye/ (livre en ligne de Peter Kaiser, “The Joy
of Visual Perception”)
• http://scholar.google.ca/scholar?q=machado+oliveira+fernandes+M
odel+Simulation+Color+Vision+Deficiency
• http://scholar.google.ca/scholar?q=jacobs+evolution+colour+vision
+mammals
• http://www.mapoflife.org/topics/topic_328_Trichromatic-vision-inmammals/
• http://anthro.palomar.edu/primate/color.htm
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.
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
Espace TSV (Teinte, Saturation, Valeur)
ou « HSV » (Hue, Saturation, Value)
0°
240°
120°
Teinte (angle)
Valeur
(hauteur)
Saturation
(rayon)
http://msdn2.microsoft.com/en-us/library/aa511283.aspx
http://viz.aset.psu.edu/gho/sem_notes/color_2d/html/primary_systems.html
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 sont
pas saturés du tout
Saturation
élevée
Saturation
basse
Valeur (ou luminance ou lumière)
• Une mesure de la clarté
Valeur
élevée
Valeur
basse
Coordonnées de quelques points clés
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)
Nom de couleur
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
Couleurs recommendées
• Grandes superficies: couleurs peu saturées.
Petites regions et détails: couleurs saturées.
oui
non
• 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).
Palette de couleurs acceptables
pour les daltoniens
Bang Wong, "Points of view: Color blindness", Nature Methods 8, 441 (2011)
doi:10.1038/nmeth.1618
http://scholar.google.ca/scholar?q=%22bang+wong%22+%22points+of+view%3A+color
+blindness%22
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
The Psychology of Color in Marketing and Branding
Gregory Ciotti, July 17, 2013
https://www.helpscout.net/blog/psychology-of-color/
Couleurs préférées des femmes:
Couleurs préférées des hommes:
Contraste
Illustration of simultaneous luminance contrast. The upper row of rectangles are
an identical gray. The lower rectangles are a lighter gray but also identical
Illusion: entre les carrés A et B, lequel est plus foncé?
Illusion de Akiyoshi KITAOKA
http://www.ritsumei.ac.jp/~akitaoka/index-e.html
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 …
Couleur – un effet “pop-out”
Temps de
réponse
« Y a-t-il un objet rouge
parmi les objets verts? »
effet « pop-out » préattentif O(1)
Nombre
d’objets
Orientation – un effet “pop-out”
Mouvement – un effet “pop-out”
Taille – un effet “pop-out”
Lissage ou ombrage – un effet “pop-out”
Un exemple où il n’y a
pas d’effet “pop-out”
Conjonction de deux variables
(taille et couleur): il n’y a pas d’effet “pop out”
Conjonction de d’autres paires de variables
Existe-t-il des paires de variables dont la
conjonction crée un effet pop-out ?
Driver et al. 1992 a découvert qu’une conjonction
de mouvement et de couleur permettent une
détection préattentive.
(Voir chapitre 5 dans Colin Ware, "Information
Visualization: Perception for Design", 2ième
édition, 2004, pour plus d’informations.)
Un autre processus (presque?)
pré-attentif: subitiser
Combien y a-t-il d’objets ?
Combien y a-t-il d’objets ?
Combien y a-t-il d’objets ?
Combien y a-t-il d’objets ?
Combien y a-t-il d’objets ?
Combien y a-t-il d’objets ?
« Combien y a-t-il d’objets ? »
Temps de
réponse
•Subitiser coûte 40 à 100
ms par objet
•Compter coûte 250 à 300
ms par objet
subitiser
Nombre
d’objets
≈ 4 objets
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)
Le graphisme
(« graphic design »)
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
(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
Takeshi Kono, Ideal Relationship, 1955
Lequel est plus agréable, esthétiquement ?
“[…] from a test designed by Maitland Graves to determine the artistic
sensitivity of students” – reproduced by Rudolf Arnheim
Quoting Arnheim:
In a, relations are neither clearly rightangular nor clearly oblique.
The 4 lines are not sufficiently different in length to assure the eye they are
unequal.
The pattern, adrift in space, approaches on the one hand the symmetry of a
crosslike figure of vertical-horizontal orientation, and on the other the shape of a
kind of kite with a diagonal symmetry axis.
Neither interpretation, however, is conclusive; neither admits of the reassuring
clarity conveyed by b.
Ref: Rudolf Arnheim, Art and Visual Perception, p. 22
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
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.
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.
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.
Similitude
Proximité
Clôture
Continuité
http://www.cs.iupui.edu/~tuceryan/research/ComputerVision/perceptual-grouping.html
Exemples de regroupements: boîte de dialogue de
Microsoft Word pour changer les bordures
Où se trouve les regroupement par proximité / clôture/ similitude ?
Exemple tiré de Lotus Notes
: regroupements logiques
: regroupements perçus
Mauvaise utilisation de l’espace!
Item 1
First
Item 2
Item 3
Last
Quels sont les
regroupements de
boutons perçus ici ?
Pourquoi ?
Exemple: du site web de IKEA
• Est-ce utile?
• 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
Les onglets dans Internet Explorer
Quel onglet est actif? Est-ce que les couleurs sont bien utilisés?
Comment mieux utiliser les gestalts?
Use a Consistent “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
Exemple de “SUPER”
(utilitaire de
conversion vidéo) :
3 couleurs pour les 3
sortes de paramètres
A Typographic Example: creating emphasis in
paragraphs (Baecker and Marcus, 1990, p. 308)
Use a grid to organize elements
and suggest relationships
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.
Exemples de grilles (« grids »)
Exemples tirés de http://www.lab404.com/121/grids/
http://flowingdata.com/2010/02/15/data
-underload-9-big-graphic-blueprint/
Attention: n’utiliser pas trop de
polices ou de styles différents!
Texte
• noir
• rouge
• bleu
• noir gras
• rouge gras
• rouge italique
Texte
• noir
• bleu
• noir gras
• bleu gras
• souligné
• souligné en italique
• surligné en jaune
Source Code Highlighting
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
Exemples: métaphores visuelles
D’autres exemples …
Cube de
Necker
Click Me!!!
Click Me!!!
Click Me!!!
Exemple: indices de profondeur
pour renforcer une métaphore
• Est-ce utile?
Exemple: lissage, reflets spéculaires
• Est-ce utile?
Exemple: lissage et grosseur variable
des lignes pour indiquer la profondeur
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
Des menus transparents
• Peuvent utiliser une police « anti-interférence »
(Harrison et al. 1995)
(Harrison et Vicente 1996)
Le « hotbox »: un menu 2D dans Maya
Le « hotbox »: un menu 2D dans Maya
Transparence partielle simulée avec tramage (« dithering »)
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 »)
– http://bost.ocks.org/mike/algorithms/
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)
Icônes animées
• Baecker, Small, Mander, 1991,
http://doi.acm.org/10.1145/108844.108845
Transitions animées
dans une visualisation
• Heer et Robertson 2007
(voir vidéo)
DimP: Direct manipulation Player (Pierre
Dragicevic et al. 2008; http://www.aviz.fr/dimp/ )
Exemples divers
Page Web Honteuse
The
navigation
The
navigation
bar bar
has no
provides no
indication
indicationof
what
the
of what
buttons
do the buttons
do
Only after the cursor
The
navigation
bardoes
has no
is on
a button
indicationof what the
the label show up,
buttons do
and at a different
location no less!
(dividing the user’s
attention)
Exemple: problème de conception
• Comment montrer la région rectangulaire
sélectionnée par-dessus une image?
+
?
• Dessiner tout en noir …
• Dessiner tout en blanc …
• Dessiner le rectangle rempli en XOR
(bits inversés) …
• Dessiner en XOR …
• Dessiner en blanc avec bordure XOR …
• Dessiner en blanc avec bordure noire …
D’autres solutions possibles?
• Bordure pointillée et animée ?