En 1910, le psychologue Max Wertheimer eu une idée en observant une série de lampes clignotantes sur le passage à niveau d’un train. Elles étaient similaires aux lumières clignotantes qui entouraient les écriteaux des enseignes de cinémas. Pour le spectateur, il semble qu’une lumière se déplace autour de l’enseigne, voyageant d’ampoules en ampoules, alors qu’en réalité il ne s’agit que d’une série d’ampoules qui s’allument et s’éteignent chacune leur tour, sans se déplacer. Cette observation conduit à une étude en 1912 sur la perception des objets dont le résultat fut l’élaboration d’une liste de principes de perceptions. Ces principes sont aujourd’hui au coeur de pratiquement toute production graphique.

 

Cet article est le premier d’une liste d’articles dédiés aux principes de design, traduits et adaptés de l’anglais, provenants de Smashing Magazine avec leur autorisation.

 

 

Cet article est le premier d’une série consacrée aux principes de design :

 

 

 

Nous commençons cette série d’articles avec la Théorie de Gestalt parce que beaucoup de principes de design sont basés sur celle-ci. On va d’abord faire un peu de théorie puis s’attaquer à quelques règles de design simples basées sur les principes de Gestalt.

 

Les prochains articles de cette série parleront de certains aspects particuliers du design, comme l’équilibre ou la hiérarchie. On verra comment les les principes de Gestalt influencent ces différents aspects à travers plusieurs exemples concrets.

 

Principe fondamental de la Théorie de Gestalt

“Le tout est différent de la somme de ses parties.”

— Kurt Koffka

Si vous regardez un groupe d’objets, vous percevrez d’abord le groupe avant de voir les objets individuellement. Vous verrez l’ensemble comme plus grand que la somme des objets de ce groupe. Même si ces objets sont complètement séparés et différentiables, vous les verrez comme un tout. C’est le point de départ de la Théorie de Gestalt. De là découlent plusieurs lois.

 

L’émergence

 

L’émergence consiste à faire apparaître des formes complexes à partir de règles simples. Quand vous cherchez à identifier un objet, vous allez d’abord le regarder sous tout les angles pour faire ensuite correspondre ses contours à des formes et objets qui vous sont familiers et finir par identifier cet objet. Ensuite seulement, vous commencerez à analyser les différentes parties qui le compose. C’est le principe de la bonne forme.

 

lorsque vous créez, gardez à l’esprit que les gens vont d’abord identifier un élément par sa forme générale avant de s’attaquer aux détails. Un objet simple et bien défini communique plus rapidement et efficacement qu’un objet complexe dont il est difficile d’identifier la forme globale.

 

La réification

 

« L’esprit compense les informations manquantes d’une forme ou d’un contour parasité par d’autres données visuelles pour aboutir à un percept signifiant ».

 

La réification (ou loi de la continuité ) nous explique que notre cerveau remplace instinctivement les parties manquantes d’un objet par ce qu’il connait de celui-ci. C’est un aspect de notre perception qui nous force à voir des schémas familiers que nous avons en mémoire dans ce que nous essayons d’identifier. C’est cette partie inconsciente de notre cerveau qui nous pousse à compléter les vides pour identifier des formes.

 

La réification suggère que nous n’avons pas besoin de montrer l’intégralité d’un objet à une personne pour que celle-ci l’identifie. Supprimer une partie du contour d’une forme n’est pas un problème à condition de laisser au spectateur suffisamment d’informations pour qu’il puisse l’identifier de lui même.

 

La multistabilité

 

« Dans certains cas, s’il n’y a pas assez d’informations fournies, une forme peut être perçue de différentes manières »

 

Notre cerveau déteste l’incertitude. Si une forme peut être 2 choses différentes à la fois, notre esprit va en privilégier une et mettre l’autre de coté. Impossible de voir l’autre forme sans effort mental. Dans les principes ci-dessous vous pourrez trouver un exemple avec 2 visages qui forment un vase. Cette image est l’exemple parfait de la multistabilité, car elle ne possède pas suffisamment d’informations pour qu’on puisse déterminer s’il s’agit effectivement d’un vase, ou de 2 visages.

 

Si vous voulez changer la perception d’une personne, n’essayez pas de tout changer d’un coup. Trouvez un moyen de l’amener à regarder votre travail sous un autre angle. Ensuite, renforcez ce nouveau point de vue en affaiblissant la perception de l’angle original.

 

L’invariance

 

« les objets peuvent être reconnus quelque soit leur orientation, leur échelle ou leur contexte de présentation. »

 

L’invariance est une propriété de la perception qui nous dit que les objets sont reconnus indépendamment de leur orientation/échelle/contexte. Comme nous voyons souvent les objets sous différentes perspectives, nous avons développé la capacité de les reconnaître dans n’importe quelle situation. Imaginez que vous pouviez reconnaître quelqu’un que s’il ne se tenait en face de vous, mais pas de profile ni de dos. L’invariance nous permet heureusement de ne pas subir ce problème.

 

Vous pouvez voir différents exemples de cette propriété dans les exemples ci-dessous. L’idée fondamentale c’est que les principes de Gestalt ne sont que des moyens d’influencer nos perceptions et donc des guides pour nous aider sur notre manière de communiquer par l’objet. Ces principes sont le coeur du language visuel dans lequel nous évoluons.

 

Principes de Gestalts

 

La plupart de ces principes sont relativement faciles à comprendre. Une règle commune les lies tous.

 

« Tous égaux, des éléments qui sont reliés par X tendent à être perçus comme regroupés en unités d’ordre supérieures. »

— Stephen Palmer

 

Beaucoup des principes qui suivent adoptent cette règle.

 

Loi de la Prégnance (ou bonne forme)

 

« En présence d’une forme complexe ou ambigüe, l’oeil préfèrera percevoir un ensemble de formes très simples. »

C’est le principe fondamental de la Gestalt. Nous préférons les choses simples, claires et ordonnées. Instinctivement, ces choses sont plus rassurantes. Elles nous prennent moins de temps à assimiler et présentent moins de mauvaises surprises.

 

Quand nous sommes confronté à des formes complexes, nous avons tendances à les réorganiser dans notre esprit pour en composer un ensemble de formes simples ou une seule forme plus simple. Sur l’image de gauche vous allez plutôt voir un cercle, un rectangle et un triangle (comme montré à droite), que la forme complexe que compose l’ensemble des 3.

 

 

Dans ce cas, voir 3 objets simples distincts est plus simple que de voir une seule forme complexe. Dans d’autres cas il est plus simple de voir un seul object simple, ce qui nous amène à…

La Fermeture

 

« Quand on regarde un ensemble d’éléments arrangés de manière complexe, on a tendance à y chercher une forme familière. » 

 

Comme pour la Prégnance, la Fermeture cherche la simplicité. La Fermeture est l’opposé du résultat de la Prégnance. Avec la Prégnance on simplifie un ensemble en un groupe de formes basiques, tandis qu’avec la Fermeture, on remplis les vides d’une forme ou d’un ensemble de formes pour en imaginer une image complexe familière. Notre oeil va remplir les parties manquantes pour construire la forme finale dans notre esprit. C’est une utilisation concrète de la loi de la réification qu’on a vu plus haut.

02-closure

Sur l’image ci-dessus, vous pouvez voir un triangle blanc, alors même que l’image n’est composée que d’un ensemble de 3 formes ressemblant à Pac-Man. Sur l’image de droite, vous voyez un Panda alors que le dessin n’est composé que de formes grossières et incomplètes. Voir un Panda et un triangle est plus simple que d’essayer de donner du sens à chacune des formes qui les composent.

 

La Fermeture peut être pensée comme une « colle », liant les éléments ensembles. C’est la tendance de l’esprit humain à chercher des formes reconnaissables dans son environnement.

 

La clé de la Fermeture est de fournir suffisamment d’informations pour que l’oeil finisse le travail tout seul. S’il manque trop d’éléments, la forme ne sera perçue comme un ensemble de formes disparates et incompréhensibles. Si trop d’éléments sont présents, il n’y a pas lieu de faire intervenir la Fermeture.

Symétrie et Ordre

 

« Notre oeil préfère l’ordre au chaos. »

 

La symétrie nous donne un sentiment de solidité et d’ordre, que nous avons tendance à rechercher. Il est dans notre nature de préférer l’harmonie au chaos. Ce principe nous conduit à vouloir équilibrer nos compositions. Elles n’ont cependant pas besoin d’être parfaitement symétriques pour être équilibrées.

 

03-symmetry

Voici 3 paires d’accolades. Le principe de proximité que vous verrons plus bas dans cet article, pourrait nous suggérer que nous voyons autre chose. Mais ce n’est pas le cas, c’est donc que la symétrie prend le pas sur la proximité. On ne voit pas 6 accolades, mais 3 paires, 3 groupes de 2 accolades. Ce principe fonctionne de tel sorte que lorsque que nous percevons une symétries entre plusieurs éléments, nous avons tendance à les associer pour former des groupes.

Comme notre oeil cherche en priorité la symétrie et l’ordre, ces principes peuvent être utilisés pour communiquer efficacement et rapidement.

Figure et Fond

 

« Les éléments sont perçus soit comme des figures (premier plan), soit comme un fond (arrière plan). »

 

Figure et Fond font référence à la relation entre les élément positifs et les espaces négatifs. L’idée c’est que l’oeil va séparer une forme de son fond par rapport à sa compréhension de l’image. C’est l’une des premières choses que les gens vont faire inconsciemment lorsqu’ils vont regarder une composition.

 

04-figure-ground
 

La relation Figure/Fond peut être soit stable soit instable, en fonction de la facilité avec laquelle on peut déterminer qui est quoi. L’image de gauche représente le parfait exemple de ce que peut être une relation instable. En effet vous allez soit voir un verre, soit 2 visages qui se font face. Tout dépend de ce que vous considérez comme étant le premier et l’arrière plan. De plus, il est assez simple de se forcer à changer de perception, d’inverser votre interprétation. C’est ce qu’on appelle une relation instable.

 

Plus une relation Figure/Fond est stable, plus il vous sera facile d’amener votre audience à se concentrer sur l’élément que vous voulez qu’elle voit. 2 principes similaires peuvent vous aider :

 

  • Zone : si 2 éléments se chevauchent, le plus petit des 2 sera considéré comme la Figure, l’autre comme le Fond. L’image de droite ci-dessus illustre ce fait. Dans les 2 cas, le petit carré est considéré comme la Figure, quelque soit sa couleur.
  • Convexité : les formes convexes ont plutôt tendance à être considérées comme des formes, au contraire des formes concaves.

 

Connectivité uniforme

 

« Des éléments connectés visuellement sont perçus comme liés entre eux, au contraire des éléments sans connexion. »

 

Sur cette image, des lignes relient 2 paires d’éléments. Cette connexion nous laisse à penser que ces éléments sont reliés entre eux d’une manière ou d’une autre.

 

05-uniform-connectedness
 

De tous les principes qui suggèrent que des objets sont reliés, la connectivité uniforme est le plus efficace. Dans cette image, même si nous voyons 2 cercles et 2 carrés, la relation cercle/carré est plus forte parce qu’elle est visuellement connectée.

 

Notez que les lignes n’ont pas besoin de toucher les éléments que la connexion soit perçue.

 

Régions communes

 

« Des éléments sont perçus comme faisant partis d’un groupe s’ils sont placés dans une même région délimitée. »

 

Un autre moyen d’établir une connexion entre des éléments est de les grouper entre eux dans une zone délimitée. Tout ce qui sera dans le groupe sera perçu comme lié. Tout ce qui sera en dehors du groupe sera vu comme non lié. Les cercles de l’image ci-dessous sont tous les mêmes et pourtant nous voyons 2 groupes distincts. Les cercles de chaque groupe sont visuellement liés entre eux, mais pas aux cercles de l’autre groupe.

 

06-common-regions
 

La manière la plus simple de créer un groupe est de dessiner un cadre autour comme ci-dessus. Placer les éléments sur des fonds de différentes couleurs peut aussi marcher.

 

 

Proximité

 

« les objets proches les uns des autres sont perçus comme connectés »

 

La proximité est similaire aux régions commune mais utilise l’espace comme limite. Quand des éléments sont proches les uns des autres, ils sont vus comment appartenant à un même groupe plutôt qu’en tant qu’éléments individuels. Le fait que les éléments du groupe soit plus proches entre eux que n’importe quel élément extérieur au groupe renforce cette perception.

 

07-proximity
 

Les objets n’ont pas besoin d’être similaires entre eux tant qu’ils sont groupé dans un ensemble homogène qui leurs permet d’avoir une relation de proximité.

 

Continuité

 

« Nous poursuivons naturellement la direction suggérée par un arrangement d’objets. »

 

Il est instinctif de suivre une rivière, un chemin, la ligne d’une cloture…Une fois que vous regardez ou marchez dans une certaine direction, vous continuez de regarder ou marcher dans cette direction jusqu’à ce vous tombiez sur quelque chose de pertinent, ou que vous décidiez qu’il n’y a rien d’intéressant à voir.

 

 

Une autre interprétation qu’on peut faire de ce principe est qu’on va continuer de percevoir des forme même après que celles-ci soient « finies ». Par exemple sur l’image ci-dessus, on voit une ligne et une courbe se croiser au lieu de voir 4 lignes et courbes se rejoindre en un point central.

 

Synchronicité (destin commun)

 

« Des éléments qui bougent dans la même direction sont perçus comme mieux connectés que ceux qui sont stationnaires ou qui bougent dans des directions différentes. »

 

Quelque soit leurs apparences, leurs éloignements, ou leurs échelles, si un ensemble d’objets se déplace dans une direction commune, cet ensemble est perçu comment appartenant à un même groupe.

 

Les éléments n’ont même pas besoin de bouger pour qu’on leur attribue une synchronicité, ce qui compte c’est la destination commune. Par exemple, si 4 personnes sont enfermés ensembles dans une pièce, et que 2 d’entre elles se déplacent vers la droite, elles seront vues comme ayant une destination commune. Si elle ne font que regarder dans la même direction, elle seront aussi perçues comme ayant un objectif commun.

 

 

 

Dans cet exemple, les flèches sont suffisantes pour indiquer que les éléments partagent un objectif commun. Le mouvement ou le changement ne sont pas nécessaires, mais peuvent être une meilleure indication d’un destin commun que des flèches ou une orientation similaire qui ne font que suggérer le mouvement.

 

Parallélisme

 

« Des éléments parallèles entre eux sont plus souvent associés que des éléments qui ne sont pas parallèles. »

 

Ce principe est similaire à celui sur le Destin Commun vu ci-dessus. Les lignes sont souvent interprétées comme pointant quelque chose ou bougeant dans une direction. Des lignes parallèles perçues comme pointant ou bougeant dans la même direction sont automatiquement associées entre elles par l’oeil.

 

10-parallelism
 

Notons que pour que le parallélisme soit perçu , les lignes peuvent très bien être des courbes ou des formes à condition que ces dernières soient soient un minimum composées de lignes.

 

Similarité

 

« Des éléments qui partagent des caractéristiques similaires sont mieux associés par l’oeil que des éléments qui ne partagent pas ces caractéristiques. »

 

N’importe quelle type de caractéristique peut créer une similarité entre objets : couleur, forme, taille, texture etc. Lorsque que quelqu’un remarque une ou plusieurs caractéristiques entre objets, il associe consciemment ou non ces objets.

 

Sur l’image ci-dessous, les cercles rouges sont associés aux autres cercles rouges et les cercles noirs aux noirs grâce à leur couleurs similaires. Les cercles rouges et noirs sont dissociés les uns des autres bien que ceux-ci soient tous des cercles.

 

11-similarity
 

Sur internet vous trouverez par exemple le cas des liens hypertextes qui suis cette logique. Ils sont souvent bleu et soulignés. Cette similarité permet à l’internaute de savoir que tous les textes bleu soulignés sont des liens.

 

Point Focal, Emphase

 

« Des éléments avec un point d’intérêt, une emphase ou une différence attireront et retiendrons l’attention du spectateur. »

 

Ce principe suggère que votre attention sera d’abord dirigée vers des points de contrastes, les éléments différents du reste en quelque sorte. Dans l’exemple ci-dessous, votre oeil devrait d’abord être attiré par le carré. C’est une forme différente, d’une couleur différente, du reste du schéma. De plus, une légère ombre vient ajouter un peu d’emphase.

 

12-focal-point
 

Le principe du point de focal est notamment très utilisé pour nous aider à identifier rapidement les points importants d’un environnement inconnu.

 

Les principes de similarité et de point de focal sont connectés. Le point de focal ne peut pas être perçu sans la similarité qu’il existe entre les autres éléments autour de celui-ci.

 

Expériences passées

 

« Les expérience passées de l’observateur influencent la perception que celui-ci a des éléments qu’on lui présente. »

 

C’est probablement l’un des principes les plus faibles de la Gestalt. Groupé avec d’autres principes, les autres principes prendront toujours le pas sur les expériences passées.

 

Notre expérience est unique, elle est unique à chaque individu, il est donc difficile de faire des suppositions sur la manière dont elle influence notre perception. Cependant il y a quelques expériences que nous partageons, comme les connotations que nous donnons aux couleurs, qui sont directement tirées de notre vécu.

 

13-past-experience
 

Au cours de votre vie vous avez probablement vu des centaines de feux de circulation routière. Avec les années nous avons appris que le feu rouge signifie stop et le feu vert que l’on peut avancer. Nous sommes donc conditionné à penser que le rouge signifie l’interdiction et la fermeture, alors que le vert tend plutôt vers l’autorisation et l’ouverture.

 

Beaucoup de nos expérience communes sont culturelle. Les couleurs en sont un bon exemples. Dans certains pays, le blanc est considéré comme symbole de pureté et d’innocence, et le noir est attribué à la mort et au diable. Dans d’autres pays ces interprétations sont inversées. Les conventions émergent souvent d’expériences communes, mais il est important de se rappeler que l’on ne partage pas tous les mêmes expériences.

 

Conclusion

 

Il est utile d’assimiler les principes de la Gestalt. Ce sont les fondations de tout le travail visuel que nous faisons en tant que créateurs. Ces lois décrivent comment nous percevons les objets en tant qu’humains.

 

Les principes ci-dessus devraient être assez simple à comprendre. Pour la plupart d’entre eux, les images et définitions sont probablement tout ce dont vous avez besoin pour les comprendre. Cependant, assimiler ces principes ne veut pas dire comprendre la manière dont ils influencent le design aujourd’hui.

 

Dans le prochain article de cette série, on verra donc comment les principes de la Gestalt influencent le design. On verra comment la symétrie nous aide à équilibrer une composition et comment combiner les points de focales et principes de similarité pour créer une hiérarchie visuelle.