Explorer les principes de conception de la Gestalt

Écoutez la version audio de cet article

L'espace négatif est depuis longtemps un élément essentiel d'un bon design. Laisser un espace blanc autour des éléments d'un design est la première chose qui vient généralement à l'esprit. Mais il y a ensuite des conceptions qui utilisent cet espace blanc pour déduire un élément qui n'est pas réellement là (la flèche cachée entre le E et le X dans le logo FedEx vient immédiatement à l'esprit comme exemple).

Le cerveau humain est exceptionnellement doué pour remplir les blancs d'une image et créer un tout supérieur à la somme de ses parties. C'est pourquoi nous voyons des visages dans des choses comme les feuilles d'arbres ou les fissures des trottoirs.

Ce principe est l'une des idées sous-jacentes les plus importantes derrière les principes gestalt de la perception visuelle. La première proposition la plus influente écrite sur la théorie a été publiée par Max Wertheimer dans ses lois de la Gestalt de 1923 sur l'organisation perceptive , bien que la discussion de Wolfgang Kohler en 1920 sur la Gestalten physique contienne également de nombreuses idées influentes sur le sujet.

Peu importe qui a proposé les idées pour la première fois (il y a eu des essais remontant à 1890), les principes de la gestalt sont un ensemble important d'idées à apprendre pour tout designer, et leur mise en œuvre peut grandement améliorer non seulement l'esthétique d'un design, mais aussi sa fonctionnalité et sa convivialité.

Dans les termes les plus simples, la théorie de la gestalt est basée sur l'idée que le cerveau humain tentera de simplifier et d'organiser des images ou des conceptions complexes composées de nombreux éléments, en organisant inconsciemment les parties dans un système organisé qui crée un tout, plutôt qu'un simple série d'éléments disparates. Notre cerveau est construit pour voir la structure et les modèles afin que nous puissions mieux comprendre l'environnement dans lequel nous vivons.

Il existe six principes individuels communément associés à la théorie de la gestalt : similarité , continuation , fermeture , proximité , figure/fond , et symétrie et ordre (également appelé pragnanz ). Il existe également des principes supplémentaires, plus récents, parfois associés à la gestalt, tels que le destin commun.

Similarité

C'est dans la nature humaine de regrouper des choses semblables. En gestalt, les éléments similaires sont regroupés visuellement, quelle que soit leur proximité les uns avec les autres. Ils peuvent être regroupés par couleur, forme ou taille. La similarité peut être utilisée pour lier des éléments qui pourraient ne pas être les uns à côté des autres dans une conception.

Bien sûr, vous pouvez rendre les choses différentes si vous voulez les faire ressortir de la foule. C'est pourquoi les boutons des appels à l'action sont souvent conçus dans une couleur différente de celle du reste d'une page, afin qu'ils se démarquent et attirent l'attention du visiteur sur l'action souhaitée.

Dans la conception UX, l'utilisation de la similarité indique clairement à vos visiteurs quels éléments sont similaires. Par exemple, dans une liste de fonctionnalités utilisant des éléments de conception répétitifs (comme une icône accompagnée de 3-4 lignes de texte), le principe de similarité faciliterait leur lecture. En revanche, modifier les éléments de conception pour les fonctionnalités que vous souhaitez mettre en évidence les fait ressortir et leur donne plus d'importance dans la perception du visiteur.

Même des choses aussi simples que de s'assurer que les liens dans une conception sont formatés de la même manière reposent sur le principe de similitude dans la façon dont vos visiteurs percevront l'organisation et la structure de votre site.

Continuation

La loi de continuité postule que l'œil humain suivra le chemin le plus fluide lors de la visualisation des lignes, quelle que soit la manière dont les lignes ont été réellement dessinées.

Ce prolongement peut être un outil précieux lorsqu'il s'agit de guider le regard d'un visiteur dans une certaine direction. Ils suivront le chemin le plus simple sur la page, alors assurez-vous que les parties les plus vitales qu'ils devraient voir se trouvent dans ce chemin.

Étant donné que l'œil suit naturellement une ligne, placer des éléments d'une série sur une ligne attirera naturellement l'œil d'un élément à l'autre. Les curseurs horizontaux en sont un exemple, tout comme les listes de produits connexes sur des sites comme Amazon.

Fermeture

La fermeture est l'un des principes de gestalt les plus cool et j'en ai déjà parlé au début de cet article. C'est l'idée que votre cerveau remplira les parties manquantes d'un dessin ou d'une image pour créer un tout.

Dans sa forme la plus simple, le principe de fermeture permet à votre œil de suivre quelque chose comme une ligne pointillée jusqu'à son extrémité. Mais des applications plus complexes se retrouvent souvent dans les logos, comme celui du Fonds mondial pour la nature. De gros morceaux du contour du panda manquent, mais votre cerveau n'a aucun problème à remplir les sections manquantes pour voir l'animal entier.

La fermeture est assez souvent utilisée dans la conception de logos, avec d'autres exemples, notamment ceux de USA Network, NBC, Sun Microsystems et même Adobe.

Un autre exemple très important de fermeture à l'œuvre dans la conception UX et UI est lorsque vous affichez une image partielle qui s'estompe sur l'écran de l'utilisateur afin de lui montrer qu'il y a plus à trouver s'il glisse vers la gauche ou la droite. Sans image partielle, c'est-à-dire si seules des images complètes sont affichées, le cerveau n'interprète pas immédiatement qu'il pourrait y avoir plus à voir, et donc votre utilisateur est moins susceptible de faire défiler (puisque la fermeture est déjà apparente).

Proximité

La proximité fait référence à la proximité des éléments entre eux. Les relations de proximité les plus fortes sont celles entre des sujets qui se chevauchent, mais le simple fait de regrouper des objets dans une seule zone peut également avoir un fort effet de proximité.

L'inverse est également vrai, bien sûr. En mettant de l'espace entre les éléments, vous pouvez ajouter une séparation même lorsque leurs autres caractéristiques sont les mêmes.

Prenez ce groupe de cercles, par exemple :

Dans la conception UX, la proximité est le plus souvent utilisée pour amener les utilisateurs à regrouper certaines choses sans utiliser de choses comme les bordures dures. En rapprochant les choses, avec un espace entre chaque groupe, le spectateur saisira immédiatement l'organisation et la structure que vous voulez qu'il perçoive.

Figure/Sol

Le principe figure/fond est similaire au principe de fermeture en ce sens qu'il tire parti de la façon dont le cerveau traite l'espace négatif. Vous avez probablement vu des exemples de ce principe flotter dans les mèmes sur les réseaux sociaux, ou dans le cadre de logos (comme le logo FedEx déjà mentionné).

Votre cerveau fera la distinction entre les objets qu'il considère comme étant au premier plan d'une image (la figure ou le point focal) et l'arrière-plan (la zone sur laquelle reposent les figures). Là où les choses deviennent intéressantes, c'est lorsque le premier plan et l'arrière-plan contiennent en fait deux images distinctes, comme ceci :

Un exemple plus simple peut être vu avec cette image, de deux visages créant un chandelier ou un vase entre eux :

En termes généraux, votre cerveau interprétera la plus grande surface d'une image comme le sol et la plus petite comme la figure. Comme le montre l'image ci-dessus, cependant, vous pouvez voir que les couleurs plus claires et plus foncées peuvent influencer ce qui est considéré comme la figure et ce qui est considéré comme le sol.

Le principe figure/sol peut être très pratique lorsque les concepteurs de produits souhaitent mettre en évidence un point focal, en particulier lorsqu'il est actif ou en cours d'utilisation, par exemple, lorsqu'une fenêtre modale apparaît et que le reste du site s'efface en arrière-plan, ou lorsque une barre de recherche est cliquée et le contraste est augmenté entre elle et le reste du site.

Symétrie et ordre

La loi de la symétrie et de l'ordre est également connue sous le nom de pragnanz , le mot allemand pour "bonne figure". Ce principe dit que votre cerveau percevra des formes ambiguës de la manière la plus simple possible. Par exemple, une version monochrome du logo olympique est considérée comme une série de cercles superposés plutôt qu'un ensemble de lignes courbes.

Voici un autre bon exemple du principe de conception de la gestalt « pragnanz » :

Votre cerveau interprétera l'image de gauche comme un rectangle, un cercle et un triangle, même lorsque les contours de chacun sont incomplets car ce sont des formes plus simples que l'image globale.

Destin commun

Alors que le destin commun n'était pas initialement inclus dans la théorie de la gestalt, il a depuis été ajouté. Dans la conception UX, son utilité ne peut être négligée. Ce principe stipule que les gens regrouperont les choses qui pointent vers ou vont dans la même direction.

Dans la nature, nous voyons cela dans des choses comme des volées d'oiseaux ou des bancs de poissons. Ils sont constitués d'un tas d'éléments individuels, mais parce qu'ils se déplacent apparemment comme un seul, notre cerveau les regroupe et les considère comme un seul stimulus.

Ceci est très utile dans UX car les effets animés deviennent plus répandus dans la conception moderne. Notez que les éléments n'ont pas besoin d'être en mouvement pour bénéficier de ce principe, mais ils doivent donner l' impression d'être en mouvement.

Principes de Gestalt dans la conception UX

Comme pour tout principe psychologique, apprendre à intégrer les principes de perception visuelle de la gestalt dans votre travail de conception peut grandement améliorer l'expérience utilisateur. Comprendre le fonctionnement du cerveau humain, puis exploiter les tendances naturelles d'une personne crée une interaction plus transparente qui permet à l'utilisateur de se sentir à l'aise sur un site Web, même s'il s'agit de sa première visite.

Les principes de Gestalt sont relativement faciles à intégrer dans à peu près n'importe quelle conception et peuvent rapidement élever une conception qui semble aléatoire ou qui se bat pour attirer l'attention d'un utilisateur vers une conception qui offre une interaction transparente et naturelle qui guide les utilisateurs vers l'action que vous voulez qu'ils prennent.

Pour en savoir plus sur le blog Toptal Design :

• Principes de conception : introduction à la hiérarchie
• Meilleures pratiques de conception d'interface utilisateur et erreurs courantes
• Comment utiliser de puissants principes de Gestalt dans la conception (avec infographie)
• Le guide complet de l'architecture de l'information
• Boostez votre UX avec ces principes de conception d'interaction réussis