Boost your skills : comprendre l’UI grâce à la psychologie des formes

La psychologie de la forme est une théorie psychologique, philosophique et biologique, selon laquelle les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des formes globales, structurées ou non, et non comme l’addition ou la juxtaposition d’éléments simples. En clair, nous percevons une forme globale et non un ensemble d’éléments qui la composent.

Pour remettre un peu de contexte, cette notion de forme a été théorisée en 1890 pour expliquer que l’acte de perception est en réalité qu’une superposition d’une foule de détails. Nous percevons des formes globales qui rassemblent des éléments entre eux.

Sur le même principe qu’une mélodie : nous entendons une musique et non pas une suite successive de notes prises de façon isolées.

Pour comprendre un comportement ou une situation, il faut à la fois analyser chaque élément de façon indépendante, puis les percevoir dans un ensemble plus global. Il faut avoir non pas un regard « pointu » mais une vision plus large : le contexte est souvent plus signifiant que le « texte ». C’est une question d’ensemble.

Et c’est dans ce sens là que la psychologie de la forme permet d’expliquer l’UI : car l’UI c’est un ensemble d’éléments qui permet d’obtenir un produit fini. Pour optimiser ce produit fini, il est nécessaire de tenir compte d’un ensemble d’éléments et non pas d’un seul et unique produit.

Passons aux choses sérieuses maintenant …

Les principales lois de la Gestalt

 

— Principe
Le cerveau regroupe les éléments qui sont proches physiquement et qui forment un ensemble.

— Application
Dans une interface, les éléments doivent être organisés et groupés selon leur objectif et leur logique de contenu.

— Contre-exemple
Dans une page liste, l’espace entre les vignettes doit être suffisant pour comprendre les ensembles.

 

— Principe
Le cerveau tend à regrouper les objets proches d’autres éléments mais également ayant des similitudes physiques comme une forme, couleur, taille identique. Ils seront perçus comme appartenant à la même catégorie.

— Application
Dans une interface, un code couleur ou une forme doit référer à une fonctionnalité unique afin de faciliter l’effort de décryptage.

— Contre-exemple
Les boutons de choix de date, de type de chambre et de nombre d’hôtes ne devraient pas avoir exactement le même style.

— Principe
Une forme fermée sera toujours plus facilement identifiable qu’une forme ouverte. Les formes ouvertes nous apparaissent incomplètes et le cerveau aura tendance à combler les vides afin de percevoir une forme dans sa totalité.

— Application
Dans une interface, les zones doivent être bien délimitées pour faciliter le repérage et la lecture des blocs.

— Contre-exemple
Les pages de listes de produits ne respectent pas toujours la délimitation entre chaque item.

— Principe
Le cerveau à tendance à poursuivre naturellement la direction suggérée par un arrangement d’objets.

— Application
Dans une interface, la navigation se fait de gauche à droite et de haut en bas, et non l’inverse.

— Contre-exemple
Bannir les expériences de navigation non naturelles, avec retours en arrière incessants, parcours peu clairs.

— Principe
Ce qui va être perçu doit être simplifié pour le rendre le plus compréhensible possible et améliorer l’expérience utilisateur.

— Application
Dans une interface, la limitation du bruit à son strict nécessaire est une règle de base.

— Bon exemple !
Une interface claire, sans bruit inutile.

— Principe
En fonction de ce qui est identifié comme le fond ou la forme, l’objet perçu change. Le cerveau a tendance à organiser les informations de telle façon que tout ce qui a une signification pour nous soit vu comme une figure, détachée d’un fond.

— Application
Les fonds de page, notamment des HP.

— Contre-exemple
Les images de fond peuvent brouiller le message, le rendre moins lisible et évident.

— Principe
Le cerveau se focalise sur un point qui attire son attention pour ensuite se diriger vers d’autres éléments.

— Application
La priorisation des messages et les choix éditoriaux.

— Contre-exemple
Trop de messages sans point focal provoque une charge cognitive accrue.

Toutes ces lois et exemples ont permis d’illustrer plus clairement la notion de psychologie des formes. Il est important de garder en tête qu’une interface digitale est un ensemble d’élément. Et ce sont ces éléments qui vont constituer un produit global. Ainsi, un élément peut s’avérer être problématique pour l’utilisateur et c’est tout le site qui en subit les conséquences.

Testez, testez et encore testez votre site afin de vous assurer que tous ces élements s’accordent parfaitement !

Julie Dumont
Julie est Customer Success Manager chez AB Tasty. Passionnée par l'UX, elle met son expertise au service d'une vingtaine de clients grands comptes qu'elle accompagne sur leurs problématiques de conversion et leur utilisation de la solution.

Articles Similaires


Tweetez
Partagez
Partagez
Pocket
Buffer
X