HCD#2 Les principes de Gestalt en web
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.
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.
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).
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.
Les clotures sont ici, vues à travers la conception de bloc permettant de créer une séparation entre les contenus.
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.
On peut observer que la cannette au centre marque l’axe de symétrie de la page.
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.
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.
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.
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.
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.
L’accent est mis sur le texte qui est surligné en jaune.
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:
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.
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.
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.
