La perception visuelle et le graphisme. La perception visuelle

download La perception visuelle et le graphisme. La perception visuelle

of 130

  • date post

    03-Apr-2015
  • Category

    Documents

  • view

    111
  • download

    3

Embed Size (px)

Transcript of La perception visuelle et le graphisme. La perception visuelle

  • Page 1
  • La perception visuelle et le graphisme
  • Page 2
  • La perception visuelle
  • Page 3
  • Pourquoi tudier la perception? Du RealCD de IBM: Bouton noir sur font noir Cool Mais difficile voir! Ltiquette juste ct ne devrait pas tre ncessaire Une bonne utilisation des couleurs, formes, etc. peut beaucoup amliorer lutilisabilit, tout comme une mauvaise peut la nuire. Exemple:
  • Page 4
  • Dautres exemples de choses viter http://4.bp.blogspot.com/_v7Nd6pidYeQ/S9nGUFLcPpI/AAAAAAAACz4/VxMB6Dyhlgo/s1600/gah.jpg http://uploads.jazzsequence.com/2010/04/geocities-izer.jpg http://www.ssw.com.au/ssw/standards/Rules/Images/badui2.jpg
  • Page 5
  • Spectre lectromagntique
  • Page 6
  • Loeil humain
  • Page 7
  • La rtine La lentille forme une image sur la rtine La rtine est couverte de cellules qui captent la lumire et qui stimulent le systme nerveux Btonnets (rods en anglais) Utiliss pendant la nuit, et pour dtecter le mouvement Dtectent des intensits ou des teintes de gris Ne distinguent pas les frquences (couleurs) Cnes (cones en anglais) Distinguent les frquences (couleurs), nous donnant la vision en couleur pendant le jour 3 sortes, chacune sensible une bande de frquences diffrente
  • Page 8
  • Trichromie (Trichromacy) 3 sortes de cnes: bleu, vert, rouge Chacune sensible une bande de frquences diffrente Les rapports des niveaux de stimulation dterminent la couleur perue (en pointill: les btonnets)
  • Page 9
  • Lumire blanche Objet blanc Oeil
  • Page 10
  • Lumire blanche Absence de lumire Objet noir Oeil
  • Page 11
  • Lumire blanche Lumire verte Objet vert Oeil
  • Page 12
  • Lumire blanche Lumire jaune Objet jaune Oeil
  • Page 13
  • 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 Nest pas bas sur les notions scientifiques modernes
  • Page 14
  • Les couleurs primaires: versions modernes La lumire se mlange de faon additive. Une partie dun cran blanc, illumine par plusieurs cnes de lumire, va rflchir toutes les couleurs des cnes. Les pigments se mlangent de faon soustractive. Un mlange de pigments va absorber toutes les couleurs absorbes par chaque pigment. Couleurs primaires des lumires: rouge, vert, bleu Couleurs primaires des pigments: cyan, magenta, jaune
  • Page 15
  • Oeil Mlange additif de couleurs cran blanc
  • Page 16
  • Oeil Mlange soustractif de couleurs Toile blanche
  • Page 17
  • Question: Pourquoi le cerveau organise les couleurs perues de faon cyclique? ?
  • Page 18
  • Page 19
  • Question: y a-t-il des animaux avec plus que 3 sortes de cnes?
  • Page 20
  • Oui! Certaines sortes doiseux de proie, et de papillons, ont 4-5 sortes de cnes! Ils voient donc un monde de couleurs composes de 4-5 couleurs primaires quoi pensez-vous ressemblerait leur cercle de couleurs ?
  • Page 21
  • La crevette-mante (Stomatopoda) 12 sortes de cnes!
  • Page 22
  • 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 23
  • 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 24
  • 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 25
  • 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 26
  • 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. vitez aussi jaune sur blanc !
  • Page 27
  • 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.)
  • Page 28
  • http://onlinebusiness.volusion.com/assets/co lor3.jpg http://www.realfreewebsites.com/blog/wp- content/uploads/2008/09/vibration.png
  • Page 29
  • 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; cant discriminate colours dependent on R & G Colour-blind acceptable palette? Yellow-blue variation and grey variation are ok
  • Page 30
  • SmartMoney's "Map of the Market" http://www.smartmoney.com/map-of-the-market/
  • Page 31
  • 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 32
  • Espace RVB (Rouge, Vert, Bleu) ou RGB (Red, Green, Blue) http://msdn2.microsoft.com/en-us/library/aa511283.aspxhttp://viz.aset.psu.edu/gho/sem_notes/color_2d/html/primary_systems.html
  • Page 33
  • Espace TSV (Teinte, Saturation, Valeur) ou HSV (Hue, Saturation, Value) Teinte (angle) Saturation (rayon) Valeur (hauteur) 0 240120 http://viz.aset.psu.edu/gho/sem_notes/color_2d/html/primary_systems.htmlhttp://msdn2.microsoft.com/en-us/library/aa511283.aspx
  • Page 34
  • Les composantes TSV Teinte Correspond la frquence dominante Saturation puret de la teinte Exemple: rouge est plus satur que rose Exemple: gris et blanc ne sont pas saturs du tout Valeur (ou luminance ou lumire) Une mesure de la clart Valeur leve Valeur basse Saturation leve Saturation basse
  • Page 35
  • Coordonnes de quelques points cls 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)
  • Page 36
  • Page 37
  • Page 38
  • 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
  • Page 39
  • Couleurs recommendes Grandes superficies: couleurs peu satures. Petites regions et dtails: couleurs satures. Pour encoder des catgories, par exemple dans une lgende, utilisez: Ces couleurs sont facilement distingues, mme dune culture une autre. Utiliser dabord les 6 premires ( rouge, vert, bleu, jaune, noir, blanc ), ensuite les 6 autres ( gris, orange, brun, rose, magenta/mauve, cyan/turquoise ). ouinon
  • Page 40
  • La signification (culturelle, motionelle) des couleurs Rouge = excit, bleu = calme, vert = nature, orange = (?), etc. Vrai dans toutes les cultures? Blanc aux mariages, noir aux funrailles? Au Japon, noir porte bonheur aux mariages, et blanc est port aux funrailles! Rouge = arrter, vert = aller, jaune = prudence Une norme internationale
  • Page 41
  • The Psychology of Color in Marketing and Branding Gregory Ciotti, July 17, 2013 https://www.helpscout.net/blog/psychology-of-color/ https://www.helpscout.net/blog/psychology-of-color/ Couleurs prfres des hommes: Couleurs prfres des femmes:
  • Page 42
  • Une illusion: lequel des carrs A et B est plus fonc?
  • Page 43
  • Illusion de Akiyoshi KITAOKA http://www.ritsumei.ac.jp/~akita