Cecilie Dahl
Partner | Senior Rådgiver
Les principes de Gestald en UI design
Comment devenir un maitre de la communication visuelle.
Notre cerveau essaie toujours de donner un sens au monde en comparant des expériences passées ou des modèles visuels et en reliant ce que vous voyez à quelque chose de familier – «reliez les points». Le cerveau a sa propre façon «étrange» de percevoir les formes, de regrouper les informations et de combler les lacunes pour avoir une vue d’ensemble.
Vous avez probablement regardé le ciel plusieurs fois et remarqué un nuage de forme inhabituelle qui ressemblait à un animal ou un objet célèbre. Vous êtes-vous déjà demandé pourquoi ou comment créer cette connexion simplement en regardant un nuage?
Tout cela à cause du fonctionnement de notre cerveau.
Des designers exceptionnels comprennent le rôle important que joue la psychologie dans la perception visuelle. Que se passe-t-il lorsque les yeux de quelqu'un rencontrent votre design? Comment vos pensées répondent-elles au message que vous essayez de transmettre?— Laura BuscheBrand Content Strategist at Autodesk
Comprendre comment fonctionne votre cerveau vous aidera à devenir un designer plus avisé et un maître de la communication visuelle. Cela peut vous aider à décider quels éléments visuels sont les plus efficaces dans une situation donnée, afin que vous puissiez les utiliser pour influencer la perception, diriger l’attention et provoquer un changement de comportement. Ce qui est particulièrement utile lorsqu’il s’agit de conception ciblée, de résolution de problèmes et intuitive; La conception d’interface utilisateur.
Qu’est-ce que Gestalt?
Gestalt (forme en allemand) est un ensemble de principes de perception visuelle développés par des psychologues allemands dans les années 1920. Il repose sur la théorie selon laquelle «un tout organisé est perçu comme supérieur à la somme de ses parties».
Les principes de la gestalt tentent de décrire comment les gens perçoivent les éléments visuels lorsque certaines conditions s’appliquent. Ils reposent sur quatre principes importants:
Identification
Les humains ont tendance à identifier les éléments d’abord dans leur forme générale. Notre cerveau reconnaît un objet simple et bien défini plus rapidement qu’un objet détaillé.
Regroupement
Les humains peuvent reconnaître des objets même lorsque des parties d’entre eux manquent. Notre cerveau correspond à ce que nous voyons avec des modèles familiers qui sont stockés dans notre mémoire et comblent les lacunes. Nous créons un nouvel objet de plusieurs composants séparés.
Helheten er noe annet enn summen av delene.— Kurt Koffka
Multi-Stabilité
Les gens interpréteront souvent les objets ambigus de plusieurs manières. Notre cerveau regarde dans les deux sens entre les options dans la recherche de la sécurité. En conséquence, un point de vue deviendra plus dominant, tandis que l’autre sera plus difficile à voir.
Variantes
Les humains peuvent reconnaître des objets simples indépendamment de la rotation et de l’échelle. Notre cerveau peut percevoir les objets sous des angles différents, malgré le fait qu’ils soient différents.
Illusions d'optique
Les informations que notre œil envoie au cerveau remettent en question notre perception de la réalité.
Voici les principes Gestalt qui peuvent être utilisés dans la conception UI design d’aujourd’hui.
Proximité
Les éléments disposés à proximité les uns des autres sont perçus comme plus liés que ceux qui sont plus éloignés les uns des autres. De cette manière, les différents éléments sont considérés principalement comme un groupe plutôt que comme des éléments individuels.
Comment le principe de proximité s’applique-t-il au UI-design?
Nous pouvons utiliser le principe de proximité dans la conception de l’interface utilisateur pour regrouper des informations similaires, organiser le contenu et nettoyer les mises en page. Une bonne utilisation aura un impact positif sur la communication visuelle et l’expérience utilisateur. Comme le dit le principe, les objets liés les uns aux autres doivent rester proches les uns des autres, tandis que les objets non liés doivent rester plus éloignés. L’espace blanc joue ici un rôle important, car il crée un contraste qui guide les yeux des utilisateurs dans la direction voulue.
Les espaces blancs peuvent augmenter la hiérarchie visuelle et le flux d’informations, et contribuer à des mises en page faciles à lire et à numériser. Cela aidera les utilisateurs à atteindre leurs objectifs plus rapidement et à plonger plus profondément dans le contenu.
Espaces communs
Au même titre que le principe de proximité, les éléments placés dans une même zone sont perçus comme groupés.
Similarité
Les éléments qui partagent des caractéristiques visuelles similaires sont perçus comme étant plus liés que ceux qui ne partagent pas des caractéristiques similaires.
Comment le principe d’égalité s’applique-t-il au UI-design?
Nous avons tendance à percevoir les éléments similaires comme groupés ou modelés. On peut penser qu’ils servent le même objectif. La similitude peut nous aider à organiser et à classer les objets dans un groupe et à les associer à une signification ou à une fonction spécifique.
Il existe différentes manières de concevoir des éléments perçus comme similaires et donc liés. Celles-ci incluent la similitude de couleur, taille, forme, texture, dimension et orientation; certains d’entre eux étant plus communicatifs que d’autres (par exemple, couleur> taille> forme).
Lorsqu’une similitude se produit, un objet peut être souligné en étant différent du reste; cela s’appelle «Anomalie» et peut être utilisé pour créer un contraste ou un poids visuel. Il peut attirer l’attention de l’utilisateur sur un contenu spécifique (point focal), tout en aidant à la numérisation, à la découverte et au flux global.
Fermeture
Un groupe d’éléments est souvent perçu comme une seule forme ou figure reconnaissable. La fermeture se produit également lorsqu’un objet est incomplet ou que certaines de ses parties ne sont pas fermées
Comment le principe de fermeture s’applique-t-il au UI-design?
Comme le dit le principe de fermeture, lorsque le cerveau reçoit la bonne quantité d’informations, le cerveau sautera aux conclusions en comblant les lacunes et en créant un tout unifié. De cette manière, nous pouvons réduire le nombre d’éléments nécessaires pour communiquer des informations, réduire la complexité et rendre la conception plus attrayante.
La fermeture peut nous aider à minimiser le bruit visuel et à transmettre un message, et à renforcer un concept dans une pièce assez petite.
Symétrie
Les éléments symétriques ont tendance à être perçus comme appartenant ensemble indépendamment de la distance, ce qui nous donne un sentiment de solidité et d’ordre.
Comment le principe de symétrie s’applique-t-il au UI-design?
Les éléments symétriques sont simples, harmonieux et visuellement agréables. Nos yeux recherchent ces qualités avec l’ordre et la stabilité, pour donner un sens au monde. Pour cette raison, la symétrie est un outil utile pour communiquer des informations rapidement et efficacement. La symétrie est confortable et nous aide à nous concentrer sur ce qui est important.
Les compositions symétriques sont satisfaisantes, mais elles peuvent aussi être un peu ternes et statiques. La symétrie visuelle a tendance à être plus dynamique et intéressante. L’ajout d’un élément asymétrique à une conception autrement symétrique peut aider à attirer l’attention tout en faisant une impression; quelque chose d’utile pour tous les endroits intéressants ou par exemple un appel à l’action.
La symétrie, associée à une bonne asymétrie, est importante dans toute conception.
Continuation/Continuité
Les éléments disposés en ligne ou en courbe douce sont perçus comme étant plus liés que ceux qui sont disposés au hasard ou en ligne dure.
Comment le principe de continuité s’applique-t-il au UI-design?
L’élément qui suit une ligne continue est perçu comme groupé. Plus les segments de ligne sont lisses, plus nous les considérons comme une forme unifiée; notre esprit préfère le chemin de la moindre résistance. La continuité nous aide à interpréter la direction et le mouvement à travers une composition. Cela se produit lorsque vous ajustez des éléments, et cela peut aider nos yeux à se déplacer en douceur sur la page et à améliorer la lisibilité.
Le principe de continuité renforce la perception des informations groupées, crée de l’ordre et guide les utilisateurs à travers différents segments de contenu. La perturbation de la continuité peut signaler la fin d’un paragraphe qui attire l’attention sur un nouveau contenu.
La disposition linéaire des lignes et des colonnes est un bon exemple de continuité. Nous pouvons les utiliser dans des menus et sous-menus, des listes, des présentations de produits, des carrousels, des services ou des vues de processus / progrès.
Direction commune
Les éléments qui se déplacent dans la même direction sont perçus comme plus liés que ceux qui se déplacent dans des directions différentes, ou qui ne bougent pas du tout.
Comment le principe de la direction commune s’applique-t-il au UI design?
Quelle que soit la distance entre les éléments ou la différence d’apparition possible, s’ils bougent ou changent ensemble, ils sont perçus comme liés. Cet effet peut se produire même lorsque le mouvement est impliqué, par d’autres éléments visuels. Le principe de direction commune est plus puissant lorsque les éléments se déplacent de manière synchronisée; dans le même sens et à la même heure et à la même vitesse. Il peut aider à regrouper les informations pertinentes et à lier les actions aux résultats.
L’interférence avec un mouvement synchronisé peut capter l’attention des utilisateurs et la diriger vers un élément ou une fonction spécifique. Il peut également établir des relations entre différents groupes ou États.
Conclusion
le UI design ne se résume pas à de jolis pixels et de superbes graphismes. C’est principalement une question de communication, de performance et de commodité. Les principes de la Gestalt sont toujours valables et nous aident à atteindre ces objectifs; pour créer une bonne expérience pour les utilisateurs et atteindre les objectifs de l’entreprise.
