Human Centered Design : Les lois de Gestalt

Application des 7 lois de Gestalt en Web Design


Principe de similarité

Rattachement d’éléments graphiques similaires pour en percevoir une forme

Chaque produit est présenté de la même manière
Similarité dans la présentation d’un contenu de même type

Principe de proximité

Rassemblement d’éléments proches les uns des autres

Délimitation des divers contenus du site par des blocs
Délimitation des options par groupe

Principe de clôture

Identification d’éléments distincts grâce à l’utilisation de blocs ou autres éléments délimitants

Certaines sections du site comme le footer se marquent par des blocs de couleurs différentes
Mise en évidence d’une fonctionnalité en la délimitant par des lignes et des éléments graphiques

Principe de symétrie

Disposition similaire d’éléments de part et d’autre d’un axe

Symétrie classique d’axe vertical pour présenter en parallèle les acteurs du site
Le contenu du site est réparti proportionnellement de chaque côté d’un axe verttical

Principe de continuité

Prolongement d’éléments les uns par rapport aux autres

La ligne du milieu ajoute de la continuité horizontale à la page
La navigation du site est guidée par les chiffres au sommet de la page et les lignes verticales délimitant chaque sujet

Principe de fond / figure

Contraste entre différents éléments graphiques

Les éléments se démarquent grâce au contraste du fond et des images / textes
A nouveau fort contraste entre les éléments et le fond

Principe du point focal

Eléments graphiques attirants l’œil vers une certaine zone du site

Les pointillés dirigent l’œil vers le prochain contenu du site
Les circuits du processeur dirigent l’œil vers les différentes sections du site

Analyse de 3 sites intégrant chacun 3 lois de Gestalt

1. Bang & Olufsen
1 — Principe de continuité

Les textes et les images se suivent et forment ainsi une continuité dans la navigation du site

2 — Principe de similarité

Les différents types de produits disponibles sont présentés dans des blocs agencés de la même façon : Textes en haut à gauche du block suivis d’une image illustrant le type de produit

3 — Principe de clôture

Certaines fonctionnalités du site situées dans le footer sont mises en évidence et séparées par de fins blocs gris

2. Bose
1 — Principe de similarité

Chaque block mettant en avant un produit est similaire aux autres de part sa forme et l’agencement de son contenu

2 — Principe de fond / figure

Le contraste entre les titres présents dans les images principales du site est très élevé apportant une grande visibilité et étant ainsi bénéfique à la promotion du produit

3— Principe de clôture

La démarcation des différents éléments du footer se fait grâce au changement de couleur de fond des différents blocks

3. Canon
1 — Principe de proximité

La section contenant les dernières actualités de Canon est contenue dans un block qui lui même est divisé en sous-blocks

2 — Principe de fond / figure

Les images choisies se distinguent du fond de part le fort contraste (notamment celui du noir&blanc)

3— Principe de clôture

Certaines parties du site sont “séparées” par l’ajout d’un block fermé de couleur différente les mettant ainsi en évidence

One clap, two clap, three clap, forty?

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