HCD#2 Les principes de Gestalt en web

Lisa Palmigiano
4 min readOct 23, 2018

--

Les principes de Gestalt

Cette théorie se compose de 7 principes que nous allons illustrer à travers des exemples de sites web.

PARTIE 1

#1 LA SIMILARITÉ

Succession d’éléments semblables (similaires) visuellement.

https://fr.boohoo.com/femmes/promotions/tops

Nous pouvons observer qu’il y a une succession de visuels de vêtements comportant les mêmes informations (dimensions, prix, descriptif), évoquant bien un aspect similaire.

https://www.pinterest.fr/

On peut voir que ce même principe s’applique aussi à pinterest à travers la présentation de nos tableaux dans notre espace personnel.

#2 LA PROXIMITÉ

Éléments proches tendant à faire partie d’une même catégorie (d’un même objet).

https://www.oneplus.com/be_fr/
https://www.easytigerfilms.fr/fr

Les éléments sont proches, situés sur une même ligne, on constate clairement qu‘ils font partis d’une même catégorie qui est celle du menu.

#3 LA CLOTURE

Création d’une structure aérée à l’aide d’un système graphique de séparation, et en gérant les vides.

https://www.zalando.fr/anna-field-jupe-trapeze-black-an621ba09-q11.html

Les clotures sont ici, vues à travers la conception de bloc permettant de créer une séparation entre les contenus.

https://arts.unistra.fr/arts-visuels/rentre2016-20170/

Même principe pour cet exemple, nous pouvons tout de même constater que les vides ont été comblés de manière graphique (à l’aide d’un motif).

#4 LA SYMÉTRIE

Éléments de mêmes dimensions placés de part et d’autre d’un où des axe(s) de symétrie.

http://egwineco.com/

On peut observer que la cannette au centre marque l’axe de symétrie de la page.

https://www.nike.com/fr/fr_fr/

Sur cet exemple, les éléments se construisent autour de ces axes de symétrie(logo Nike Force).

#5 LA CONTINUITÉ

Éléments proches les uns des autres dans le but de constituer une forme (un ensemble), incite l’utilisateur à suivre une trajectoire.

https://www.mi.com/en/index.html

La continuité est suggérée par l’icône de flèche qui permet de faire défiler les éléments de la bannière.

https://cargothefilm2017.com/

Pour ce site, plus on va scroller, plus il y aura d’informations concernant le film qui vont apparaître.

#6 FOND/FIGURE

Distinction entre le fond et la figure par le biais de contours où de contrastes.

https://www.beoplay.com/en/speakers

Il y a un jeu de contrastes entre le fond qui est légèrement désaturé, contrairement à la figure qui représente l’information d’un nouveau casque audio.

https://www.marmiton.org/

Sur ce site, l’image représentant le fond est floue permettant donc de faire ressortir la figure.

#7 LE POINT FOCAL

Élément visuel par lequel l’utilisateur est attiré en premier.

https://tasty.co/

L’accent est mis sur le texte qui est surligné en jaune.

http://slaveryfootprint.org/

Le point focal se traduit par la cassure des maillons de la chaine laissant place à une interaction.

PARTIE 2

Présentation de 3 sites cumulant 3 principes de Gestalt expliqués ci-dessus:

https://www.kikocosmetics.com/fr-fr/

1 Similarité : elle s‘illustre par les 8 vignettes ayant les mêmes caractéristiques (tailles des images, informations textuelles, titres). 2 Fond/Figure: nous pouvons constater que le fond est représenté par le visage de la femme, quand à la figure elle est représentée par le texte et le bouton «en savoir plus». 3 Proximité : se traduit par les catégories en haut qui sont proches et qui forment le menu.

https://www.netflix.com/browse

1 Proximité : Les éléments sont proches, alignés et constituent le menu. 2 Fond/Figure : La figure est présente à travers les informations données de la série, qui se superposent à l’image constituant le fond. 3 Continuité : Tous au long de la page on peut voir une série de vignettes que l’on peut scroller vers la gauche pour permettre de découvrir d’autres séries.

https://www.spotify.com/fr/

1 Cloture: On observe un changement de couleurs, créant ainsi différents blocs permettant de séparer et de regrouper les éléments par section. 2 Point Focal: il est marqué par la taille du texte et également par le bouton vert «ouvrir le lecteur web». 3 Symétrie : il y a également un jeu de symétrie avec les vignettes de la bannière.

--

--