UI : pourquoi concevoir sans couleur ?

Dark mode et Dark UI

Déjà répandu chez les développeurs et proposé par un nombre croissant de services, le Dark Mode donne naissance à la « Dark UI ». Pour preuve, il est maintenant disponible sur iOS13 et Google propose déjà un thème « dark » de son design system Material. Au-delà des considérations purement esthétiques, deux avantages d’ordre pratique sont reconnus :

• Les interfaces sombres sont plus reposantes pour la lecture sur écran ;
• La charge mentale est moins élevée lorsque les écrans présentent un grand nombre de contenus par exemple.

Par ailleurs, l’utilisation de la couleur dans ces interfaces sombres permet de mettre plus facilement en avant des composants ou des messages importants. Dans ce court article, l’auteur présente notamment comment l’utilisation du dark mode leur permet de simplifier une interface tout préservant une hiérarchisation des informations facilement perceptible :

 

 

Heydon Pickering et la conception en noir et blanc

Heydon Pickering, designer reconnu dans le monde de l’accessibilité et plus largement de l’inclusion, va plus loin que le Dark Mode en utilisant uniquement le noir et le blanc dans ses designs. Il a notamment présenté son approche radicale lors de la conférence Why Every Interface Should Be Black And White. Il aborde différents sujets récurrents lorsqu’il s’agit de Dark UI tels que la gestion des contrastes et l’implémentation du mode nuit des interfaces, mais il présente également quelques avantages spécifiques dans l’utilisation du noir et blanc dans son processus de conception.  Son approche permet notamment de développer la créativité. Pour découvrir le travail d’Heydon Pickering, je vous recommande ces deux ressources?:  

• Inclusive Components 
• Book Inclusive Components

Les contraintes promeuvent la créativité

Nous pouvons bien évidemment utiliser les couleurs à des fins décoratives. Mais comment dynamiser une page sans utiliser de couleur ? L’idée ici est de se challenger afin de trouver de nouveaux moyens, de nouveaux mécanismes, afin de dynamiser une mise en page sans avoir recours à la couleur.  Dans un exemple, le designer présente des cartes aux formes différentes : 

 

Exemple partagé par Heydon Pickering lors de sa conférence.

 

In fine, ce n’est pas qu’une contrainte

Les couleurs sont des moyens parfois efficaces pour faire passer des informations, mais s’avèrent quelques fois contre-productives car porteuses de biais cognitifs (les goûts et les couleurs...!). A travers la conception en noir et blanc, l’occasion est donnée au concepteur de se libérer de ces contraintes et facilités afin d’explorer de nouvelles voies. 

Au-delà de l’affirmation «Toutes les interfaces devraient être en noir et blanc» (qui peut paraître au premier abord provocatrice), la démarche est avant tout pragmatique. Le designer doit trouver la meilleure manière de transmettre de l’information. Heydon Pickering a d’ailleurs plusieurs fois démontré, au cours de ses travaux, comment la recherche de nouveaux designs l’a amené à l’exploration de solutions techniques de mise en œuvre innovantes. Il partage sur ce sujet des trouvailles plus ludiques basées sur des jeux de formes et imprégnées d’expérimentations de technologies frontend (notamment svg, et css).  Le designer peut ainsi faire le pont entre conception graphique et conception technique. Ainsi la démarche consistant à faire un premier jet de son interface en noir et blanc est parfois expérimentale mais elle reste toujours très réaliste techniquement. 

Être indépendant de la couleur

Le concept d’un design qui fonctionne sans couleur est très important en accessibilité puisque certains utilisateurs ne peuvent tout simplement pas percevoir les couleurs. Il s’agit des non-voyants bien évidemment, mais pas uniquement. Des utilisateurs malvoyants, selon leur pathologie, vont percevoir uniquement le noir et blanc. Enfin, d’autres utilisateurs ne vont pas distinguer correctement les couleurs, ou ne vont avoir qu’un spectre limité (les daltoniens par exemple).  Comme le dit Heydon Pickering : «?Avec une approche en noir et blanc vous ne réfléchissez donc plus en termes de couleurs, mais plutôt en termes de signification.?»  Un exemple simple : comment transmettre une notion d’alerte sans avoir recours au rouge ? 

 

 

Vous allez peut-être ajouter une icône.

 

 

Maintenant, comment différencier des icônes qui transmettent des informations différentes ?

 

 

Vous allez utiliser des icônes de formes différentes. 

 

 

En noir et blanc, l’information est toujours perçue par les utilisateurs.

 

 

Cette démarche s’applique des concepts les plus simples (les icônes) aux plus complexes (la transmission des informations dans les histogrammes). Même sans être expert en accessibilité, en faisant abstraction de la couleur, vous allez résoudre des problématiques qui sont souvent des challenges pour des utilisateurs en situation de handicap. Car, comme évoqué précédemment, certains utilisateurs ne perçoivent pas les couleurs. Il est important que les informations soient comprises par tous. Si une information est transmise, elle doit être comprise, sans ambiguïté par n’importe quel utilisateur.