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

Image for post
Image for post
Image for post
Image for post

Principe de proximité

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

Image for post
Image for post
Image for post
Image for post

Principe de clôture

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

Image for post
Image for post
Image for post
Image for post

Principe de symétrie

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

Image for post
Image for post
Image for post
Image for post

Principe de continuité

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

Image for post
Image for post
Image for post
Image for post

Principe de fond / figure

Contraste entre différents éléments graphiques

Image for post
Image for post
Image for post
Image for post

Principe du point focal

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

Image for post
Image for post
Image for post
Image for post

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

1. Bang & Olufsen

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store