7 principes pour concevoir de meilleures interfaces

En passant la certification en UX PM il y a quelques semaines, j'ai été interpellée quand le formateur a évoqué la théorie de la Gestalt. Ses explications m'ont tout de suite parlé en tant que designer d'interface mais aussi en tant qu'UX designer.

J'ai en effet la chance d'être arrivée à l'UX par le design. Après plusieurs années à réaliser de purs design d'interfaces pour le compte de mes clients, je suis logiquement remontée aux racines de mon travail dans un souci permanent de donner du sens à mes réalisations. J'ai alors réalisé que je ne travaillais en réalité pas uniquement pour mes clients mais aussi pour leurs utilisateurs. Dès lors, impossible de revenir en arrière. Un nouveau terrain de jeu et de connaissances s'ouvrait à moi.

La théorie de la Gestalt

Appelée aussi théorie de la forme, la théorie de la Gestalt cherche à montrer que le cerveau traite les formes de manière globale et non comme des entités individuelles.

Un exemple bien connu est celui-ci: Que voyez-vous? Un amas de points ou un dalmatien?

Les formes sont interprétées à travers des schémas sensoriels construits avec l'expérience. Ces schémas organisent nos perceptions en faisant entrer les formes dans un cadre cognitif et en établissant des relations entre elles.

La théorie est élaborée autour de 7 principes:

1. Principe de plans
2. Principe de similitude
3. Principe de proximité
4. Principe de région commune
5. Principe de continuité
6. Principe de clôture
7. Principe de point focal

En UX design comme en design d'interface, les aspects cognitifs sont à prendre en compte car un utilisateur n'arrive jamais vierge de toute expérience sur une page.

En commençant mes recherches, je me suis rendu compte que sans le savoir, j'appliquais déjà bon nombre de ses principes. Hiérarchisation des contenus, affichage de blocs, agencement de headers, réglage des blancs etc. 

1. Principe de plans

Les personnes perçoivent instinctivement les objets comme étant soit au premier plan, soit à l'arrière-plan. 

Exemple de principe de plans

La page d'accueil de UICC.org montre un bel exemple d'utilisation de plans. Les différents fonds de couleurs vont faire passer les éléments tantôt sur l'avant tantôt sur l'arrière-plan. Cela permet à l'utilisateur de distinguer ce qu'il doit ignorer de ce qu'il doit regarder avec attention. Sont ainsi mis en avant de manière percutante la baseline, les valeurs et les sites clés de l'organisation.

2. Principe de similitude

Quand des choses sont similaires, le cerveau les regroupe. Appliqué à un produit digital, on pourrait même dire que le cerveau va jusqu'à leur attribuer les mêmes fonctions. A l'inverse, on peut ainsi mieux dissocier les éléments qui n'ont pas la même fonction.

Exemple de principe de similitude

La plateforme collaborative que nous avons créée pour Infosan en est un bon exemple. Les différentes zones d'action sont délimitées par des couleurs de fond différentes. La navigation supérieure, sur fond foncé, se démarque nettement du reste de la page. La partie basse présente des éléments de même nature et est donc perçue comme un ensemble de résultats. La partie blanche présente des options de filtrages.

3. Principe de proximité

Les objets qui sont proches les uns des autres sont plus liés entre eux que ceux qui sont plus espacés.

Exemple de principe de proximité

L'affichage sur le site de l'Hôpital de Fribourg montre comment la proximité entre texte et image permet de communiquer qu'ils sont liés entre eux en tant qu'entité. A l'inverse, l'espace important laissé entre chaque entité permet de les identifier immédiatement comme étant séparées.

Sur l'intranet de l'Ecole Internationale de Genève, la proximité entre l'image et les textes permet de les associer comme un seul élément. Les filets et l'espacement entre les éléments permettent de les distinguer les uns des autres.

4. Principe de région commune

Le principe de la région commune est étroitement lié à celui de proximité. Quand des objets sont situés dans une même région fermée, nous les percevons comme étant regroupés.

Exemple de principe de région commune

Ce principe est utilisé sur Infosan, la plateforme collaborative de l'Organisation Mondiale de la Santé pour montrer que les boutons d'action de type, like, react et share sont associés à un post spécifique (et pas à ceux qui l'entourent).

5. Principe de continuité

Les éléments disposés sur une ligne ou sur une courbe sont perçus comme étant plus liés que les éléments qui ne sont pas sur la ligne ou la courbe.

Exemple de principe de continuité

Pour présenter les chiffres clés du Centre Iconographique de la Ville de Genève, le principe de continuité a été utilisé pour inciter à une lecture linéaire des données. La structure de chaque entrée est identique et leur alignement invite l'utilisateur à une lecture de gauche à droite.

Même idée pour la Fédération Internationale des Dentistes.

6. Principe de clôture

Le cerveau est programmé pour reconnaître des formes et les interpréter. Quand nous examinons un agencement complexe d'éléments visuels, nous avons tendance à rechercher une forme unique et reconnaissable.

Exemple de principe de clôture

Les titres des bannières du site Swiss Better Gold Association semblent être contenus dans une bulle de dialogue. Or, seule la partie inférieure de la bulle est représentée. Elle suffit cependant à suggérer la forme entière.

7. Principe de point focal

Tout ce qui ressort visuellement captera et retiendra l’attention de l'utilisateur en premier.

Exemple de principe de point focal

La page d'accueil du Centre Iconographique de la Ville de Genève, montre comment l'utilisation de la couleur permet de mettre en avant des entrées importantes. Les éléments en orange ressortent nettement par contraste avec les éléments en niveau de gris. Ici, la recherche est clairement identifiée comme étant la fonctionnalité principale.

Pour conclure

Ces 7 principes contribuent au fait qu'une page a du sens pour celui qui la regarde. Les prendre en compte dans l'élaboration d'interface contribue à offrir une expérience de qualité à l'utilisateur.

Références

UserTesting: 7 Gestalt principles of visual perception: cognitive psychology for UX

UX Republic: La théorie de la Gestalt ou Psychologie de la forme

Wikipédia: la Psychologie de la forme

Vous souhaitez en savoir plus?

Inovae est une agence digitale qui place les problématiques utilisateurs au centre de ses préoccupations. Pour chaque projet, nous mobilisons l'intégralité de nos compétences et savoir-faire pour suivre un processus créatif minutieux et assurer à vos visiteurs une expérience immersive et unique sur chaque page. 

Si vous souhaitez en savoir plus sur nos méthodes et nos solutions, n’hésitez pas à nous contacter.