« Designing with the Mind in Mind », le livre ultime sur l’ergonomie des interfaces.

Vous travaillez dans le design web et vous connaissez bien sûr plein de bonnes pratiques en conception des interfaces: ne pas trop surcharger un design, respecter la règle des trois clics, ne pas utiliser 46 couleurs ni 18 typos, ne pas changer la place d’un bouton d’action au cours d’un processus de commande … Vous savez ce qui est bien et ce qui est mal, et vous avez l’impression de passer votre temps à vous justifier auprès de votre collègue développeur, votre chef de projet ou le client sur ces choses qui devraient tomber sous le sens pour tout le monde. Pire, quand ils restent hermétiques à ces bonnes pratiques, vous manquez totalement d’arguments pour les justifier.

Mais ça, c’est parce que vous n’avez pas lu LE livre qui aurait du vous armer en tant que concepteur d’interfaces web. Ce livre c’est Designing with the Mind in Mind, de Jeff Johnson, qui contrairement aux autres, ne se contente pas d’énumérer ces fameuses bonnes pratiques, mais en explique les origines physiques et physiologiques chez l’humain. La base quoi.

Malgré son excellence, ce livre n’a toujours pas été traduit en français, ce que je trouve très étrange. Il est anglais et aborde des termes parfois techniques. Mais c’est un livre bien structuré et bien illustré et ponctué de plein de petites expérimentations. Si vous n’êtes pas à l’aise avec la lecture anglophone, n’hésitez pas à prendre le temps de le comprendre, sachant que si vous saisissez les grandes lignes, ça vous apportera déjà beaucoup dans votre travail.

J’ai regroupé ci-après pour vous quelques informations intéressantes contenues dans ce livre.

Nous percevons les couleurs par contraste

Choisir une palette de couleurs pour un design est une étape primordiale. Parfois, on choisit des couleurs qui ont l’air de bien fonctionner, et quand on fait une première composition sur Photoshop, certaines de nos couleurs fétiches ont l’air beaucoup moins sexy, elles fonctionnent moins bien.

Ça c’est parce que chaque couleur influence sur la perception de l’autre. L’oeil humain perçoit par contraste (comparaison) et n’évalue pas une couleur toute seule, de manière absolue. On pourrait trouver ça handicapant, mais la nature est bien faite. Cela permettait à nos ancêtres de bien identifier une menace (comme un animal prédateur), que ce soit en plein jour ou dans l’obscurité.

Les deux couleurs A et B sont intrinséquement de la même couleur mais à causes du contraste avec les couleurs autour, on les perçoit de couleurs différentes

C’est un peu le même principe que la fameuse robe bleue-noire (ou blanche et marron/or) qui a fait le buzz il y a quelques mois. Physiquement, les gens voient la même chose, mais tous ne l’interprètent pas de la même manière.

Si on considère le contexte de surexposition de la photo, qui influence aussi sur les autres éléments présents, on considèrera la robe bleue et noire. Si on se concentre uniquement sur la robe, on verra du marron et du blanc (ou bleu clair). D’ailleurs si on extrait les valeurs colorimétriques via Photshop, il nous renverra des valeurs marron/or et bleu clair. Logique puisque Photoshop n’interprète pas selon le contexte. Bref, cette robe est bleue et noirs, débat clos.

Nous somme pratiquement aveugles dans notre vision périphérique mais celle-ci est très sensible aux mouvements

Le livre est une véritable mine d’informations sur le fonctionnement de la vision humaine, un savoir qui peut justement aider quand on est designer d’interfaces.

Par exemple, en ce moment l’animation des interfaces est le sujet dont tout le monde parle. L’animation avec le SVG s’est rapidement démocratisé, le Material Design de Google devient le nouveau truc qu’il faut utiliser comme Bootstrap il fut un temps, les principes de l’animation par Walt Disney deviennent la nouvelle référence du fronteux…

Mais les animations c’est comme tout, il faut savoir doser pour ne pas tomber dans les mauvais penchants comme ça a été le cas pour le GIF. Les animations ne sont pas là que pour faire joli, mais doivent servir le sens de l’interface et surtout en améliorer son utilisabilité et pas l’inverse.

Dans le livre on nous explique justement l’utilité des animations. L’oeil est attiré par les éléments en mouvement, ça tout le monde l’a compris.

La raison derrière, c’est que notre vision n’est pas si aussi parfaite que l’on croit. Dans notre champ de vision périphérique, contrairement au centre de notre vision appelée fovéa, nous sommes pratiquement aveugles. Par contre cette vision périphérique est très sensible à une chose : les mouvements. Ainsi, quand quelque chose bouge à la périphérie, nous recentrons automatiquement notre vision précise, la fovéa, sur cette chose.

On peut ainsi se servir de cette information pour animer des boutons d’action sur lesquels on veut que les utilisateurs cliquent. Ou bien renseigner le statut ou le changement dans une interface de manière animée pour qu’ils ne soient pas perdus. L’animation est plus qu’un gadget, elle permet de capter l’attention de l’utilisateur sur ce qui est important (du moment que l’on ne tombe pas dans l’effet sapin de noël bien sûr sinon l’effet ne marche plus).

Nous sommes influencés par nos buts

Dans le domaine de l’UX, on utilise souvent la technique des personas. Cela consiste à établir des cartes d’identités de profils types de visiteurs: photo type, nom, profession, contexte d’utilisation… Les personas permettent de bien cibler les différents cas utilisateurs pour un site ou une application.

Exemple de persona

On sait que les personas nous permettent de concevoir des designs plus efficaces mais pourquoi ?

La raison provient du fait qu’on est tous conditionné par nos buts, et quand on arrive sur une interface, on est toujours influencé par un but, même futile. C’est ce but qui fait que nous nous focalisons en priorité sur certains boutons ou liens, et que nous faisons totalement abstraction sur les autres.

Quand vous recherchez un proche dans une foule, vous arrivez rapidement à le retrouver ? C’est parce que vous êtes conditionné par ce but. Vous cherchez votre voiture rouge dans un parking ? Toutes les voitures rouges vous sautent aux yeux. Vous êtes conditionné là aussi.

C’est pour ça que le choix des titres, des libellés des liens ou des boutons d’action ont intérêt à être choisi judicieusement et en fonction des personas définies auparavant. Si les intitulés ne sont pas assez clairs pour un but donné, les gens peuvent très bien passer à côté, croire à défaut qu’ils ne trouveront pas l’information qu’ils cherchent, et passer très vite au site concurrent (le fameux taux de rebond).

Nous avons tendance à voir des structures

Un chapitre très intéressant du livre porte sur la Gestalt theory of perception ou principes de la forme en français. Derrière ce nom, se trouve toute une étude psychologique allemande qui démontre que la vision humaine est holistique: c’est-à-dire qu’elle cherche à percevoir des formes entières, des systèmes, au lieu de formes non finies, espaces ou objets sans rapport.

Il y a plusieurs lois de la Gestalt à retenir, et il est très important de les connaître sinon ils pourraient très bien se retourner contre vous: les utilisateurs pourraient associer des éléments qui n’on rien à voir entre eux, et la compréhension de l’interface peut alors être très difficile.

Les principales lois sont:

  • la loi de proximité: on perçoit les objets proches géographiquement entre eux comme faisant partie d’un même groupe
  • la loi de similarité ou similitude: quand des objets possèdent le même traitement visuel, on les assimile au même groupe (voilà pourquoi il faut traiter les boutons de la même manière sur l’ensemble d’un site)
  • la loi de continuité: on préfère voir des formes plutôt que des lignes coupées
  • le principe de clôture: on peut percevoir des zones d’espace comme des formes à part entière: un phénomène très utilisé dans la conception de logos
  • la loi de symétrie: si des formes complexes sont associées ensemble, notre cerveau essaiera de les « digérer » de manière simple, il essaiera d’y voir des triangles, des cercles … Ce principe nous permet ainsi de voir en 3D des formes affichées en 2D
  • le principe de destin commun: les objets qui bougent ensemble donnent l’impression d’être liés
Exemples de la théorie de la Gestalt. Saurez-vous reconnaître quelles lois se cachent derrière chaque exemple ?

C’est un long article que j’ai écrit là, mais ce n’est qu’un très court aperçu de ce qu’on peut apprendre dans Designing with the Mind in Mind. Je vous conseille vivement de le lire si vous travaillez dans la conception d’interfaces visuelles. C’est certainement un des meilleurs livres que j’ai lu pour mon travail! Les choses qu’on y apprend ne sont pas du tout abstraites et se convertissent en réels automatismes ensuite. Même humainement cela apporte quelque chose, on apprend plus de son corps et sa psychologie, c’est d’ailleurs assez amusant dans la vie de tous les jours de réinterpréter certains de nos comportements et ceux des autres avec les informations apprises.

Puisqu’après tout, le design est au service de l’humain, on ne le sert bien que si on le comprend, et ce livre est fait pour ça !

Lien du livre sur Amazon