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