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
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
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
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
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
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.
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
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
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
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
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
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
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
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