L'équipe technique de Mediapart
Salarié·e Mediapart

16 Billets

2 Éditions

Billet de blog 7 juin 2021

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.

L'équipe technique de Mediapart
Salarié·e Mediapart

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 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.

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.

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.

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.

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 : 

Bienvenue dans le Club de Mediapart

Tout·e abonné·e à Mediapart dispose d’un blog et peut exercer sa liberté d’expression dans le respect de notre charte de participation.

Les textes ne sont ni validés, ni modérés en amont de leur publication.

Voir notre charte

À la Une de Mediapart

Journal — France
La visite du ministre Lecornu a renforcé la colère des Guadeloupéens
Le barrage de La Boucan est l'une des places fortes de la contestation actuelle sur l’île. À Sainte-Rose, le barrage n’est pas tant tenu au nom de la lutte contre l’obligation vaccinale que pour des problèmes bien plus larges. Eau, chlordécone, vie chère, mépris de la métropole... autant de sujets que la visite express du ministre des outre-mer a exacerbés.
par Christophe Gueugneau
Journal — France
L’émancipation de la Guadeloupe, toujours questionnée, loin d’être adoptée
Alors qu’une crise sociale secoue l’île antillaise, le ministre des outre-mer, Sébastien Lecornu, a lâché le mot : « autonomie ». Une question statutaire qui parcourt la population depuis des années et cristallise son identité, mais qui peine à aboutir.
par Amandine Ascensio
Journal — France
Didier Raoult éreinté par son propre maître à penser
Didier Raoult défend un traitement inefficace et dangereux contre la tuberculose prescrit sans autorisation au sein de son institut, depuis au moins 2017. Le professeur Jacques Grosset, qu’il considère comme son « maître et numéro un mondial du traitement de la tuberculose », désapprouve lui-même ce traitement qui va « à l’encontre de l’éthique et de la morale médicale ». Interviewé par Mediapart, Jacques Grosset estime qu’il est « intolérable de traiter ainsi des patients ».
par Pascale Pascariello
Journal — International
Variant Omicron : l’urgence de lever les brevets sur les vaccins
L’émergence du variant Omicron devrait réveiller les pays riches : sans un accès aux vaccins contre le Covid-19 dans le monde entier, la pandémie est amenée à durer. Or Omicron a au contraire servi d’excuse pour repousser la discussion à l’OMC sur la levée temporaire des droits de propriété intellectuelle.
par Rozenn Le Saint

La sélection du Club

Billet de blog
Effacement et impunité des violences de genre
Notre société se présente volontiers comme égalitariste. Une conviction qui se fonde sur l’idée que toutes les discriminations sexistes sont désormais reconnues et combattues à leur juste mesure. Cette posture d’autosatisfaction que l’on discerne dans certains discours politiques traduit toutefois un manque de compréhension du phénomène des violences de genre et participe d’un double processus d’effacement et d’impunité.
par CETRI Asbl
Billet de blog
Pour une visibilisation des violences faites aux femmes et minorités de genre noires
La journée internationale des violences faites aux femmes est un événement qui prend de plus en plus d'importance dans l'agenda politique féministe. Cependant fort est de constater qu'il continue à invisibiliser bon nombre de violences vécues spécifiquement par les personnes noires à l’intersection du cis-sexisme et du racisme.
par MWASI
Billet de blog
Ensemble, contre les violences sexistes et sexuelles dans nos organisations !
[Rediffusion] Dans la perspective de la Journée internationale pour l'élimination des violences faites aux femmes, un ensemble d'organisations - partis et syndicats - s'allient pour faire cesser l'impunité au sein de leurs structures. « Nous avons décidé de nous rencontrer, de nous parler, et pour la première fois de travailler ensemble afin de nous rendre plus fort.e.s [...] Nous, organisations syndicales et politiques, affirmons que les violences sexistes et sexuelles ne doivent pas trouver de place dans nos structures ».
par Les invités de Mediapart
Billet de blog
Les communautés masculinistes (1/12)
Cet article présente un dossier de recherche sur le masculinisme. Pendant 6 mois, je me suis plongé dans les écrits de la manosphère (MGTOW, Incels, Zemmour, Soral etc.), pour analyser les complémentarités et les divergences idéologiques. Alors que l'antiféminisme gagne en puissance tout en se radicalisant, il est indispensable de montrer sa dangerosité pour faire cesser le déni.
par Marcuss