Human Centered Design : Les lois de la Gestalt

Dans le cadre de notre cours d’HCD portant sur la perception visuelle, nous avons cherché à comprendre les utilisateurs. En effet, le cerveau va s’efforcer de donner une structure signifiante sur ce qu’il perçoit, afin de l’organiser et de le simplifier. Cette disposition est définie par la “théorie de la Gestalt”qui se décompose en 7 lois.

Pour améliorer notre compréhension sur ce principe, deux exercices nous ont été proposé:

  • Dans un premier temps, montrer chaque principe de Gestalt au travers de 2 sites différents.
  • Dans un second temps, trouver 3 sites qui cumulent au minimum 3 principes de Gestalt.

Les lois de Gestalt

  1. Similarité

L’ aspect graphique similaire des éléments induit une fonction similaire.

Similarité entre les boutons pour chaque image (contour rouge)

2. Proximité

Les éléments proches qui font partie d’un même bloc.

Chaque petit élément sont assemblés pour former un groupe distinct (contour rouge)

3. La clôture

La clôture comble les vides, différencie les blocs afin d’apporter plus de clarté.

A gauche, la barre de navigation se sépare du reste du site. A droite, chaque bloc est bien distinct (contour rouge)

4. Symétrie

Des éléments de même amplitude sont placés de chaque côté de l’axe de symétrie.

A gauche, on constate une symétrie au niveau des illustrations. A droite, la symétrie est faite entre les 3 bouteilles (ligne verticale rouge)

5. Continuité

Les éléments rapproché sont perçus comme une continuité et tendent à constituer des formes, un fil conducteur dans la page.

A gauche, la barre de navigation indique une navigation verticale. A droite, c’est l’image qui nous dirige vers la droite (flèche rouge)

6. Fond/Figure

La figure possède un contour défini et se détache du fond (avant plan et arrière plan).

A gauche, le fond flou permet au texte de se détaché. A droite, le contour de l’illustration possède une ombre qui permet de dissocier les différents plans (contour rouge)

8.Point focal

Le point focal, c’est un point, une zone, un texte vers lequel notre regard converge.

Les cercles permettent d’attirer le regard (flèche rouge)

Analyse de sites web

  1. fromage abondance
http://www.fromageabondance.fr/

On constate la présence de quelques lois de la Gestalt. La similarité (rouge) des boutons. Ensuite, la page d’accueil présente une symétrie (jaune). De plus, on remarque une proximité (bleu) qui permet de former des blocs. On distingue également la loi de fond/figure (cyan). Enfin, on retrouve la loi de clôture (violet) qui sépare les différentes parties.

2.two chimps coffee

https://twochimpscoffee.com/

De même pour ce site, on retrouve une symétrie (jaune) verticale sur tout le site. Ainsi qu’une similarité (rouge) grâce aux boutons. De plus, on observe la loi de clôture (violet) qui est en forme de flèche. Cela permet d’indiquer le chemin à l’utilisateur.

3. raters

http://ratersapp.com/

On retrouve encore une fois les mêmes procédés sur ce site. Le principe de similarité (rouge) des boutons. La symétrie verticale sur la page d’accueil (jaune). De plus, on retrouve la loi de proximité (bleu) des paragraphes qui forment des blocs. Une continuité s’installe sur toute la page (vert clair), cela permet de diriger l’oeil de l’utilisateur. Un point focal (vert) est également présent au centre de la croix formé par les images. Enfin, les images ressortent par rapport au fond grâce à la loi fond/figure (cyan).

One clap, two clap, three clap, forty?

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