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. Spectre électromagnétique

6. L’oeil humain

7. La rétine • 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

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

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

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

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

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

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

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

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

16. Mélange soustractif de couleurs Toile blanche Oeil

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

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

20. 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 » ?

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

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

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

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

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. SmartMoney's "Map of the Market" http://www.smartmoney.com/map-of-the-market/

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.

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

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

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

35. Coordonnées de quelques points clés

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 shouldn’t differ only by amount of red • helps colour-deficient observers

39. Couleurs recommendées oui non • Grandes superficies: couleurs peu saturées.Petites regions et détails: couleurs saturées. • Pour encoder des catégories,par exemple dans une légende, utilisez:Ces couleurs sont facilement distinguées, même d’une culture à une autre. Utiliser d’abord les 6 premières (rouge, vert, bleu, jaune, noir, blanc), ensuite les 6 autres (gris, orange, brun, rose, magenta/mauve, cyan/turquoise).

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 funérailles? • Au Japon, noir porte bonheur aux mariages,et blanc est porté aux funérailles! • Rouge = arrêter, vert = aller, jaune = prudence • Une norme internationale

41. The Psychology of Color in Marketing and BrandingGregory Ciotti, July 17, 2013https://www.helpscout.net/blog/psychology-of-color/ Couleurs préférées des femmes: Couleurs préférées des hommes:

42. Une illusion: lequel des carrés A et B est plus foncé?

43. Illusion de Akiyoshi KITAOKA http://www.ritsumei.ac.jp/~akitaoka/index-e.html

44. L’effet “pop-out” préattentif • Pendant le traîtement pré-attentif (ou pré-conscient) du champ visuel par le système visuel humain, le champ visuel est traîté en parallèle. • Certaines caractéristiques “primitives” du champ visuel peuvent être détectées très rapidement (en temps O(1)) pendant ce traîtement. Cela permet un effet de “pop-out”, où quelque chose nous saute aux yeux. On parle alors de traîtement préattentif, vision précoce, ou vision préattentive. • Des exemples suivent …

45. Couleur – un effet “pop-out”

46. Temps de réponse « Y a-t-il un objet rouge parmi les objets verts? » focaliser chaque objet - processus conscient O(N) effet « pop-out » préattentif O(1) Nombre d’objets

47. Orientation – un effet “pop-out”

48. Mouvement – un effet “pop-out”

49. Taille – un effet “pop-out”

50. Lissage ou ombrage – un effet “pop-out”