Écoutez la version audio de cet article
L'espace négatif a longtemps été un élément essentiel d'un bon design. Laisser un espace blanc autour des éléments d'un dessin est la première chose qui vient généralement à l'esprit. Mais il y a aussi 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 à titre d'exemple).
Le cerveau humain est exceptionnellement efficace 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 de 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 son 1923 Lois de la Gestalt de l'organisation perceptive , bien que la discussion de 1920 de Wolfgang Köhler sur Formes physiques contient également de nombreuses idées influentes sur le sujet.
Outre le fait que qui a proposé les idées en premier (il y a eu des essais datant d'aussi loin que 1890), les principes de la gestalt sont un ensemble important d'idées pour tout designer apprendre, 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 complexes ou des conceptions constituées de nombreux éléments, en arrangeant inconsciemment les parties dans un système organisé qui crée un tout, plutôt qu'un simple série d'éléments disparates. Nos cerveaux sont construits 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 / sol , et symétrie et ordre (aussi appelé concision ). Il existe également des principes supplémentaires, plus récents, parfois associés à la gestalt, tels que Destin commun .
Similarité
C’est 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 par rapport aux autres. Ils peuvent être regroupés par couleur, forme ou taille. Similarité peut être utilisé pour lier des éléments qui peuvent ne pas être les uns à côté des autres dans un dessin.
Bien sûr, vous pouvez rendre les choses différentes si vous voulez les faire ressortir de la foule. C’est pourquoi les boutons d’appel à l’action sont souvent conçus dans une couleur différente de celle du reste de la page. Ils se démarquent et attirent l’attention du visiteur sur l’action souhaitée.
combien vaut l'industrie de la musique
Dans la conception UX, l'utilisation de la similitude indique clairement à vos visiteurs quels éléments se ressemblent. 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 similitude faciliterait leur lecture. En revanche, la modification des éléments de conception des 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 d'un design sont formatés de la même manière dépendent du principe de similitude de la manière 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 façon dont les lignes ont été réellement dessinées.
Cette continuation peut être un outil précieux lorsque l’objectif est de guider l’œil d’un visiteur dans une certaine direction. Ils suivront le chemin le plus simple de la page, alors assurez-vous que les parties les plus vitales qu'ils devraient voir s'inscrivent dans ce chemin.
Puisque l'œil suit naturellement une ligne, placer des éléments dans 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
Fermeture est l'un des principes de la gestalt les plus cool et celui que j'ai déjà abordé au début de cette pièce. 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 World Wildlife Fund. Il manque de gros morceaux du contour du panda, 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 logo, avec d'autres exemples, notamment ceux du réseau américain, NBC, Sun Microsystems et même Adobe.
Un autre exemple très important de fermeture au travail dans UX et Conception de l'interface utilisateur c'est lorsque vous affichez une image partielle disparaissant de l'écran de l'utilisateur afin de lui montrer qu'il y a plus à trouver s'il fait glisser son doigt vers la gauche ou la droite. Sans une 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é
Proximité fait référence à la proximité des éléments. 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é.
types d'outils de visualisation de données
Le contraire 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 des éléments tels que des bordures dures. En rapprochant les choses similaires, avec un espace entre chaque groupe, le spectateur détectera immédiatement l'organisation et la structure que vous voulez qu'il perçoive.
Figure / Terrain
La principe figure / masse est similaire au principe de fermeture en ce 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 distinguera les objets qu'il considère comme étant au premier plan d'une image (la figure, ou 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 celle-ci:
qu'est-ce que le prototypage dans la conception
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 zone 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 / masse peut être très pratique lorsque concepteurs de produits souhaitez 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 disparaît en arrière-plan, ou lorsque vous cliquez sur une barre de recherche et que le contraste est augmenté entre et le reste du site.
Symétrie et ordre
La loi de symétrie et d'ordre est également connue sous le nom de concision , le mot allemand pour «bonne figure». Ce que dit ce principe, c'est 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 qui se chevauchent plutôt que comme une collection de lignes courbes.
Voici un autre bon exemple du principe de conception de la Gestalt ' concision ':
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
Tandis que 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 vont regrouper les choses qui pointent 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 ensemble d'éléments individuels, mais comme ils se déplacent apparemment comme un seul, notre cerveau les regroupe et les considère comme un seul stimulus.
go vs node js performance
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 de bouger pour bénéficier de ce principe, mais ils doivent donner le impression de 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 de l'utilisateur vers une conception qui offre une interaction naturelle et transparente qui guide les utilisateurs vers l'action que vous voulez qu'ils entreprennent.
• • •Lectures complémentaires sur le blog ApeeScape 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
Comprendre les bases
Quels sont les principes de la conception gestaltique?
Les principes classiques de la théorie gestaltique de la perception visuelle incluent la similitude, la continuation, la fermeture, la proximité, la figure / le fond, et la symétrie et l'ordre (également connus sous le nom de prägnanz). D'autres, comme le «destin commun», ont été ajoutés ces dernières années.
Pourquoi la théorie de la gestalt est-elle importante?
Les principes de Gestalt peuvent rapidement élever une conception qui semble aléatoire ou qui se bat pour attirer l’attention de l’utilisateur vers une conception qui offre une interaction naturelle et transparente qui rend votre site familier tout en guidant les utilisateurs vers l’action que vous voulez qu’ils entreprennent.
Qu'est-ce que la hiérarchie visuelle dans la conception?
Dans la conception, la hiérarchie visuelle est l'agencement ou le positionnement de différents éléments de conception pour leur donner une importance plus ou moins grande. Les différents principes de la gestalt influencent fortement la hiérarchie visuelle.
Qu'est-ce que la théorie gestaltique de la perception?
La théorie gestaltique de la perception tente d'expliquer la façon dont le cerveau humain interprète les informations sur les relations et la hiérarchie dans un dessin ou une image en se basant sur des indices visuels tels que la proximité, la similitude et la fermeture.
