image

Le Dark Mode sur les mobiles iOS et Android

image
Florian Hureau
15 octobre 2019

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.

Un é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

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

image
image
Florian Hureau
5 novembre 2019
Actualités

IKOMOBI News #3 : l’actualité digitale via le prisme de l’agence mobile

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. Adobe Photoshop sur iPad : fin de la version bêta La vingt-et-unième mouture de cet éditeur d’image comporte son lot de nouveautés portant sur l’amélioration continue des centaines (milliers ?) d’outils qu’il propose : […]
image
image
IKOMOBI
20 mai 2019
Mobile

ASO 2019 : les bonnes pratiques en matière d’App Store Optimization

Après l’idéation, la conception et la réalisation de votre application mobile, cette dernière a été déposée sur les stores. Bravo mais ce n’est pas terminé ! Votre application mobile démarre sa vie publique et va bientôt être confrontée aux réalités de la visibilité sur les stores d’applications. C’est ici que la démarche d’ASO (App Store […]