La perception visuelle et le graphisme

1. La perception visuelleet le graphisme

2. La perception visuelle

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

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

5. Icône de réseau sans-filsur Ubuntu30×25 pixels Essaye deconnecter Connecté

6. Spectre électromagnétique

7. L’oeil humain

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

9. Trichromie (“Trichromacy”) 3 sortes de cônes: “bleu”, “vert”, “rouge” • Chacune sensible à une bandede fréquences différente • Les rapports des niveaux de stimulation déterminent la couleur perçue (en pointillé: les bâtonnets)

10. Lumière blanche Objet blanc Lumière blanche Oeil

11. Lumière blanche Objet noir Absence de lumière Oeil

12. Lumière blanche Objet vert Lumière verte Oeil

13. Lumière blanche Objet jaune Lumière jaune Oeil

14. Cercle des couleurs:version « Rouge, Jaune, Bleu » • Utilisé par les artistes (peintres),et en éducation primaire • Basé sur des anciennesnotions de couleurs • Couleurs primaires:rouge, jaune, bleu • N’est pas basé sur lesnotions scientifiquesmodernes

15. 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 despigments: cyan, magenta, jaune

16. Mélange additif de couleurs Écran blanc Oeil

17. Mélange soustractif de couleurs Toile blanche Oeil

18. Question: Pourquoi le cerveau organise les couleurs perçuesde façon cyclique? ?

20. Question: y a-t-il des animaux avec plus que 3 sortes de cônes?

21. 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 ressembleraitleur « cercle de couleurs » ?

22. La crevette-mante (Stomatopoda) ≈ 12 sortes de cônes!

23. Rétine • Le centre de la rétine a la plupart des cônes • Permetuneacuitéélevéesur les objets au centre focal • La périphérie de la rétineestdominée par les bâtonnets • Permet de détecter des mouvementsdans la périphérie

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

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

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 ! Évitez aussi jaune sur blanc !

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

28. http://www.realfreewebsites.com/blog/wp-content/uploads/2008/09/vibration.pnghttp://www.realfreewebsites.com/blog/wp-content/uploads/2008/09/vibration.png http://onlinebusiness.volusion.com/assets/color3.jpg

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;can’t discriminate colours dependent on R & G • Colour-blind acceptable palette? • Yellow-blue variation and grey variation are ok

30. Simulateurs de daltonisme • http://colorfilter.wickline.org/ • http://www.vischeck.com/

31. SmartMoney's "Map of the Market" http://www.smartmoney.com/map-of-the-market/

32. Théoriedes couleursopposées (“opponent process”) • Signal rouge_vert = rouge – vert • Signal bleu_jaune = bleu – (rouge + vert) http://www.visualexpert.com/sbfaqimages/RGBOpponent.gif

33. Types de daltonisme Grosso-modo : • Rouge-vert (plus courant) • Bleu-jaune

34. Types de daltonisme (en détail) • Trichromatieré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). • 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 3sortes 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 À retenir! Un fait intéressant!

35. Chromosomes, gènes, locus, allèles • Les chromosomes sontsituésdans le noyau des cellules, et sontcomposés de ADN, c.-à-d. des chaînes de nucléotides (symbolisés par les lettres A, T, C, G) • Les gènessont des sous-chaînesde nucléotides qui sonttranscrits + traduits en protéines (chaînesd’acidesaminé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 savaleur(allèle) • Exemple: le groupesanguinestdéterminé par un seulgène, le gène ABO, pour lequelil y a des allèlespossibles pour A, B, et O • Analogie en programmation : un gèneestcommeune variable, un allèleestcommesavaleur, et son locus estcomme son adresse en mémoire

36. Chromosomes homologues mère père • Avec la plupart des chromosomes, il y a des paires de chromosomes homologues, qui ont les mêmesgènesmais pas nécessairement les mêmesallèles. • Exemple: chaquehumain a un allèle du gène ABO de chaque parent (surdeux chromosomes homologues). Les allèles A et B sont co-dominants surl’allèle O, donnant les groupessanguins A, B, AB, ou O.( http://en.wikipedia.org/wiki/ABO_gene ) • Lorsqu’onretrouve le mêmeallèlesur les deux chromosomes, on parle de gènehomozygote. Lorsqu’onretrouve des allèlesdifférents, on ditque le gèneesthétérozygote. B B Homozygote A B Hétérozygote

37. Dominant et récessif • Lorsqu’on a un gènehétérozygote, c’estl’allèledominant qui vaemporter, et l’allèlerécessifn’est pas exprimé • Habituellement, les maladies génétiques chez les humainssontrécessifs (pourquoi?), donctypiquementilfautdeux copies de l’allèlenéfaste (gène homozygote) pour que la maladiesoitexprimée • Plus que les parents sontsemblablesgénétiquement, plus queleur enfant aura de gènes homozygotes, et donc plus de chances d’avoir des maladies génétiques

38. Chromosomes • Les humainsont 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, tandisque le spermatozoïdepeutavoir un X ou un Y. C’estdonc le spermatozoïde qui détermine le sexe d’un enfant.

39. 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 7 7 X Y femme normale(trichromate) homme normal (trichromate)

40. Allèlevert normal 7 7 X X 7 7 X Y Allèleanormal plus près du rouge femme normale homme normal 7 7 X X 7 7 X Y femme avec vision normalemaisporteuse hommedaltonien (deutéranomalie) Chacun des gènes (bleu, vert, rouge) peutavoir un allèleanormal qui aura un effetnéfastesur la vision. Exempleici: un allèlevertanormal qui rapproche la fréquence des cônesvertsvers le rouge (associé avec le daltonisme le plus courant). Les allèlesanormaux rouge et vertsontrécessifs, doncseulementexprimés chez les femmes qui les ontsur les deux chromosomes X. Les hommesontdonc beaucoup plus de chances d’être daltonien. 7 7 X X femme daltonienne (deutéranomalie)

41. Allèlerécessifsur le chromosome X http://en.wikipedia.org/wiki/File:XlinkRecessive.jpg

42. Chez les singes du Nouveau Monde (platyrhiniens): seulement un gène sur le X 7 7 X X 7 7 X Y femelle homozygote (dichromate) 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 trichromatiepermet de distinguer le rouge et le vert, elleest utile pour identifier des fruits mûrsdans la forêt.Question théorique: est-cequ’une femme humaineayant des gèneshétérozygotespourraitêtretétrachromate ?! 7 7 X X femellehétérozygote (trichromate!)

43. Est-cequ’une femme humaineayant des gèneshétérozygotespourraitêtretétrachromate?!La Dr Gabriele Jordan sembleavoirtrouvéunetétrachromatehumaine (une femme), anonyme, identifié par le code cDa29http://discovermagazine.com/2012/jul-aug/06-humans-with-super-human-vision/ ;http://scholar.google.ca/scholar?q=jordan+deeb+bosten+mollon+dimensionality+color+vision+carriers+trichromacy • En 2009, des chercheursontutilisé de la thérapiegénique pour donnerune vision trichromate à des singes-écureuils (singes du Nouveau Monde) adultesmâleshttp://scholar.google.ca/scholar?q=mancuso+neitz+gene+therapy+red+green+colour+blindness+adult+primates

44. Pour plus d’informations • http://webvision.med.utah.edu/ (livre en lignede 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+Model+Simulation+Color+Vision+Deficiency • http://scholar.google.ca/scholar?q=jacobs+evolution+colour+vision+mammals • http://www.mapoflife.org/topics/topic_328_Trichromatic-vision-in-mammals/ • http://anthro.palomar.edu/primate/color.htm

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

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

47. Espace TSV (Teinte, Saturation, Valeur)ou « HSV » (Hue, Saturation, Value) 0° 240° 120° Teinte (angle) Saturation(rayon) Valeur (hauteur) http://msdn2.microsoft.com/en-us/library/aa511283.aspx http://viz.aset.psu.edu/gho/sem_notes/color_2d/html/primary_systems.html

48. 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 sontpas saturés du tout Valeur (ou luminance ou lumière) • Une mesure de la clarté Saturationélevée Saturationbasse Valeurélevée Valeurbasse

49. Coordonnées de quelques points clés

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