Enfin un mode nuit, sombre, dark dans l’application mobile !

Déployée il y a quelques mois la nouvelle application mobile de Mediapart continue d’évoluer !  Sa dernière version introduit le « mode sombre » que beaucoup d’entre vous avaient réclamé, avec des couleurs et une luminosité plus adaptées à la lecture nocturne.

Vous l’attendiez, vous nous le demandiez : le voilà ! Le mode sombre débarque sur l’application mobile de Mediapart. Pour en profiter il suffit de mettre à jour votre application mobile : 

Lorsqu’on a commencé à réfléchir à la nouvelle application mobile en 2019 l’idée du mode nuit ou sombre – quelle que soit son appellation – était défendue par de fervents partisans dans l’équipe. Pas uniquement parce qu’ils en appréciaient l’usage, mais surtout car nous recevions régulièrement des messages d’utilisateurs, précisément sur ce point là. C’était le signe d’un intérêt d’une partie de nos lecteurs et lectrices pour cette fonctionnalité qui permet d’afficher l’application avec des couleurs – écriture claire sur fond sombre – plus adaptées à la lecture nocturne.

Le mode sombre, pour lire la nuit sans s'éblouir. Le mode sombre, pour lire la nuit sans s'éblouir.

 Le « mode nuit » a donc pris sa place dans la liste des fonctionnalités à développer. Nous avions cependant  un bon paquet d’autres choses déjà identifiées comme encore plus prioritaires pour remettre l’application sur pieds.  Le mode nuit a donc été contraint de patienter un peu, le temps de faire les autres développements. 

Fin janvier, nous avons enfin déployé la nouvelle version de l’application à 100% de l’audience. Depuis, nous continuons d’écouter les retours des lecteurs et lectrices :  ce qui les gêne, ce qui leur manque dans cette nouvelle application mobile. La question est ouverte, le champ de réponse est libre, et les retours sont clairs : plus de 25% des répondant-es demandent ce mode nuit.

"Il manque un mode sombre. Vraiment !"

Il y a d’abord les déçu-es, qui espéraient que la nouvelle application proposerait ce mode dès le début :

  « Toujours pas de mode nuit ! »

  « J'attendais tellement un dark mode :-( »


Le principal argument avancé est la lecture de nuit, pour ne pas s’abîmer les yeux :

  « Il manque un "mode nuit" pour pouvoir lire la nuit avec un fond noir au lieu de blanc qui est trop lumineux. »

  « Il faudrait vraiment un thème sombre : le principe de l'application est de lire des textes relativement longs, or le thème sombre repose les yeux de manière significative. » 

  « Un mode sombre serait parfait ! J'adore lire les nouvelles le soir après le travail, et un écran blanc agresse les yeux. »


Lire le soir donc, avant de s’endormir ou pour meubler une insomnie 

  « Le mode sombre pour la lecture d'un dernier article au lit avant le dodo ! »

  « Un mode sombre pour lire la nuit lorsqu'on a des insomnies ^^ »

 
Un mode nuit, enfin, pour économiser de la batterie :

  « Une interface noire est beaucoup plus reposante et moins gourmande en énergie. »

  « Un mode sombre (moins énergivore et meilleur pour les mirettes) »

   « C'est beaucoup moins agressif pour les yeux et ça augmente la durée de vie de la batterie et de l'écran du téléphone. »


Les commentaires sont parfois devenus suppliants :

  « Un mode nuit par pitié !! Texte blanc sur fond noir/gris foncé pleaaaase. » 

  « Le mode sombre ! Vous avez oublié le mode sombre ! On a les yeux qui saignent le soir ! »

  « Un mode nuit. Je suis à genoux. »


Et celui-ci a achevé de nous convaincre :

  « Si vous faites un thème sombre, je renouvelle mon abonnement. »

Les études ne sont pas toutes d’accord sur le gain de confort de lecture en contraste négatif (texte clair sur fond foncé), certaines suggèrent même l’inverse, notamment pour des textes longs. Il est probable que cela dépende un peu de la vue de chacun-e, des habitudes, des goûts et des couleurs. Pour faire en sorte que l’application mobile soit accessible à toutes et tous, il est donc recommandé de s’adapter sur ce point aux préférences de l’utilisateur, de respecter les réglages de son système, de le laisser choisir entre contraste positif (mode clair) et négatif (mode sombre). C’est donc ce que nous avons fait.

Apparence claire, sombre ou système ?

L’utilisateur peut donc désormais, dans l’écran Mes réglages, personnaliser l’apparence de l’application Mediapart :

- claire : texte foncé sur fond clair
- sombre : texte clair sur fond sombre
- système : qui suit le réglage clair ou sombre du système d’exploitation du téléphone, qui change parfois d'apparence en fonction de l’heure de la journée. 

Dans l’écran Mes réglages l'utilisateur peut choisir entre le mode clair et le mode sombre. Dans l’écran Mes réglages l'utilisateur peut choisir entre le mode clair et le mode sombre.

Pour permettre cela, nous nous sommes appuyés sur les recommandations de Google et d’Apple et avons fait évoluer les règles graphiques (couleurs, espacements, typographies) qui régissent l’affichage des contenus et des éléments d’interface dans l’application (notre « design system » dans le jargon design) pour que cohabitent des modes nuit/sombre et jour/clair.

Cette évolution repose principalement sur la mise en place de couleurs sémantiques : une couleur nommée en fonction de son usage (« background.primary » pour une couleur utilisée comme fond) plutôt que de sa valeur (« light-grey-2 », un gris clair dont on ne sait pas où vraiment dans quel cas il est utilisé).

Nous avons donc inventorié puis mis à jour toutes les couleurs utilisées dans notre logiciel de design (Figma) et dans le code source de l’application en suivant ce principe.

À gauche les couleurs dans notre logiciel de design, à droite la traduction dans le code de l’application. À gauche les couleurs dans notre logiciel de design, à droite la traduction dans le code de l’application.

Chacune de ces couleurs s’est ensuite vue attribuer une variation pour le mode sombre. Ainsi chaque couleur n’a qu’un seul nom mais est représentée par deux valeurs différentes (light et dark) en fonction du mode.

Une fois ce système en place, une conversion logique a pu s’opérer sur la majorité des composants graphiques de l’application. Cependant, certains éléments comme les illustrations ont demandé une attention particulière pour qu'elles  puissent s'intégrer harmonieusement au mode nuit (le diable est dans les détails !).

À gauche une autopromo illustrée en mode clair, à droite sa conversion en mode nuit. À gauche une autopromo illustrée en mode clair, à droite sa conversion en mode nuit.

Des recommandations de Google évoquées plus haut, nous avons principalement retenu deux choses :

- l’importance de la lisibilité du texte : nous avons systématiquement pris soin de vérifier l’accessibilité des contrastes proposés par le thème nuit.
- la logique de composition de l’interface : côté design, l’architecture de l’application a été repensée et est à présent constituée de couches de couleurs transparentes qui se superposent et s’additionnent pour former le mode nuit.

Couches de couleurs transparentes qui s’additionnent pour former le mode nuit. Couches de couleurs transparentes qui s’additionnent pour former le mode nuit.

Malgré notre attachement à bien faire, il reste des imperfections, des transitions entre deux écrans ou des éléments au sein de l’article qui semblent résister au mode sombre. Et puis,  l’usage des utilisateurs noctambules, dans leur contexte propre, fera sûrement émerger des petits défauts, des pistes d’améliorations. Le mode sombre n’est donc pas tout à fait fini, nous corrigerons les problèmes et affinerons ce qui peut l’être dès que possible et en fonction de ce que vous nous en direz.
Vous pouvez nous faire part de votre avis et de vos suggestions en répondant à quelques questions par ici : https://mp66.typeform.com/to/P6Vp2WOy

Un grand merci pour votre aide et à bientôt !

L’équipe mobile. 

Pour profiter du mode sombre il suffit de mettre à jour l'application Mediapart sur votre mobile ou votre tablette : 

Le Club est l'espace de libre expression des abonnés de Mediapart. Ses contenus n'engagent pas la rédaction.