Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Lois de la Gestalt et Webdesign

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 91 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Publicité

Plus récents (20)

Lois de la Gestalt et Webdesign

  1. 1. bons usages, utilisateur et ucd Relax In The Air Mai 2011
  2. 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. 3. introduction
  4. 4. “Life is hard, it's harder if you're stupid.” John Wayne
  5. 5. lois de la gestalt
  6. 6. most powerful tool Even more than Arnold
  7. 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. 8. psychologie Objectivité VS Subjectivité George What else?
  9. 9. psychologie Les lois de la Gestalt sont innées Rio the movie
  10. 10. gestalt • distinction fond figure • Similitude • Proximité • Bonne continuité • connectivité uniforme • Destin commun • Clôture Relax In The Air Mai 2011
  11. 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. 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. 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. 14. gestalt distinction fond figure Relax In The Air Mai 2011
  15. 15. gestalt distinction fond figure Accueil Accueil A propos A propos Clients Clients Portfolio Portfolio Contact Contact Relax In The Air Mai 2011
  16. 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.
  17. 17. www.duoh.com webdesign
  18. 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. 19. gestalt similitude similitude de couleur taille forme texture orientation.. Relax In The Air Mai 2011
  20. 20. gestalt similitude peu de cohérence Relax In The Air Mai 2011
  21. 21. gestalt similitude exploiter la taille Relax In The Air Mai 2011
  22. 22. gestalt similitude similitude de couleur /forte Relax In The Air Mai 2011
  23. 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. 24. webdesigner L’utilisateur final peut rapidement percevoir l'organisation pour savoir comment utiliser ou interagir avec ce qu’il voit
  25. 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. 26. comportement cohérent uxmag.com
  27. 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. 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. 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. 30. gestalt proximité + similarité Ces groupes sont séparés La proximité reste le signal par la couleur. de distinction le plus fort.
  31. 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. 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. 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. 34. webdesign
  35. 35. connectivité? Ouhla ça va Y a une drôle sentir. Crotte. d’odeur... Me sens pas bien...
  36. 36. lignes de connection Ouhla ça va Y a une drôle sentir. Crotte. d’odeur... Me sens pas bien...
  37. 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. 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. 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
  40. 40. unitinteractive.com bonne 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 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
  42. 42. http://methodandcraft.com/videos/extensible-baseline-grids
  43. 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. 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. 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. 46. gestalt destin commun Relax In The Air Mai 2011
  47. 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. 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. 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. 50. webdesigner Ll est logique que les designers profitent de ce fait et exploitent ce principe dans le travail de conception. Comment?
  51. 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
  52. 52. serialcut.com webdesigner
  53. 53. serialcut.com webdesigner
  54. 54. serialcut.com webdesigner
  55. 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. 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. 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. 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. 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. 60. exemple
  61. 61. “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
  62. 62. utilisateur
  63. 63. “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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. Moi Interaction Autres Environnement Enseignement Expérience
  69. 69. point de vue de l’utilisateur Besoins et envies
  70. 70. point de vue de l’utilisateur Buts et motivations
  71. 71. point de vue de l’utilisateur Obstacles et limitations
  72. 72. point de vue de l’utilisateur Tâches et activités
  73. 73. point de vue de l’utilisateur Géographie et langage
  74. 74. point de vue de l’utilisateur Environnement et matériel
  75. 75. point de vue de l’utilisateur Travail, vie et expérience
  76. 76. “Ce que vous mettez sur une interface devient un 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 Air Mai 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 Air Mai 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 Air Mai 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 Air Mai 2011
  82. 82. process méthodes pour l’évaluation • Usability evalution • Usability testing • Web analytics Relax In The Air Mai 2011
  83. 83. 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
  84. 84. résultat Retour sur investissement
  85. 85. ressources
  86. 86. Little details matter littlebigdetails.com
  87. 87. Learn how to wireframe wirify.com
  88. 88. 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
  89. 89. Merci The end Good luck pour: A. Trouver un stage B. Les examens Relax In The Air Mai 2011

×