Lois de la Gestalt et Webdesign
•
19 j'aime•5,213 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Lois de la Gestalt et Webdesign
Lois de la Gestalt et Webdesign
- 1. bons usages, utilisateur et ucd Relax In The Air Mai 2011
- 2. sommaire 1. introduction 2. va falloir connaître les lois de la gestalt 3. un bon Utilisateur utilise • User Centered Design (UCD) • Disciplines et Process • Personas 4. ressources 5. au travail Relax In The Air Mai 2011
- 3. introduction
- 4. “Life is hard, it's harder if you're stupid.” John Wayne
- 5. lois de la gestalt
- 6. most powerful tool Even more than Arnold
- 7. “C’est une théorie, une école de pensée, qui étudie comment l’être humain perçoit les choses qui l’entourent. Les lois de la Gestalt rendent claires les questions de distribution des éléments dans l’espace, quand et comment grouper des objets... etc. Quand vous connaîtrez ces lois, tout deviendra simple comme un croque-monsieur.” MC casal
- 8. psychologie Objectivité VS Subjectivité George What else?
- 9. psychologie Les lois de la Gestalt sont innées Rio the movie
- 10. gestalt • distinction fond figure • Similitude • Proximité • Bonne continuité • connectivité uniforme • Destin commun • Clôture Relax In The Air Mai 2011
- 11. gestalt distinction fond figure Les éléments sont perçus autant comme des figures (éléments distincts) que comme fond (background ou paysage sur lequel repose la figure) Relax In The Air Mai 2011
- 12. gestalt distinction fond figure Processus vital pour l’humain et probablement sa base de l'évolution dans la détection des menaces. Relax In The Air Mai 2011
- 13. gestalt distinction fond figure Prioriser nos yeux pour ne pas ignorer quelque chose de proximité immédiate et d’importance. organiser ce que nous voyons par la façon dont chaque objet se rapporte à d'autres. Relax In The Air Mai 2011
- 14. gestalt distinction fond figure Relax In The Air Mai 2011
- 15. gestalt distinction fond figure Accueil Accueil A propos A propos Clients Clients Portfolio Portfolio Contact Contact Relax In The Air Mai 2011
- 16. webdesign Aide à distinguer le contenu de la structure dans un milieu à 2 dimensions. Un concepteur peut utiliser un grand nombre de mécanismes visuels et des traitements de style afin de communiquer des indices importants pour établir des relations figure-fond.
- 18. gestalt similitude des choses qui sont similaires sont perçus comme étant plus liés que les choses qui sont dissemblables. Relax In The Air Mai 2011
- 19. gestalt similitude similitude de couleur taille forme texture orientation.. Relax In The Air Mai 2011
- 20. gestalt similitude peu de cohérence Relax In The Air Mai 2011
- 21. gestalt similitude exploiter la taille Relax In The Air Mai 2011
- 22. gestalt similitude similitude de couleur /forte Relax In The Air Mai 2011
- 23. webdesigner Le travail du webdesigner est de fournir des indices visuels pour montrer les éléments d'interface liés les uns aux autres
- 24. webdesigner L’utilisateur final peut rapidement percevoir l'organisation pour savoir comment utiliser ou interagir avec ce qu’il voit
- 25. gestalt similitude cette règle peut s’appliquer aux liens sur une page, cela permet alors à l’utilisateur de rapidement identifier les zones cliquables soit par la couleur soit par une différence de forme, soit par un soulignement. Relax In The Air Mai 2011
- 26. comportement cohérent uxmag.com
- 27. “Ne croyez pas que l’intérêt des fondamentaux consiste à conserver le design simpliste. Leur but est de s’ouvrir, grâce à leur maîtrise, plus largement à des subtilités qui se trouvent au-delà.” anyone
- 28. gestalt proximité les choses qui sont proches les unes des autres sont perçues comme étant plus liées que les choses qui sont plus espacées. Relax In The Air Mai 2011
- 29. gestalt proximité Ces éléments sont perçus On perçoit deux groupes et comme un groupe et donc en comprenons qu’il y a des relation les uns avec les différences entre eux. autres.
- 30. gestalt proximité + similarité Ces groupes sont séparés La proximité reste le signal par la couleur. de distinction le plus fort.
- 31. webdesigner Le travail du webdesigner est de comprendre la force relative de ces mécanismes afin de pouvoir choisir celui à exploiter dans une situation X
- 32. gestalt connectivité uniforme les éléments qui sont reliés par des propriétés visuelles uniformes sont perçus comme étant plus liés que les éléments qui ne sont pas connectés. Relax In The Air Mai 2011
- 33. gestalt connectivité 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 Air Mai 2011
- 34. webdesign
- 35. connectivité? Ouhla ça va Y a une drôle sentir. Crotte. d’odeur... Me sens pas bien...
- 36. lignes de connection Ouhla ça va Y a une drôle sentir. Crotte. d’odeur... Me sens pas bien...
- 37. gestalt bonne continuité des éléments disposés sur une ligne ou une courbe sont perçus comme étant plus liés que des éléments séparés. Relax In The Air Mai 2011
- 38. gestalt bonne continuité Le fait que les mots dans ce paragraphe soient sur une ligne nous aide à comprendre qu'ils sont liés les uns aux autres et par conséquent qu’ils forment une phrase.. (cqfd) Relax In The Air Mai 2011
- 39. gestalt bonne continuité Nombre de followers sur 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
- 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 gri 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 gri Use the grid Use the grid Use the grid Us he grid Use the grid Use the grid Use the
- 43. jlern.com bons usages Proximité, connectivité uniforme et bonne continuité sont des fondamentaux 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. gestalt destin commun les objets tendent à apparaître groupés lorsqu’ils présentent un mouvement dans le même sens, avec la même vitesse. Relax In The Air Mai 2011
- 45. gestalt destin commun Plus que les autres principes, celui-ci est étroitement liée à un instinct de survie fondamental chez l'homme. Relax In The Air Mai 2011
- 46. gestalt destin commun Relax In The Air Mai 2011
- 47. destin commun Vous et les autres conducteurs qui allez dans le même sens, êtes liés par un sort commun et collectif (façon de parler...)
- 48. destin commun Quand un véhicule rompt le flux, il capte notre attention, nous permettant de réagir de façon appropriée
- 49. gestalt destin commun Les humains sont programmés pour reconnaître les mouvements contrastés plus facilement et fortement que la couleur, le contraste, la taille ou tout autre stimuli visuel. Relax In The Air Mai 2011
- 50. webdesigner Ll est logique que les designers profitent de ce fait et exploitent ce principe dans le travail de conception. Comment?
- 51. gestalt destin commun Slide-out menu En vous inscrivant, Sign in vous profiterez de tous les avantages de la plateforme donnez En vous donnant, vous faciliterez le développement du produit Relax In The Air Mai 2011
- 55. gestalt clôture Lorsque l’humain regarde un arrangement complexe d'éléments individuels, il a tendance a ré-interpréter l’ensemble pour créer un seul motif reconnaissable. Relax In The Air Mai 2011
- 56. gestalt clôture Nous n’avons presque jamais un tableau complet de ce qui nous entoure. le principe de fermeture est alors au cœur de presque toutes les décisions que nous prenons. Relax In The Air Mai 2011
- 57. gestalt clôture nous comptons tellement sur la clôture qu’elle est souvent volontairement exploitée pour nous tromper. Relax In The Air Mai 2011
- 58. gestalt clôture pour utiliser la clôture de façon efficace, vous devez simplifier la fermeture de la figure. Relax In The Air Mai 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 Air Mai 2011
- 60. exemple
- 62. “Vous designer, devez vous prémunir contre les manières dont le principe de clôture peut être utilisé pour induire en erreur. Je vous recommande de l'employer pour le plaisir et pour l'intérêt de votre travail.” mc casal
- 63. utilisateur
- 64. “User-centered design is a process in which the needs, wants, and limitations of users are given attention at each stage of the design process. UCD doesn’t force the users to change their behavior to accommodate the product.” someone
- 65. user centered design quoi? Le UCD est une méthode itérative qui met l’utilisateur au centre de toutes les décisions de design. Relax In The Air Mai 2011
- 66. user centered design quoi? Le UCD est une philosophie de design rendue possible par une multitudes de disciplines et méthodes de design. Relax In The Air Mai 2011
- 67. user centered design but 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 Air Mai 2011
- 68. user centered design but 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 Air Mai 2011
- 69. Moi Interaction Autres Environnement Enseignement Expérience
- 70. point de vue de l’utilisateur Besoins et envies
- 71. point de vue de l’utilisateur Buts et motivations
- 72. point de vue de l’utilisateur Obstacles et limitations
- 73. point de vue de l’utilisateur Tâches et activités
- 74. point de vue de l’utilisateur Géographie et langage
- 75. point de vue de l’utilisateur Environnement et matériel
- 76. point de vue de l’utilisateur Travail, vie et expérience
- 77. “Ce que vous mettez sur une interface devient un univers à part entière pour ses utilisateurs.” someone
- 78. Ecouter les retours MC Casal
- 79. disciplines Les disciplines du User-centered design sont: • La Recherche • L’Information architecture • l’Interaction Design • Le Visual Design • L’Usability Relax In The Air Mai 2011
- 80. 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 Air Mai 2011
- 81. process méthodes pour la conception • Storyboards • Croquis • Wireframe • Wireflow • Modélisation de navigation • Layout de pages • Vocabulaire contrôlé Relax In The Air Mai 2011
- 82. process méthodes pour le design • Graphisme • Design de logo • Branding • Iconographie • High/Low fidélité prototypes • Prototypage papier • Prototypes fonctionnels Relax In The Air Mai 2011
- 83. process méthodes pour l’évaluation • Usability evalution • Usability testing • Web analytics Relax In The Air Mai 2011
- 84. user centered design avantages • Augmenter les taux d’adoption • Améliorer la productivité utilisateur • Réduire les coûts de maintenance Relax In The Air Mai 2011
- 86. ressources
- 87. Little details matter littlebigdetails.com
- 88. Learn how to wireframe wirify.com
- 90. au travail appliquez toutes ces bonnes pratiques. 1. on tire au sort un site 2. on analyse qui sont ses users 3. on repense sa homepage 4. on wireframe 5. on réfléchit les interactions
- 91. Merci The end Good luck pour: A. Trouver un stage B. Les examens Relax In The Air Mai 2011