Le dark Mode : bonnes pratiques et contextes d’usages
Le Dark mode (ou mode sombre) consiste à opter pour un fond sombre pour y positionner des composants d’interface en couleurs claires (polices, boutons, textes, liens, etc). Cette combinaison résulte en un contraste moins agressif qui garantit une bonne lisibilité du contenu et minimise la fatigue oculaire.
Les grands acteurs du web, tels qu’ Apple et Google en profitent pour délivrer une meilleure expérience utilisateur, notamment aux mobinautes. Ces derniers tendent à utiliser leurs appareils mobiles fréquemment la nuit. A cet effet, le mode sombre est très adapté à l’affichage dans des contextes à faible luminosité. En plus, il assure une meilleure économie d’énergie.
Qu’est-ce que le dark mode ?
Le dark mode désigne une interface utilisateur (UI) sombre (de couleur noire ou une variante du gris) à luminosité réduite. Ce style graphique a été adopté par les designers depuis quelques années, dans l’objectif de réduire la fatigue oculaire et d’offrir à l’internaute une expérience utilisateur plus confortable.
Le thème sombre s’inscrit dans un contexte de design léger qui transmet l’information d’une manière plus fluide et qui laisse un fort impact émotionnel chez l’utilisateur. Dans cette intention, le designer doit accorder une grande attention à ces détails :
- la nature du produit/service de l’entreprise, qui définit le thème du site.
- Le choix des couleurs qui doit s’adapter à la charte graphique et à l’identité visuelle de la marque.
- Le respect des standards du WCAG (Web Content Accessibility Guidelines) concernant le choix du ratio de contraste à adopter.
- La psychologie de l’utilisateur cible : ses besoins, ses soucis, ses comportements, etc. Cela dans le but de personnaliser le design selon son profil.
Les interfaces sombres ne datent pas d’aujourd’hui, car ce mode a été utilisé pour l’affichage sur les écrans des premiers ordinateurs. par la suite, il a reconnu un déclin dans les années 80 en raison de l’apparition du style graphique qui affiche un texte noir sur un fond blanc. Ce mode vise à simuler l’écriture à l’encre sur le papier blanc.
Après quelques décennies, le mode sombre fait un bon rebond pour renverser les normes et occuper une place prépondérante dans le design web. Ce thème réapparaît sur les interfaces de Windows Phone 7 en 2010. Par la suite, Google l’a activé sur son navigateur (Chrome Dark Mode) et ce concernant tous les appareils : desktop (macOS ou windows 10), smartphone ou tablette. Il a aussi indiqué dans son design system : Material Design, quelques bonnes consignes pour réussir la conception d’un fond sombre. De même, Apple a ajouté cette option dans son système d’exploitation iOS, depuis 2019.
Les contextes d’usage du mode négatif
Le mode négatif est utilisé principalement dans les cas suivants :
- les environnements sombres où la luminosité est faible ou nulle.
- Les logiciels (sublimetext, brackets, les logiciels de la suite Adobe, les logiciels de Microsoft Office), les sites web (surtout les sites des produits de luxe) et les applications mobiles (telles que les applications de divertissement comme Netflix et Spotify).
- Une utilisation prolongée dans la journée.
- L’affichage sur un écran géant.
- Stimuler les émotions de l’utilisateur et susciter son intérêt pour rester sur le site ou l’application le plus longtemps possible.
La popularité des dark modes ne cesse de prendre de l’ampleur, de telle sorte que les éditeurs populaires des applications comme Google et Apple les ont introduit dans leurs pratiques de webdesign.
Les cas d’usage mobile du dark mode
Aujourd’hui, le Dark mode est très convoité par les designers pour la conception des applications mobiles. Ce mode foncé est employé par plusieurs applications de renommée, comme Facebook, Instagram, Twitter, Slack, Apple Music, Medium, Telegram, YouTube, etc.
Les arguments qui favorisent l’utilisation de l’arrière-plan sombre sur les écrans des appareils mobiles s’expliquent par :
- la consommation réduite d’énergie d’un pixel noir par rapport à un pixel blanc (selon le monde de l’énergie, un pixel noir consomme jusqu’à 60 % d’énergie de moins qu’un pixel blanc). C’est une bonne alternative pour les smartphones à écrans LCD, où chaque pixel est allumé en continu. L’utilisation de ces écrans connaît une véritable chute, au profit des écrans OLED. Ces dispositifs apportent l’avantage de désactiver les pixels de couleurs, quand le pixel noir s’affiche. En s’associant au mode négatif, cette technologie est parfaitement économe en énergie.
- L’utilisation croissante du smartphone pour se connecter, essentiellement la nuit. Selon les données d’App Annie, les mobinautes du monde entier qui emploient Android passent plus de 4 heures par jour sur leurs smartphones. Dans ce contexte, le dark mode est le plus approprié pour un usage dans un environnement sombre.
- L’objectif de se distinguer des autres sites ou applications, à l’aide d’un thème plus mystérieux, qui peut éveiller la curiosité de plusieurs visiteurs et les inciter à explorer le produit.
Pourquoi opter pour le dark mode ?
Un meilleur confort oculaire
Le dark mode est la solution idéale pour soulager les yeux des internautes accros à internet, qui passent de longues heures à naviguer sur le net, notamment, en utilisant leurs appareils mobiles. L’interface utilisateur avec un arrière-plan foncé est très efficace pour réduire les troubles de vision et les maux des yeux. Elle assure aussi une lecture confortable la nuit.
Le travail devant un écran trop lumineux dans un milieu obscur nuit gravement à la santé des yeux. A cet égard, le thème sombre se présente comme une solution efficace pour travailler sereinement et bénéficier d’une bonne lisibilité du contenu, même dans un espace sombre.
L’interface UI avec un fond sombre optimise l’ergonomie visuelle en offrant le bon compromis entre la luminosité de sa surface et les conditions d’éclairage environnantes.
Réaliser des économies d’énergie
Le mode négatif représente le meilleur allié pour réduire l’empreinte carbone digitale du dispositif numérique. L’utilisation du dark mode implique l’usage d’un nombre important de pixels noirs, qui sont économes en énergie. De ce fait, l’appareil concerné sera enclin à consommer moins d’énergie.
Google, le géant du web, a testé et a affirmé dans son material design, la capacité du thème sombre à économiser la batterie des terminaux cibles. C’est pourquoi, il l’a intégré dans son système d’exploitation Android en 2018.
Obtenir une bonne lisibilité du contenu
La lisibilité de tous les éléments qui composent l’interface UI (les icônes, les couleurs, les textes, les boutons, les menus, etc) est un facteur clé pour la réussite de l’expérience utilisateur. Dans ce sens, il est indispensable de consacrer le temps nécessaire pour tester les différents types de ces composants, sur les différents appareils, afin de faire le bon choix.
L’emploi imprudent des teintes claires peut troubler les yeux et réduire la concentration de l’internaute. Dans ce sens, il est pertinent de se tourner vers les modes sombres pour mettre en lumière uniquement les informations et les éléments les plus importants. Ces styles garantissent aussi une bonne lisibilité du contenu.
Par exemple l’emploi du blanc pur (#FFFFFF) sur un fond foncé peut rendre la lecture plus difficile et entraîner une mal-compréhension du message affiché. A ce titre, il est intéressant de suivre les consignes d’usage de ces couleurs sur les thèmes sombres, à l’instar des guidelines du Material Design de Google.
Quelques recommandations pour utiliser le dark mode
Eviter le noir pur
Pour concevoir le dark mode, il n’est pas exigé d’utiliser un fond noir pur (# 000000). Il est plutôt recommandé d’opter pour le gris foncé comme couleur principale pour le background. Cette nuance affiche les textes clairs avec moins de contraste, ce qui diminue la fatigue oculaire et assure une navigation confortable.
Le gris foncé est une couleur raffinée, neutre, sobre et apaisante, qui peut s’harmoniser avec d’autres teintes pour donner un rendu visuel élégant. Un fond gris foncé peut accueillir une large palette de couleurs et les afficher plus clairement que sur un fond noir profond. Il peut être aussi associé parfaitement à des couleurs vives.
Il est conseillé de jouer sur la luminosité pour obtenir diverses tonalités du gris et agrémenter le background d’un site web d’une manière plus originale. Cette couleur est très adaptée aux menus de navigation et assure une meilleure lisibilité des blocs textuels, surtout ceux qui contiennent des mots en couleur.
Désaturer les couleurs
L’interprétation des textes avec des couleurs saturées peut être difficile sur un fond sombre. De ce fait, il est important de désaturer les couleurs à fort contraste, afin d’assurer une lecture plus aisée et une meilleure lisibilité du contenu.
L’utilisation de certaines couleurs claires sur une interface sombre ne nuit pas à son esthétique, mais elle peut assurer un contraste en équilibre avec la profondeur du fond de l’interface UI. Par exemple, Google déclare dans son guideline material design que le contraste entre les surfaces sombres et un texte 100% blanc doit être d’au moins 15,8: 1(source).
Intégrer des espaces vides
Les espaces vides font partie des tendances frappantes dans le design UI ces dernières années. Ils permettent d’optimiser la hiérarchie des composants UI de l’interface digitale et d’accentuer sa clarté.
Ces espaces permettent d’aérer l’interface et de mettre en évidence les éléments cruciaux, tels que les Call-To-Action. L’utilisation des espaces vides sur un fond sombre, outre l’espacement entre les lignes de texte, renforcent la lisibilité des éléments de l’interface et offrent une lecture fluide à l’internaute.
Proposer le dark mode comme une option et non une obligation
Certains internautes n’apprécient pas les thèmes sombres ou la couleur noire. Pour cette raison, on doit introduire ce mode comme une option paramétrable.
Par exemple, il est recommandé de placer un bouton d’activation pour assurer une transition facile du mode classique vers le dark mode et inversement. On peut aussi proposer à l’usager une option d’activation automatique la nuit. Ainsi, on garde le niveau de personnalisation requis pour renforcer l’accessibilité de l’application et offrir une meilleure expérience utilisateur.
Opter pour le design minimaliste
Le dark mode prône les contrastes faibles, ce qui peut nuire à la lisibilité des textes. Pour éviter ce constat, il est recommandé de miser sur le design minimaliste, qui se base sur le principe : Less is more.
La conception minimaliste est épurée de tout élément ou animation farfelue qui peut encombrer inutilement l’interface IHM et engendrer la distraction de l’utilisateur. Ce design implique un choix minutieux des caractères de police, des images, des blocs de textes, dans le but d’offrir à l’internaute une navigation intuitive et une interaction efficace avec l’interface graphique.
Le fait d’adopter un design minimaliste pour construire la structure d’une interface sombre permet de guider directement l’internaute vers l’objectif visé et de lui offrir une agréable expérience utilisateur (autant sur le côté visuel que le côté fonctionnel).
Respecter l’identité visuelle de la marque
Il est important avant de migrer vers le dark mode de vérifier sa compatibilité avec l’identité visuelle de l’entreprise. Il faut prendre en considération que toutes les couleurs ne sont pas compatibles avec ce mode. Donc, il ne faut pas se laisser emporter par le flamboiement de ce style en vogue, au détriment de la cohérence de l’identité graphique de la marque.
Intégrer les couleurs vives avec parcimonie
Il est conseillé d’utiliser les couleurs vives sur les fonds sombres avec prudence, pour éviter d’amplifier le design et de réduire la lisibilité du contenu en conséquence. A cet effet, il est préférable d’employer les teintes vives sur des surfaces limitées, pour diriger l’attention de l’internaute vers les éléments stratégiques, tels que les Call To Action.
Donner de la profondeur au design
Il est recommandé d’introduire une variation de la couleur du fond sombre de l’interface utilisateur. Cela permet d’accentuer la profondeur de l’écran et d’établir une hiérarchisation des éléments UI allant du plus important au moins important.
La phase de découverte
Le Dark mode figure parmi les tendances les plus notables en UI design. Ce thème ultra-moderne habille élégamment l’interface graphique et lui donne un touche d’authenticité, grâce à son aspect sobre et épuré. Cela permet de mettre en évidence les éléments les plus importants et d’attirer directement le visiteur vers l’objectif désiré (ou l’information recherchée par ce dernier).
Le mode sombre est apprécié pour les avantages considérables qu’il apporte en matière d’ergonomie, de confort d’usage et d’économie d’énergie. Par contre, ce style ne peut pas être appliqué dans tous les contextes et il doit être utilisé à bon escient, pour éviter de dégrader la performance du produit digital. Particulièrement, le fond sombre n’est pas approprié aux sites complexes, qui affichent plusieurs types de contenus dans la même interface ou aux sites affichant beaucoup de couleurs.
Lire aussi :
by 
