Your SlideShare is downloading. ×
bons usages,utilisateur etucd                 Relax In The AirMai 2011
sommaire1. introduction2. va falloir connaître les lois de la gestalt3. un bon Utilisateur utilise       • User Centered D...
introduction
“Life is hard, its harder if yourestupid.”                            John Wayne
lois de la gestalt
most powerful toolEven more than Arnold
“C’est une théorie, une école de pensée, qui étudiecomment l’être humain perçoit les choses qui l’entourent.Les lois de la...
psychologie    Objectivité     VS SubjectivitéGeorge What else?
psychologie   Les lois de la Gestalt sont innéesRio the movie
gestalt• distinction fond figure• Similitude• Proximité• Bonne continuité• connectivité uniforme• Destin commun• Clôture  ...
gestaltdistinction fond figureLes éléments sont perçus autant comme desfigures (éléments distincts) que comme fond(backgro...
gestaltdistinction fond figureProcessus vital pour l’humain etprobablement sa base de lévolution dans ladétection des mena...
gestaltdistinction fond figurePrioriser nos yeux pour ne pas ignorerquelque chose de proximité immédiate etd’importance.or...
gestaltdistinction fond figure                          Relax In The AirMai 2011
gestaltdistinction fond figure           Accueil        Accueil           A propos       A propos            Clients      ...
webdesignAide à distinguer le contenu de la structure dansun milieu à 2 dimensions.Un concepteur peut utiliser un grand no...
www.duoh.comwebdesign
gestaltsimilitudedes choses qui sont similaires sont perçuscomme étant plus liés que les choses qui sontdissemblables.    ...
gestaltsimilitudesimilitude decouleurtailleformetextureorientation..                Relax In The AirMai 2011
gestaltsimilitudepeu de cohérence                   Relax In The AirMai 2011
gestaltsimilitudeexploiter la taille                      Relax In The AirMai 2011
gestaltsimilitudesimilitude de couleur /forte                               Relax In The AirMai 2011
webdesignerLe travail du webdesigner est de fournir desindices visuels pour montrer les élémentsdinterface liés les uns au...
webdesignerL’utilisateur final peut rapidement percevoirlorganisation pour savoir comment utiliser ouinteragir avec ce qu’...
gestaltsimilitudecette règle peut s’appliquer aux liens sur unepage, cela permet alors à l’utilisateur derapidement identi...
comportement cohérent                        uxmag.com
“Ne croyez pas que l’intérêt des fondamentauxconsiste à conserver le design simpliste.Leur but est de s’ouvrir, grâce à le...
gestaltproximitéles choses qui sont proches les unes desautres sont perçues comme étant plus liéesque les choses qui sont ...
gestaltproximitéCes éléments sont perçus     On perçoit deux groupes etcomme un groupe et donc en   comprenons qu’il y a d...
gestaltproximité + similaritéCes groupes sont séparés   La proximité reste le signalpar la couleur.            de distinct...
webdesignerLe travail du webdesigner est de comprendre laforce relative de ces mécanismes afin de pouvoirchoisir celui à e...
gestaltconnectivité uniformeles éléments qui sont reliés par despropriétés visuelles uniformes sont perçuscomme étant plus...
gestaltconnectivité uniforme           Même si la proximité, la taille et la couleur           sont les mêmes, les figures...
webdesign
connectivité?                Ouhla ça vaY a une drôle   sentir. Crotte.d’odeur...                Me sens pas              ...
lignes de connection                       Ouhla ça vaY a une drôle          sentir. Crotte.d’odeur...                    ...
gestaltbonne continuitédes éléments disposés sur une ligne ou unecourbe sont perçus comme étant plus liés quedes éléments ...
gestaltbonne continuitéLe fait que les mots dans ce paragraphe soientsur une ligne nous aide à comprendre quilssont liés l...
gestalt  bonne continuitéNombre defollowerssur Twitter              Max   Anne Paul   Otto      Paul   Max   Otto Anne    ...
unitinteractive.combonne continuité
Use the grid Use the grid Use the grid Us he grid Use the grid Use the grid Use the rid Use the grid Use the grid Use the ...
http://methodandcraft.com/videos/extensible-baseline-grids
jlern.combons usages Proximité, connectivité uniforme et bonne continuité sont desfondamentaux de la Gestalt. Les principe...
gestaltdestin communles objets tendent à apparaître groupéslorsqu’ils présentent un mouvement dans lemême sens, avec la mê...
gestaltdestin communPlus que les autres principes, celui-ci estétroitement liée à un instinct de surviefondamental chez lh...
gestaltdestin commun                Relax In The AirMai 2011
destin communVous et les autres conducteurs qui allez dans lemême sens, êtes liés par un sort commun etcollectif (façon de...
destin communQuand un véhicule rompt le flux, il capte notreattention, nous permettant de réagir de façonappropriée
gestaltdestin communLes humains sont programmés pourreconnaître les mouvements contrastés plusfacilement et fortement que ...
webdesignerLl est logique que les designers profitent de cefait et exploitent ce principe dans le travail deconception. Co...
gestaltdestin commun Slide-out menu                  En vous inscrivant,Sign in           vous profiterez de               ...
serialcut.comwebdesigner
serialcut.comwebdesigner
serialcut.comwebdesigner
gestaltclôtureLorsque l’humain regarde un arrangementcomplexe déléments individuels, il a tendancea ré-interpréter l’ensem...
gestaltclôtureNous n’avons presque jamais un tableaucomplet de ce qui nous entoure. le principe defermeture est alors au c...
gestaltclôturenous comptons tellement sur la clôturequ’elle est souvent volontairement exploitéepour nous tromper.        ...
gestaltclôture  pour utiliser la clôture de façon efficace,  vous devez simplifier la fermeture de la  figure.            ...
exemple      inVISIBLE VISIBLE       Cet exemple demande trop    Ici la clôture est facilité.       d’effort et l’informat...
exemple
“Vous designer, devez vous prémunir contre lesmanières dont le principe de clôture peut êtreutilisé pour induire en erreur...
utilisateur
“User-centered design is a process in which theneeds, wants, and limitations of users are givenattention at each stage of ...
user centered designquoi? Le UCD est une méthode itérative qui met l’utilisateur au centre de toutes les décisions de desi...
user centered designquoi? Le UCD est une philosophie de design rendue possible par une multitudes de disciplines et méthod...
user centered designbut Le but ultime du UCD est d’optimiser l’expérience utilisateur d’un système, d’un produit ou d’un p...
user centered designbut Le UCD cherche à atteindre ce but en considérant le point de vue de l’utilisateur durant toutes le...
Moi       Interaction                                                  AutresEnvironnement                             Ens...
point de vue de l’utilisateurBesoins et envies
point de vue de l’utilisateurButs et motivations
point de vue de l’utilisateurObstacles et limitations
point de vue de l’utilisateurTâches et activités
point de vue de l’utilisateurGéographie et langage
point de vue de l’utilisateurEnvironnement et matériel
point de vue de l’utilisateurTravail, vie et expérience
“Ce que vous mettez sur une interface devientun univers à part entière pour ses utilisateurs.”                            ...
Ecouter les retours   MC Casal
disciplines Les disciplines du User-centered design sont: • La Recherche • L’Information architecture • l’Interaction Desi...
process méthodes pour la recherche •    Interviews •    Focus groups •    Workshops •    Brainstorm •    Analyse de tâches...
process méthodes pour la conception •    Storyboards •    Croquis •    Wireframe •    Wireflow •    Modélisation de naviga...
process méthodes pour le design •    Graphisme •    Design de logo •    Branding •    Iconographie •    High/Low fidélité ...
process méthodes pour l’évaluation • Usability evalution • Usability testing • Web analytics                              ...
user centered designavantages• Augmenter les taux d’adoption• Améliorer la productivité utilisateur• Réduire les coûts de ...
résultatRetour sur investissement
ressources
Little details matter   littlebigdetails.com
Learn how to wireframe   wirify.com
au travailappliquez toutes ces bonnes pratiques.1. on tire au sort un site2. on analyse qui sont ses users3. on repense sa...
MerciThe endGood luck pour:A. Trouver un stageB. Les examens                      Relax In The AirMai 2011
Gestalt et Webdesign
Gestalt et Webdesign
Upcoming SlideShare
Loading in...5
×

Gestalt et Webdesign

1,537

Published on

Lois de la Gestalt expliquées pour designers et webdesigners. Cours donné dans le cadre de l'école CREA Genève aux étudiants en Direction Artistique.

Published in: Design

Transcript of "Gestalt et Webdesign"

  1. 1. bons usages,utilisateur etucd Relax In The AirMai 2011
  2. 2. sommaire1. introduction2. va falloir connaître les lois de la gestalt3. un bon Utilisateur utilise • User Centered Design (UCD) • Disciplines et Process • Personas4. ressources5. au travail Relax In The AirMai 2011
  3. 3. introduction
  4. 4. “Life is hard, its harder if yourestupid.” John Wayne
  5. 5. lois de la gestalt
  6. 6. most powerful toolEven more than Arnold
  7. 7. “C’est une théorie, une école de pensée, qui étudiecomment l’être humain perçoit les choses qui l’entourent.Les lois de la Gestalt rendent claires les questions dedistribution des éléments dans l’espace, quand et commentgrouper des objets... etc.Quand vous connaîtrez ces lois, tout deviendra simplecomme un croque-monsieur.” MC casal
  8. 8. psychologie Objectivité VS SubjectivitéGeorge What else?
  9. 9. psychologie Les lois de la Gestalt sont innéesRio the movie
  10. 10. gestalt• distinction fond figure• Similitude• Proximité• Bonne continuité• connectivité uniforme• Destin commun• Clôture Relax In The AirMai 2011
  11. 11. gestaltdistinction fond figureLes éléments sont perçus autant comme desfigures (éléments distincts) que comme fond(background ou paysage sur lequel repose lafigure) Relax In The AirMai 2011
  12. 12. gestaltdistinction fond figureProcessus vital pour l’humain etprobablement sa base de lévolution dans ladétection des menaces. Relax In The AirMai 2011
  13. 13. gestaltdistinction fond figurePrioriser nos yeux pour ne pas ignorerquelque chose de proximité immédiate etd’importance.organiser ce que nous voyons par la façondont chaque objet se rapporte à dautres. Relax In The AirMai 2011
  14. 14. gestaltdistinction fond figure Relax In The AirMai 2011
  15. 15. gestaltdistinction fond figure Accueil Accueil A propos A propos Clients Clients Portfolio Portfolio Contact Contact Relax In The AirMai 2011
  16. 16. webdesignAide à distinguer le contenu de la structure dansun milieu à 2 dimensions.Un concepteur peut utiliser un grand nombre demécanismes visuels et des traitements de styleafin de communiquer des indices importants pourétablir des relations figure-fond.
  17. 17. www.duoh.comwebdesign
  18. 18. gestaltsimilitudedes choses qui sont similaires sont perçuscomme étant plus liés que les choses qui sontdissemblables. Relax In The AirMai 2011
  19. 19. gestaltsimilitudesimilitude decouleurtailleformetextureorientation.. Relax In The AirMai 2011
  20. 20. gestaltsimilitudepeu de cohérence Relax In The AirMai 2011
  21. 21. gestaltsimilitudeexploiter la taille Relax In The AirMai 2011
  22. 22. gestaltsimilitudesimilitude de couleur /forte Relax In The AirMai 2011
  23. 23. webdesignerLe travail du webdesigner est de fournir desindices visuels pour montrer les élémentsdinterface liés les uns aux autres
  24. 24. webdesignerL’utilisateur final peut rapidement percevoirlorganisation pour savoir comment utiliser ouinteragir avec ce qu’il voit
  25. 25. gestaltsimilitudecette règle peut s’appliquer aux liens sur unepage, cela permet alors à l’utilisateur derapidement identifier les zones cliquablessoit par la couleur soit par une différence deforme, soit par un soulignement. Relax In The AirMai 2011
  26. 26. comportement cohérent uxmag.com
  27. 27. “Ne croyez pas que l’intérêt des fondamentauxconsiste à conserver le design simpliste.Leur but est de s’ouvrir, grâce à leur maîtrise,plus largement à des subtilités qui se trouventau-delà.” anyone
  28. 28. gestaltproximitéles choses qui sont proches les unes desautres sont perçues comme étant plus liéesque les choses qui sont plus espacées. Relax In The AirMai 2011
  29. 29. gestaltproximitéCes éléments sont perçus On perçoit deux groupes etcomme un groupe et donc en comprenons qu’il y a desrelation les uns avec les différences entre eux.autres.
  30. 30. gestaltproximité + similaritéCes groupes sont séparés La proximité reste le signalpar la couleur. de distinction le plus fort.
  31. 31. webdesignerLe travail du webdesigner est de comprendre laforce relative de ces mécanismes afin de pouvoirchoisir celui à exploiter dans une situation X
  32. 32. gestaltconnectivité uniformeles éléments qui sont reliés par despropriétés visuelles uniformes sont perçuscomme étant plus liés que les éléments qui nesont pas connectés. Relax In The AirMai 2011
  33. 33. gestaltconnectivité uniforme Même si la proximité, la taille et la couleur sont les mêmes, les figures entourées paraissent plus liées que les autres. Relax In The AirMai 2011
  34. 34. webdesign
  35. 35. connectivité? Ouhla ça vaY a une drôle sentir. Crotte.d’odeur... Me sens pas bien...
  36. 36. lignes de connection Ouhla ça vaY a une drôle sentir. Crotte.d’odeur... Me sens pas bien...
  37. 37. gestaltbonne continuitédes éléments disposés sur une ligne ou unecourbe sont perçus comme étant plus liés quedes éléments séparés. Relax In The AirMai 2011
  38. 38. gestaltbonne continuitéLe fait que les mots dans ce paragraphe soientsur une ligne nous aide à comprendre quilssont liés les uns aux autres et par conséquentqu’ils forment une phrase.. (cqfd) Relax In The AirMai 2011
  39. 39. gestalt bonne continuitéNombre defollowerssur Twitter Max Anne Paul Otto Paul Max Otto Anne L’information est plus Plus facile à lire car il difficile à discerner. suggère une ligne continue. Relax In The Air Mai 2011
  40. 40. unitinteractive.combonne continuité
  41. 41. Use the grid Use the grid Use the grid Us he grid Use the grid Use the grid Use the rid Use the grid Use the grid Use the griUse the grid Use the grid Use the grid Us he grid Use the grid Use the grid Use the rid Use the grid Use the grid Use the griUse the grid Use the grid Use the grid Us he grid Use the grid Use the grid Use the
  42. 42. http://methodandcraft.com/videos/extensible-baseline-grids
  43. 43. jlern.combons usages Proximité, connectivité uniforme et bonne continuité sont desfondamentaux de la Gestalt. Les principes de la Gestalt doivent être utilisés comme mécanisme de base, mais la conception doit toujours être élégante et invisible.
  44. 44. gestaltdestin communles objets tendent à apparaître groupéslorsqu’ils présentent un mouvement dans lemême sens, avec la même vitesse. Relax In The AirMai 2011
  45. 45. gestaltdestin communPlus que les autres principes, celui-ci estétroitement liée à un instinct de surviefondamental chez lhomme. Relax In The AirMai 2011
  46. 46. gestaltdestin commun Relax In The AirMai 2011
  47. 47. destin communVous et les autres conducteurs qui allez dans lemême sens, êtes liés par un sort commun etcollectif (façon de parler...)
  48. 48. destin communQuand un véhicule rompt le flux, il capte notreattention, nous permettant de réagir de façonappropriée
  49. 49. gestaltdestin communLes humains sont programmés pourreconnaître les mouvements contrastés plusfacilement et fortement que la couleur, lecontraste, la taille ou tout autre stimulivisuel. Relax In The AirMai 2011
  50. 50. webdesignerLl est logique que les designers profitent de cefait et exploitent ce principe dans le travail deconception. Comment?
  51. 51. gestaltdestin commun Slide-out menu En vous inscrivant,Sign in vous profiterez de tous les avantages de la plateformedonnez En vous donnant, vous faciliterez le développement du produit Relax In The AirMai 2011
  52. 52. serialcut.comwebdesigner
  53. 53. serialcut.comwebdesigner
  54. 54. serialcut.comwebdesigner
  55. 55. gestaltclôtureLorsque l’humain regarde un arrangementcomplexe déléments individuels, il a tendancea ré-interpréter l’ensemble pour créer un seulmotif reconnaissable. Relax In The AirMai 2011
  56. 56. gestaltclôtureNous n’avons presque jamais un tableaucomplet de ce qui nous entoure. le principe defermeture est alors au cœur de presquetoutes les décisions que nous prenons. Relax In The AirMai 2011
  57. 57. gestaltclôturenous comptons tellement sur la clôturequ’elle est souvent volontairement exploitéepour nous tromper. Relax In The AirMai 2011
  58. 58. gestaltclôture pour utiliser la clôture de façon efficace, vous devez simplifier la fermeture de la figure. Relax In The AirMai 2011
  59. 59. exemple inVISIBLE VISIBLE Cet exemple demande trop Ici la clôture est facilité. d’effort et l’information Le message est clair. risque d’être perdue. Relax In The AirMai 2011
  60. 60. exemple
  61. 61. “Vous designer, devez vous prémunir contre lesmanières dont le principe de clôture peut êtreutilisé pour induire en erreur. Je vousrecommande de lemployer pour le plaisir et pourlintérêt de votre travail.” mc casal
  62. 62. utilisateur
  63. 63. “User-centered design is a process in which theneeds, wants, and limitations of users are givenattention at each stage of the design process.UCD doesn’t force the users to change theirbehavior to accommodate the product.” someone
  64. 64. user centered designquoi? Le UCD est une méthode itérative qui met l’utilisateur au centre de toutes les décisions de design. Relax In The AirMai 2011
  65. 65. user centered designquoi? Le UCD est une philosophie de design rendue possible par une multitudes de disciplines et méthodes de design. Relax In The AirMai 2011
  66. 66. user centered designbut Le but ultime du UCD est d’optimiser l’expérience utilisateur d’un système, d’un produit ou d’un processus. Relax In The AirMai 2011
  67. 67. user centered designbut Le UCD cherche à atteindre ce but en considérant le point de vue de l’utilisateur durant toutes les phases de développement. Relax In The AirMai 2011
  68. 68. Moi Interaction AutresEnvironnement Enseignement Expérience
  69. 69. point de vue de l’utilisateurBesoins et envies
  70. 70. point de vue de l’utilisateurButs et motivations
  71. 71. point de vue de l’utilisateurObstacles et limitations
  72. 72. point de vue de l’utilisateurTâches et activités
  73. 73. point de vue de l’utilisateurGéographie et langage
  74. 74. point de vue de l’utilisateurEnvironnement et matériel
  75. 75. point de vue de l’utilisateurTravail, vie et expérience
  76. 76. “Ce que vous mettez sur une interface devientun univers à part entière pour ses utilisateurs.” someone
  77. 77. Ecouter les retours MC Casal
  78. 78. disciplines Les disciplines du User-centered design sont: • La Recherche • L’Information architecture • l’Interaction Design • Le Visual Design • L’Usability Relax In The AirMai 2011
  79. 79. process méthodes pour la recherche • Interviews • Focus groups • Workshops • Brainstorm • Analyse de tâches et de contenu • Personas • Scénarios • Evaluation des concurrents Relax In The AirMai 2011
  80. 80. process méthodes pour la conception • Storyboards • Croquis • Wireframe • Wireflow • Modélisation de navigation • Layout de pages • Vocabulaire contrôlé Relax In The AirMai 2011
  81. 81. process méthodes pour le design • Graphisme • Design de logo • Branding • Iconographie • High/Low fidélité prototypes • Prototypage papier • Prototypes fonctionnels Relax In The AirMai 2011
  82. 82. process méthodes pour l’évaluation • Usability evalution • Usability testing • Web analytics Relax In The AirMai 2011
  83. 83. user centered designavantages• Augmenter les taux d’adoption• Améliorer la productivité utilisateur• Réduire les coûts de maintenance Relax In The AirMai 2011
  84. 84. résultatRetour sur investissement
  85. 85. ressources
  86. 86. Little details matter littlebigdetails.com
  87. 87. Learn how to wireframe wirify.com
  88. 88. au travailappliquez toutes ces bonnes pratiques.1. on tire au sort un site2. on analyse qui sont ses users3. on repense sa homepage4. on wireframe5. on réfléchit les interactions
  89. 89. MerciThe endGood luck pour:A. Trouver un stageB. Les examens Relax In The AirMai 2011

×