écoutez la version audio de cet article
L’espace négatif a longtemps été un aliment de base du 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 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 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 des feuilles d’arbres ou des fissures de trottoir.
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 son 1923 Gestalt laws of perceptual organization, bien que la discussion de Wolfgang Köhler sur la Gestalten physique en 1920 contienne également de nombreuses idées influentes sur le sujet.
peu importe qui a proposé les idées en premier (il y a eu des essais datant de 1890), les principes de gestalt sont un ensemble important d’idées pour tout concepteur à 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 ou des conceptions complexes composées de nombreux éléments, en organisant inconsciemment les parties en un système organisé qui crée un tout, plutôt qu’une 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 couramment associés à la théorie de la gestalt: similarité, continuation, fermeture, proximité, figure/sol et symétrie& ordre (également appelé prägnanz). Il existe également des principes supplémentaires, plus récents, parfois associés à la gestalt, tels que le destin commun.
similitude
c’est la nature humaine de se regrouper comme des choses ensemble. En gestalt, des éléments similaires sont visuellement regroupés, quelle que soit leur proximité les uns avec les autres. Ils peuvent être regroupés par couleur, forme ou taille., La similitude peut être utilisée pour lier ensemble des éléments qui pourraient ne pas être juste à côté les uns des autres dans un design.
bien sûr, vous pouvez faire des choses dissemblables, si vous voulez les faire ressortir de la foule., C’est pourquoi les boutons pour les appels à l’action sont souvent conçus dans une couleur différente 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 se ressemblent. Par exemple, dans une liste de fonctionnalités utilisant des éléments de conception répétitifs (tels qu’une icône accompagnée de 3 à 4 lignes de texte), le principe de similarité faciliterait leur numérisation., En revanche, la modification des é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 un design 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 lisse lors de la visualisation des lignes, quelle que soit la façon dont les lignes ont été réellement tracées.,
Cette suite peut être un outil précieux lorsque l’objectif est de guider 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 relèvent de ce chemin.,
Depuis l’œil suit naturellement une ligne, de placer des éléments dans une série en ligne va naturellement attirer le regard 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.
Closure
Closure est l’un des principes de 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 va combler les parties manquantes d’un dessin ou d’une image pour créer un ensemble.
dans sa forme la plus simple, le principe de fermeture permet à votre œil de suivre quelque chose comme une ligne pointillée jusqu’à sa fin., Mais des applications plus complexes sont souvent vues dans les logos, comme celle du Fonds mondial pour la nature. 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, y compris ceux de USA Network, NBC, Sun Microsystems et même Adobe.
un autre exemple très important de fermeture au travail dans la conception UX et UI est lorsque vous montrez une image partielle s’estompant de l’écran de l’utilisateur afin de leur montrer qu’il y a plus à trouver s’ils glissent 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 défiler (puisque la fermeture est déjà apparente).
proximité
la proximité fait référence à la proximité des éléments les uns par rapport aux autres. Les relations de proximité les plus fortes sont celles entre des sujets qui se chevauchent, mais le simple regroupement d’objets dans une seule zone peut également avoir un fort effet de proximité.
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.
Prendre ce groupe de cercles, par exemple:
dans la conception UX, la proximité est le plus souvent utilisée afin d’amener les utilisateurs à regrouper certaines choses sans utiliser de choses comme des bordures dures. En rapprochant les choses, avec de l’espace entre chaque groupe, le spectateur saisit immédiatement l’organisation et la structure que vous voulez qu’ils perçoivent.,
Figure/Sol
le principe figure / sol 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 des mèmes sur les médias 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 être 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 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 des couleurs plus claires et plus sombres 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 veulent 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’estompe en arrière-plan, ou lorsqu’une barre de recherche est cliquée et que le contraste,
la Symétrie et l’Ordre
la loi de La symétrie et de l’ordre est également connu comme prägnanz, le mot allemand pour « bonne figure.” Ce principe est que votre cerveau va percevoir ambigu des formes aussi simples que possible. Par exemple, une version monochrome du logo olympique est considérée comme une série de cercles qui se chevauchent plutôt qu’une collection de lignes courbes.,
Voici un autre bon exemple de la gestalt-principe de conception « prägnanz”:
Votre cerveau va interpréter l’image sur la gauche, comme un rectangle, cercle, triangle, même lorsque les grandes lignes de chacun sont incomplètes parce que ce sont des formes simples que l’ensemble de l’image.
destin commun
bien que le destin commun n’ait pas été inclus à l’origine dans la théorie de la gestalt, il a depuis été ajouté. Dans la conception UX, son utilité ne peut pas être négligée., Ce principe stipule que les gens vont regrouper les choses qui pointent vers ou vont dans la même direction.
Dans la nature, nous voyons cela dans des choses comme des 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, notre cerveau les regroupe et les considère comme un seul stimulus.
ceci est très utile en UX car les effets animés deviennent plus répandus dans le design 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 de mouvement.
principes de Gestalt dans la conception UX
comme pour tout Principe psychologique, apprendre à incorporer les principes de perception visuelle de la gestalt dans votre travail de conception peut grandement améliorer l’expérience utilisateur., Comprendre comment fonctionne le cerveau humain, puis exploiter les tendances naturelles d’une personne crée une interaction plus transparente qui permet à un utilisateur de se sentir à l’aise sur un site web, même s’il s’agit de sa première visite.
principes de Gestalt sont relativement faciles à intégrer dans juste environ n’importe quel design et peuvent rapidement élever un design qui semble hasardeux ou comme il combat pour un utilisateur qui offre une parfaite interaction naturelle qui guide les utilisateurs vers l’action que vous voulez qu’ils prennent.