Revenir à la liste

Dark mode, d’effet de mode à véritable outil pour l'expérience utilisateur

Thomas Huber

February 21, 2023

8 min de lecture

Tech

On le sait, tous les grands se sont mis au Dark Mode : Android, Twitter, Apple depuis la version 13 de son iOS, la suite Adobe… On pourrait alors se contenter de penser que si de tels services ont franchi le pas c’est que forcément le jeu en vaut la chandelle. Mais ce serait un peu rapide car, comme toujours, c’est d’abord l’observation des utilisateurs qui va nous guider pour évaluer l’intérêt - ou non - d’adopter ce mode.
Il a en tout cas indiscutablement gagné ses lettres de noblesse en passant par le filtre de l’UX.
Pour faire le bon choix, abordons les pourquoi, quand et comment ; en résumé tous les aspects à prendre en considération quand on parle de Dark mode. 

Le Dark mode n’est pas qu’écologique

On fait très souvent état du gain d'énergie réalisable grâce à la mise en place du Dark mode. C’est effectivement le cas, particulièrement sur les smartphones équipés OLED/AMOLED. Google a rendu publique en 2018 une étude qui montre une économie d’énergie de plus de 60% lorsque le Dark mode est activé. Mais attention, ne nous emballons pas : on ne parle là que de la consommation des écrans.

Ce n’est évidemment pas la seule raison pour laquelle on optera pour le Dark mode.
La première sur la liste devrait être notre santé et notre bien-être au travail. Les utilisateurs que nous sommes passons de plus en plus de temps sur les écrans et le dark mode permet une véritable diminution de la fatigue oculaire. Il favoriserait également la préservation de notre rythme de sommeil en diminuant la production de lumière bleue.

Un contraste de 100 % (blanc sur un fond noir) peut être plus difficile à lire et causer plus de fatigue oculaire.

Autre atout : le gain de concentration. Cette fonction cognitive semble être favorisée par la diminution d’éléments perturbateurs plus souvent présents dans le light mode. L’utilisateur se concentre sur le fond et moins sur la forme.


Le contexte toujours le contexte

Comment et quand l’utilisateur utilise votre service ? C’est comme toujours la vision UX qui doit guider le choix.
Le bien être visuel pour l’utilisateur est une question de contraste, pas seulement au sein même de l’interface mais également par rapport à son environnement. L’intérêt d’un dark mode est d’accorder le plus possible l’écran avec son environnement.
Pour exemple, la majorité des services de divertissements ont tendance à avoir uniquement des thèmes sombres. Qu’ils soient développés en mobile ou en desktop, sous forme d’applications ou de sites web, ces services sont utilisés dans un environnement souvent sombres et/ou la nuit. Les interfaces ont donc été adaptées au contexte d’utilisation. De plus, les médias colorés (pochettes de film, d’album, les photos et les vidéos) ressortent plus facilement lorsqu’ils sont présentés sur fond noir. C’est le cas de Netflix, Spotify, Apple TV entre autre..

Il est donc primordial de procéder à un UX Research poussé afin d’identifier les modes d’utilisations de vos services : entreprise aux locaux volontairement peu éclairés, horaires de travail décalés d’une structure internationale…

 

Après les do, les don’t

Plusieurs warnings doivent être présents à l’esprit lorsqu'on parle Dark Mode.
Le premier est l’accessibilité. Certains déficits visuels s'accommodent mal du Dark Mode. On ne peut toutefois pas être manichéen sur ce point. Les déficits sont multiples et les façons de les compenser également. Le seul impératif sera alors : avoir le choix.

Un autre aspect à prendre en compte est le branding de l’entreprise. Est-il ou non compatible avec le Dark Mode ? Si l’image de la marque repose sur des notions de lumière, de légèreté ou de pureté immaculée, il va être plus compliqué de l’adapter.

La palette de couleurs utilisée peut également être un écueil. Le Dark mode ne permet pas toute la multiplicité et la subtilité de traitement des couleurs que permet le light mode.

Enfin, une attention toute particulière doit être portée à la gestion des contrastes. Cela va concerner par exemple les micro-interactions telles les survols, les onglets actifs…

Dark Tips

La première recommandation est d’éviter d’utiliser un fond 100% noir mais d’opter pour un gris anthracite. De même qu’en light mode on est jamais sur un blanc #ffffff, l’utilisation d’un gris sombre permet d’avoir plus de possibilités de combinaison de couleurs et de créer de la profondeur. Les ombres seront perceptibles sur du gris mais pas du tout sur du noir.

Les composants continuent d’être régis par les principes classique d’ombrage et d’éclairage. Les objets les plus hauts doivent être plus clairs que l’ombre, afin de distinguer les différents composants et leur hiérarchie.

L’utilisation de la couleur demande en revanche une vigilance particulière. Si le contraste est suffisant et que l’espace occupé sur l’écran n’est pas trop important, on peut garder la même couleur primaire qu’en light mode. Il faut toutefois limiter les couleurs saturées qui ont tendance à vibrer sur du sombre et qui limitent la lecture. Un bon moyen de préserver le contraste est de superposer un claque blanc à 40% d’opacité.

Le Material Design créé par Google propose une mine de recommandations sur le Dark Mode.

 

En définitive le Dark Mode est à considérer comme un nouvel outil dans la box de l’UX/UI. Il va lui permettre d’offrir à l’utilisateur une expérience adaptée. Ce dernier mot est primordial, et doit engager à proposer le double mode Light/Dark.
Ultime recommandation : construire un Design System solide pour gérer au mieux le double mode !!

Ce que vous devez retenir du Dark Mode : 

  • Il permet de réduire la consommation énergétique des écrans 
  • L’utilisation du Dark Mode, augmente la concentration et diminue la fatigue oculaire 
  • Pour utiliser efficacement le mode sombre, adaptez vous aux attentes de vos utilisateurs  
  • Vérifiez la compatibilité du Dark Mode avec vos interfaces et le branding de votre entreprise 
  • N’hésitez pas à nuancer la couleur noir, pour ne pas entraver la lisibilité  
  • Permettez à vos utilisateurs de choisir un Dark Mode ou un light mode
Partager
A lire aussi