Ergonomie Web - Lois de la Gestalt et Web Design

Transcript

1. ERGONOMIE 3 1

2. 2

3. 3

4. 3

5. 3

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 ?

8. 5

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

10. 7

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 )

19. 15

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

32. 26

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»

39. 33

40. 33

41. 34

42. 34

43. 35

44. 35

45. 36

46. 36

47. 37

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.

53. 42

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?

59. 48

60. 48

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»

103. 79

104. 79

105. 80

106. 81

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/