Tendance esthétique ou véritable plus-value des interfaces homme-machine, le dark mode est sur toutes les lèvres depuis la sortie d’iOS 13.
Qu’est-ce que le dark mode ?
En terme d’interface et par extension d’expérience utilisateur, le dark mode consiste à proposer un fond sombre et des composants d’interface s’y contrastant en couleurs claires (polices, pictogrammes, éléments de l’interface).
Souvent présenté comme une représentation en “négatif” d’une interface initialement conçue sur fond clair, le dark mode est maintenant une option proposée aux utilisateurs de smartphones et depuis peu fortement conseillée par Apple et Google pour les applications iOS et Android.
État de l’art des écrans de smartphones
Les smartphones ont longtemps été équipés d’écrans LCD, dispositifs luminescents pour lesquels chaque pixel était “allumé” en permanence. Sur ces écrans, les éléments d’interface de couleur noire étaient finalement toujours gris et la lisibilité des contrastes s’appréciait plus facilement sur des fonds clairs.
De gauche à droite : un écran OLED à gauche (si si) puis un écran LCD tous deux affichant un fond noir (eh oui). Depuis, les écrans OLED ont fait leur apparition. Et cette technologie permet d’éteindre les pixels quand le noir s’affiche, phénomène pouvant résulter par ailleurs à une baisse de consommation de la batterie.
Le noir est alors profond et agréable, les contrastes y sont bien moins agressifs. Créer des interfaces sur fond noir est possible et bienvenu.
De nouveaux contextes d’usage qui vont influencer les applications mobiles.
Le smartphone s’utilise de plus en plus. Il a été constaté que les deux pics de son usage se situent entre 23h et minuit, et de 7h à 8h. Selon un rapport Deloitte de 2016, un tiers des personnes consultent leur smartphone en pleine nuit. Et il suffit d’avoir déjà travaillé tard sur un écran, scrollé Instagram mécaniquement sous le coup d’une insomnie, ou regardé ses mails tôt le matin pour se rendre compte que la lumière d’un écran à fond blanc devient vite éblouissante.
À ces moments, nous utilisons notre smartphone dans des contextes à luminosité faible voir nulle. Le dark mode est alors vivement recommandé pour un usage en environnement sombre (sous les 300 lux).
Le dark mode, une option d’affichage idéale pour vos dispositifs interactifs quand vous séjournez dans l’ISS.
Le dark mode doit se comprendre comme un “mode” d’affichage contextualisé à une situation d’usage. En cela il n’a rien de nouveau : les développeurs, conducteurs et astronautes disposent d’informations depuis des interfaces dont le fond est sombre. Ce qui change à présent c’est la flexibilité donnée aux développeurs dans la modulation de cette contextualisation.
Les applications mobiles les plus téléchargées ont un dark mode.
Facebook Messenger, Instagram, Wikipedia, Slack, Twitter, Medium, Apple Music, Telegram, Google Maps et YouTube sont des applications qui prennent certainement place sur votre smartphone. Elles ont récemment toutes mis en place un dark mode et les autres que vous utilisez quotidiennement comme Facebook ou Gmail sont en train d’élaborer le leur (s’il n’est pas déjà sorti à l’heure où nous écrivons ces lignes).
iMessage, Facebook Messenger et Wikipedia en Dark Mode
Le constat est clair : le dark mode s’impose comme une option d’affichage qu’il faut intégrer aux dispositifs interactifs. Et si les pics d’usage de votre service se concentrent sur les créneaux évoqués plus haut, n’hésitez pas une seconde à le mettre en place (Spotify et Netflix l’ont identifié assez tôt).
Ce qui s’impose sur iOS si on souhaite implémenter le dark mode.
Depuis le 18 septembre 2019 et la sortie d’iOS 13, Apple invite les développeurs à intégrer le Dark Mode dans leurs applications et impose une mise à jour substantielle des éléments d’interface pour le gérer de façon dynamique : UIColor, UIImage, UITraitCollection, UIView, UIViewController, UIWindow
Les pré-requis
Xcode 11 : pour intégrer une version dark mode à votre app, cette dernière doit être développée sur Xcode 11.
iOS 13 : les appareils sous iOS 13 pourront intégrer cette fonctionnalité (à partir des iPhone 6s).
Ce qui s’impose sur Android si on souhaite implémenter le Dark Mode
Les Dark Themes font partie intégrante d’Android 10. Google indique que l’intégration de ce type de thème permet de réduire la consommation de la batterie, améliorer l’expérience de lecture pour les personnes sensibles à la lumière et faciliter à tout le monde l’usage de leur dispositif mobile dans un environnement sombre.
Les pré-requis
Android Studio (API level 29) : rendu disponible le 3 septembre de cette année, l’API 29 d’Android permet le développement de Dark Theme pour vos applications Android.
Android 10 : les appareils sous Android 10 pourront bénéficier de l’option d’affichage Dark Theme quand les applications en intègrent un.
En conclusion, une avancée pour les applications mobiles, et sans doute par extension pour le web.
Le dark mode éclaire de sa fraîcheur l’univers des interfaces mobiles. Profitant à la fois des avancées technologiques en matière de conception d’écran et de l’attention portée à l’expérience utilisateur en général et aux usages en particulier, il permet aux services digitaux d’offrir des expériences toujours plus satisfaisante selon les contextes d’utilisation.
Les équipes d’Ikomobi intègrent actuellement ces options dans les applications iOS et Android de leurs clients. Si vous souhaitez en savoir plus et apporter un côté obscur à vos applications, nos experts développeurs Android et iOS sont à votre disposition.
Le web n’est pas en reste : les développeurs de notre pôle web travaillent en parallèle à l’intégration de cette option pour vos sites. En effet, Google Chrome 76 (sorti cet été) supporte la requête CSS prefers-color-scheme. Cette dernière permet d’interroger votre système afin de savoir si le dark mode a été appliqué à votre appareil puis de modifier des éléments d’interface de votre site web afin de respecter cette préférence.
Vous voulez intégrer un dark mode à votre application ?
C’est par ici : Je veux un Dark Mode pour mon application mobile iOS et Android