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.
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.
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.
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.
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.
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.
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 :
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.
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.
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.
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 :
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.
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.
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.
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.
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.
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.
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 :
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.
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.
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.
