À propos de l’auteur

Jon a été concepteur visuel pendant de nombreuses années avant de faire le saut vers la conception d’interactions. Il a une maîtrise en Interaction Homme-Ordinateur de DePaulMoreEn savoir plus Surjon

Le processus perceptif nous permet de percevoir le monde à travers nos sens de la vue, de l’odorat, du son, du goût et du toucher. En particulier, notre système visuel traite de grandes quantités d’informations dans son environnement. Plutôt que de percevoir les éléments séparément, notre cerveau organise les motifs, les objets et les formes en formes entières que nous pouvons comprendre.

Les principes de regroupement gestalt de la perception visuelle décrivent cette organisation comme un ensemble de principes qui expliquent comment nous percevons et organisons cette énorme quantité de stimuli visuels. Les principes de gestalt — similarité, proximité, fermeture, motif, continuité et destin commun – sont un outil populaire utilisé par les concepteurs pour organiser visuellement l’information. En tant que designer visuel, et maintenant designer d’interaction, j’applique régulièrement ces principes pour créer des relations et des différences entre les éléments de mes créations. Comprendre comment ces principes fonctionnent et comment les utiliser dans vos conceptions produit un travail plus fort et plus engageant.

Êtes-vous prêt à améliorer vos designs ? Commençons par creuser la similitude.

Similarité

Le principe de similarité gestalt dit que les éléments similaires sont perçus comme étant plus liés que les éléments dissemblables. La similitude nous aide à organiser les objets en fonction de leur relation avec d’autres objets d’un groupe et peut être affectée par les attributs de couleur, de taille, de forme et d’orientation.

L’Utilisation de la Couleur Pour Attribuer des Relations

La similitude est particulièrement affectée par la couleur. Dans l’exemple ci-dessous, remarquez comment les formes colorées ont un fort effet sur l’attribution d’un regroupement ou d’une relation, même lorsque différentes formes sont incluses.

Utiliser La Taille Pour Attribuer des Relations

La taille est un autre outil utile que nous pouvons utiliser pour créer des similitudes. Dans l’exemple ci-dessous, la similitude de taille fait ressortir les formes les plus grandes et forme un groupe, même si toutes les formes sont identiques.

Utiliser la Forme Pour attribuer des Relations

La forme est utile pour regrouper par similitude, mais elle a l’effet de regroupement le plus faible par rapport à la couleur et à la taille. Dans l’exemple vu ici, la forme nous amène à interpréter les éléments comme des colonnes de cercles et de carrés, par opposition à des rangées de cercles et de carrés alternés.

En utilisant l’Orientation Pour Attribuer des Relations

L’orientation peut également être utilisée pour regrouper par similitude. En tournant certains des carrés de ce groupe de 45 degrés, un groupe séparé est créé qui est perçu comme étant lié. Ils semblent presque se déplacer ensemble dans une direction similaire par rapport aux formes qui les entourent. Cela touche en fait au principe gestalt du destin commun, un principe que nous aborderons dans un prochain article. Mais n’hésitez pas à aller de l’avant et à le Google (après avoir lu cet article, bien sûr!). C’est un principe fascinant qui arrive fréquemment tout autour de vous.

En savoir plus Sur la couleur

Comme mentionné précédemment, la similitude est particulièrement affectée par la couleur et peut remplacer d’autres attributs. Par exemple, nous pouvons remplacer l’exemple de similitude de forme en ajoutant de la couleur. Maintenant, nous percevons des rangées alternées de formes rouges et blanches par opposition à des colonnes de cercles et de carrés. Essayez-le. Essayez de voir les colonnes de cercles et de carrés. Possible mais assez difficile maintenant, n’est-ce pas?

De plus, la couleur peut remplacer la taille. Lorsque nous ajoutons de la couleur à l’exemple de similitude de taille, nous créons deux groupes séparés les uns des autres. Maintenant, nous percevons les grands carrés rouges comme un groupe et le seul grand carré blanc comme un groupe séparé, sans rapport (et solitaire).

Ces deux exemples illustrent à quel point la couleur peut être puissante dans l’attribution de relations entre les éléments. Essayez d’utiliser la couleur dans votre travail pour différencier les éléments et vous serez étonné de voir à quel point vos groupements sont plus forts.

Similarité En pratique

Lorsque nous concevons, nous pouvons utiliser la similarité pour transmettre l’organisation et les associations en montrant quels éléments sont liés, ou non liés, les uns aux autres. Par exemple, les deux sections présentées sur le site de Salon ci-dessous sont regroupées par leur taille relative. Nous percevons clairement deux groupes distincts, avec les histoires les plus lues à gauche et les plus lues à droite. Même si les deux sections offrent la même fonction – afficher les articles à lire — le regroupement par taille attribue plus de saillance au regroupement de gauche, ce qui permet au Salon de guider l’attention sur leurs histoires principales.

En revanche, l’absence de différences de taille dans cet exemple d’Amazon n’attribue aucune importance particulière à une section. Malgré cela, la similitude est toujours obtenue grâce à l’utilisation de répétitions de taille et de forme similaires, nous amenant à percevoir des rangées d’éléments.

Utilisation de couleurs similaires

Nous savons que la couleur est un indicateur fort de similitude, aidant à organiser et à rendre le contenu compréhensible. Dans cet exemple de Cars.com , l’utilisation de couleurs similaires nous aide à différencier ce qu’est un titre, une copie du corps et un texte de lien. (Divulgation complète: Je travaille à Cars.com en tant que concepteur d’interactions.) En utilisant des couleurs distinctes pour chacun de ces éléments, nous nous attendons à ce qu’ils fonctionnent de manière similaire et, dans le cas du texte du lien bleu, qu’ils se comportent de manière similaire.

Proximité

Le principe gestalt de proximité dit que les éléments qui sont plus proches les uns des autres sont perçus comme plus liés que les éléments qui sont plus éloignés les uns des autres. Comme pour la similitude, la proximité nous aide à organiser les objets en fonction de leur parenté avec d’autres objets. La proximité est le principe le plus fort pour indiquer la parenté des objets, nous aidant à comprendre et à organiser les informations plus rapidement et plus efficacement.

Les exemples de cercles ci-dessous montrent comment la proximité peut être utilisée pour nous aider à percevoir les objets comme étant liés. Comme nous le voyons ici, les cercles sont étalés, n’présentant aucune relation, chacun étant perçu comme un objet séparé.

Cependant, lorsque les cercles sont rapprochés les uns des autres, une relation leur est attribuée et ne sont plus perçus comme des objets séparés.

Espace blanc

L’espace blanc est un outil précieux pour créer de la proximité. Prendre le même groupe de cercles et ajouter des espaces nous aide à percevoir les choses différemment. Or, à gauche, la proximité des formes nous fait percevoir les deux groupes comme des colonnes, chacune son propre groupe. A droite, la proximité des formes nous fait percevoir les deux groupes comme des rangées, chacun à nouveau son propre groupe. Utilisez des espaces blancs dans vos conceptions pour renforcer les groupements ainsi que pour les différencier des autres éléments.

Le Pouvoir de Proximité

La proximité est suffisamment forte pour dominer d’autres éléments de variation. Remarquez comment la proximité gagne toujours même lorsque d’autres attributs, tels que la couleur et la forme, sont ajoutés. Essayez comme ils pourraient, la couleur et la forme ne dominent pas la proximité ici et chaque groupe est toujours perçu comme un élément distinct.

La proximité En pratique

Lorsque nous organisons des informations dans nos conceptions, nous pouvons utiliser la proximité pour créer des relations entre les éléments afin de faciliter la compréhension des informations présentées. Par exemple, en regroupant ces images de l’Apple Store à proximité, nous attribuons une relation à l’ensemble du groupe. Nous les percevons comme étant liés et nous nous attendons à ce que le contenu soit similaire.

Cependant, lorsque nous supprimons la colonne centrale, nous percevons soudainement deux groupes distincts et nous attendons un contenu différent entre eux.

Combinaison de Proximité et de similitude

Le regroupement par proximité peut également être combiné avec la similitude pour créer des relations plus fortes. Vu dans cet exemple d’Amazon, le regroupement par proximité et similitude de taille nous fait percevoir deux groupes distincts et attribue plus d’importance au groupe de gauche.

Proximité et hiérarchie

La proximité est excellente pour organiser des éléments hiérarchiques. Dans cet exemple du baril Crate &, les options sont regroupées sous des titres communs, créant des relations, ce qui facilite grandement la numérisation et la recherche d’informations.

Lorsque les en-têtes sont supprimés et que les options sont regroupées sans proximité, nous perdons les relations qui ont été créées et il devient beaucoup plus difficile de scanner rapidement et de trouver les informations souhaitées. Essayez-le vous-même. Allez-y et voyez à quelle vitesse vous pouvez trouver des tasses à café dans le regroupement avec des titres par rapport au regroupement sans titres. Un peu plus difficile d’y passer rapidement, n’est-ce pas?

Conclusion

Comprendre comment utiliser la similitude et la proximité pour affecter les relations entre les éléments de votre travail vous aidera à créer des conceptions qui facilitent l’organisation et améliorent la convivialité de votre travail. Utilisez la similitude et la proximité pour créer des relations et des différences entre les éléments de vos conceptions. Expérimentez l’utilisation de l’espace blanc, de la couleur, de la taille, de la forme et de l’orientation des éléments et mélangez les deux principes pour produire des relations très fortes et engageantes.

Dans la prochaine partie de cette série, nous examinerons la fermeture et le terrain de la figure, et explorerons comment ces deux principes de gestalt utilisent l’espace positif et négatif pour créer des relations simples mais puissantes.

Ressources Et Bonnes Lectures

• Principes de Gestalt sur Scholarpedia.
• « Laws of Organization in Perceptual Forms »: Texte de l’article fondateur de Max Wertheimer de 1923.
• Principes universels de conception révisés et mis à jour: 125 façons d’améliorer la convivialité, d’influencer la perception, d’augmenter l’attrait, de prendre de meilleures décisions de conception et d’enseigner par le design, par William Lidwell, Kritina Holden et Jill Butler. Pub Rockport, 2010.
• Visualisation de l’information: Perception pour le design, par Colin Ware. Elsevier, 2012.

• Principes de conception: La Perception Visuelle Et Les Principes De La Gestalt
• Connecter Et Séparer Les Éléments Par Le Contraste Et La Similitude
• Équilibre Compositionnel, Symétrie Et Asymétrie
• Comment Améliorer Votre Flux De Travail Par Courrier Électronique Avec Une Conception Modulaire
• Améliorer L’Expérience Utilisateur Avec Des Fonctionnalités En Temps Réel

(ml, da, og, jb, il)