Très souvent, lorsqu’on aborde l’UI Design, on entend parler de la Gestalt Theory : de quoi s’agit-il exactement ?
La Théorie de la Gestalt (ou Gestalt Theory) est avant tout une notion de psychologie cognitive. Elle porte également le nom de psychologie de la forme. La dite théorie répond ainsi à plusieurs principes.
C’est en Allemagne que les premiers essais sur la théorie de la Gestalt trouvent leur essence avec le philosophe Christian von Ehrenfels (1859-1932). Dans un article intitulé Über Gestaltqualitäten, (1890), le philosophe imbrique l’idée que dans l’acte de la perception, nous ne faisons pas que juxtaposer les éléments et détails, mais que nous percevons des formes (dit, Gestalt en allemand) globales.
Pour ceux qui ont du mal à imager, C. von Ehrenfels partage, avec la musique, un exemple marquant: lorsqu’on se rappelle une mélodie, on se souvient de la structure globale de musique et non d’une suite successive de notes prises isolément.
1. La loi de la proximité
Ce premier grand principe introduit l’idée que la distance entre les objets, qu’ils soient organisés ou non, influe sur notre perception. Nous allons traduire, par automatisme, que les objets proches appartiennent à un même groupe et que les éloignés en forment un autre. Ainsi, nous organisons mentalement les espaces.
Pour que ce soit plus concret, prenons un exemple :
Sur l’ensemble de la figure A, les points forment des colonnes, alors que sur la figure B, elles se traduisent par des lignes. La seule différence entre ces deux représentations est la variation de l’espacement entre les points.
En une phrase, le principe de proximité peut être désigné par : tous les objets proches forment un groupe.
Qu’il s’agisse de cercles sur un schéma ou d’éléments dans une interface (web ou mobile), le principe de proximité reste inchangé. L’organisation des blocs partitionne les différentes informations et aide à l’organisation de la pensée. Ainsi, elle permet de structurer la donnée et facilite l’utilisateur dans sa compréhension. Prenons un exemple plus concret :
Chacun des blocs mis en avant s’identifient aisément avec cette loi. L’espace entre les éléments des zones encadrées permet de fractionner chaque partie de l’interface. De cette manière, il est possible de définir une zone et son utilité :
- La première répond aux grandes questions sur les besoins de l’utilisateur vis-à-vis de l’hébergement : où, quand, qui.
- La seconde correspond aux différents filtres concernant la recherche du type de logement souhaité.
- La troisième est l’ensemble des hébergements proposés induisant sur les différents logements eux-mêmes.
Pour que ce principe soit pleinement efficace, il est nécessaire de conserver une rythmique entre les espaces d’un même bloc. Si par exemple, l’espacement entre les différentes propositions de logement était irrégulière, pas sûr que l’ensemble fonctionnerait aussi bien.
2. La loi de la similitude
Notre perception à tendance à rassembler l’ensemble les éléments présentant des similarités (forme, couleur, taille, etc.). Ainsi, les éléments présentant une même particularité forment automatiquement un ensemble. Par exemple, dans le schéma ci-dessous, parmi toutes les formes, l’œil associe les ronds noirs comme appartenant à un même groupe à l’instar des ronds bleus. (Figure A).
Est-ce que ce principe fonctionne si les ronds ne forment pas des lignes ? Pas avec tout le monde. La question se pose: avec la figure B, avez-vous identifié les points bleus comme appartenant à un même groupe ou plutôt comme des symboles isolés ? Ce qu’on comprend ici, c’est que certaines lois, une fois isolées, ne fonctionnent pas toujours.
En termes d’interface, nous ne voyons jamais des points de couleurs disposés aléatoirement et les formes sont, bien évidemment, plus complexes que de simples figures géométriques. Par exemple, le choix typographique peut compter parmi les similarités, la taille d’un titre ou bien la présence ou non d’un type de pictogramme.
Toujours sur l’exemple du site de Airbnb, les différents filtres s’identifient par la présence d’un pictogramme associé. La similarité existe par structure récurrente: ainsi, chaque élément illustré d’un pictogramme dans la rangée correspond à un nouveau filtre applicable dans la recherche.
Il en va de même avec l’affichage de chaque proposition de logement : présence d’une image, d’un titre, du type de logement, prix. Ladite structure permet à l’ensemble d’être identifié comme un même “bloc”. Ainsi, chaque répétition de ces éléments, dans le même ordre, sera associée à un nouveau logement.
3. La loi de la continuité
L’œil va suivre naturellement les chemins, lignes, courbes. Il va préférer observer une suite constante dans une forme ou un objet, même s’il est divisé.
Dans la figure ci-dessus, nous pouvons voir que notre œil capte la ligne la plus fluide sans prendre en compte la manière dont elle a été dessinée. Ainsi, sur la Figure A, on observe une ligne droite ainsi qu’une courbe transversale quand bien même elle change de couleur à mi-chemin. Pareillement en ce qui concerne la figure B, notre œil perçoit la sphère bien qu’elle soit entrecoupée.
Dans l’exemple ci-dessus, la dernière icon et son texte n’apparaissent pas entièrement, coupé par l’interface ils laissent deviner qu’il existe une suite à la liste des filtres. En effet l’utilisateur peut se projeter dans la continuité de l’interface.
Plus généralement utilisé en mobile (notamment pour swiper), on retrouve ce principe aussi sur de nombreuses plateformes de streaming. A droite ou à gauche l’utilisateur peut consulter la suite de ses thématiques, en bas voir suite des catégories proposées.
4. La loi de la clôture
Notre perception va chercher à fermer les formes et à les compléter même si elles sont incomplètes. Par exemple, avec la figure A, nous pouvons observer la forme d’un carré quand bien même il n’est pas tracé par des lignes. En ce qui concerne la figure B, même incomplet, nous percevons le cercle.
Le principe de clôture est plus difficile à imaginer sur une interface. Sans projeter en termes de structure, elle s’imprègne totalement dans l’iconographie mise en place. Ainsi, les éléments représentés peuvent être simplifiés. Cela permet de simplifier leur identification même en étant affiché en très petit.
5. La loi du destin commun
Indépendamment de leur distance ou forme, des éléments possédant la même trajectoire (ou allant dans la même direction) peuvent être perçus comme associés. Le sentiment généré par cette loi est renforcé si le mouvement impliquant les éléments est synchronisé.
En termes de design d’interface, ce principe peut permettre de mettre en avant des relations entre des éléments ou liens.
Il peut se transcrire de diverses manières, forme d’un bloc, animation entre les éléments de navigation, indication d’un trajet à suivre. Un simple fil d’Ariane, par exemple, vous indique une hiérarchie de l’information par son légendaire symbole “>”.
Les accordéons et les menus déroulants sont aussi d’autres bons exemples.
Conclusion
Il existe d’autres principes dans la théorie de la Gestalt, tout comme ses dérivées. Elles ne répondent pas toujours à une vérité absolue tout comme certains principes ne fonctionnent pas réellement isolés de ses pairs. Il est toujours intéressant de connaître les lois et ses subtilités, mais il est encore mieux de savoir se les approprier pour répondre aux mieux à nos fonctions cognitives. Les interfaces évoluent, il y a quelques années encore nous étions loin d’imaginer que “faire dépasser un bloc” permettait d’induire un swipe sur la droite ou la gauche (répondant au principe de… continuité, bravo !). Demain, de nouveaux médias feront leur apparition, ainsi que de nouveaux usages. Ainsi, ces quelques grands principes pourront alors sûrement vous aider à designer l’interface idéale pour vos utilisateurs !
