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.

One clap, two clap, three clap, forty?

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