• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 08/10/2018

Appuyez-vous sur la perception des formes pour mieux organiser vos écrans

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Les contenus interactifs organisés en hypertextes, qui prennent la forme de liens permettant de passer d’une information à une autre et d’une page à l’autre, changent radicalement notre manière de lire. Lorsque nous arrivons sur une nouvelle page, nous scannons rapidement la page pour nous orienter vers les informations qui nous intéressent. C’est alors le choix du design des écrans qui va orienter l’œil de l’utilisateur.

Mais comment ? C’est ce que nous allons voir dans ce chapitre, grâce à la psychologie de la forme !

Psychologie de la forme

L’ensemble de ce que vous allez présenter sur un écran va guider, ou au contraire, disperser le regard de vos utilisateurs. La structure des informations est déjà en soi une première étape de compréhension des informations (menu, textes, images) que vous leur présenterez, avant même de commencer à lire les intitulés comme les titres, le menu, les boutons.

Pour nous aider, nous nous intéresserons à la psychologie de la forme, appelée également Gestalt théorie. Cette dernière propose un ensemble de principes qui vont permettre de mieux comprendre comment le cerveau perçoit les formes. Cette théorie part du postulat que l’ensemble est plus grand que la somme des parties. Ainsi, les éléments ne sont pas simplement perçus comme juxtaposés mais sont compris dans leur ensemble.

Des fruits et legumes ou un homme?
Des fruits et légumes ou un homme ?

Comme sur l’image ci-dessus, inspirée par les tableaux de Giuseppe Arcimboldo, le spectateur reconnaît tout de suite un visage, et c’est dans un second temps qu’il constate que ce visage est composé uniquement de fruits et de légumes.

Loi de la bonne forme

Définition

Notre cerveau est fait pour créer du sens. Même là où il n’y en a pas à priori, nous avons tendance à en trouver. Par exemple, nous voyons des formes dans les nuages.

Dans les nuages!
Dans les nuages !
Appliquée au design

Lorsque l’utilisateur arrive sur une page (site, logiciel, appli mobile), il scanne dans un premier temps l’ensemble de la page sans s’attarder sur chacun des éléments qui la composent. Il en déduit une organisation générale de la page et interprète l’ensemble.

En fonction de l’organisation de votre page, vos utilisateurs vont adopter des comportements de “scanning” différents.

Page d'accueil du Times
Page d’accueil du Times

Ce site présente une grande complexité de fenêtres, d’images, de textes différents. Pourtant, l’utilisateur arrive à se situer en identifiant les différents grands ensembles :

  • la zone gros titre,

  • le fil en continu,

  • les articles les plus partagés…

Loi de continuité et principe de clôture

Définition

Nous percevons des points rapprochés comme des formes, comme un ensemble contigu. Si les formes sont des “bonnes formes”, alors nous allons combler les vides pour reconnaître ces formes, comme ci-dessous un carré et un cercle.

Illustration du principe de clôture
Illustration du principe de clôture
Autre illustration du principe de clôture
Autre illustration du principe de clôture
Nous voyons des formes dans les étoiles
Nous voyons des formes dans les étoiles

Ici, nous interprétons un ensemble : la constellation, et non la suite d’étoiles.

Appliquée au design

En suivant cette loi, nous pourrions mieux organiser des informations. L’œil préfère un histogramme dans lequel les informations sont rangées selon la taille des barres.

La loi de continuité appliqué à une histogramme
La loi de continuité appliqué à un histogramme

Celui-ci est plus difficile à lire
Celui-ci est plus difficile à lire

Ainsi, organiser les barres de graphique par taille permet de lire plus facilement les informations.

Ici, nous voyons clairement qu’il y a une continuité dans la forme.

L'oeuil voit une ocntinuité dans cette forme pourtant discontinue, issus du site Slavery Footprint
L’œil voit une continuité dans cette forme pourtant discontinue, issu du site Slavery Footprint

Nous pourrions également grouper des éléments de façon subtile. Grâce au principe de clôture, lorsque l’on a des regroupements sans cadres, on perçoit des éléments séparés, comme sur cet exemple :

Illustration du principe de clôture : ces éléments sans cadre, donnent l'impression qu'ils appartiennent à un ensemble
Illustration du principe de clôture : ces éléments sans cadre, donnent l’impression d’appartenir à un ensemble

Ici l’utilisateur voit tout de suite qu’il s’agit d'éléments dans une liste, même s’il n’identifie pas concrètement les éléments.

La loi de la proximité

Définition

Les éléments proches les uns des autres ont tendance à être associés et perçus comme un ensemble.

Dans l’exemple suivant, nous regroupons les points les plus proches et nous les associons comme un même groupe. Ainsi, nous voyons ici trois groupes distincts.

Illustration du principe de proximité
Illustration du principe de proximité

Appliquée au design

Votre écran doit être organisé de façon à ce que vos utilisateurs, en balayant très rapidement votre écran, comprenne l’organisation de votre page. Ainsi, ils pourront s’orienter plus facilement pour trouver tout de suite les informations qu’ils cherchent.

Illustration du principe de proximité, page d'accueil de TED
Illustration du principe de proximité, page d’accueil de TED

Sur cet exemple, l’utilisateur identifie tout de suite différentes zones.

La loi de similarité

Définition

Le cerveau associe des éléments qui sont similaires les uns aux autres. Ainsi, on a tendance à les percevoir comme appartenant à la même forme.

Par exemple, dans la première figure, nous voyons des lignes, dans la seconde, des colonnes.

Dans la figure 3, nous repérons tout de suite les éléments de couleur similaire en les regroupant ensemble.

Ici nous voyons des lignes
Ici nous voyons des lignes

Là, des colonnes
Là, des colonnes
Les couleurs similaires sont assimilées à un même ensemble
Les couleurs similaires sont assimilées à un même ensemble
Appliquée au design

Prenons l’exemple d’un site de e-commerce.

D’une part, les fiches produits sont toutes présentées de la même manière, avec la même organisation :

Liste de fiches produit du site fnac.com
Liste de fiches produits du site fnac.com

D’autre part, les boutons “Ajouter au panier” de ce site sont tous similaires : emplacement des boutons, couleur, taille, etc. Cela montre à l’utilisateur qu’il s’agit du même type d’action.

Liste de fiches produit du site fnac.com
Liste de fiches produits du site fnac.com

Dans ce deuxième exemple, on trouve des boutons noirs. Cela indique à l’utilisateur qu’il s’agit d’une action différente de celle actionnable par les boutons jaunes. Si entre les deux, seul le texte changeait, alors l’utilisateur ne pourrait pas repérer aussi facilement cette différence. Il serait obligé d’inspecter élément par élément pour le comprendre. Ici, jouer avec la similarité : l’emplacement des boutons, leur taille mais créer une différence de couleur indique tout de suite à l’utilisateur une différence d’action.

Organisation d'une fiche produit du site fnac.com
Organisation d'une fiche produit du site fnac.com

Ci-dessous, on distingue deux types de fiches : les bleues et les roses. L’utilisateur interprète donc qu’il y a deux groupes distincts. Par habitude, le bleu étant associé au genre mâle et le rose au genre femelle, sans lire les informations on imagine que les fiches roses correspondent à des chats femelles à adopter, et les bleus à des mâles.

Site de la SPA de Loire Atlantique
Site de la SPA de Loire Atlantique

La loi de destin commun

Définition

Lorsque des éléments sont en mouvement et ont la même trajectoire, nous les associons comme appartenant au même ensemble.

Nous voyons les groupes en fonction du mouvement
Nous voyons les groupes en fonction du mouvement
Appliquée au design

Pour un site, il peut s’agir d’animations qui arrivent dans le même sens, ou bien d’un slider (exemple ici.)

Vous pouvez aussi appliquer ce principe à vos vidéos.

La loi de familiarité

Définition

Nous percevons les formes les plus familières, comme étant les plus significatives. Notre regard, est donc plus attiré par ce qui nous est familier.

Nous voyons le mot
Nous distinguons le mot “LIFE” assez rapidement 
Appliquée au design

Vous devez proposer des éléments familiers afin que l’utilisateur puisse avoir des repères pour interpréter vos écrans.

Pensez à utiliser des patterns connus par vos utilisateurs. Par exemple, dans de nombreux sites de e-commerce, les boutons pour envoyer un article au panier sont plus gros que les autres, et verts, ou bien dans une couleur qui attire l’œil. Cela est aussi souvent le cas pour les sites de recherche ou tout site qui a besoin de mettre en avant un call to action, c’est-à-dire un élément de la page qui sollicite une action de la part de l’utilisateur, classiquement un bouton ou un lien.

Fiche prix et envoi au panier du produit sur le site Cdiscount
Fiche prix et envoi au panier du produit sur le site Cdiscount
Fiche produit sur Vente privée
Fiche produit sur Vente privée

Fiche produit sur Darty.com
Fiche produit sur Darty.com

Les utilisateurs ont aussi des habitudes concernant la barre de recherche, ils les cherchent généralement en haut à droite, comme sur l’exemple suivant :

Bandeau du site de France Inter
Bandeau du site de France Inter

Représentations humaines ou humanoïdes : un atout pour vos interfaces

De part notre adaptation à l’environnement, en tant qu’humains, nous attestons d’une très bonne reconnaissance des visages. Il y a même une zone du cerveau dédiée à cela. Et c’est dès la naissance que les humains sont attirés vers les visages.

Les visages nous attirent
Les visages nous attirent

De nombreuses études ont été réalisées avec un eye-tracker, c’est-à-dire un appareil qui permet d’observer où regarde une personne lorsqu’on lui montre, par exemple, une page Web. Lorsqu’un visage est présent, les personnes vont tout de suite orienter leur regard vers ce visage. Ajouter l’image d’un être humain, va rendre votre design plus “humain”, en ajoutant une touche d’émotion.

Jouez avec le non verbal

Le non verbal, c’est-à-dire les mimiques du visages et les gestes, sont très bien reconnus par les humains, et ce, très rapidement. Servez-vous en pour transmettre une émotion associée à une information très rapidement.

Communiquez l'emotion!
Communiquez l’émotion !

Donc attention, veillez à choisir une image qui véhicule bien ce que vous voulez transmettre de votre page. Vous ne choisirez pas la même image si vous préférez transmettre une notion de sérieux, de professionnalisme, ou bien plutôt une image décontractée, etc.

Cette remarque est vraie aussi pour les représentations humanoïdes, c’est-à-dire toute représentation qui a forme humaine : dessin, animation d’avatar…

Tout est dit. Présenter des photos d’humains ou des représentations humanoïdes peut être très puissant, mais attention aux fausses notes !

Pour résumer

Grâce à ce chapitre, vous venez d’apprendre que la psychologie de la forme, la Gestalt est un bon outil pour penser le design. Il est donc essentiel de bien organiser ses pages pour que vos utilisateurs s’y retrouve en scannant la page, en respectant :

  • la loi de la bonne forme,

  • la loi de continuité et le principe de clôture,

  • la loi de la proximité

  • et la loi du destin commun

De plus, pensez à ajouter des visages ou des représentations humanoïdes à vos interfaces, cela attire le regard et vous permet de transmettre très rapidement des émotions à vos utilisateurs.

Exemple de certificat de réussite
Exemple de certificat de réussite