HCD — Les lois de la Gestalt sur le Web

Dans le cadre de notre cours de HCD (Human Centered Design), nous devions illustrer les principes (7) de la Gestalt à l’aide de sites web. La première partie consistait à trouver deux sites web pour chaque loi et la deuxième partie consistait de trouver deux sites web comprenant au moins 3 principes de Gestalt.

— La théorie de la Gestalt, est une théorie qui définit les principes de la perception. Quand nous naviguons sur une interface (Le Web en l’occurrence), ces lois sont perçues de façon tout à fait inconsciente si elles sont bien utilisées.

7 lois sont définies :

  • La similarité : Elements similaires.
  • La proximité : Quand les éléments sont proches les uns des autres.
  • La clôture : Quand un élément est “clôturé”, il se détache du fond.
  • La symétrie : Axe central entre 2 ou plusieurs éléments.
  • La continuité : Quand plusieurs éléments permettent une navigation continu, quand des éléments donne un sens de lecture par exemple.
  • Fond/Figure : distinction entre la figure, qui se détache et qui possède un contour défini, et le fond moins distinct.
  • Point focal : Un point qui attire notre oeil.

Partie 1 :

  • Similarité : Des similitudes dans le graphisme.
Les blocs sont semblables
Vente de produits est souvent synonyme de similitude dans la présentation.
  • Proximité : Elements proches les uns des autres.
On voit bien la proximité des éléments
Proximité des blocs
  • La clôture : Clôturer des éléments. Permet de différencier des éléments, de regrouper etc.
La clôture est bien présente.
Le carré est clôturé, ça permet de le détacher du fond.
  • La symétrie : des éléments placés sur un axe de symétrie.
Axe central bien présent
Page coupée en deux par cet axe central.
  • La continuité : des éléments qui se suivent pour représenter des formes ou un sens de lecture etc.
Les 3 points montre la continuité du site.
Le “Y” peut se représenté comme un flèche.
  • Fond/Figure : Un élément qui se détache du fond via un contour défini.
Le micro se détache du fond grâce au cercle autour.
On voit bien le “C”. Il se détache du fond grâce au formes à gauche et le blanc à droite.
  • Point focal : un élément ou une zone vers lequel notre regard est attiré.
Notre oeil est attiré par le centre de la forme.
Notre oeil est attiré par cette forme noire sur fond blanc.

Partie 2 : trouver 3 sites cumulant au moins 3 principes.

Site 1 :

  • Blanc : Point focal
  • Orange : clôture
  • Rose : proximité

Site 2 :

Jaune : Fond/Figure

Rose : Point focal

Bleu : Clôture

Noir : Similitude

Site 3 :

Blanc : point focal

Rose : similitude + proximité

Bleu : clôture


Pour conclure, ces principes, quand ils sont utilisés correctement, peuvent rendre la navigation d’un site plus efficace.

Liegeois Vincent.