#10 - Théories psychologiques - Partie 2

Problèmes d'affichage du lecteur ? Écoutez l'épisode 10 sur SoundCloud.

Le métier de UX Designer est la convergence de deux métiers : Ergonome et Designer graphique. Je vous propose un ensemble de quatre podcasts ( 09 - 10 - 11 et 12 ) dans lesquels je vais vous exposer un aperçu des différents modèles théoriques psychologiques sur lesquels reposent l'ergonomie. Dans cet épisode, je vous parle de la Gestalt-Théorie et des principes de perception...

Vidéo : The Gestalt Principles | Basics for Beginners

Transcription écrite du podcast :

Bienvenue sur le podcast Parlons UX Design.

Je suis Thomas Gaudy, UX Designer spécialisé en accessibilité des jeux vidéo aux personnes ayant un handicap.

Bonjour tout le monde et bienvenue pour ce 10e podcast ! Alors, dans le podcast précédent, on avait parlé de la présentation de quelques modèles de psychologie, qui sont l'une des bases du métier de UX designer.

On avait parlé, en particulier, du premier gros essor de la notion de psychologie. D'une part avec Freud, mais aussi de la limite de ce champ de recherche, car il était basé essentiellement sur l'introspection. Cette limitation méthodologique a permis de développer un autre courant de pensée, un autre modèle théorique qui est le Behaviorisme.

J'ai abordé très brièvement, ces deux modèles, dans le précédent podcast.

Ce qui est intéressant à considérer, c’est de voir que chaque méthodologie d'un courant de pensée a des limites. D'autres courants de pensée considèrent ces limites et voient s'il y a pas une façon d'aller au-delà.

Ici, nous allons nous intéresser aux limites du courant Comportementaliste ( les Behavioristes ) qui considère que ne rentre dans le domaine scientifique que ce qui est véritablement observable.

On arrête avec l’introspection, ça tourne en rond, c’est uniquement la personne qui crie plus fort qui arrive à avoir raison, temporairement. Les Comportementalistes, eux et elles, se proposent de considérer les comportements dans le champ d'étude. Ils et elles en tirent des notions très intéressantes...

On en avait vu deux, dans le précédent podcast : à savoir le principe de conditionnement et le principe de renforcement intermittent.

Le problème est que s’en tenir aux comportements observables, c'est quelque chose de très restreint, alors que la psychologie telle qu'on la connaît actuellement est évidemment beaucoup plus ouverte. Donc, on va voir d'autres modèles, on va commencer avec le modèle de la Gestalt.

Aussi appelée Gestalt Therapy, c'est d'abord quelque chose qui ne tient pas trop du comportement, mais plus de nos capacités de perception. Ça fait quand même une grosse rupture. Ce qu'on va pouvoir observer chez les autres, n'est plus de l'ordre du visuel, mais cela porte sur nous et nos facultés d'identification de différents types de stimuli. Et on s'est rendu compte qu'il y a différentes formes de règles.

Cette école de la Gestalt, si on devait la résumer en une seule phrase, ce serait de dire que le tout est supérieur à la somme de ses parties. Ça veut dire quoi ?

On peut l’appliquer à toutes sortes de contextes différents, mais si vous prenez par exemple une foule d'individus : le comportement d'une foule d'individus va être différent du comportement de chaque individu qui composent cette foule. Le comportement global de la foule n’a absolument plus grand chose à voir.

Il y a bien des points communs, ils et elles ont tous besoin de respirer, évidemment ! Mais le comportement est assez distinct, par rapport aux individus, pris individuellement.

Il peut aussi y avoir des exemples dans le domaine visuel : imaginez, par exemple, le logo des Jeux Olympiques avec ses cinq cercles. Ce que l’on distingue, ce sont cinq cercles, alors que l’on peut imaginer que ce sont des formes beaucoup plus complexes. En particulier, les endroits où les cercles se superposent les uns les autres, sont un peu plus difficiles à qualifier. Il n’y a pas forcément des cercles dans cette forme, il y a aussi ces figures géométriques qui font partie de cet ensemble et nous ce que l’on en retient en général, c'est un principe d'alignement et de superposition - assez élégante d'ailleurs - de cercles.

Il y a plein d’autres exemples également, mais tous les principes d'agencement de différents objets, on va les voir selon certains patterns, selon certaines règles. Ce qui est intéressant avec la Gestalt, c'est que le courant propose de faire le tour des principales règles de perception existantes.

Avant de voir ces règles dans le détail, il faut comprendre que le domaine d'application pour l’UX design est fabuleux. Parce que ce sont plein de règles qui vont intervenir sur le confort et l'élégance de la disposition des différents éléments qui vont composer une interface.

Que cette interface soit sur le web, qu'elle soit dans différents menus de jeux vidéo, peu importe, finalement ce sont toujours des histoires de positionnement - souvent au pixel près - avec des effets d’alignement, des effets de couleur, des effets de surimpression et on va voir ici quels sont ces principes.

Il existe le principe de fermeture, le principe de proximité, le principe de continuité, le principe de similarité et le principe de distinction d'une figure de premier plan sur un arrière-plan ( c'est-à-dire d'une figure sur une forme ).

Pour commencer, selon le principe de proximité, on aura tendance à associer, sous forme de gros regroupements, des éléments qui sont déjà proches géographiquement les uns des autres. Par exemple : vous regardez une vision satellite d'une ville et puis à côté un village. À priori, les deux sont constitués de bâtiments, sauf que la concentration de bâtiments, dans un cas et la concentration de bâtiments, dans l'autre, fait que l'on a deux regroupements de tailles différentes.

Ce que l'on va percevoir, ce ne sont pas les bâtiments pris un à un, mais plutôt l'ensemble de ces bâtiments, par règle de proximité. Ce qui fait qu'on percevra une ville, par opposition au village qui sera plus petit, moins dense, mais avec le même genre de structure. Bon d'accord dans le cas de la ville, on aura plutôt des appartements et dans le cas du village, on aura plutôt des maisons avec plus de terrain, mais vous comprenez l'idée.

Ce principe de proximité permet d'identifier des formes générales et ces formes générales peuvent avoir des noms pour les identifier, pour faciliter le déchiffrage de notre environnement. Plutôt que de déchiffrer les différents éléments qui composent notre environnement, on va s’atteler à percevoir des regroupements et on va leur donner des noms pour gagner du temps.

Par exemple : pour identifier un tabouret, on ne va pas commencer à compter quatre pieds et un support, mais on va plutôt directement identifier l'ensemble regroupant quatre pieds et une assise. Et voilà ! On dira : « C’est un tabouret. » et cela va beaucoup plus vite comme ça. La plupart des objets que l’on a dans notre entourage, sont conçus sur des principes de regroupement, c’est assez intéressant.

Mais parfois, il y a aussi des objets qui sont composés par des règles de fermeture. La règle de fermeture soulève les questions d'alignement. Imaginez, par exemple : une forêt ou un bois; les arbres sont séparés les uns des autres, mais il y a un principe de regroupement et de fermeture du fait de la proximité de ces différents arbres. Et du fait que les feuillages des différents arbres tend à se fondre les uns dans les autres. Cela compose une forme générale que l'on aura tendance à assimiler comme une forme unique, si on la regarde de loin.

Évidemment, si on est dedans, la perception générale va être très différente.

Ce principe de fermeture est vraiment super pratique, parce que ça va permettre d'identifier toutes sortes de macrostructures. On va pouvoir mettre des noms sur ces macrostructures et cela va être très intéressant. Dans une interface, cela va être super pratique, parce que ces effets d’alignement vont permettre d’établir des regroupements qui vont faire sens pour l’utilisateur et l'utilisatrice.

Ces effets de fermeture vont être d'autant plus efficaces qu’il y aura des effets d’alignement très propres. Donc, si vous avez un ensemble d'indicateurs et que ces indicateurs sont alignés à peu près correctement, mais qu’il y en a des plus ou moins décrochés en haut, en bas, à droite, à gauche, s'il n’y a pas vraiment de règle de positionnement, cet effet de fermeture va être moins fort. Et ça donnera une impression de chaos, avec moins de maîtrise professionnelle dans votre interface. Et ça va être un peu plus difficile pour les utilisateurs et utilisatrices de se dire : « Peut-être qu'il y a un lien logique qui regroupe tous ces indicateurs ensemble. ».

L'apprentissage du contenu de votre structure va être plus pénible. Donc, le positionnement de vos différents éléments, en jouant sur les effets de fermeture, peut s'avérer très pratique.

Les effets de fermeture et de continuité, dont j'ai parlé sont, pour moi, à un niveau général assez similaires. Je ne vais pas forcément prendre le temps de parler de leur distinction, mais l’important est de retenir ce principe d'alignement.

Je vais continuer avec un différent effet, c’est l'effet de similarité. Il est super important aussi en UX design. Il va rejoindre tout ce qui est du souci de la cohérence des éléments de votre interface.

Souvent, on en parle à propos de la taille et de la police du texte. Typiquement, dans un site web ou une application pas si bien fichue que cela, vous allez avoir du texte de différentes formes, ici en très petit, là plus grand en italique, là encore plus grand d'une couleur différente et puis là, une taille intermédiaire, mais en gras...

Ça va créer un effet de chaos et de confusion : cela va ajouter pas mal de bruit, pas mal d’éléments perceptifs perturbateurs qui vont faire que vos utilisateurs et utilisatrices auront des difficultés à en tirer une logique.

Pour réussir à atténuer ce bruit, on va travailler sur l’effet de similarité : à savoir, faire en sorte que certains styles se retrouvent d'une page à l'autre, d'un endroit à l'autre de votre interface et donc on va mieux travailler ces effets de similarité.

Il y a plusieurs avantages à cela : d’une part, la compréhension du contenu de l'interface va être plus claire parce qu’il va moins y avoir de styles différents à apprendre.

Et d'autre part, comme cette compréhension va être basée sur moins d'éléments à apprendre, on va aussi plus facilement assimiler le comportement ou le rôle d'un style par rapport à une fonctionnalité.

Dans un texte, la notion de fonctionnalité ne fait pas forcément sens, mais si on parle de boutons, là tout de suite c'est beaucoup plus intéressant. Pensez, par exemple, que vous avez des boutons sur lesquels vous pouvez agir et imaginez que certains de ces boutons ont un cadre rond, d'autres ont un cadre carré, d’autres pas de cadre du tout et puis d'autres boutons encore différents, avec peut-être des coins légèrement arrondis, mais qui ne sont ni ronds, ni carrés...

On peut avoir toute une profusion de logique de boutons ! Finalement, si vous décortiquez bien Windows 10 et les différentes versions de Windows, vous allez voir qu'il n’y a pas énormément de partie d'interface qui soit vraiment similaire à toutes les autres. C’est une espèce de chaos/patchwork assez fascinant à décortiquer.

Le problème de similarité, on peut le garder en tête, tout le temps, pour réussir à bonifier notre démarche d'application de plus de cohérence dans nos interfaces.

Donc, j’insiste un peu sur la notion de bouton : si vous voulez distinguer quelque chose qui est interactif, par rapport à quelque chose qui est non-interactif, vous pouvez jouer sur cet effet de similarité et faire en sorte que, par exemple : vos boutons vont avoir un cadre.

Comme ça, ce qui n’a pas de cadre, va pouvoir être appréhendé comme n'étant pas un bouton ou n’étant pas interactif. Ça peut être un peu plus compliqué que ça, mais dans un premier temps : interactif ou bouton égale cadre. Et puis, on peut dire :« Mon cadre aura toujours la même forme. », pour rester encore plus pertinent.

Et puis le comportement de ce bouton, selon qu’il va y avoir un survol par votre doigt ou par votre curseur de souris, peut-être que ce comportement de survol pourrait être toujours similaire, là encore, pour avoir quelque chose de toujours cohérent.

Cela va être super efficace, pour réussir à mieux distinguer les différents styles et les différents comportements des éléments composants votre interface.

On pourrait partir encore plus loin, sur les différentes actions d’un bouton. Cela vaudrait le coup de faire un podcast sur les différents comportements attendus d’un bouton. Il y a pas mal de choses à en dire et on est loin d’avoir fait le tour, de tout ce que l’on peut faire avec ça.

Ce principe de similarité est toujours hyper important et hyper d’actualité, pour une bonne pratique d’ergonomie et de UX design.

Le dernier principe que je vais aborder, est le principe de distinction d'une figure et du fond.

C'est valable pour toutes sortes d'interfaces, c’est encore plus valable dans les jeux vidéo. Plus qu’un principe de conception, c'est plutôt une explication d’une capacité fascinante que nous avons développée, nous permettant d'extirper des patterns derrière le brouhaha de formes et de couleurs qu’est notre environnement.

Et dans ces patterns, de réussir à dire : « Ça, à priori, va être devant et ça peut être un humain ou un animal, en tout cas, un être vivant... Et puis, derrière, ça va être du décor, ça va être du bois, de la roche, une rivière ou peu importe... ».

Derrière cela, il y a une logique de survie. Il faut comprendre que nos différents ancêtres, s'ils et elles n'avaient pas la capacité d'identifier un dangereux prédateur planqué dans le décor, ils et elles risquaient de se mettre, plus rapidement, en danger et risquer de se faire manger.

Donc, cette capacité à distinguer des êtres vivants pouvant potentiellement être dangereux pour nous, par rapport à un décor; cette capacité qui a pu émerger, se renforcer, se développer au fur et à mesure et reste actuellement super pratique pour survivre au quotidien, tout simplement. Même si on a moins de prédateur autour de nous qui sont sur le point de nous bouffer. Même si les prédateurs ont pris d'autres formes et sont toujours présents, quelque part.

Ce comportement est toujours ancré et lorsqu'on déchiffre des interfaces, on aura toujours cette capacité à essayer d'identifier des formes, par rapport à un fond. Donc, dès l’instant qu’on pourra appliqué des patterns de visage, de silhouette, de quelque chose de l'ordre du bruit, du fond, du décor ou juste quelque chose de complètement abstrait, on va réussir plus facilement à donner du sens.

C’est sur ce principe là qu'on peut représenter des avatars dans un environnement complexe, avec toutes sortes de situations à traverser. C'est sur ce principe là aussi, de façon un peu plus abstraite que l’on peut présenter une interface avec des boutons et des choses à faire. Parce que même un bouton correspond à des formes que l’on peut réussir à identifier, par rapport à un fond et sur lequel on va pouvoir faire une projection de sens.

Cette projection de sens sera d'autant plus efficace que les boutons qu'on représentent, sur l'interface, se rapprocheront de boutons ayant un comportement dans la vie réelle.

Ce qui signifie que si je m'intéresse au bouton, peut-être que je le verrai plus nettement, on aura une meilleure capacité, à voir les couleurs sur l'objet de notre attention. Donc, le bouton auquel je m'intéresse, si je le survole de ma souris, je peux le mettre en surbrillance, avec des couleurs qui sont plus chatoyantes et présentes. À l’inverse, si je presse le bouton, il va s'enfoncer et sera donc dans l'ombre. Afin que cela fasse sens, c'est bien d'appliquer ce type de comportement aux boutons : en pressant le bouton de votre interface, vous allez l'assombrir, un peu.

Ce genre de chose, en fait, s’associe à ces comportements qu'on a développé. Cette capacité à associer ce qui se passe dans le virtuel, avec ce qui se passe dans le réel et cette capacité en particulier à associer des éléments présents, en premier plan, par rapport à des éléments d'arrière-plan qui font face au décor.

Dans la Gestalt Theory, il y a ces principes de perception qui sont hyper intéressants en UX design. Je n'ai pas fait le tour des différents principes, il y en a d'autres. Je vous incite à regarder un peu de littérature. Il y en a plein qui sont assez fascinants, à considérer. Mais cette théorie, une fois encore, ne fait pas le tour de la question. Elle a, elle-même, des limites dans le champ de la psychologie. Je vais vous laisser y réfléchir et puis si vous êtes en mesure d'identifier des limites dans lesquelles ne vont ni la Gestalt, ni les Comportementalistes, cela vous permettra peut-être d'anticiper le prochain modèle de théories psychologiques que je vais aborder dans le prochain podcast.

Je vous remercie et je vous dis à très bientôt !

Merci d'avoir écouté ce podcast, je vous invite à vous abonner pour ne pas rater les prochains épisodes. Si vous voulez en savoir plus sur moi, je vous invite à consulter mon profil LinkedIn.

Si vous souhaitez de l'accompagnement pour implémenter ces notions et ces outils dans vos équipes et vos projets, vous pouvez faire appel à mes services de consultant en UX Design. Il vous suffit de me contacter via mon profil LinkedIn ou visitez notre site internet à la section Nos services. Au plaisir!

Transcription : Florence Borgetto

Édition : Stéphanie Akré

« Jingle du podcast » : Nous souhaitons remercier chaleureusement Gordon W. Hempton The Sound Tracker® qui nous a fait don de la totalité de sa merveilleuse bibliothèque de sons récoltés dans la nature.