Gestalt et Webdesign

  • 1,373 views
Uploaded 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.

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.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,373
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. bons usages,utilisateur etucd Relax In The AirMai 2011
  • 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. introduction
  • 4. “Life is hard, its harder if yourestupid.” John Wayne
  • 5. lois de la gestalt
  • 6. most powerful toolEven more than Arnold
  • 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. psychologie Objectivité VS SubjectivitéGeorge What else?
  • 9. psychologie Les lois de la Gestalt sont innéesRio the movie
  • 10. gestalt• distinction fond figure• Similitude• Proximité• Bonne continuité• connectivité uniforme• Destin commun• Clôture Relax In The AirMai 2011
  • 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. gestaltdistinction fond figureProcessus vital pour l’humain etprobablement sa base de lévolution dans ladétection des menaces. Relax In The AirMai 2011
  • 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. gestaltdistinction fond figure Relax In The AirMai 2011
  • 15. gestaltdistinction fond figure Accueil Accueil A propos A propos Clients Clients Portfolio Portfolio Contact Contact Relax In The AirMai 2011
  • 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. www.duoh.comwebdesign
  • 18. gestaltsimilitudedes choses qui sont similaires sont perçuscomme étant plus liés que les choses qui sontdissemblables. Relax In The AirMai 2011
  • 19. gestaltsimilitudesimilitude decouleurtailleformetextureorientation.. Relax In The AirMai 2011
  • 20. gestaltsimilitudepeu de cohérence Relax In The AirMai 2011
  • 21. gestaltsimilitudeexploiter la taille Relax In The AirMai 2011
  • 22. gestaltsimilitudesimilitude de couleur /forte Relax In The AirMai 2011
  • 23. webdesignerLe travail du webdesigner est de fournir desindices visuels pour montrer les élémentsdinterface liés les uns aux autres
  • 24. webdesignerL’utilisateur final peut rapidement percevoirlorganisation pour savoir comment utiliser ouinteragir avec ce qu’il voit
  • 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. comportement cohérent uxmag.com
  • 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. 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. 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. gestaltproximité + similaritéCes groupes sont séparés La proximité reste le signalpar la couleur. de distinction le plus fort.
  • 31. webdesignerLe travail du webdesigner est de comprendre laforce relative de ces mécanismes afin de pouvoirchoisir celui à exploiter dans une situation X
  • 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. 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. webdesign
  • 35. connectivité? Ouhla ça vaY a une drôle sentir. Crotte.d’odeur... Me sens pas bien...
  • 36. lignes de connection Ouhla ça vaY a une drôle sentir. Crotte.d’odeur... Me sens pas bien...
  • 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. 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. 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. unitinteractive.combonne continuité
  • 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. http://methodandcraft.com/videos/extensible-baseline-grids
  • 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. 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. gestaltdestin communPlus que les autres principes, celui-ci estétroitement liée à un instinct de surviefondamental chez lhomme. Relax In The AirMai 2011
  • 46. gestaltdestin commun Relax In The AirMai 2011
  • 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. destin communQuand un véhicule rompt le flux, il capte notreattention, nous permettant de réagir de façonappropriée
  • 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. webdesignerLl est logique que les designers profitent de cefait et exploitent ce principe dans le travail deconception. Comment?
  • 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. serialcut.comwebdesigner
  • 53. serialcut.comwebdesigner
  • 54. serialcut.comwebdesigner
  • 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. 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. gestaltclôturenous comptons tellement sur la clôturequ’elle est souvent volontairement exploitéepour nous tromper. Relax In The AirMai 2011
  • 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. 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. exemple
  • 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. utilisateur
  • 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. 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. 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. 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. 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. Moi Interaction AutresEnvironnement Enseignement Expérience
  • 69. point de vue de l’utilisateurBesoins et envies
  • 70. point de vue de l’utilisateurButs et motivations
  • 71. point de vue de l’utilisateurObstacles et limitations
  • 72. point de vue de l’utilisateurTâches et activités
  • 73. point de vue de l’utilisateurGéographie et langage
  • 74. point de vue de l’utilisateurEnvironnement et matériel
  • 75. point de vue de l’utilisateurTravail, vie et expérience
  • 76. “Ce que vous mettez sur une interface devientun univers à part entière pour ses utilisateurs.” someone
  • 77. Ecouter les retours MC Casal
  • 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. 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. 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. 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. process méthodes pour l’évaluation • Usability evalution • Usability testing • Web analytics Relax In The AirMai 2011
  • 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. résultatRetour sur investissement
  • 85. ressources
  • 86. Little details matter littlebigdetails.com
  • 87. Learn how to wireframe wirify.com
  • 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. MerciThe endGood luck pour:A. Trouver un stageB. Les examens Relax In The AirMai 2011