Human Centered Design : Lois de la Gestalt

7 lois, 2 exemples par loi, ça vient.


Similarité

Nous repérons les éléments identiques pour en percevoir une forme

Les images sont identiques dans leur forme, le texte vertical revient également à chaque fois à la même place. Ces éléments forment des ensembles similaires.
Chaque case contient les mêmes éléments : un titre, un sous-titre, une image. Chaque élément est identique dans sa structure.

Proximité

Nous regroupons naturellement les éléments proches afin d’en créer une forme.

Les images sont groupées de manière à former un rectangle plus grand de part leur proximité.
Chaque cadre comporte des éléments rapprochés faisant partie d’un bloc grâce à leur proximité.

Clôture

Une forme fermée sera toujours plus facilement identifiable qu’une forme ouverte.

Les éléments textes des bords forment un rectangle facilement identifiable.
Les éléments sont placés de façon à ce que l’on perçoive une forme fermée.

Symétrie

La symétrie donne un sentiment de stabilité, de cohérence et de structure.

Les couleurs de fond divisent la page en deux parties symétrique. Les éléments de chaque partie ont une forme comparable et renforcement cette symétrie.
Un élément texte vertical, une image, un numéro forment un ensemble qui est répété. Ces 2 ensembles sont symétriques.

Fond / Forme

Nous percevons une figure qui se détache et possède un contour défini du fond qui nous apparaît moins distinct.

L’image de la terre de détache clairement du fond.
Même chose que le site précédent, la pilule est bien distincte du fond noir.

Point focal

Notre regard est attiré vers un point qui nous amène vers un autre endroit.

Le fond participe à ce point focal qui part du texte et continue avec la ligne blanche qui attire notre regard vers le bas et nous incite à scroller.
Des spirales attirent notre regard vers le cercle rouge où se trouve un élément texte (tel un vortex).

Continuité

Nous associons les éléments qui forment une continuité.

Les images sont places de façon à créer des colonnes, d’où la continuité. Chaque colonne se répète plusieurs fois, renforçant cette impression de continuité.
Les images sont placées de façon à ce qu’elle se rencontrent sur leurs sommets, le tout formant une ligne nous conduisant vers la droite et créant une continuité entre les éléments.

Combinaison de 3 lois sur un même site, 3 fois.

https://www.betonen.com/
Symétrie

La première photo entame la symétrie du site. La table photographiée et placée de façon a avoir une symétrie verticale. De même, les 2 photos du bas sont placées symétriquement.

Le footer est aussi symétrique avec ses trois boutons centrés et leurs deux éléments textes de part et d’autre de la page.

Proximité

Chaque bloc de texte comprend plusieurs sous-éléments : titre, paragraphe, bouton. Ils forment un ensemble de part leur proximité immédiate.

Fond / Forme

Les photos (entourées en bleu) se détachent fortement du fond blanc.

http://colm-mccarthy.com/
Symétrie

Si l’on divise le site en deux parties, on peut voir une structure très semblable. Même si certains éléments sont décalés, l’ensemble est très symétrique.

Continuité

Les images sont alignés sur une verticale donnant une direction, une continuité vers la suite du site.

Proximité

Les premiers blocs de texte forment un ensemble de part leur proximité

http://hixsnedeker.com/
Symétrie

Le site a une presque parfaite symétrie

Similarité

Chaque case a la même structure : une image, 2 lettres en majuscule, un nom juste en dessous. Les dimensions sont identiques.

Clôture

La totalité des cases forment un ensemble

Références (par ordre chronologique)

One clap, two clap, three clap, forty?

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