Human Centered Design : Les lois de Gestalt.

Dans le cadre du cours de HCD. Il a été demandé de réaliser 14 captures d’écrans afin d’illustrer les 7 lois de Gestalt à l’aide de page web ainsi que choisir 3 sites web contenant au minimum 3 de ces lois et de les énumérer dans un article Medium.

Les différentes lois ainsi que de leur captures d’écrans :

1.Similarité : Eléments graphiquement similaires voire identiques afin de reconnaître leur fonctions ?

Les différents boutons de la navigation sont identiques.

2. Proximité : Eléments plus ou moins rapprochés permettant de savoir quand plusieurs éléments forme un bloc.

Le titre, l’image et le texte forme un tout.

3. Clôture : Permet de créer un séparation entre différents blocs ou éléments.

Les lignes pointillés crée une séparation entre les différents blocs.

4. Symétrie : Eléments placés par rapport à un axe de symétrie pour une mise en page plus harmonieuse.

5. Continuité : Eléments placés de façon à ce que les yeux de l’utilisateur soit guidé par une ligne directrice.

Les images donne la direction que l’oeil doit prendre pour le guider vers le contenu important.

6. Fond-figure : Eléments assemblés de manière à ce que l’utilisateur voit une forme même si il n’y en a pas.

Les deux formeront un rectangle pour l’oeil humain alors qu’il n’y en a pas forcément.

7. Point focal : Eléments, zone mis en avant pour que l’utilisateur le voit dés l’ouverture de la page.

Centrés et en contraste avec le fond pour que ce soit la première chose que l’on voit.

Les 3 sites choisis contenant au moins 3 lois :

1. Thrasher magazine

Fond-figure : La barre de recherche et les icônes de réseaux sociaux sont tous de la même hauteur et font parti du même bloc. On peut donc imaginer un rectangle blanc.

Proximité : Le titre, l’image, le texte sont proches l’un de l’autre et en plus rassemblé en un tout par le fond blanc. C’est donc bien un bloc.

Clôture : Les pointillés entre les différents articles marquent une séparation tout en faisant comprendre que l’article suivant reste dans la même rubrique/bloc.

Source : http://www.thrashermagazine.com/

2. Skatedeluxe

Similarité : Les boutons de la navigation sont tous identiques pour que l’on comprenne qu’ils ont la même fonctions et font parti du même bloc.

Symétrie : Les trois différentes sections entourées sont symétriques car on retrouve toujours une grande image avec deux plus petites sur la gauche ou la droite.

Point focal : Le point focal se fait sur les plus grandes images car c’est la première chose qui attire le regard. Le but principal étant de mettre en avant les dernières collections ou encore les promos, etc..

Source : https://www.skatedeluxe.com/en

3. Sugar skate Mag

Clôture : De fines lignes grise claire permettent de séparé et d’organiser le contenu.

Proximité : Les icônes de réseaux sont rassemblé en un seul bloc par les clôtures se trouvant à gauche et en-dessous du bloc.

Point focal : Le site met en avant leur derniers articles et vidéos. Il est impossible que les yeux ne soient pas directement attirer par ces derniers.

Source : http://www.sugarskatemag.com/

Un travail réalisé par Germain Thésias

One clap, two clap, three clap, forty?

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