Le cerveau humain est câblé pour voir la structure, la logique et les modèles. Cela nous aide à donner un sens au monde. Dans les années 1920, un groupe de psychologues allemands a développé des théories sur la façon dont les gens perçoivent le monde qui les entoure, appelées principes de Gestalt.
Par exemple, que voyez-vous quand vous regardez cette image?,
Source: L’œil inspiré
Si vous êtes comme la plupart des gens, vous voyez probablement un triangle. Mais en réalité, tout ce qui est là sont trois hommes blancs » pac. »Nous voyons le triangle parce que notre cerveau prend l’information visuelle ambiguë et l’organise en quelque chose qui a du sens pour nous—quelque chose de familier, ordonné, symétrique et que nous comprenons.
lorsque ce processus cognitif débute, notre esprit passe de la compréhension de tous les éléments en tant que composants individuels et non liés à la vision de la forme entière dans son ensemble., Et par conséquent, nous percevons des formes et des objets où aucun n’a été créé.
pour illustrer davantage ce processus, consultez le GIF ci-dessous. Votre cerveau voit un chien marcher, mais ce n’est rien de plus qu’une série de points en mouvement.
Source: Gizmodo
Ce sont des exemples simples, mais ils démontrent les types de raccourcis que notre cerveau fait tout le temps pour donner rapidement un sens au monde.
Quels sont les principes de la Gestalt?,
ces raccourcis sont connus comme les principes Gestalt de la perception visuelle, et ils détaillent comment notre cerveau crée la structure par défaut. Mais pourquoi comprendre cela est-il important pour la conception web et mobile?
pourquoi les concepteurs devraient se soucier des principes de Gestalt
les grands designers comprennent le rôle puissant que joue la psychologie dans la perception visuelle. Que se passe-t-il lorsque l’Œil de quelqu’un rencontre vos créations? Comment leur esprit réagit – il au message que votre pièce partage?, – Laura Busche,stratège de contenu de marque chez Autodesk
pensez à cette citation pendant une minute. Quand les gens voient vos créations pour la première fois, comment les expérimentent-ils? Pour comprendre ce qui rend la conception de l’INTERFACE utilisateur, vous devez comprendre la psychologie de la perception humaine.
la loi fondamentale qui régit un principe de Gestalt est que nous avons tendance à ordonner notre expérience d’une manière régulière, ordonnée et reconnaissable. C’est ce qui nous permet de créer du sens dans un monde complexe et chaotique., Et avoir une bonne compréhension de la façon dont ces principes fonctionnent vous aidera de trois façons.
- Ils vous aideront à déterminer quels éléments de conception sont les plus efficaces dans une situation donnée. Par exemple, quand utiliser la hiérarchie visuelle, l’ombrage d’arrière-plan, les dégradés et comment regrouper des éléments similaires et en distinguer différents.
- ces principes psychologiques ont le pouvoir d’influencer notre perception visuelle, ce qui permet aux concepteurs d’orienter notre attention vers des points de focalisation spécifiques, de nous amener à prendre des mesures spécifiques et de créer un changement de comportement.,
- et enfin, au plus haut niveau, les principes Gestalt vous aident à concevoir des produits qui résolvent le problème du client ou répondent aux besoins de l’utilisateur d’une manière belle, agréable et intuitive à utiliser.
dans cet article, nous allons discuter de sept lois ou principes de Gestalt qui s’appliquent directement à la conception moderne, et partager quelques exemples de la façon dont ils sont utilisés dans la conception de L’interface utilisateur. Ce n’est pas une liste exhaustive, mais vous commencerez rapidement à remarquer qu’il y a un chevauchement entre de nombreux principes et qu’ils fonctionnent tous ensemble de manière fluide. Maintenant, nous allons plonger.,
- Figure-sol
- similitude
- proximité
- région commune
- continuité
- fermeture
- point Focal
Principe #1: figure-sol
le principe figure-sol stipule que les gens perçoivent instinctivement les objets comme étant au premier plan ou à l’arrière-plan. Ils se détachent bien en évidence à l’avant (la figure) ou reculent à l’arrière (le sol).,
Source: un nain nommé Warren
dans l’image ci-dessus, par exemple, votre œil voit instantanément une pomme blanche assise sur un fond noir.
cette détermination se produira rapidement et inconsciemment dans la plupart des cas. Figure / Ground nous permet de savoir sur quoi nous devrions nous concentrer et ce que nous pouvons ignorer en toute sécurité dans une composition. – Steven Bradley,web designer
lorsque les gens utilisent votre site web ou votre application mobile, l’une des premières choses qu’ils font sur chaque écran est de déterminer quel est le chiffre et quel est le sol.,
exemples du principe figure-sol
la page D’accueil de Basecamp contient un tas de graphiques, de textes, de formulaires et d’autres informations. Et en raison du principe figure-sol, vous pouvez immédiatement dire que vous devez vous concentrer sur le contenu dans les zones de premier plan blanches.
AngelList utilise la figure-sol principe de deux façons ci-dessous. Tout d’abord, le texte et le logo sur le côté gauche de la page sont clairement assis sur le dessus de l’image d’arrière-plan. Deuxièmement, le texte blanc dans le menu de droite se trouve au-dessus du fond noir.,
Principe #2: similarité
le principe de similitude stipule que lorsque les choses semblent être similaires les unes aux autres, nous les regroupons. Et nous avons aussi tendance à penser qu’ils ont la même fonction.
par exemple, dans cette image, il semble y avoir deux groupes distincts et distincts basés sur la forme: les cercles et les carrés.
Source: Creative Balise
Une variété d’éléments de conception, comme la couleur et de l’organisation, peut être utilisé pour établir des groupes similaires., Dans l’image ci-dessous, par exemple, même si toutes les formes sont identiques, il est clair que chaque colonne représente un groupe distinct:
Source: Andy Rutledge
exemples du principe de similitude
GitHub utilise le principe de similitude de deux manières sur la page ci-dessous. Tout d’abord, ils l’utilisent pour distinguer différentes sections. Vous pouvez immédiatement dire que la section grise en haut a un but différent de la section noire, qui est également distincte et différente de la section bleue.,
deuxièmement, ils utilisent également la couleur bleue pour distinguer les liens du texte normal et pour communiquer que tout le texte bleu partage une fonction commune.
Principe #3: proximité
le principe de proximité stipule que les choses qui sont rapprochées semblent être plus liées que les choses qui sont espacées plus loin.
Source: Andy Rutledge
la proximité est si puissante qu’elle remplace la similitude de couleur, de forme et d’autres facteurs qui pourraient différencier un groupe d’objets.,
Source: Steven Bradley
remarquez les trois groupes de points noirs et rouges ci-dessus? La proximité relative des objets a une influence encore plus forte sur le regroupement que la couleur.
des Exemples du principe de proximité
La proximité de chaque image et son texte correspondant communique qu’elles sont liées l’une à l’autre.
Et Vice utilise pour distinguer entre les images, des titres, des descriptions et d’autres informations pour chacune de ses histoires.,
Principe #4: région commune
le principe de région commune est fortement lié à la proximité. Il indique que lorsque les objets sont situés dans la même région fermée, nous les percevons comme étant regroupés.
Source: Smashing Magazine
L’ajout de bordures ou d’autres barrières visibles est un excellent moyen de créer une séparation perçue entre des groupes d’objets—même s’ils ont la même proximité, la même forme, la même couleur, etc.,
exemples du principe de la région commune
dans L’exemple de Pinterest ci—dessous, le principe de la région commune est utilisé pour séparer chaque épingle—y compris sa photo, son titre, sa description, son contributeur et d’autres détails-de toutes les autres épingles qui l’entourent.
et il est utilisé dans L’exemple Facebook ci—dessous pour communiquer que les commentaires, les j’aime et les interactions sont associés à ce message spécifique-et non aux autres messages qui l’entourent.,
principe #5: continuité
le principe de continuité stipule que les éléments disposés sur une ligne ou une courbe sont perçus comme plus liés que les éléments ne se trouvant pas sur la ligne ou la courbe.
Source: Smashing Magazine
Dans l’image ci-dessus, par exemple, les points rouges dans la courbe semble être davantage liée aux points noirs sur la ligne courbe que pour les points rouges sur la ligne droite horizontale., C’est parce que votre œil suit naturellement une ligne ou une courbe, faisant de la continuation un signal de parenté plus fort que la similitude de couleur.
exemples du principe de continuité
Amazon utilise la continuité pour communiquer que chacun des produits ci-dessous est similaire et lié les uns aux autres.
Brin utilise pour expliquer le processus en trois étapes pour l’utilisation de leur application.
Et de Crédit Karma utilise pour illustrer les avantages qu’ils offrent.,
Principe #6: fermeture
le principe de fermeture stipule que lorsque nous examinons un agencement complexe d’éléments visuels, nous avons tendance à rechercher un motif unique et reconnaissable.
en d’autres termes, lorsque vous voyez une image qui a des parties manquantes, votre cerveau remplira les blancs et fera une image complète afin que vous puissiez toujours reconnaître le motif.
Source: Eduard Volianskyi
Par exemple, quand vous regardez l’image ci-dessus, vous verrez probablement un zèbre, même si l’image n’est qu’une collection de formes noires., Votre esprit remplit les informations manquantes pour créer un modèle reconnaissable basé sur votre expérience.
exemples du principe de fermeture
le principe de fermeture est souvent utilisé dans la conception de logo dans une variété d’entreprises, y compris IBM, NBC, Zendesk et Funding Circle.
Principe n ° 7: point focal
Le point focal principe stipule que tout ce qui se trouve visuellement permettra de capturer et retenir l’attention du spectateur en premier.,
Source: Smashing Magazine
lorsque vous regardez l’image ci-dessus, par exemple, la première chose que vous remarquez est le carré rouge car il est différent de tous les cercles noirs qui l’entourent. C’est le premier point d’intérêt qui attire votre attention, et à partir de là, votre attention se déplace vers d’autres parties de l’image.
exemples du principe du point focal
Twilio utilise le principe du point focal pour attirer votre attention sur leur bouton d’appel à l’action.,
et dans l’exemple ci-dessous, Instacart combine le principe du point focal avec le principe de la figure au sol pour attirer votre œil vers le premier plan blanc, puis vers le bouton vert « rechercher des magasins”.
conclusion
Si vous comprenez comment l’esprit humain fonctionne, il est plus facile de diriger les gens vers le bon endroit. Et garder ces principes en tête vous aidera à garder l’utilisateur au centre de votre processus de développement de produits., Si vous souhaitez en savoir plus sur les principes Gestalt de la perception visuelle, nous vous recommandons de consulter les ressources ci-dessous.,
pour en savoir plus:
- simplicité, symétrie et plus encore: la théorie de la Gestalt et les principes de conception elle a donné naissance à
- principes de conception: la Perception visuelle et les principes de la Gestalt
- Guide du Concepteur de la théorie de la Gestalt
- série en cinq parties D’Andy Rutledge sur la perception de la Gestalt:
- Partie 1: relations Figure-Sol
- Partie 2: similitude
- Partie 3: proximité, connectivité uniforme et bonne continuation
- partie 4: destin commun
- Partie 5: Fermeture
vous voulez en savoir plus?,
pour savoir comment UserTesting peut vous aider à comprendre vos clients grâce à un aperçu humain à la demande, contactez-nous ici.