HCD : Human Centered Design : Les lois de la Gestalt

Dans le cadre de notre de cours de HCD à la Haute-Ecole Albert Jacquard, il nous à été demandé d’observer, analyser et de retrouver les principes les plus important de la Gestalt dans différents site web.

voici le résultat de mes recherches :

1. La similarité

Des éléments sont associés grâce à leurs caractéristiques semblables :

le menu de navigation : l’un est sélectionner & l’on comprend le lien avec le reste de la bar de navigation https://www.beoplay.com/
les deux boutons “Click Here “ & “Submit” sont identique, ils propose tous les deux une action similiaire https://hisense.co.uk/red-bull-racing/

2. La promixité

On distingue l’organisation et la séparation des éléments grâce aux espaces

https://www.digitalasset.com
https://www.beoplay.com/landingpages/beoplaye8#buy

3. La clôture

L’esprit comble les vides pour terminer l’image mentale d’une forme

tous les “o” du site sont incomplet https://www.wepresentconnect.com/en/sign-up/
https://anthonypauwels.be

4. La symétrie

Des éléments de même intensité sont disposés selon un axe de symétrie

https://glitty.co/pages/about
https://glitty.co/pages/about

5. La continuité

Des éléments rapprochés suivant la même direction évoquent une continuité

http://menya-bibiri.net
https://www.turingphone.com/appassionato/

6. Le fond / la figure

Des éléments de texte contrastent avec leur fond

http://bureau347.com
http://bacter.elephantstone.net

7. Le point focal

Des éléments sont disposés et mis en évidence de sorte à attirer l’oeil

http://us.descente.com/allterrain/index_en.html
https://badassfilms.tv

Il nous à été ensuite demandé de trouver deux sites qui utiliserait au moins trois de la Gestalt citué ci-dessus :

  1. Apple.com

La similarité : menu de navigation, footer, les quatre carrés de navigation eux aussi.

la proximité : les quatre carrés du millieu de page qui ont la même utilité, qui sont séprare par un fin espace blanc

la symétrie: le premier visuel qui est centré avec deux iphone

le fond/la figure : du texte noire sur fond blanc ou couleur “crème”, texte blanc sur fond noir

le point focal : les grands visuel, grand image avec très peu de texte.

www.apple.com

2. bang & olfusen

https://www.beoplay.com

La similarité : menu de navigation, chaque carré de présentation de marchandise

la proximité : même élèments, tous les produits sont présenter sous la même forme, on comprend qu’en cliquant sur l’un ou l’autre nous aurons les mêmes informations

la symétrie : les informations dans la catégories “about” sont présenter de la même manière, les informations ont la même importance.