Perception visuelle et conception graphique

download Perception visuelle et conception graphique

If you can't read please download the document

  • date post

    19-Jan-2016
  • Category

    Documents

  • view

    22
  • download

    1

Embed Size (px)

description

Perception visuelle et conception graphique. 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 - PowerPoint PPT Presentation

Transcript of Perception visuelle et conception graphique

  • Perception visuelleet conception graphique

  • 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:

  • 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.

  • 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.)

  • 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

  • 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

  • Coordones 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)

  • 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

  • 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

  • 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

  • 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

  • Conjonction de deux variables(taille et couleur): il ny a pas deffet pop out

  • Conjonction de dautres paires de variablesRcemment (Driver et al. 1992), nous avons dcouvert quune conjonction de mouvement et de couleur permet une dtection prattentive.

    (Voir chapitre 5 dans Colin Ware, "Information Visualization: Perception for Design", 2ime dition, 2004, pour plus dinformations.)

  • Un autre exemple o il ny apas deffet pop-out

  • Dautres variables dtectes de faon prattentive

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

  • Combien y a-t-il dobjets ?

  • Combien y a-t-il dobjets ?

  • Combien y a-t-il dobjets ?

  • Combien y a-t-il dobjets ?

  • Combien y a-t-il dobjets ?

  • Combien y a-t-il dobjets ?

  • Nombre dobjetsTemps de rponseCombien y a-t-il dobjets ? subitisercompter (processus conscient) 4 objetsSubitiser cote 40 100 ms par objetCompter cote 250 300 ms par objet

  • Comparaison: loue versus la vuePlus de 1000 frquences diffrentes sont captes en mme temps; un chantillonnage relativement riche du timb