Principes de Gestalt dans la conception

Aujourd'hui, je vais discuter un par un des principaux principes de la Gestalt en design tels que la proximité, la fermeture, la continuation, la figure et le fond.

Table des matières

• Principes de Gestalt dans la conception | Proximité
• Principes de Gestalt dans la conception | Continuité
  • Les marques comme exemples de continuité
  • Les peintures comme exemples de continuité
• Principes de Gestalt dans la conception | Destin commun
• Principes de Gestalt dans la conception | Fermeture
  • Application de la fermeture dans la conception du rapport
• Principes de la figure et du sol
• Unilever : un excellent exemple de figure et de terrain
• Conclusion

Principes de Gestalt dans la conception | Proximité

La proximité se produit lorsque les éléments sont placés à proximité les uns des autres. Plus ils sont proches, plus ils semblent liés. Ce principe de Gestalt est parmi les premiers principes à avoir un impact sur notre perception et notre compréhension. 

La façon la plus simple d'indiquer la parenté dans vos rapports est de manipuler la proximité. Ce principe est si puissant qu'il l'emportera même sur l'un des principes de la Gestalt en matière de conception, à savoir la similitude.

Prenons l'exemple de la couleur que nous avons utilisée précédemment. On peut voir qu'en se basant sur le principe de similarité, on va regrouper intuitivement des éléments en fonction de leur couleur.

Regardez ce qui se passe si nous ajoutons des espaces entre les éléments. La proximité l'emporte sur la similarité.

Où utilise-t-on le principe de proximité dans les rapports LuckyTemplates ? Nous pouvons les utiliser soit pour créer une relation entre deux graphiques, soit pour créer un graphique.

Dans le rapport que j'ai créé pour organisé par LuckyTemplates, j'ai fait cette info-bulle. Le graphique en haut de l'image utilise les principes de proximité et de similarité.

Ce que je montre dans ce graphique, c'est chaque course remportée par Hamilton à partir de 2007 jusqu'à aujourd'hui. On constate aisément que la densité de la course remportée par Hamilton de 2015 à 2016 est en augmentation. Nous pouvons le voir parce que nos yeux interprètent la distance et regroupent des barres très denses. 

Dans cet exemple, nous utilisons également le même principe pour créer une relation entre la carte montrant la prévalence de l'asthme chez les adultes et les petits graphiques multiples montrant la prévalence de l'évolution de l'asthme chez les enfants par origine ethnique.

De même, les boutons de navigation utilisent ce principe en plus de la similarité car nous avons tous les éléments à bout portant. On utilise toujours la même distance entre les boutons et une distance plus importante pour tout le reste.

Principes de Gestalt dans la conception | Continuité

Le principe de continuité montre comment des éléments se déplaçant ou donnant l'illusion d'un mouvement dans la même direction sont perçus comme liés.

L'utilisation de ce principe dans la conception peut aider à attirer l'attention du spectateur et à le diriger vers une conception ou une information spécifique .

Comme observé dans l'exemple, les éléments qui sont disposés sur une ligne ou une courbe sont perçus comme étant plus liés que les éléments qui ne sont pas sur la ligne ou la courbe.

Un autre élément important à noter est que si l'œil commence à suivre une tendance ascendante de ligne de points fermés ou une ligne continue, il continuera à le faire jusqu'à ce qu'il rencontre un autre objet qui rompt cette continuité.

Nous reconnaissons les éléments suivant une ligne continue comme un groupe. Plus les segments de ligne sont lisses, plus nous les voyons comme une forme unifiée.

Nos esprits préfèrent le chemin de moindre résistance . Il montre comment nous essayons de suivre le chemin le plus simple pour les éléments continus connectés. Notre cerveau emprunte le chemin le plus logique et le plus simplifié. Nous allons percevoir ces lignes comme deux lignes différentes comme dans le deuxième exemple.

Comment ce principe peut-il nous être utile ? La continuité nous aide à interpréter la direction et le mouvement tout au long de la composition. Cela a lieu lors de l'alignement des éléments , et cela peut aider nos yeux à se déplacer en douceur tout au long de la page. 

Le principe de continuité renforce la perception des informations groupées, créant de l'ordre et guidant les utilisateurs à travers différents segments de contenu.

L'interruption de la continuité peut signaler la fin d'une section et attirer l'attention sur un nouveau contenu .

Les marques comme exemples de continuité

Comme le montre cette diapositive, nous pouvons voir que le principe de continuité s'applique dans la composition du design. Dans le premier exemple, on voit comment un grand titre peut fonctionner à merveille avec le principe de continuité.

Cela suggère que Coca-Cola est un exemple d'une longue tradition de qualité, et nous devrions lui faire confiance. Il s'agit d'une technique de narration très puissante et quelque chose que nous pouvons tous appliquer lorsqu'elle est communiquée dans les rapports.

Il permet à l'utilisateur de relier les points à la conclusion que nous voulons ; par conséquent, cela rend le message beaucoup plus puissant.

Le principe focalisera le regard de l'utilisateur juste après le titre sur la dernière bouteille de Coca-Cola. C'est un exemple parfait d'une grande histoire et d'un magnifique choix d'éléments et de design.

Les deuxième et troisième exemples montrent l'impact de la continuité sur la façon dont nous voyons les images. Nous numérisons naturellement la page dans un motif F ou Z. Cette fois, nous avons scanné la page d'une manière complètement différente. La perturbation de la continuité attire l'attention sur un nouveau contenu.

Dans le logo Amazon, ils ont utilisé efficacement la continuité. Nos yeux se concentrent lorsque la ligne commence à A puis saute à Z. Le message sous-jacent est que nous pouvons tout trouver sur Amazon, chaque produit de A à Z.

Dans l'exemple du logo ProQuest, nous pouvons voir comment l'accent est mis sur le message à la fin, où les yeux seront basés sur le principe de continuité.

Les peintures comme exemples de continuité

Allons encore plus loin dans notre exploration des possibilités de composition. Nous allons explorer un exemple qui utilise à la fois la continuité et les principes communs de Gestalt dans la conception.

La Calydonian Boar Hunt est une véritable œuvre d'art et un tableau célèbre de Peter Paul Rubens en 1612. En plus de la règle des tiers, Rubens a également utilisé à la fois la continuité , le destin commun , les principes de la Gestalt et les attributs préattentifs à la perfection.

Voyons d'abord le tableau. Que regardons-nous en premier ? 

Nos yeux attirent le guerrier à cause de la couleur de la cape. Rubens a utilisé la couleur rouge comme attribut préattentif . Aussi, nos yeux sont attirés par la lance, et nous suivrons naturellement le chemin jusqu'au bout vers l'épaule du sanglier.

Principes de Gestalt dans la conception | Destin commun

Le sujet principal est le sanglier, qui est au centre de l'attention. Rubens le souligne avec l'utilisation de la règle des tiers et en ajoutant un autre principe de Gestalt dans le design - le destin commun .

La loi Gestalt du destin commun stipule que les humains perçoivent des éléments visuels qui se déplacent à la même vitesse ou dans la même direction que des parties d'un seul stimulus.

Un exemple courant de ceci est une volée d'oiseaux. Lorsque plusieurs oiseaux volent dans la même direction, on suppose normalement qu'ils appartiennent à un seul groupe. Les oiseaux qui volent dans une direction différente ne semblent pas être inclus dans le même groupe. 

Dans ce cas, nous pouvons voir que chaque personne dans la scène regarde et a la tête pointée vers le sanglier.

Le mouvement de la scène, l'utilisation de la règle des tiers et les principes de la Gestalt dans la conception sont tous utilisés pour perfectionner ce chef-d'œuvre. Il donne vie à la scène et engage la perception et les émotions de l'utilisateur .

Principes de Gestalt dans la conception | Fermeture

Le principe de fermeture est assez simple. La fermeture se produit lorsqu'un élément est incomplet ou qu'un espace n'est pas fermé. Si une quantité suffisante de la forme est indiquée, le spectateur remplira inconsciemment les informations manquantes. 

Regardez l'image sur la diapositive. Voyez-vous beaucoup de points ou voyez-vous un chien ? Pouvez-vous aussi voir le panda ? 

Notre esprit remplit les points. Nous pouvons voir des formes complètes dans un contexte incomplet. 

La deuxième observation de ce principe est que les éléments qui ont une frontière autour d'eux sont perçus comme étant plus liés. Nous percevons un ensemble d'objets comme un groupe lorsqu'ils sont enfermés dans une zone visuelle qui place une bordure ou une ombre autour d'eux. 

Par exemple, les points de données des deux images sont disposés de manière identique, mais ils sont perçus comme regroupés très différemment. Votre perception de ce qui va ensemble est complètement différente. La fermeture peut être utilisée pour séparer ou lier des choses ensemble .

Application de la fermeture dans la conception du rapport

Partant de ces constats, comment pouvons-nous utiliser ce principe dans notre rapport ? Tout d'abord, nous comprenons maintenant l'importance de la mise en page du fond. Nous savons que si nous rassemblons deux graphiques à l'intérieur de la boîte, nous pouvons impliquer une relation.

Deuxièmement, nous savons que nous pouvons impliquer le même principe à l'intérieur des graphes, comme indiqué dans l'exemple. Troisièmement, nous n'avons pas besoin d'enfermer complètement des composants séparés. Nous remplissons inconsciemment les informations manquantes, et cela est très utile pour désencombrer nos conceptions.

Principes de la figure et du sol

Figure & ground est l'un des principes de Gestalt les plus difficiles en design, mais aussi l'un des plus puissants. C'est l'état dans lequel nous percevons les éléments soit comme objets de focalisation, soit comme arrière-plan. 

Comme la fermeture, la figure et le travail au sol grâce à l' utilisation de l'espace positif et négatif . Il existe dans pratiquement tout ce que nous percevons visuellement, qu'il s'agisse d'une composition, d'un site Web, d'un logo ou d'une icône. 

Notre cerveau sépare le premier plan de l'arrière-plan afin de voir les objets et l'environnement. On l'appelle aussi une relation d'espace négatif-positif.

Les mêmes formes peuvent être vues en avant-plan ou en arrière-plan. La couleur n'a rien à voir avec la détermination s'il s'agit d'un arrière-plan ou d'une figure. 

Voyons quelques exemples pour clarifier les choses. L'affiche du Parrain est le meilleur exemple de figure & fond car on y voit un excellent contraste de couleurs.

Placer la figure de mise au point près de la zone centrale dans le cadre lui donne un équilibre. Le premier plan est plus détaillé que l'arrière-plan. Nous avons un point focal évident de signification, qui est la rose rouge.

L'arrière-plan ne rivalise pas avec le premier plan pour attirer l'attention. Donc, dans ce cas, il est facile d'identifier le point focal et la simplicité de fond de toute l'interface, et l'importance des détails. Restez simple et concentrez-vous sur ce qui compte vraiment . 

Nous pouvons reproduire cet exemple dans la conception de notre rapport. Beaucoup de choses peuvent se produire sur la page avec très peu de graphiques. En fait, ajouter plus d'éléments sans comprendre l'effet peut souvent rendre le message déroutant. Comme le montre cet exemple, l'affiche est tout simplement parfaite, moins c'est plus.

Bon, passons à d'autres exemples. Pouvez-vous facilement identifier lequel est la figure et lequel est le sol ? 

C'est difficile à savoir car les images sont ambiguës. Il y a plus d'une solution à ce qu'est la figure et à ce qu'est l'arrière-plan. Ces types d'images engagent le spectateur et le font s'attarder plus longtemps sur votre image, ce qui peut augmenter l'engagement dans l'histoire que vous voulez raconter. 

Unilever : un excellent exemple de figure et de terrain

Si nous regardons le logo d'Unilever, nous comprendrons à quel point une histoire peut être riche en se basant sur la figure et le fond, mais aussi sur le principe de fermeture.

Le logo d'Unilever ressemble à une grande lettre U. Nous avons tendance à le voir car il nous est familier et nous reconnaissons facilement la lettre. De plus, la taille et le contraste de la forme nous font nous concentrer sur elle et le U devient la figure et le reste, le fond.

Si nous y regardons de plus près, nous voyons que le fond est ambigu et nous pouvons identifier les détails. On distingue un oiseau, un cœur, des vêtements et un poisson.

L'utilisateur découvrira le logo d'une entreprise engagée avec des préoccupations environnementales et plus encore. Ce logo est génial car il est simple, mais transmet une histoire très riche sur l'entreprise.

Ce principe est très puissant, et même s'il est plus souvent utilisé en design graphique et en design informationnel, il faut le comprendre.

La différence entre l'arrière-plan et le premier plan est quelque chose dont nous devons être conscients dans nos rapports.

Conceptions LuckyTemplates pour des rapports
visuels et des effets convaincants : Conceptions de tableaux de bord LuckyTemplates
Tableau de bord dans LuckyTemplates : Meilleures pratiques de conception

Conclusion

L'application des bonnes techniques de principe de Gestalt dans nos rapports LuckyTemplates peut produire une narration convaincante qui peut aider les utilisateurs à relier les points et à rendre le message plus puissant. Nous avons la liberté de choisir le principe à utiliser qui répondrait le mieux aux besoins de notre public.

Tous mes vœux,