Ergonomie Web - Lois de la Gestalt et Web Design

Cours sur les Lois de la Gestalt appliquées au Web Design

Transcript

1. ERGONOMIE 3 1
6. 4 QUELLE COMPÉTENCE HUMAINE VOUS AIDERA LE MIEUX À OBTENIR ET SATISFAIRE DES CLIENTS ?
7. popquizz 4 QUELLE COMPÉTENCE HUMAINE VOUS AIDERA LE MIEUX À OBTENIR ET SATISFAIRE DES CLIENTS ?
9. 6 cultiver l’empathie pouvoir se mettre à la place de l’autre, le comprendre plutôt que le juger Ergonomie = se mettre à la place de l’utilisateur final Augmenter sa capacité d’ empathie est une clef de la réussite personnelle et professionnelle L’EMPATHIE
11. 8 NOUS AVONS TOUS BESOIN D’EMPATHIE
12. 8 NOUS AVONS TOUS BESOIN D’EMPATHIE
13. vraiment tous 9
14. US Public Schools - mon bébé de farine 10 On en a tous la capacité, mais elle ne se développe pas forcément. C’est une compétence, il faut l’entraîner.
15. le promener 11
16. le changer 12
17. tous différents 13
18. 14 L’EMPATHIE, TOUT LE MONDE EN VEUT ( MAIS PEU EN ONT )
20. 16 Des éléments de réponse scientifique à la question de l’existence d’un langage universel: qu’est-ce qui nous contrôle lorsque notre impression de quelque chose est belle ou au contraire mauvaise, laide...? Pourquoi sommes-nous souvent d’accord sur ces jugements? FONDAMENTAUX DU LANGAGE VISUEL
21. 17 Voici un interface de Gandi. Qui peux me dire ce qui cloche?
22. 17 Voici un interface de Gandi. Qui peux me dire ce qui cloche?
23. gandi.net - panneau de contrôle 18
24. 19 PHÉNOMÈNES ÉTRANGES.
25. 20 La grande Ourse _ Si vous la connaissez, vous la voyez, sinon, vous ne la voyez pas.
26. 20 La grande Ourse _ Si vous la connaissez, vous la voyez, sinon, vous ne la voyez pas.
27. chapitre en cours 21
28. «Bad taste» 22
29. Franck Ribery Zahia Dehar et son joli... site http://www.zahia.com/ 23
30. Charlize Theron 24
31. Nathalie Portman Peter Beardsley 25
33. Jardin Zen 27
34. Eadweard Muybridge - Galloping Horse 28
35. 29 GESTALT
36. Gestalt : en deux mots 30 gestalt : (alle.) «Forme», Allemagne, 1920 Discipline de la psychologie qui s’intéresse aux traitements de données visuelles de «bas» niveau: organisation, interprétation et classification de ce qui est vu Les aspects du gestaltisme qui nous concernent : •ses lois de la perception visuelle •la projection de la partie sur le tout (comment se fait-il que d’un élément ou d’une partie on arrive à en identifier l’ensemble ?) GESTALT
37. 31 Comment le savez-vous? QU’EST-CE QUE CECI? Gestalt : de la partie au tout De la partie au tout.
38. 32 GESTALT «FAIBLE»
48. 38 La gestalt décrit le phénomène des «sens» (perception) aux «sens» (construction d’une expérience) perception stimule cognition présume « expérience »
49. 38 La gestalt décrit le phénomène des «sens» (perception) aux «sens» (construction d’une expérience) perception stimule cognition présume « expérience »
50. chapitre en cours 39 Voyez-vous le dragon?
51. chapitre en cours 40 Voyez vous la fille nue?
52. de l’élément à l’ensemble 41 Regardez la photo suivante. Soyez attentifs à la façon dont votre oeil analyse différentes zones, s’attardant sur certaines et balayant d’autres. Que se passe-t-il en vous? TEST Le monde est visuellement si complexe que l’esprit a développé un ensemble de stratégies pour mater la confusion. L’esprit cherche d’abord la solution la plus simple. Une de ses façons de faire consiste à regrouper les entités qui présentent les mêmes caractéristiques.
54. gestalt = pattern recognition 43 une multitude de tuiles vous apparaissent immédiatement comme un ensemble: la toiture, elle même partie d’un plus grand ensemble, la maison. Enfin, la niche. votre oeil passe le plus de temps à résoudre la zone encombrée : il cherche à «résoudre» la relation entre le chien et la maison. DE L’ÉLÉMENT À L’ENSEMBLE
55. PATTERN RECOGNITION 44
56. http://www.dispotheque.org/allover/ 45
57. 46 Prenez une mélodie à 12 notes. Jouez là selon la clef de SOL. Rejouez là à nouveau, selon la clef de LA. Il n’y aura probablement aucune note identique aux 2 interprétations, pourtant l’auditeur reconnaîtra qu’il s’agit de la même mélodie. Pour le cerveau, ce sont les relations entre les notes qui définissent la mélodie, pas les notes elles-même. Votre cerveau a regroupé les notes à cause de leur proximité temporelle et en a construit une mélodie, une «expérience». CA NE FONCTIONNE PAS QU’AVEC LA VUE
58. 47 Pourquoi avons nous intégré ces stratégies de pré-traitement de l’information? Quelles sont les bénéfices ? POURQUOI?
61. au plus simple 49 Le monde est visuellement si complexe que l’esprit a développé un ensemble de stratégies pour mater la confusion. L’esprit cherche d’abord la solution la plus simple. parce que notre survie en dépend. Le résultat principal de ces pré-traitements de l’information consiste à former des groupes à partir des éléments composant l’image. Ces logiques de regroupement forment les «lois de la Gestalt». PRINCIPE ESSENTIEL: SIMPLICITÉ
62. quel rapport avec le DWM ? 50 comprendre pourquoi une interface semble cohérente (ou pas) comprendre pourquoi on la trouve esthétique comprendre pourquoi elle est perçue comme facile à utiliser ou pas, ou au contraire confuse, peu claire. Eviter les erreurs évidentes, du style... INTÉRÊT DE LA GESTALT POUR NOUS?
63. http://www.gatesnfences.com/ 51
64. 52 Comment regroupons-nous? Comment identifions-nous des groupes d’information visuelle comme étant des «ensembles» LOIS DE LA GESTALT
65. loi 1: proximité 53 nous percevrons les éléments proches les uns des autres comme ayant une relation entre eux, et on les regroupe «spontanément». LOI 1: LA PROXIMITÉ
66. 54 LOI 1: LA PROXIMITÉ loi 1: proximité
67. 55 loi 1: proximité http://abduzeedo.com/
68. 55 loi 1: proximité http://abduzeedo.com/
69. 56 LOI 1: LA PROXIMITÉ loi 1: proximité deux lois rentrent en compte proximité et ? clôture (l’indentation indique l’ «appartenance à»)
70. 56 LOI 1: LA PROXIMITÉ loi 1: proximité deux lois rentrent en compte proximité et ? clôture (l’indentation indique l’ «appartenance à»)
71. 57 loi 1: proximité
72. 58 loi 1: proximité
73. 59 loi 1: proximité
74. loi 2: similarité 60 lorsque nous percevons plusieurs éléments, nous percevrons les éléments similaires comme formant un groupe. 2. LOI DE LA SIMILARITÉ
75. 61 loi 2: similarité http://edu.tnvacation.com
76. 61 loi 2: similarité http://edu.tnvacation.com
77. 62 http://abduzeedo.com/ loi 2: similarité
78. 62 http://abduzeedo.com/ loi 2: similarité
79. Spectra visual newsreader http://msnbcmedia.msn.com/i/msnbc/components/spectra/index.html on regroupe de manière graphique ce qui est considéré comme similaire 63 loi 2: similarité
80. http://www.media-awareness.ca/francais/ 64 A l’inverse, le lien «english» est mélangé aux autres éléments du menu, ce qui n’est pas opportun vu qu’il a une autre fonction. loi 2: similarité
81. copyright du graphique: Andy Rutledge 65 SIMILARITÉ VS PROXIMITÉ: QUI GAGNE? loi 2: similarité
82. à droite, malgré le facteur de similarité, la proximité emporte le regroupement copyright du graphique: Andy Rutledge 65 SIMILARITÉ VS PROXIMITÉ: QUI GAGNE? loi 2: similarité
83. 66 nous percevons comme complets et terminés des objets qui ne le sont, dans les faits, pas. 3. LOI DE LA CLÔTURE loi 3: clôture
84. 67 loi 3: clôture
85. On perçoit les lettres I B et M à partir d’une série de rectangles 68 loi 3: clôture
86. 69 loi 3: clôture
87. chapitre en cours on comprend qu’il s’agit du même plan 70
88. 71 Des Traynor - http://contrast.ie/blog/the-language-of-interfaces/ loi 3: clôture
89. copyright du gaphique: Andy Rutledge 72 les ronds encadrés sont perçus comme un ensemble séparé des autres ronds, sans différence de distance ni de similarité, grâce à la ligne les encadrant. loi 3: clôture
90. copyright du gaphique: Andy Rutledge 73 les ronds reliés par une ligne sont perçus comme un ensemble distinct des autres ronds, sans différence de distance ni de similarité, grâce à la ligne les reliant. loi 3: clôture
91. Source: informationisbeautiful.net Auteur: David Mc Candless 74 loi 3: clôture
92. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
93. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
94. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
95. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
96. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
97. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
98. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
99. 75 chaque icône partage des propriétés visuelles + un espacement indiquant qu’ils sont égaux (= «chacun lance une application») chaque icône est différencié par son visuel interne (= «chaque application fait qque chose de différent») Les 4 icônes du bas sont différenciées des autres par leur insertion dans un rectangle texturé, leur donnant une plus grande importance loi 3: clôture
100. 76 Des éléments organisés le long d’une ligne (ou d’une courbe) sont perçus comme plus apparentés que les autres 4. LOI DE LA CONTINUITÉ loi 4: continuité
101. l’oeil va spontanément suivre le chemin, du bas vers le haut 77 loi 4: continuité
102. 78 loi 4: continuité La zone est clairement identifiée comme un «header»
107. 82 loi 4: continuité tout est fait pour que l’on perçoive la séquence
108. copyright du gaphique: Andy Rutledge 83 Le graphique de droite, car la continuité des lignes permet de percevoir en un coup d’oeil la valeur la plus importante. QUEL GRAPHIQUE EST LE + RAPIDE À DIGÉRER ? loi 4: continuité
109. LA GRILLE 84 loi 4: continuité
110. 85 http://www.thegridsystem.org/
111. De l’usage de la trame / grille la grille facilite le travail perceptif de l’oeil et cognitif du cerveau elle installe le rythme horizontal et vertical de la page. 86 6. Loi de la continuité loi 4: continuité
112. grille ratée formulaire http://www.onva-rjv.fgov.be/fr/page_3_1_1.htm 87 loi 4: continuité
113. grille réussie http://www.markboulton.co.uk/ 88 loi 4: continuité
114. grille ratée 89 http://www.papress.com/thinkingwithtype/index.htm loi 4: continuité
115. 90 Lorsque notre cerveau traite une image, il commence par discerner le fond (l’arrière-plan) de la figure (l’objet en avant plan). 5. LOI DE LA FIGURE - FOND loi 5: figure-fond
116. 91 «vase de Rubin» soit on perçoit le vase, soit les visages, jamais les deux, chacun faisant office de fond à l’autre. loi 5: figure-fond
117. 92 loi 5: figure-fond
118. 93 sourire de face / sourire de profil loi 5: figure-fond
119. 94 exploitation habile de ce principe dans l’ancien logo de visitnorway.com 3 composantes / une figure humaine aux bras levés loi 5: figure-fond
120. 95 loi 5: figure-fond
121. Ce site utilise plusieurs couches mais cela fonctionne: nous pouvons rapidement déterminer ce qui constitue le contenu de ce qui constitue l’arrière plan (structure et fond) 96 http://johndegroote.com/ loi 5: figure-fond
122. 97 symétrique = fait de parties pareilles organisées à même distance autour d’un centre. Dans la nature, symétrie = système immunitaire performant (source: Charles Feng «Looking Good: The Psychology and Biology of Beauty» http://www.jyi.org/volumes/volume6/issue6/features/feng.html ) ci-dessus, vous percevez 3 paires de parenthèses : la loi de la symétrie est plus forte que la loi de la proximité 6. LOI DE LA SYMÉTRIE loi 6: symétrie
123. 98 loi 6: symétrie
124. 99 2 couleurs différentes, 2 directions différentes. Pourtant, on perçoit l’ensemble comme un seul objet loi 6: symétrie
125. 100 loi 6: symétrie une symétrie est par définition: parfaite. Sinon, bardaf, c’est l’embardée.
126. conséquence: un objet visuel sera perçu comme incomplet, en déséquilibre ou «laid» si une symétrie est induite mais pas parfaitement respectée. 101 loi 6: symétrie
127. 102 loi 6: symétrie: http://lerecorddumonde.be/
128. 103 http://planetrenders.net/
129. 104 toute présentation visuelle a besoin d’un point focal (ou centre d’intérêt, ou point d’emphase). Ce point attire l’attention de l’utilisateur et le persuade de poursuivre le message visuel. Ici, un élément de forme différente. 7. LOI DU POINT FOCAL loi 7: point focal
130. 105 Application: hiérarchie http://informationarchitects.jp/ loi 7: point focal
131. Le site de jonathan Yuen utilise la grille passive (non visible mais dont on perçoit l’effet). http://www.jonathanyuen.com/main.html 106
132. 107 Décrivez les sites suivants, ce qui (ne) fonctionne (pas), s’ils vous plaisent (ou pas) en basant vos arguments sur les lois de proximité / similarité / symétrie / clôture / point focal / continuité / figure - fond http://auxpetitesmains.free.fr/ http://creattica.com/ http://www.ladysovereign.com/ http://www.simyo.be http://www.dexia.com http://archi-pourri.chez-alice.fr/ http://www.sharpideas.com/ http://www.polargold.de/ http://www.speed.be http://www.shannonmoeller.com/ EXERCICES
133. chapitre en cours 108 EXEMPLE DE RÉPONSE
134. 109 La gestalt démontre qu’on regarde d’abord la forme générale avant les détails. Si la forme globale n’est pas bonne, vous ne la règlerez pas en ajustant les détails. Recommencez la forme globale. CONSÉQUENCE 1: GLOBAL D’ABORD
135. 110 COMMENCER PAR LA FORME EXTÉRIEURE, TERMINER PAR LES DÉTAILS
136. chapitre en cours http://webdesign.tutsplus.com/articles/design-theory/the-gestalt-principle-design-theory-for-web-designers/ 111
137. 112 Si l’on exploite ces principes, on peut induire le flux visuel ( = le séquence de lecture de l’interface) pour guider l’utilisateur sur nos écrans d’une manière qui soit ressentie comme «naturelle», logique et sans effort. CONSÉQUENCE 2: FLUX VISUEL
138. http://www.lestanneurs.be/ site (mal) redesigné depuis :( 113 EXEMPLE
139. chapitre en cours http://clearleft.com/ 114
140. 115 formulaire de contact: http://www.a-dn.be/contact/ John Mees http://johnmees.com/ firefox http://www.mozilla.com/en-US/ FLUX conséquence de la gestalt: guider le flux visuel
141. 116 FEEDBACKARMY HTTP://WWW.FEEDBACKARMY.COM/ conséquence de la gestalt: guider le flux visuel
142. 1 116 FEEDBACKARMY HTTP://WWW.FEEDBACKARMY.COM/ conséquence de la gestalt: guider le flux visuel
143. 1 2 116 FEEDBACKARMY HTTP://WWW.FEEDBACKARMY.COM/ conséquence de la gestalt: guider le flux visuel
144. 1 2 3 116 FEEDBACKARMY HTTP://WWW.FEEDBACKARMY.COM/ conséquence de la gestalt: guider le flux visuel
145. 1 2 3 116 FEEDBACKARMY HTTP://WWW.FEEDBACKARMY.COM/ conséquence de la gestalt: guider le flux visuel
146. 117 SPEED.BE conséquence de la gestalt: guider le flux visuel
147. chapitre en cours 118 HTTP://WWW.TUNNEL7.COM/
148. 119 CFWB.BE : DE L’ORDRE HTTP://WWW.CFWB.BE grouper ce qui va ensemble
149. 119 CFWB.BE : DE L’ORDRE HTTP://WWW.CFWB.BE grouper ce qui va ensemble
150. qui 1 119 CFWB.BE : DE L’ORDRE HTTP://WWW.CFWB.BE grouper ce qui va ensemble
151. qui 1 qui 2 119 CFWB.BE : DE L’ORDRE HTTP://WWW.CFWB.BE grouper ce qui va ensemble
152. qui 1 qui 2 119 CFWB.BE : DE L’ORDRE HTTP://WWW.CFWB.BE grouper ce qui va ensemble
153. qui 1 qui 2 alors qu’il faut choisir entre 2 «profils» les éléments ne sont pas mis en opposition (mode horizontal) mais en séquence (ordre vertical) 119 CFWB.BE : DE L’ORDRE HTTP://WWW.CFWB.BE grouper ce qui va ensemble
154. Continuité: une liste horizontale ne dit pas la même chose qu’une liste verticale. L’action demandée: choisir si l’on doit choisir entre plusieurs éléments, on aura tendance à les aligner horizontalement devant nous pour les comparer. idem en UI design, on les organise horizontalement 120 EBAY: DE L’ORDRE RÉUSSI
155. chapitre en cours 121 REGROUPEMENT INCOHÉRENT L’OEIL EST APPELÉ DE TOUT CÔTÉ POINT FOCAL NON PERTINENT HTTP://WWW.MSSAA.ORG/
156. 122 Vérifier le flux visuel d’un écran hiérarchie plisser des yeux prendre 2 mètres de distance respect de la grille web developer firefox extension: rulers 960Gridder bookmarklet http://peol.github.com/960gridder TRUCS ET ASTUCES Barbatruc
157. Retour aux sources 123 what is visual flow: http://webdesign.about.com/od/webdesignbasics/ss/flow-in-design.htm using wireframes for visual flow http://designcrux.netfirms.com/visualflow_wireframelayout.html http://tpgblog.com/2009/01/12/tunnel7/ http://tpgblog.com/2008/03/24/quick-ux-quick-heuristics-for-user-experience/ The role of flow in web design : http://msdn.microsoft.com/en-us/library/ms993280.aspx The interface of a cheeseburger http://informationarchitects.jp/the-interface-of-a-cheeseburger/ SOURCES
158. 124 Concepts clefs de l’utilisabilité http://s.billard.free.fr/referencement/?2007/10/23/433-30-concepts-cles-de- lutilisabilite Ergonomie, utilisabilité et typographie http://www.viget.com/inspire/typography-tuesday-hierarchy/ The Gestalt Principle: Design Theory for Web Designers http://webdesign.tutsplus.com/articles/design-theory/the-gestalt-principle- design-theory-for-web-designers/ SOURCES Manon des sources?
159. 125 La même chose, expliquée autrement (en anglais) http://www.vanseodesign.com/web-design/gestalt-principles-of-perception/ Grid toolbox: http://www.fuelyourcreativity.com/grid-based-design-toolbox/ Gestalt Principles of Perception : Proximity, Uniform Connectedness,and Good Continuation http://www.andyrutledge.com/gestalt-principles-3.php A LIRE Lire, tire, lire, tire, lire... dire
160. chapitre en cours 126 HTTP://WWW.ARNGREN.NET/