HCD — Les lois de la Gestalt

La similarité

La similarité sur le web se traduit par des éléments mis en forme d’une même manière (couleurs, forme, typo…) afin de faire ressortir une certaine harmonie sur le site.

https://dixonandmoe.com/

Les liens/titres encadrés ici en rouge sont similaires au niveau de leur mise en forme et la typographie utilisée. L’harmonie est présente dans la mise en page de ces différents éléments, seule la taille varie en fonction de la section du site.

https://afriendofmine.nl/

Nous retrouvons chaque élément de la navigation sous forme arrondie et à la verticale sur les deux cotés du site. La forme et la mise en page des blocs au centre de la page sont aussi un cas de similarité.

La proximité

Ici il s’agit de regrouper plusieurs éléments différents (un titre avec un lien, avec un bouton…) proches les uns des autres de sorte à ce qu’ils ne forment plus qu’un seul bloc.

https://www.ginlane.com/

Les deux niveaux de titres, le paragraphe ainsi que le lien forment tous ensemble un bloc de par leur proximité.

https://pooliestudios.com/

A l’image du premier exemple, nous retrouvons le titre principal, le paragraphe ainsi que le bouton dans un même bloc, nous avons en plus le séparateur subtil qui relie les deux premiers contenus.

La clôture

Ce principe illustre les différents éléments dont les bords sont visiblement ou subtilement “fermés”. Ce principe aide l’utilisateur à visualiser directement l’élément comme une forme ou une figure.

Ici le designer joue sur les différents contrastes de couleur et l’image de fond afin que le bloc blanc ressorte de manière visible. L’oeil humain est alors capable de visualiser le bloc sans nécessairement avoir besoin de délimitation.

http://forefathersgroup.com/

La délimitation ici s’effectue à l’aide des deux bandes tracées de part et d’autres du texte, l’entourant ainsi dans un bloc.

La symétrie

Cela consiste à dupliquer deux blocs/éléments afin de créer une symétrie entre les deux éléments. Ce principe permet également d’apporter une autre forme d’harmonie au site.

https://prymd.com

Les deux blocs sont mis en page à l’aide d’une parfaite symétrie, facilement visible à l’aide du contrastes entre les deux couleurs ainsi que grâce au thumb positionné au centre.

https://twochimpscoffee.com/

Le phénomène se répète dans cet exemple avec les deux illustrations ajoutées de part et d’autre du texte qui lui sert d’axe de symétrie.

La continuité

Par ce principe, plusieurs éléments sont assemblés de sorte à créer une certaine ligne directrice qui permet à l’utilisateur de “suivre l’avancée” de la page qu’il parcoure. Chaque élément est le prolongement du précédent.

http://www.ptvgroup.com

L’élément de continuité est présent sur l’arrière plan. Nous retrouvons cet ADN en 3D dans différentes sections du site au scroll de la page.

https://2016.oneis.us/

Les éléments 3D et flottants qui se retrouvent un peu partout sur la page forment le nombre “2016”. Nous découvrons chaque fois un élément du nombre en scrollant la page, ce qui forme cette fameuse continuité.

Le fond/la figure

Le fond/la figure est la distinction entre les éléments de l’arrière plan et ceux de l’avant plan sur une page web.

https://stroom.in.ua/

L’attention est ici portée sur les voitures qui sont positionnées de sorte à créer une certaine perspective devant le texte, se trouvant lui en arrière plan.

https://issa.website/

Malgré le fond et la typo disposés en aplat, on parvient à faire la différence entre l’arrière et l’avant plan. Cette distinction est ici apportée par la taille du texte qui attire davantage l’oeil que la photo en arrière plan.

Le point focale

Le point focale est un principe qui pousse l’utilisateur à regarder vers un point fixe de la page. Tous les éléments sont mis en place afin d’attirer l’oeil en direction d’un point précis.

https://www.50cinquante.be/

Le point focale est déterminé par le rayon lumineux qui rejoint une “étoile” au centre de la page. On peut également voir un halo lumineux qui entoure le 1971 en arrière plan. Le texte est placé sur la gauche, n’attirant pas directement l’oeil contrairement au centre.

https://www.and.co/slash-workers

La disposition du titre et des paragraphes forme une flèche en direction du bas de la page, incitant donc l’utilisateur à scroller pour découvrir la suite du contenu du site.

Les combinaisons

Certaines lois peuvent facilement se retrouver ensemble sur un même site, j’en ai donc sélectionné 3 afin d’illustrer ce fait.

https://souldigital.com.br/

Dans ce premier exemple, nous pouvons apercevoir les similarités (en rouge) au niveau des couleurs qui sautent directement aux yeux. La typo est également un facteur de similarité, la même étant utilisée sur la totalité du site. Nous pouvons également constater que le titre principal, le logo, le bouton en haut à droite ainsi que les paragraphes répondent à la loi de la proximité (en bleu), ces éléments sont disposés de sorte à former un seul et même bloc. Enfin, le site est entièrement construit sur une symétrie (en vert), visible de part les deux différents blocs disposés l’un à côté de l’autre, séparé au centre par un axe vertical invisible.

https://www.ovalmoney.com/

Sur ce site web, un petit pack de lois se retrouvent.

Pour commencer, on peut facilement apercevoir les similarités (en orange) entre la disposition et la typo des titres, la forme, la couleur et la mise en page des boutons. La couleur se retrouve un peu partout sur le site et forme une certaine harmonie.

Ensuite, nous pouvons observer une proximité (en rose) dont les éléments forment encore une fois un bloc facilement visible pour l’oeil humain. Une symétrie (en jaune) est également visible sur les différents blocs qui constituent le site: la disposition du texte, l’image utilisée…

Une légère continuité (en rouge) est également observée en la présence des 00, jouant le rôle de logo. On retrouve ces fameux 00 un peu partout sur la page.

Enfin, dans le bas de la page, nous retrouvons une clôture (en bleu), déterminée par l’ombre portée des blocs qui dessine le contour de celui-ci, le faisant alors ressortir du fond où la même couleur est utilisée.

http://www.ristorantesangenesio.com/

Dans cet exemple nous retrouvons une nouvelle fois la clôture (en orange), ici délimitée par l’image en arrière plan ajoutée avec le bloc blanc qui ressort de façon visible pour l’utilisateur.

Nous faisons face encore une fois au phénomène de proximité (en rouge), à nouveau construite grâce au titre, au paragraphe et au bouton enfermés dans le bloc blanc.

La loi de la continuité (en bleu) se retrouve ici vers la fin de la page, les éléments sont disposés de sorte à former un chemin en direction du bas, incitant encore une fois l’utilisateur à finir sa lecture.

Cynthia Pugliese B2G2
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.