Langage visuel: la 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. É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 …

Illustration du principe de la prégnance

Application du principe de la prégnance en webdesign

En webdesign, le principe de la prégnance peut être appliqué pour aider l’internaute à distinguer l’essentiel du superflu dans une masse d’informations visuelles denses. Pour mettre en avant l’essentiel, le graphiste utilise généralement toutes les manières de générer du contraste. Il peut aussi structurer sa composition pour créer un ordre visuel. Cet ordre visuel peut être obtenu en disposant les éléments de manière a former des formes géométriques simples (cercle, carré, rectangle, triangle).

Sur le site de la journaliste Anja Medau, Notre regard est d’abord attiré par le portrait de la jeune femme, puis il glisse sur son nom, le menu du site et enfin sur la liste des différentes interventions de la journaliste.

L’ensemble du texte s’inscrit dans un triangle (figure que j’ai tracé en blanc) et facilite notre lecture. Nous aurions pu commencer notre lecture par la droite de l’image mais la photographie de la journaliste nous attire pour que nous commencions l’exploration de la page par la gauche. Le triangle nous ouvre ensuite le chemin de son sommet vers sa base tout naturellement. Grâce à ce stratagème, le graphiste a su mettre en place un flux de lecture qui va de l’élément le plus important (nom prénom de la journaliste) au plus générale (expérience de la journaliste).

Principe de l’expérience passée

Le principe de l’expérience passée se réfère, comme son nom l’indique, à l’expérience déjà acquise (dans le passé…) et permet à l’observateur une reconstitution visuelle d’objets reconnaissable par regroupement de formes.

Ce principe s’applique 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 l’expérience passée

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

Sur cet exemple, l’arrière plan est occupé par une photographie représentant une portion d’un personnage. Nous savons qu’il s’agit d’un jeune adolescent qui pratique une figure de skate. Pourtant, nous ne voyons que 1/6 du personnage. Notre expérience passée nous permet pourtant d’être quasiment sûr de nous. Nous avons déjà vu des jeunes ados pratiquer le skate dans la rue où dans des vidéos. Nous savons à quoi ressemble un skate car nous avons nous même pratiqué ce loisir. Bref, toutes nos expériences personnelles nous permettent d’imaginer ce qui manque dans cette photo en ayant la certitude de ne pas nous tromper.

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.

Conclusion

Les lois de la Gestalt sont des principes simples à comprendre mais fondamentaux pour tous les graphistes qui souhaitent réussir une composition harmonieuse et porteuse de sens.

Un site web qui ne respecte pas les grands principes énoncés par la Gestalt sera souvent confus pour l’internaute sans que celui-ci ne sache consciemment pourquoi. La raison est que son cerveau aura du mal à effectuer des opérations de simplification.

A contrario, un site qui respecte ces principes paraitra plus professionnel, plus facile à décrypter et votre message visuel passera beaucoup mieux favorisant l’expérience utilisateur.

Tous les principes vues ci-dessus créent de l’unité mais vous pouvez aussi créer de la variété en ne respectant pas ces principes. L’unité structure et harmonise les mises en page mais trop d’unité peut aussi lasser et ennuyer l’observateur. A l’opposé, la variété destructure les mises en page et apporte du chaos à vos compositions. Cela éveille l’intérêt de l’observateur mais trop de chaos nuit au déchiffrage du message.

Il faut donc veiller à trouver un équilibre entre unité et variété. Cela s’obtient par un subtil mélange des deux effets pour que la composition graphique soit facile à appréhender tout en ayant une certaine forme d’intérêt.

Il faut aussi apprendre à adapter ses choix graphiques au contexte. Un site au contenu texte dense aura besoin de plus d’unité que de variété. L’illustration d’une publicité de produit pourra offrir beaucoup de variété pour attirer l’attention du client à condition que cette variété n’éclipse pas le produit lui même.

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