Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ergonomie Web - Lois de la Gestalt et Web Design

F148b2fabe4f88c40459f8d587b1ce5f?s=47 pixeline
December 11, 2011

Ergonomie Web - Lois de la Gestalt et Web Design

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

F148b2fabe4f88c40459f8d587b1ce5f?s=128

pixeline

December 11, 2011
Tweet

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/