La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Perception visuelle et graphisme. La perception visuelle.

Présentations similaires


Présentation au sujet: "Perception visuelle et graphisme. La perception visuelle."— Transcription de la présentation:

1 Perception visuelle et graphisme

2 La perception visuelle

3 Pourquoi étudier la perception? Du RealCD de IBM: Bouton noir sur font noir Cool… Mais difficile à voir! Létiquette juste à côté ne devrait pas être nécessaire Une bonne utilisation des couleurs, formes, etc. peut beaucoup améliorer lutilisabilité, tout comme une mauvaise peut la nuire. Exemple:

4 Spectre électromagnétique

5 Loeil humain

6 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

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

8 Lumière blanche Objet blanc Oeil

9 Lumière blanche Absence de lumière Objet noir Oeil

10 Lumière blanche Lumière verte Objet vert Oeil

11 Lumière blanche Lumière jaune Objet jaune Oeil

12 Cercle des couleurs: version « Rouge, Jaune, Bleu » Utilisé par les artistes (peintres), et en éducation primaire Basé sur des anciennes notions de couleurs Couleurs primaires: rouge, jaune, bleu Nest pas basé sur les notions scientifiques modernes

13 Les couleurs primaires: versions modernes La lumière se mélange de façon additive. Une partie dun é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 des pigments: cyan, magenta, jaune

14 Oeil Mélange additif de couleurs Écran blanc

15 Oeil Mélange soustractif de couleurs Toile blanche

16 Question: Pourquoi le cerveau organise les couleurs perçues de façon cyclique? ?

17

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

19 Oui! Certaines sortes doiseux 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 ressemblerait leur « cercle de couleurs » ?

20 La crevette-mante (Stomatopoda) 12 sortes de cônes!

21 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

22 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)

23 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

24 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

25 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 !

26 Focus Different wavelengths of light focused at different distances behind eyes lens –need for constant refocusing causes fatigue –be careful with certain colour combinations Pure (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.)

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

28 SmartMoney's "Map of the Market"

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

30 Espace RVB (Rouge, Vert, Bleu) ou « RGB » (Red, Green, Blue)

31 Espace TSV (Teinte, Saturation, Valeur) ou « HSV » (Hue, Saturation, Value) Teinte (angle) Saturation (rayon) Valeur (hauteur) 0° 240°120°

32 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 sont pas saturés du tout Valeur (ou luminance ou lumière) Une mesure de la clarté Valeur élevée Valeur basse Saturation élevée Saturation basse

33 Coordonnées de quelques points clés Nom de couleur Espace 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)

34

35

36 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 shouldnt differ only by amount of red –helps colour-deficient observers

37 Couleurs recommendées 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 dune culture à une autre. Utiliser dabord les 6 premières ( rouge, vert, bleu, jaune, noir, blanc ), ensuite les 6 autres ( gris, orange, brun, rose, magenta/mauve, cyan/turquoise ). ouinon

38 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

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

40 Illusion de Akiyoshi KITAOKA

41 Leffet 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 …

42 Couleur – un effet pop-out

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

44 Orientation – un effet pop-out

45 Mouvement – un effet pop-out

46 Taille – un effet pop-out

47 Lissage ou ombrage – un effet pop-out

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

49 Conjonction de dautres paires de variables Récemment (Driver et al. 1992), nous avons découvert quune conjonction de mouvement et de couleur permet une détection préattentive. (Voir chapitre 5 dans Colin Ware, "Information Visualization: Perception for Design", 2ième édition, 2004, pour plus dinformations.)

50 Un autre exemple où il ny a pas deffet pop-out

51 Dautres variables détectées de façon préattentive Length Width Collinearity Curvature Number Added marksSpatial grouping Shape Enclosure

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

53 Combien y a-t-il dobjets ?

54

55

56

57

58

59 Nombre dobjets Temps de réponse « Combien y a-t-il dobjets ? » subitiser compter (processus conscient) 4 objets Subitiser coûte 40 à 100 ms par objet Compter coûte 250 à 300 ms par objet

60 Comparaison: louïe versus la vue Plus de 1000 fréquences différentes sont captées en même temps; un échantillonnage relativement riche du timbre du son Aucune formation dimage Seulement trois (bandes de) fréquences sont captées en même temps Formation dune image de 10 6 "pixels" (un nombre très approximatif)

61 Le graphisme (« graphic design »)

62 Graphic Design Primarily an art; concerned with aesthetics Graphic designers design … –Logos, fonts, posters, book & CD covers, pamphlets, brochures, reports, websites, … Sub-disciplines within graphic design: –Photography, illustration, symbolism, typography

63 (Graphic, Visual, Artistic) Design Elements: Line Shape Form Space Texture Colour (hue, value) Principles: Repetition Variety Rhythm Balance Emphasis Contrast Proportion / scale Economy Harmony Unity

64 Takeshi Kono, Ideal Relationship, 1955

65 […] from a test designed by Maitland Graves to determine the artistic sensitivity of students – reproduced by Rudolf Arnheim

66 Graphic Design Has distilled hundreds of years of experimentation with composition on paper Even divorced from aesthetic concerns, graphic design can teach us useful lessons on visual communication

67 Les gestalts Une gestalt est une configuration ou un patron déléments formant (ou perçus comme) un tout unifié. Cest une forme structurée, complète et prenant sens pour nous.

68 Quelques « lois » de la gestalt Loi de la proximité: les éléments proches les uns des autres ont tendance à être perçus comme une forme ou un groupement. Loi de la similitude: les éléments semblables les uns des autres ont tendance à être perçus comme une forme ou un groupement.

69 Quelques « lois » de la gestalt (2) Loi de la clôture: les contours partiels qui peuvent être prolongés pour former un tout ont tendance à être perçus comme le contour complet dune forme ou dun objet. Loi de la continuité: les éléments qui semblent former une ligne ou une courbe lisse ont tendance à être perçus comme une ligne ou une courbe lisse.

70 Similitude Proximité Clôture Continuité

71 Exemples de regroupements: boîte de dialogue de Microsoft Word pour changer les bordures Où se trouve les regroupement par proximité / clôture/ similitude ?

72 Exemple tiré de Lotus Notes

73 : regroupements logiques : regroupements perçus Mauvaise utilisation de lespace!

74 First Last Item 1 Item 2 Item 3

75

76

77

78 Quels sont les regroupements de boutons perçus ici ? Pourquoi ?

79 Exemple: du site web de IKEA Est-ce utile?

80 Key Ideas You cant show everything at once –Choose only the most important, high-level, or common interface elements –Frequently accessed elements should be easier to get to Use graphical elements, attributes, and principles to –Create distinctions –Emphasize important features –Show similarities and groupings Dont show too much at once, or use too many graphical effects, or youll create clutter ! –Simpler graphical information can be interpreted faster and with more accuracy and confidence

81 Designing a Visible Language (or Visual Language) Elements at your disposal: Typography Symbolism –Icons –Graphics, illustrations Colour, texture, and value Page composition and spatial layout –Grids, rules, space Sequencing, timing, animation Design principles –Emphasis –Guiding the eye –Consistency and clarity Example textures

82 Visual Language Establishing a visual language that is consistent across your interface will help the user interpret and make sense of the interface elements and data Care must be taken to keep the language simple and consistent, otherwise it will loose its effectiveness Example: consistent look for a set of widgets used across applications

83 A Typographic Example: creating emphasis in paragraphs (Baecker and Marcus, 1990, p. 308)

84 Typical page layout with primary and secondary features (Baecker and Marcus, 1990, p. 295). Note the restrained use of borders and separators. Some interfaces use deeply nested rectangular borders or bevelling to group items – this is going too far. Use a grid to organize elements and suggest relationships

85 Exemples de grilles (« grids ») Exemples tirés de

86 -underload-9-big-graphic-blueprint/

87 Attention: nutiliser pas trop de polices ou de styles différents! Texte noir rouge bleu noir gras rouge gras rouge italique

88 Texte noir bleu noir gras bleu gras souligné souligné en italique surligné en jaune

89 Example: Source Code Design & Typesetting Typesetting source code to enhance readability Sophisticated prettyprinting Experimental evidence of effectiveness Programs as publications See Baecker & Marcus, Human Factors & Typography for More Readable Programs, 1990, ACM Press

90

91

92

93

94 Exemples: métaphores visuelles

95 Autres exemples …

96 Indices visuels 3D, indices de profondeur (« visual depth cues »)

97 Click Me!!! Cube de Necker

98 Exemple: indices de profondeur pour renforcer une métaphore Est-ce utile?

99 Exemple: lissage, reflets spéculaires Est-ce utile?

100 Dans un environnement 3D: Où suis-je ?

101

102

103 Indices de profondeur, et autres indices utiles, dans les mondes 3D Occlusion, transparence Parallaxe du mouvement (« motion parallax ») Ombres, lissage, reflets spéculaires (« specular highlights ») Taille relative (« foreshortening ») Lignes convergentes Plan horizontal Dégradé du ciel Points de repère Direction de boussole

104 Exemple

105 Exemple: lissage et grosseur variable des lignes pour indiquer la profondeur

106 Exemple: lissage (Bezerianos et Balakrishnan 2005)

107 La transparence

108 Exemple: la transparence et le lissage utilisés pour montrer un retournement de la sphère (« sphere eversion »)

109 Des menus transparents Peuvent utiliser une police « anti-interférence » (Harrison et al. 1995)(Harrison et Vicente 1996)

110 Le « hotbox »: un menu 2D dans Maya

111 Transparence partielle simulée avec tramage (« dithering »)

112 Lanimation

113 Les animations Pour attirer lattention – Mais nattirez pas trop lattention! – Exemples: curseurs de souris (« cursor trails »); annonces dans les pages web (fichiers.GIF animés) – (vidéo: page web de la bibliothèque virtuelle de lACM avec une courte animation) Pour illustrer un processus ou un algorithme – (vidéo: icônes animées) – (vidéo: « sorting out sorting ») Pour montrer un changement ou transition détat – Exemples: défilement animée; ouverture animée dun menu – (vidéo: barre doutils dans MacOS X) – Les transitions animées dans les visualisations montrent les relations entre différents points de vue, entre différentes perspectives – (vidéo: transitions animées entre différentes points de vue dune scène 3D)

114 Icônes animées Baecker, Small, Mander, 1991,

115 Transitions animées dans une visualisation Heer et Robertson 2007 (voir vidéo)

116 DimP: Direct manipulation Player (Pierre Dragicevic et al. 2008; )

117 Exemples divers

118 Page Web Honteuse The navigation bar has no indicationof what the buttons do The navigation bar provides no indication of what the buttons do The navigation bar has no indicationof what the buttons do Only after the cursor is on a button does the label show up, and at a different location no less! (dividing the users attention)

119 Exemple: problème de conception Comment montrer la région rectangulaire sélectionnée par-dessus une image? + ?

120 Dessiner tout en noir …

121 Dessiner tout en blanc …

122 Dessiner le rectangle rempli en XOR (bits inversés) …

123 Dessiner en XOR …

124 Dessiner en blanc avec bordure XOR …

125 Dessiner en blanc avec bordure noire …

126 Autres solutions possibles? Bordure pointillée et animée ?


Télécharger ppt "Perception visuelle et graphisme. La perception visuelle."

Présentations similaires


Annonces Google