La théorie de la Gestalt ou Psychologie de la forme

LES 6 LOIS DE LA GESTALT

La Gestalt est une théorie née en Allemagne au début du XXe siècle, cherchant à expliquer notre façon de percevoir le monde qui nous entoure. Les formes se manifestent à notre vision dans leur ensemble et non pas dans une multitude de détails.

Comme pour un morceau de musique, nous entendons la mélodie et pas les notes les une après les autres.

Gestalt, psychologie des formes
Après avoir vu les heuristiques de Bastien et Scapin, il était temps d’offrir une seconde corde pour votre arc : les théories de la Gestalt. 
Nous le savons de plus en plus, la psychologie prend une place importante dans notre travail d’UX designer. Pourtant, beaucoup d’entre nous n’ont pas suivi de parcours universitaire. Voici quelques clés pour comprendre cette théorie et lui trouver des applications pratiques dans votre métier au quotidien.

#1 Loi de la bonne forme ou prégnance

Notre cerveau cherche à reconnaître des formes simples et stables qui lui sont familières. Notre perception des éléments se fera de manière globale, en cherchant à regrouper des éléments qui vont ensemble.
Vous connaissez sûrement l’illusion qui explicite cette loi : vous pouvez voir ici soit un lapin soit un canard mais jamais les deux en même temps . Votre cerveau cherche à reconnaître une forme qu’il connaît et qu’il peut interpréter simplement.
 

illusion lapin canard loi prégnance
Illusion du Canard-lapin, qui diffère selon le regard qu’on y porte

#2 Loi de continuité

Notre oeil perçoit les éléments rapprochés comme faisant partie d’un même ensemble. Cela permet d’encourager le regard à suivre un tracé.
Par exemple : les loaders
Ils sont constitués de ronds de différentes couleurs qui s’alternent. Nous arrivons à les interpréter comme des cercles en progression. 

animation loading loi gestalt
 

#3 Loi de la proximité

Les éléments similaires les plus proches sont regroupées ensemble. Pour éviter les associations portant à confusion, les séparations entres des éléments qui pourraient être regroupés est indispensable.
Exemple : Feedly
L’affichage sur Feedly permet d’associer les actualités par date de publication, les séparations étant là pour nous guider.

Capture d'écran Feedly - loi de proximité
Sur Feedly.com, “TODAY” est un séparateur pour les contenus regroupés par date de publication juste en dessous.

#4 Loi de similitude

Si notre cerveau ne parvient pas grâce à la distance à regrouper des éléments ensemble, il cherchera les formes qui sont similaires. Les associations peuvent se faire par la forme, la couleur, l’orientation ou d’autres critères. C’est ce lien qui nous permet de mieux comprendre la différence entre les labels d’un e-commerce.
Exemple : Beauté-privée
Grâce à la couleur et à la graisse de la typographie, votre cerveau interprète que best-of fait parti du groupe Ventes en cours et qu’il possède sa propre sous-catégorie.
Contre exemple : Sport dépôt
Quand vous manipulez le site, vous savez d’où vous venez et vous allez. Mais si je vous montre cette capture sortie de son contexte, vous serez bien en mal d’identifier rapidement les groupes. Il y a un trouble entre les éléments verticaux et horizontaux.

La partie Best-of dans le menu des Ventes en cours de Beauté-privée contre le menu de Sports Dépôt
La partie Best-of dans le menu des Ventes en cours de Beauté-privée contre le menu de Sports Dépôt

#5 Loi de Clôture

Notre cerveau cherche à interpréter les éléments perçus comme un tout cohérent et complètera les forme vues partiellement. Une suite de lignes courbes sera interprétée comme un cercle.  
Les lignes discontinues mais courbes seront perçues comme un cercle.
Exemple : les logos avec des espaces négatifs.
Ils tirent profit de cette loi pour être lisible. Le logo qui est le plus répandu en France utilisant cette loi est celui de Carrefour. Notre perception du “C” est possible car nous interprétons les éléments ensemble et non pas séparément (voir une sélection d’exemples).

#6 Loi de destin commun

Des éléments allant dans le même sens seront assimilés, comme faisant partie du même groupe. Un mouvement équivalent indique une relation entre les objets.
Exemple : H&M 
Lorsque vous survolez les catégories vous savez qu’ils vont tous réagir de la même manière (en dropdown) Seule la barre de recherche a une interaction différente et l’utilisateur le sait, car son traitement est différent.

h&m loi de destin commun
Traitement différent dans la barre de recherche des menus dropdown sur le site de hm.com

Comment appliquer les principes des lois de la Gestalt ?

Lorsque je réalise un audit expert d’un site ou d’une application, je commence par étudier page par page avec les heuristiques de Bastien et Scapin. Ça me permet d’obtenir une première base de réflexion. Puis, je reviens sur chaque page en m’appuyant sur les loi de la Gestalt.
Ces lois sont très utiles pour justifier les placements de certains éléments dans les pages lors des ateliers de Sketching et de présentation des wireframes.
Pour les UI Designers, les lois sont des bonnes bases pour réaliser des produits innovants, comme des logos avec des espaces négatifs. En maîtrisant toutes les lois de la Gestalt, vous pourrez par l’UX et l’UI transmettre à vos utilisateurs une perception positive de votre produit.

TAKE AWAY

Réaliser cette analyse en deux temps offre le recul nécessaire pour ne pas oublier des points essentiels au cours de l’audit, tout comme continuer à en relever d’autres.

Les gens oublieront ce que vous avez dit, ils oublieront ce que vous avez fait, mais n’oublieront jamais ce que vous leur avez fait ressentir.” Maya Angelou

 

RÉFÉRENCES

Lætitia Grosjean, (laetitia_m_g) UX-Designer @UX-Republic