Gestalt

Le mot Gestalt qui signifie « forme » en Allemand est aussi une théorie qui définit un certain nombre de lois sur la perception humaine. Nous allons voir dans cet article comment certaines de ces lois peuvent être utilisées dans le langage graphique.

Introduction

Pour faire simple, la Gestalt est une théorie, une école de pensée, qui étudie comment les humains perçoivent les choses. Les théoriciens de la Gestalt prêchent que notre perception ne se concentre pas sur des « points isolés », mais par une vision du « tous ».

Lorsqu’un observateur regarde une composition graphique, il a tendance à ordonner les éléments de cette composition afin de faciliter et clarifier leur lecture. Notre cerveau organise, interprète et classe les éléments afin de simplifier la complexité visuelle de notre environnement. Cette simplification s’effectue en regroupant les entités qui présentent des caractéristiques communes.

La Gestalt s’intéresse à la façon dont ces groupes sont formés et comment ceci affecte notre perception. En connaissant certaines lois de la Gestalt, le graphiste va être en mesure de comprendre et d’appliquer ces principes pour créer l’unité, la variété ou l’équilibre dans ses visuels.

Les lois de la Gestalt

Simplicité

Devant un problème visuel notre cerveau cherchera toujours la solution la plus simple parce que le monde est visuellement si complexe qu’il n’est tout simplement pas possible d’en extraire toute l’information sans une simplification préalable. Notre esprit a donc tendance à exclure la complexité au profit de la simplification afin de reconnaître des formes simples et à les relier.

Ce penchant vient probablement de l’urgence à différencier les situations dangereuses des situations bénignes. Le raccourci nous fait alors gagner un temps précieux pour réagir à une situation si celle-ci le nécessite.

En utilisant le concept de simplicité nous pouvons assembler des éléments identiques pour créer une unité. Par exemple, une surface rempli d’un motif composé de carrés identiques, sera perçue par notre cerveau comme une surface unitaire et non comme une multitude de plusieurs petits carrés. Dans la même idée, lorsque vous regardez un parc, vous voyez une pelouse verte et non tous les brins d’herbes individuellement.

Principe de proximité

Le cerveau a tendance à regrouper des éléments qui sont placés à proximité pour former un ensemble cohérent. Des éléments placés côte à côte sont perçues comme des éléments ayant un rapport entre eux. Ils forment dans notre esprit des sous-ensembles qui vont alors fonctionner comme un tout.

Illustration du principe de proximité

Application du principe de proximité en webdesign

Lorsque vous composez une page web, certains éléments ont des liens entre eux. Une manière efficace de le montrer est d’appliquer ce principe de proximité. Pour illustrer cela, observons des exemples pris sur le web.

Voici le programme ciné d’un grand groupe de cinéma Français. Le titre des films est placé à égale distance des paragraphes de contenus texte se trouvant au dessus et en dessous. Cela ne facilite pas la lisibilité du programme car l’œil hésite à associer ce titre à l’élément du bas ou ou à l’élément du haut.

En établissant une proximité entre le titre et son contenu texte on aide l’observateur à faire des regroupements qui facilite la lecture du programme ciné.

Principe de similarité

Le cerveau a tendance à regrouper des éléments qui se ressemblent. Si par exemple tous les éléments d’une composition sont à égales distances, le critère de regroupements se fera sur la ressemblance des éléments. Cette ressemblance peut être une ressemblance de forme, de couleurs, de texture, de taille …

Illustration du principe de similarité

Application du principe de similarité en webdesign

Sur cette copie d’écran, les 3 éléments réunis sous le titre « How to use Product Planner » sont traités de façon similaire sur le plan graphique. Cela permet à notre esprit de regrouper ces 3 éléments comme faisant partie du même groupe. Ces trois encadrés ayant un lien (ils se rattachent tous les 3 au thème « How to use Product Planner »), le graphiste a joué sur le principe de similarité (même traitement graphique) pour le communiquer à l’observateur.

Sur cette page web du site d’Apple, le principe de similarité a également été appliqué. Il nous permet de distinguer 6 groupes distincts que j’ai numéroté en rouge.

A noter que lorsque les principes de proximité et de similarité sont appliqués en même temps, l’effet de regroupement est renforcé.

Principe de continuité

On parle aussi de principe d’alignement pour parler du principe de continuité.

Si des éléments d’une composition présentent un ordonnancement formant un parcours régulier et directionnel, le cerveau tracera une ligne optique imaginaire qui reliera ces éléments entre eux. Notre regard a tendance à suivre un chemin régulier pour mettre en rapport des formes présentent dans une composition. Si un élément majeur s’interpose entre des éléments contigus, la ligne optique est rompue.

Cela permet par exemple de diriger l’attention de l’observateur d’un point de la composition vers un autre. En effet, une fois que notre œil regarde dans une direction, il aura tendance à suivre cette direction jusqu’à ce qu’il rencontre un élément significatif. En photographie, on parle de lignes de forces et de points focales. Le photographe utilise souvent des alignements dans sa composition (routes, rivières, lignes électriques, rangée d’arbre …) pour guider le regard vers le sujet principal.

Illustration du principe de continuité

Application du principe de continuité en webdesign

Cette copie d’écran présente la page d’accueil d’un site pour un restaurant. Quoi de plus important pour un restaurant que de montrer ses spécialités culinaires ? Ici, le designer à mis en évidence la photographie d’un plat de la carte du restaurant en choisissant un arrière plan neutre (photographie noir et blanc) sur lequel la photographie en couleur se détache bien. L’attention de l’observateur sur cette photo de plat est renforcé par un principe de continuité. En effet, l’alignement des chaises et des tables (flèche blanche) de la photo d’arrière plan dessine dans notre esprit une ligne optique virtuelle qui conduit le regard vers la photographie du plat.

Sur le site de Mark Boulton, j’ai dessiné à l’aide de lignes rouges, l’alignement des éléments. Ces alignements ont probablement été mis en place par l’utilisation d’une grille de mise en page. En glissant le long de ces lignes virtuelles, les alignements aident le regard a circuler facilement dans la page.

Principe de fermeture

Le cerveau aime regrouper des formes de façon à constituer des ensembles visuels fermés et cohérents. Le cerveau est capable de reconnaitre un sujet avec seulement quelques lignes bien esquissées.

En dessin stylisé l’artiste ne trace que quelques lignes et courbes, pourtant nous sommes capables de reconnaitre de quoi il s’agit. C’est de cette manière que l’artiste implique l’observateur dans son œuvre, en incitant son regard à imaginer ce qui manque pour reconstituer le sujet.

Retenez que ce n’est pas la quantité mais la qualité des informations visuelles qui vous permet de lire une composition graphique.

Illustration du principe de fermeture

Application du principe de fermeture en webdesign

Ce site à pour thème le golf. Le tracé en arc de cercle de l’arrière plan évoque facilement une balle car notre regard complète le dessin pour visualiser un cercle complet.

Sur le site Amaztype, une animation Flash construit progressivement un mot avec une accumulation d’images. Ici le mot suggéré est le mot « TASCHEN ». Bien que le mot ne soit pas achevé, nous n’avons aucun mal à reconnaitre et à lire ce mot. Ce phénomène est possible grâce au principe de fermeture.

Principe de la prégnance

La prégnance ou principe de la « bonne forme » est le principe selon lequel les éléments s’organisent en une forme plutôt qu’en une autre et de ce fait s’impose à l’esprit pour faire apparaitre une forme connue. Étant habitué aux figures géométriques, nous auront tendances à regrouper sous une même forme plusieurs objets disparates s’ils sont placés de manière suffisamment évocatrices. C’est cet effet qui nous permet par exemple de voir dans les étoiles, des triangles, des trapèzes … Ce principe s’applique par exemple lorsque vous reconnaissez des objets en observant les nuages. D’un individu à l’autre, pour un même groupe de nuages, l’objet reconnu ne sera pas forcément le même. En effet, il y a quelque chose de très personnel et subjectif dans cette reconstitution, car elle fait référence à nos expériences qui sont uniques pour chaque individu.

Illustration du principe de la prégnance

Exemple du principe de la prégnance

Application du principe de l’expérience passée en webdesign

Sur cette magnifique photographie de Mehmet Ozgur, on peut reconnaitre le corps d’une femme dans une volute de fumée. Si vous avez fait vœux de chasteté, peut être aurez-vous un peu plus de mal à reconnaitre le corps dont je parle. En tout cas, cette image est une belle illustration de notre capacité à appliquer le principe de l’expérience passée.

La loi de prégnance est fréquemment utilisée dans la conception des logos car elle apporte un côté trompe l’oeil qui captive le spectateur. Dans le logo « Carrefour » par exemple, l’union des deux formes rouge et bleu dessine un « C » imaginaire correspondant au « C » de Carrefour.

Conclusion

Les lois de la Gestalt sont des principes simples à comprendre et tous peuvent être appliqués dans vos design web. Certains d’entre eux comme les lois de proximité et similarité sont des fondamentaux pour améliorer le confort de lecture des pages de contenu. D’autres comme les principes de fermeture ou de prégnance sont des moyens astucieux pour éveiller l’imagination des spectateurs et retenir leur attention.

Sources :

- Ouvrage: « Graphisme et ergonomie des sites web » – Cristina Barroca – Edition Dunod
- Site http://www.desenvolvimentoparaweb.com
- Article « Gesalt » du site http://daphne.palomar.edu