J’ai décidé d’écrire ce post après avoir commencé à apprendre à écrire à ma fille la semaine dernière.

Comme je n’ai aucune idée de la façon d’apprendre à quelqu’un à écrire, j’ai juste dessiné son nom à l’aide de points de lignes et lui ai dit de tracer une ligne entre eux et de les relier.

Voici à quoi cela ressemblait au début:

nom de la gestalt

Pendant qu’elle dessinait la ligne, je l’ai regardée et j’ai remarqué quelque chose de vraiment étrange – elle a relié les lignes droites sans problème, mais les bords des lettres, elle a juste sauté !

Voici à quoi il ressemblait à la fin (remarquez les bords que j’ai marqués en rouge):

gestalt après le dessin

La première explication qui m’est venue à l’esprit était bien sûr les principes de Gestalt, et dans cet article, je vais vous montrer pourquoi ces règles sont très pertinentes pour le marketing Internet et comment elles peuvent aider à mieux optimiser votre site.

Présentation de Gestalt

La définition de Gestalt en une phrase est :

« La psychologie de la Gestalt essaie de comprendre les lois de notre capacité à acquérir et à maintenir des perceptions significatives dans un monde apparemment chaotique. ». (Wikipédia, psychologie de la Gestalt)

Selon la Gestalt, chaque événement de notre vie suit un schéma fixe qui a été créé à partir d’expériences et d’événements antérieurs tout au long de notre vie, et c’est selon ce schéma que nous interprétons l’événement.

Cette approche comporte évidemment de nombreux aspects, mais je n’aborderai que l’aspect visuel, c’est-à-dire la manière dont nous traduisons ce que nous voyons et, par conséquent, comment nous agissons en fonction de ce que nous avons vu. (Ou plus exactement, le interprétation on donne ce qu’on a vu)

Dans les parties suivantes de l’article, je vais vous présenter les différents principes de la méthode et vous montrer comment vous pouvez appliquer chacun de ces principes dans l’optimisation de votre site Web.

Si vous pouvez comprendre comment vos utilisateurs interprètent ce que vous leur montrez sur le site, vous serez en mesure d’influer inconsciemment sur leurs actions et de leur faire faire quoi tu veulent qu’ils fassent – pour convertir davantage.

Premier principe : loi de proximité

La loi de proximité dit qu’un groupe d’objets sera toujours associé au groupe d’objets qui est proche d’eux, et non à celui qui est plus éloigné.

Dans l’image suivante, vous remarquerez comment votre cerveau l’interprète comme « une image de cercles triés en lignes horizontales », même si théoriquement il n’y a aucune raison de ne pas les voir comme des lignes verticales :

Capture d'écran 2015-07-23 à 15.28.59

Dans l’image suivante cependant, la situation se renverse parce que la distance verticale est supérieure à la distance horizontale, ce qui fait que notre cerveau interprète l’image comme « deux vertical colonnes de cercles » :

Capture d'écran 2015-07-23 à 15.29.06

Et qu’est-ce que cela a à voir avec l’amélioration du taux de conversion du site ? C’est très simple.

Remarquez le formulaire d’inscription sur Zappos ci-dessous. Vous pouvez voir que les deux champs de courrier électronique sont beaucoup plus proches l’un de l’autre que les champs de nom ou de mot de passe. Zappos ne l’a pas fait par erreur, mais parce que cela améliore le sens d’orientation de l’utilisateur dans le formulaire, améliore son expérience sur le site et par conséquent améliore le taux d’inscriptions.

zappos-optimiaztion

Cette méthode d’organisation aide l’utilisateur à se sentir en contrôle, et ce bon sentiment l’aide bien sûr à accomplir la tâche que nous lui demandons de s’inscrire.

Si nous revenons à l’exemple que j’ai présenté au début du message – ma fille n’a pas relié les bords des lettres, simplement parce que les points sur les bords étaient plus éloignés les uns des autres que ceux en ligne droite, donc il lui semblait plus trivial de relier les points verticaux et horizontaux séparément :

gestalt après le dessin

Deuxième principe : loi de fermeture

Le deuxième principe dit que notre cerveau a tendance à associer ce qu’il voit à des choses qu’il connaît déjà, et le cas échéant à compléter les informations manquantes sans qu’on le lui demande.

Par exemple, regardez cette image :

loi de fermeture

Voyez-vous 3 packmen ou le triangle au milieu ?

Il est prudent de supposer que vous avez vu le triangle, et c’est exactement la loi de la fermeture – notre cerveau essaie d’interpréter l’image et il découvre rapidement que s’il trace une ligne entre les « bouche des packmen », il créera la forme d’un triangle , qu’il connaît évidemment bien et peut rapidement reconnaître.

Pour que la loi de fermeture ait lieu, nous devons fournir à notre cerveau suffisamment d’informations pour qu’il puisse combler les lacunes, mais pas trop d’informations car il n’aura alors pas besoin de compléter l’image.

Ce principe peut être vu dans de nombreux logos de différentes entreprises aujourd’hui. Voici quelques exemples:

wwf logo

logo ibm

Troisième principe : la loi de la bonne figure

Ce principe, également connu sous le nom de loi de simplicité, dit quelque chose de très simple – notre cerveau préfère regarder les choses d’une manière simple afin qu’il lui soit facile de les associer à des choses qu’il connaît déjà.

conversion-optimisation-gestalt

Il est prudent de supposer que votre cerveau a préféré interpréter la bonne image comme « un carré, un cercle et un triangle » plutôt que comme une image compliquée. (Vous voyez? Je n’ai même pas les mots pour le décrire), et pour que ce soit plus pratique, il a même tracé une ligne imaginaire pour créer ces formes.

Ce principe nous aide également à reconnaître les doodles créatifs de Google, qui souvent ne ressemblent même pas au mot Google, mais notre cerveau pense que c’est le cas.

google-doodle-conversion-optimisation

Quatrième principe : loi de symétrie

La loi de symétrie dit que notre cerveau préfère regarder les choses de manière symétrique.

Selon la loi de fermeture, vous auriez dû regarder les parenthèses intérieures comme une seule unité, mais je suppose que votre cerveau a interprété l’image comme 3 paires de parenthèses.

conversion-optimisation-gestalt-symétrie

Aujourd’hui, de nombreux sites présentent leurs caractéristiques sous forme d’image avec un texte à côté (voir cette page de caractéristiques par exemple), et notre cerveau préfère regarder les différents éléments horizontalement (ligne au-dessus de la ligne au-dessus de la ligne) plutôt que verticalement (colonnes) parce que c’est plus symétrique. C’est précisément pour cette raison qu’il serait plus logique pour nous de relier l’image au texte à côté plutôt qu’au-dessus/en dessous :

conversion-optimisation-3

Cinquième principe : Figure/loi fondamentale

Ce principe pourrait être l’un des plus importants dans vos efforts d’optimisation, et souvent nous l’appliquons sans même nous en apercevoir.

Dans l’ensemble, ce que dit cette loi, c’est que lorsque nous voyons des éléments avec de fortes couleurs contradictoires qui sont proches les uns des autres ou les uns au-dessus des autres, notre cerveau tentera de comprendre lequel d’entre eux est le plus important (sur lequel vous devriez vous concentrer) et lequel a le rôle de l’arrière-plan/du paysage.

La capacité de notre cerveau à faire la différence entre l’important et le sans importance dépend principalement du niveau de facilité avec lequel il peut le faire, donc plus le contraste entre la figure et le sol sera élevé, plus ce sera facile pour notre cerveau pour les distinguer et distinguer l’important de l’insignifiant.

Devant vous se trouve l’exemple le plus courant de ce principe. Dans l’image suivante, voyez-vous un calice ou deux visages qui se regardent ?

illusion de la gestalt

Comme le contraste entre eux n’est pas assez élevé, notre cerveau a beaucoup de mal à décider quelle est la figure et laquelle est le sol.

L’application de ce principe dans vos efforts d’optimisation se reflète principalement dans l’arrière-plan des boutons CTA sur votre site Web/page de destination.

Remarquez par exemple le site de GrooveHQ, qui a choisi un fond blanc sans aucun graphisme afin de mettre en valeur au mieux les boutons d’appel à l’action :

groove-homepage-conversion-optimization--1024x714

Un autre exemple, plus évident, peut être vu sur eBay, qui présente une photo d’un produit et il y a dessus le bouton CTA avec un fond blanc :

ebay-conversion-optimisation

Sans le fond blanc, le bouton CTA se serait mélangé à l’image en arrière-plan, rendant ainsi plus difficile pour l’utilisateur de comprendre qu’il est censé cliquer dessus.

Un autre exemple – la page d’accueil de KISSmetrics, où ils ont ajouté un fond noir à l’image afin de mettre en valeur le texte, incitant ainsi les utilisateurs à se concentrer sur celui-ci et sur les boutons CTA plutôt que sur l’image d’arrière-plan.

kiss-metrics-conversion-optimisation

Sixième principe : loi de connexité uniforme

Ce principe dit que « les éléments qui sont connectés par des propriétés visuelles uniformes sont perçus comme étant plus liés que les éléments qui ne sont pas connectés ».

Remarquez le dessin suivant par exemple – même si les carrés sont plus proches les uns des autres (et se ressemblent) que les cercles, notre cerveau relie chaque carré à un cercle car ils sont reliés par une ligne :

Capture d'écran-2015-07-07-at-12.32.57

Notez que même si les lignes ne sont pas entièrement connectées aux formes, elles obligent toujours notre cerveau à ignorer le reste des règles (proximité et simplicité) et à interpréter le carré-cercle comme une seule entité.

Ce principe est très courant et vous pouvez le voir principalement dans les formulaires où un certain nombre de champs ayant un arrière-plan commun sont regroupés. Dans l’image suivante tirée de ce site d’assurance israélien, vous pouvez voir que le fond gris est en fait le dessin qui relie ces champs et les fait apparaître liés les uns aux autres, sans dépendre de la distance entre eux/leur simplicité.

conversion-optimisation-1

Un autre exemple peut être vu sur le site d’Unbounce, qui a connecté les trois cercles les uns aux autres pour transmettre la sensation d’un seul processus :

unbounce-home-page-conversion-optimization

Septième principe : loi de similarité

Ce principe dit que les objets avec un terrain d’entente seront perçus comme appartenant les uns aux autres plus que les objets avec moins d’un terrain d’entente.

Ce terrain d’entente peut être la forme, la couleur, la taille, la texture, etc.

Lorsqu’un utilisateur voit qu’un certain nombre d’objets ont des caractéristiques similaires, il a tendance à les associer les uns aux autres et à les traiter de manière égale.

Prenons par exemple la page d’accueil de Ynet, qui souffre d’une forte charge visuelle et qui est pourtant capable de nous aider à distinguer clairement quel objet appartient à quoi, grâce à la différence de forme entre les objets.

Le menu supérieur est organisé sous la même forme, les liens en dessous sont organisés différemment, de même que le reste des objets du site.

Le tout organisé de manière à nous aider à remarquer exactement ce qui appartient à quoi.

ynet-home-page-conversion-optimisation

Huitième principe : loi de continuité

Ce principe dit que notre œil recherche des formes qui coulent sans changements brusques, c’est pourquoi nous préférerions regarder l’image de gauche comme deux lignes qui se croisent plutôt que comme l’image de droite – deux lignes qui se brisent soudainement :

Capture d'écran-2015-07-07-at-14.50.16

Vous pouvez trouver cette loi appliquée dans le site suivant qui fait le lien entre la biographie et la photo d’une manière un peu inhabituelle, et pourtant suffisamment claire pour que notre cerveau comprenne ce qui appartient à quoi :

principe d'optimisation de la conversion

Conclusion

L’amélioration du taux de conversion est un sujet qui comprend beaucoup de psychologie, et les principes de Gestalt peuvent vous aider grandement dans ce processus.

Il y a évidemment bien plus à Gestalt que ce que j’ai présenté dans cet article, mais j’ai décidé de présenter les lois les plus notables et les plus courantes, afin que vous puissiez les utiliser pour améliorer le taux de conversion sur votre page de destination ou votre site Web.

Crédits image

Image en vedette : ra2studio/Shutterstock.com
Photo postée #1 : Image de Shuki Mann
Photo postée #2 : Image de Shuki Mann
Photo postée #5 : 360b/Shutterstock.com
Photo postée #6 : nattul/Shutterstock.com
Photo postée #9 : Frank Fiedler/Shutterstock.com
Toutes les captures d’écran et illustrations par Shuki Mann. Prise juillet 2015.

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici