Les lois de Gestalt — HCD

(Human Centered Design) Analyse sur base du principe des lois de Gestalt.

Ces lois retranscrivent comment l’esprit humain associe des éléments ensemble. Elles forment des groupes, dans des groupes, dans des groupes, dans des groupes, etc …

Partie 1: Analyse de 7 principes de Gestalt avec des sites différents.

1° La similarité

2° La proximité

3° La cloture

https://www.youtube.com/

4° La symétrie

5° La continuité

https://www.awwwards.com/mobile-award/

6° Fond / Forme

7° Le point focal


Partie 2: Analyse de ces lois sur une page complète.

1° Fond/Forme (bleu)

Le fond qui se résume en quelques formes géométriques avec une dominance de blanc, ne fais pas confusion avec le titre principal du site mis clairement en évidence.

2° La Symétrie (rose)

Deux propositions sont mises symétriquement d’un côté à l’autre pour informer l’utilisateur de qui et qu’est-ce que Opoint.

3° La Cloture (brun)

La zone de navigation dans le “footer” est distincte par la clôture visuelle réalisée par un pavé vert clair et rappelle le but du site qui est de travailler avec la compagnie et donc de proposer l’ouverture d’un dossier.

1° La cloture (brun)

— Dès le début on peut apercevoir plusieurs zones de clôture couper par des fonds plutôt contrastés. Une 1re partie bleue énonçant les cookies, une 2ème pour “Sony” et une 3ème pour la barre de navigation.

— Dans la bannière, 2 éléments qui se détache de l’image qui sont:

  • un texte d’information et titre marqué par un pavé noir en opacité
  • et les images à droite qui permettent de faire défiler la bannière.

— Et une dernière grosse coupure qui inclut un bouton abonnement et de connexion au PSN. Cette partie sert aussi à faire une interaction de défilement vers la suite de la page.

2° La symétrie (rose)

— Les logos Playstation sont symétriques verticalement et font même présence de points focaux quand on commence à défiler dans la page en nous disant que c’est vers le bas qu’on obtient plus d’informations.

— Les sections sont centrées par des titres et sous-titres.

3° La similarité (vert)

Dans la 1ème section, les blocs sont présentés de la même façon avec une image, du texte et le même bouton. Idem pour la section “Playstation blog” qui contient une image à moitié cachée par un bloc texte en fond blanc.

1° La cloture (brun)

Le pavé bleu en haut de la page énonce les cookies et le choix du language en Français ou Anglais. Une autre clôture séparant le pavé bleu et la suite du site, c’est la barre de navigation.

2° La symétrie (rose)

La symétrie sur cette page joue beaucoup sur les éléments centrés comme les titres, les icônes de la section “Pourquoi passer à Spotify Premium?”** et les blocs d’abonnement.

3° La continuité (jaune)

La femme dans la bannière est dirigée vers le centre de l’image en regardant vers le texte “Offrez-vous Premium !”.

4° La similarité (vert)

— La section (**) présente des blocs avec chacun une image un texte et un autre plus petit. On peut même remarquer qu’ils ont tous un même style graphique.

— une autre similarité se fait paraître par les 2 blocs de proposition d’abonnement. On a un texte relativement ressemblant “Spotify free” et “Spotify Premium”, puis un prix, un commentaire, une liste à puces et un bouton.