HCD 2 | Principes de la Gestalt

Source image

La Gestalt est une théorie selon laquelle les processus de la perception et de la représentation mentale traitent spontanément les phénomènes comme des formes globales, structurées ou non, plutôt que comme l’addition ou la juxtaposition d’éléments simples.

– Wikipedia

Similarité

Les éléments semblables sont perçus comme étant en relation et proposant la même fonctionnalité.

Les Others

Liste des articles présentés de manière identique.

Minimalissimo

Liste des catégories présentées de manière identique.

Proximité

Les éléments proches les uns des autres sont perçus comme faisant partie d’un seul et même bloc.

Essential

Les détails techniques sont proches donnant un bloc dédié à ces informations.

Designspiration

Barre de recherche et boutons de connexion sont extrêmement proches, ce qui forme un bloc.

Clôture

Espaces vides, contours ou fonds permettant d’isoler un élément.

Google Pixel 3

Le bloc est mis en évidence par les bords blancs autour.

National Standard

Lors du survol, l’article est mis en évidence par un contour.

Continuité

Éléments indiquant clairement ou suggérant le sens de lecture.

L’Estrange London

La photo suggère la direction de navigation de la page.

Bjork

Les grandes flèches indiquent à l’utilisateur le sens de navigation.

Symétrie

Structure se reposant sur un axe de symétrie.

Polestar

La page alterne (gauche/droite) la disposition sur un axe vertical.

Dropbox Design

La page est structurée sur un axe vertical au centre.

Point focal

Éléments attirant l’attention.

Asket

Les premiers éléments qui sautent à l’oeil sont le titre et la forme fluide en fond.

DesignBetter.Co

Les objectifs du site ainsi qu’un bouton permettant d’accéder au contenu attire l’attention lorsqu’on arrive sur la page.

Fond/figure

Dissocier le fond des éléments positionnés par dessus, en utilisant différentes solutions comme les contrastes ou l’opacité.

Film Truck

Pour dissocier le fond des textes, un contraste de couleur complémentaire est utilisé.

Nathan Riley

L’opacité de l’image de fond a été réduite permettant de bien différencier le fond du texte.

Pages web utilisant aux moins 3 principes

Listeners Playlist

Sur ce premier site, on trouve en haut à droite le principe de proximité, les éléments sont proches et on voit qu’il s’agit bien d’un bloc contenant des éléments liés au lecteur. Ensuite, la page est construite sur un axe de symétrie horizontal, c’est ce qui saute aux yeux dés l’arrivé sur le site. Pour finir, il y a un point focal positionné au centre de la page.

Spotify

On retrouve également sur le site de Spotify plusieurs principes de la Gestalt. Tel que la proximité avec le menu de navigation dans le haut du site, ensuite les différentes pochettes d’album sont toutes présentées de manière identique, c’est le principe de similarité. Le dernier principe mis en application est la continuité avec la flèche qui permet d’indiquer le sens de navigation de la page.

Artefactuel

Sur ce troisième et dernier site, le principe de clôture est utilisé pour isoler et mettre en évidence la barre de navigation se trouvant au-dessus. Un point focal est situé au centre de la page avec une phrase d’accroche et quelques informations. Pour finir, la vignette de projet suggère la suite du contenu plus bas en appliquant le principe de continuité.