Human Centered Design — Les lois de la Gestalt

Dans le cadre du cours Human Center Design, nous avons été amené à réaliser des recherches sur les 7 principes de la Gestalt que nous avons dû clairement identifier sur différents sites web.


Partie 1

Principe 1 : la Similarité

Des éléments ayant un aspect graphique similaire induisent une fonction similaire.

Similarité entre les liens internes contenu dans la zone rouge.
Similarité entre les différents boutons de la barre des menus.

Principe 2 : La Proximité

Les éléments proches entre eux sont considérés comme appartenant à un même bloc ou objet.

Proximité entre différents éléments qui forment un bloc (la grande zone bleu).
Proximité entre plusieurs éléments qui tous ensemble forment le rectangle rouge.

Principe 3 : La Clôture

La clôture permet de comble des vides de façon à percevoir une forme dans sa totalité.

La clôture se fait ici entre l’arrière plan et le bloc dans lequel le texte est compris
La clôture est identifiée par les éllipses rouges.

Principe 4 : La Symétrie

Ce sont des éléments de même amplitude qui sont placés de part et d’autre d’une ligne (axe de symétrie).

La symétrie est identifiée par l’axe de symétrie virtuel rouge
La symétrie est ici aussi identifiée à l’aide de l’axe rouge.

Principe 5 : La Continuité

Le principe consiste en différents éléments rapprochés et qui sont perçus comme une continuité. Ils tendent à représenter des formes.

La continuité se trouve dans la zone rectangulaire rouge. On retrouve toujours les 2 mêmes éléments à savoir une image accompagnée d’un texte une fois à gauche et deux fois à droite.
La continuité dans ce cas-ci, à lieu entre les smartphones.

Principe 6 : Le Fond/Figure

Les figures possèdent un contour défini, ce qui leur permet de se détacher du fond moins défini, et de créer plusieurs plans différents (aussi nommé avant-plan et arrière-plan).

Dans le cas ici, on distingue bien le fond (arrière plan du grand Canyon) de la figure (les différents blocs en avant plan entouré en vert).
Dans cet exemple, la forme (blocs noirs) et facilement identifiable à la figure (arrière plan mauve).

Principe 7 : Le Point Focal

Le point focal, c’est un point, une zone, un texte vers lequel notre regard converge.

Le point focal détermine une zone, un texte vers quoi le regard de l’utilisateur va converger.

Malgré la présence de plusieurs éléments importants, le mot FORCE est vraiment bien mis en évidence de sorte à ce qu’on le remarque en 1er.
Dans ce cas-ci, avant d’arriver sur le site même nous avons une page avec le logo du festival au centre sur lequel nos yeux se focaliseront directement.

Partie 2

Site n°1 : Marvel

Dans le site Marvel, j’ai repéré plusieurs principes de Gestalt. Voici les 3 que j’ai choisis. Tout d’abord, il y a le principe de proximité qui sont représentés par les zones en vertes. On comprend assez facilement que les éléments compris dans chacune des zones sont liés et forme un bloc ensemble. Ensuite, j’ai repéré le principe de clôture représentés par les rectangles oranges et qui est présent à plusieurs endroits. Ces éléments de clôture permettent de venir casser de grandes zones (ici principalement verticale). Et enfin, le 3e principe que j’ai choisi est le principe de symétrique qu’on peut aisément remarqué au niveau des cartes de banque Marvel.

Site n°2 : The Empire State Building

Pour ce site-ci, les 3 principes que j’ai visualisé sont : Premièrement, la similarité entre les 3 éléments compris dans la zone jaunes. Deuxièmement, il y a le principe de fond/figure que l’ont peut voir dans la zone bleu avec l’image de l’E. State Building qui représente le fond et les différents éléments notamment les 2 logos représentes les figures. Et troisièmement, il y a également le principe de clôture. Il s’agit d’une simple bande blanche (dans la zone verte) qui permet de casser la grande zone de gris en arrière plan.

Site n°3 : Standard de Liège

Dans ce site, j’ai vraiment eu le choix pour les principes. Le premier que j’ai décidé de mettre en avant est le principe de fond/figure (zone jaune) qu’on constate assez bien dans le haut du site. Le fond (arrière plan du public) est assez flou et s’estompe vers le bas tandis que la figure ici l’image centrale est bien en avant plan. Pour mon deuxième principe, j’ai opté pour le principe de clôture (zone verte). Elle n’est pas des plus visible sur la capture d’écran mais on peut quand même la constater grâce notamment au logo dans le coin droit de cette zone. Et comme troisième principe, j’ai choisi la similarité par la barre des menus ce trouvant dans le footer (zone bleu). Mais j’aurais pu choisir également le principe de symétrie qui est bien visible au niveau de l’affiche du prochain match avec 2 blocs distincts (un qui annonce le duel et l’autre qui décompte le temps avant ce duel).