Human Centered Design — Loi de Gestalt

Hélène Goffinet
3 min readOct 15, 2017

--

Dans le cadre du cours de HCD à la Haute Ecole Albert Jacquard, il nous a été demandé dans un premier temps de trouver 14 sites web qui utilisent les lois de Gestlat (la similarité, la proximité, la clôture, la symétrie, la continuité, le fond/figure et le point focal). Ensuite nous devions trouvé 3 autres sites cumulant au minimum 3 de ces mêmes principes et les expliquer.

Partie 1

La similarité :

On regroupe les éléments par similitude pour dégager une forme
On voit que les éléments qui sont proches sont regroupés
On voit que des blocs sont séparés
On voit une symétrie verticale
Des points rapprochés sont perçus dans une continuité et tendent à représenter des formes
On voit que le fond et la figure se détachent l’un de l’autre
C’est ce par quoi notre oeil est attiré en premier

Partie 2

Premier site : http://www.petervanalphen.com/en/intro/

On peut remarquer une symétrie avec la photo au milieu, les gros titres et les petits liens sur les côtés. Les 3 gros titres montrent aussi une proximité car ce sont des éléments proches que l’on peut regrouper. Il y a également un jeu sur le fond et la figure entre l’image et les titres. Et enfin les titres sont le point focal sur lequel on se concentre en premier.

Deuxième site : https://www.ursamajorsupercluster.com/

Sur ce deuxième site, le point focal est le titre “ursa major supercluster” car c’est le seul texte présent, et en bougeant la souris ce sont les mots “about” ou encore “contact” qui apparaissent en plus grand. On peut également constater une continuité avec la souris (que l’on déplace encore une fois), car c’est un ensemble de 4 lignes qui se rejoignent en 1 point (la souris) et donc qui nous “suivent”. Et enfin, lorsque l’on bouge la souris, des cercles apparaissent aux 4 coins de la page, les 4 cercles peuvent représenter la proximité.

Troisième site : https://www.apple.com/befr/

Sur ce troisième et dernier site, on peut voir la proximité avec le menu dans le header (mac, iPad, …), il y a également la clôture qui séparer chaque bloc de produits (iPhone 8, iPhone X, …). Ensuite, nous pouvons remarquer une similarité dans le footer (s’informer et acheter, Apple store, …) et enfin le point focal est le produit iPhone 8.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

No responses yet

Write a response