La perception visuelle et le graphisme
date post
19-Mar-2016Category
Documents
view
29download
0
Embed Size (px)
description
Transcript of La perception visuelle et le graphisme
La perception visuelleet le graphisme
La perception visuelle
Pourquoi tudier la perception?Du RealCD de IBM:Bouton noir sur font noirCoolMais 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:
Dautres exemples de choses viter http://4.bp.blogspot.com/_v7Nd6pidYeQ/S9nGUFLcPpI/AAAAAAAACz4/VxMB6Dyhlgo/s1600/gah.jpghttp://uploads.jazzsequence.com/2010/04/geocities-izer.jpghttp://www.ssw.com.au/ssw/standards/Rules/Images/badui2.jpg
Spectre lectromagntique
Loeil humain
La rtineLa lentille forme une image sur la rtineLa rtine est couverte de cellules qui captent la lumire et qui stimulent le systme nerveuxBtonnets (rods en anglais)Utiliss pendant la nuit, et pour dtecter le mouvementDtectent des intensits ou des teintes de grisNe distinguent pas les frquences (couleurs)Cnes (cones en anglais)Distinguent les frquences (couleurs), nous donnant la vision en couleur pendant le jour3 sortes, chacune sensible une bande de frquences diffrente
Trichromie (Trichromacy)3 sortes de cnes: bleu, vert, rougeChacune sensible une bande de frquences diffrenteLes rapports des niveaux de stimulation dterminent la couleur perue
(en pointill:les btonnets)
Lumire blancheLumire blancheObjet blancOeil
Lumire blancheAbsence de lumireObjet noirOeil
Lumire blancheLumire verteObjet vertOeil
Lumire blancheLumire jauneObjet jauneOeil
Cercle des couleurs:version Rouge, Jaune, BleuUtilis par les artistes (peintres), et en ducation primaireBas sur des anciennes notions de couleursCouleurs primaires: rouge, jaune, bleuNest pas bas sur les notions scientifiques modernes
Les couleurs primaires:versions modernesLa 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, bleuCouleurs primaires des pigments: cyan, magenta, jaune
OeilMlange additif de couleurscran blanc
OeilMlange soustractif de couleursToile blanche
Question: Pourquoi le cerveau organise les couleurs peruesde faon cyclique??
Question: y a-t-il des animaux avec plus que 3 sortes de cnes?
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 ?
La crevette-mante (Stomatopoda) 12 sortes de cnes!
RetinaCenter of retina has most of the conesallows for high acuity of objects focused at centerEdge of retina is dominated by rodsallows detecting motion of threats in periphery
Peripheral acuityWith 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
Luminance contrastIllustration of simultaneous luminance contrast. The upper row of rectangles are an identical gray. The lower rectangles are a lighter gray but also identical
Distribution of conesNot distributed evenlymainly reds (64%) & very few blues (4%)insensitivity to short wavelengths (cyan to deep-blue)Center of retina (high acuity) has no blue conessmall blue objects you fixate on disappear
Colour Sensitivity (cont.)As we agelens yellows & absorbs shorter wavelengthssensitivity to blue is even more reducedfluid between lens and retina absorbs more lightperceive a lower level of brightnessImplications: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 !vitez aussi jaune sur blanc !
FocusDifferent wavelengths of light focused at different distances behind eyes lensneed for constant refocusingcauses fatiguebe careful with certain colour combinationsPure (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.)
http://onlinebusiness.volusion.com/assets/color3.jpghttp://www.realfreewebsites.com/blog/wp-content/uploads/2008/09/vibration.png
Le daltonisme (Colour blindness)Trouble discriminating coloursaffects about 9% of populationDifferent photopigment responsereduces capability to discern small colour differencesRed-green deficiency is best knownlack of either green or red photopigment; cant discriminate colours dependent on R & GColour-blind acceptable palette?Yellow-blue variation and grey variation are ok
SmartMoney's "Map of the Market"http://www.smartmoney.com/map-of-the-market/
Colour spacesBecause cones are only tuned to three different frequencies, the space of all visible colours (for humans) has 3 dimensionsExamples: 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.aspxhttp://viz.aset.psu.edu/gho/sem_notes/color_2d/html/primary_systems.html
Espace TSV (Teinte, Saturation, Valeur)ou HSV (Hue, Saturation, Value)Teinte (angle)Saturation (rayon)Valeur (hauteur)0240120http://viz.aset.psu.edu/gho/sem_notes/color_2d/html/primary_systems.htmlhttp://msdn2.microsoft.com/en-us/library/aa511283.aspx
Les composantes TSVTeinteCorrespond la frquence dominante
Saturationpuret de la teinteExemple: rouge est plus satur que roseExemple: gris et blanc ne sont pas saturs du tout
Valeur (ou luminance ou lumire)Une mesure de la clartValeur leveValeur basseSaturation leveSaturation basse
Coordonnes de quelques points cls
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)
Colour guidelinesAvoid red & green in the periphery - why?lack of red, green cones there -- yellows & blues work in periphery
Avoid pure blue for text, lines, & small shapesblue makes a fine background colouravoid adjacent colours that differ only in blue
Avoid single-component distinctionssets of colours should differ in 2 or 3 componentse.g., 2 colours shouldnt differ only by amount of redhelps colour-deficient observers
Couleurs recommendesGrandes 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
La signification (culturelle,motionelle) des couleursRouge = 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 = prudenceUne norme internationale
The Psychology of Color in Marketing and BrandingGregory Ciotti, July 17, 2013https://www.helpscout.net/blog/psychology-of-color/ Couleurs prfres des hommes:Couleurs prfres des femmes:
Une illusion: lequel des carrs A et B est plus fonc?
Illusion de Akiyoshi KITAOKAhttp://www.ritsumei.ac.jp/~akitaoka/index-e.html
Leffet pop-out prattentifPendant le tratement pr-attentif (ou pr-conscient) du champ visuel par le systme visuel humain, le champ visuel est trat en parallle.Certaines caractristiques primitives du champ visuel peuvent tre dtectes trs rapidement (en temps O(1)) pendant ce tratement. Cela permet un effet de pop-out, o quelque chose nous saute aux yeux. On parle alors de tratement prattentif, vision prcoce, ou vision prattentive.Des exemples suivent
Couleur un effet pop-out
Nombre dobjetsTemps de rponseY a-t-il un objet rouge parmi les objets verts?effet pop-out prattentif O(1)focaliser chaque objet - processus conscient O(N)
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 ny apas deffet pop-out
Conjonction de deux variables(taille et couleur): il ny a pas deffet pop out
Conjonction de dautres paires de variablesExiste-t-il des paires de variables dont la conjonction cre un effet pop-out ? Driver et al. 1992 a dcouvert quune conjonction de mouvement et de couleur permettent une dtection prattentive.
(Voir chapitre 5 dans Colin Ware, "Information V