C’est devenu un poncif, toute boîte de la tech qui se respecte doit avoir 3 choses : du kombucha, un garage à vélo et un dark mode. Spendesk peut se vanter de cocher 2 cases sur 3. Pourquoi alors n’avons-nous pas choisi de produire un thème sombre pour notre application mobile et desktop ?
Craig Williams, Laurent Ndong et Quentin Chuzeville, tenanciers de l’identité du produit et de la marque chez Spendesk, ont décidé de s’exprimer sur ce sujet brûlant.
Le Dark mode en contrastes
Le code couleur d’une marque et comment ses solutions se présentent au public occupent un rôle fondamental dans les choix de design d’une application quelle qu’elle soit. D’une simple contrainte technique à une affirmation de marque, le Dark Mode est aujourd’hui à la fois une fonctionnalité de circonstance et un élément du vocabulaire visuel d’un produit.
Le noir est souvent associé à l’idée de puissance et d’élégance pour une marque.
Quentin Chuzeville, Head of Brand Design chez SpendeskDark Mode Begins
Première vérité dont peu se souviennent : les premiers ordinateurs étaient en Dark Mode par défaut ! Des ordinateurs analogiques aux minitels, les caractères étaient le plus souvent en couleur alors que le reste de l’écran restait noir. L’apparition des premiers moniteurs pouvant afficher plusieurs couleurs à la fois remonte aux années 1980. Avant cela, tous les écrans ne pouvaient afficher qu’une seule couleur sur fond noir.
Il s’agissait avant tout d’une contrainte technique. Les écrans cathodiques sont “monochromes”, puisqu’ils n’affichent qu’une seule couleur. On retrouve par ailleurs cette technique d’affichage sur les oscilloscopes cathodiques, encore en usage de nos jours.
L’exemple le plus emblématique de cette ère de l’ordinateur personnel peut sûrement trouver son étendard dans l’Amstrad CPC, qui supportait notamment les premiers jeux vidéo grand public !
Années 2010 : Dark Mode Rises
Alors que les premiers “Dark Mode” étaient le fruit d’une contrainte technique, les thèmes sombres que nous connaissons aujourd’hui sont des partis pris esthétiques et ergonomiques. Ils représentent l’esprit et la culture du produit, la cible que celui-ci tente d’atteindre et surtout les développeurs et designers qui le construisent.
Ils visent à aider à la lecture dans un espace sombre, améliorer le contraste entre les éléments importants d’un contenu et le reste.
Enfin, et c’est là d’où émerge les clichés à propos des entreprises de la tech des années 2010. Il s’agit aussi d’un statement, un positionnement de marque. Comme tous les partis pris de design, le Dark Mode vise à faire passer un message. Le plus souvent, il s’agit d’exprimer une forme d’élitisme, de confidentialité ou de caractère premium.
À qui s’adresse le Dark Mode ?
Pour définir si le thème sombre est un élément essentiel d’un produit, il convient tout d’abord de définir à qui ce produit s’adresse, et dans quelles situations le thème sombre pourrait être exploitable. En un mot, identifier la plus-value d’une telle initiative.
On peut dès lors identifier 3 segments précis à qui le mode sombre devrait parler plus qu’à d’autres :
Aux développeurs, qui veulent se débarrasser de toute pollution visuelle pour se concentrer sur le code.
Aux gamers, qui vont solliciter le Dark Mode pour ne pas créer de choc de contraste lorsqu'ils passent d’un jeu vidéo (où les couleurs sont souvent foncées) à une page web.
Aux utilisateurs nocturnes de manière générale, qui souhait pouvoir faire ressortir certains éléments dans le noir sans que l’effet de contraste ne soit visuellement agressif.
Le Dark Mode convient d’ailleurs plutôt aux publics jeunes, qui n’ont pas de difficultés à voir les caractères lumineux sur fond noir, ce qui n’est pas le cas des utilisateurs plus âgés, comme le montrent diverses études sur le sujet.
Les cas d’usage du Dark Mode
Nous avons mentionné plus haut la cible gamers. Ceux-ci ont parfois tendance à basculer d’une fenêtre à l’autre pour répondre à des messages. Ce cas d’usage rejoint donc une situation où un joueur bascule de la fenêtre d’un jeu vidéo (souvent faible en luminosité et très contrasté) à une fenêtre de navigateur web.
Là où auparavant la fenêtre web aurait été blanche, surprenante et force de contraste, le mode sombre de Discord répond à ce problème d’usage. Discord est une plateforme de messagerie en ligne qui fonctionne par communauté construite autour d’un titre de jeu vidéo.
Dans ce cas de figure, le mode sombre répond à un cas d’usage réel, ce n’est pas un gadget, c'est même une nécessité pour les joueurs les plus nocturnes. Ce n’est donc pas un caprice ni un seul objet de positionnement, c’est une fonctionnalité. Cela témoigne aussi d’une fine connaissance de la cible !
En contre-exemple, avec lequel vous êtes sûrement familier, on trouve bien évidemment l’application SCNF Connect, qui a connu des débuts quelque peu mouvementés. On parle ici d’une clientèle très diverse, de tout âge, qui n’est peut-être pas à l’aise avec le mode sombre.
On voit ici donc un écueil courant qui fait pourtant appel à un fondamental du design grand public. Il faut penser et se mettre à la place de l’utilisateur, comme l’explique Craig Williams, Head of Design chez Spendesk :
Pour qui êtes-vous en train de concevoir ? Il faut avoir conscience de ses biais. Un jeune de 28 ans qui conçoit une application n’a pas les mêmes capacités visuelles qu’une personne âgée par exemple.
Craig Williams, Head of Design chez SpendeskOn parle également ici d’un positionnement qui dépasse le cas d’usage, ce qui est rarement souhaitable.
On distingue ici une affirmation futuriste et premium qui n’est pas forcément associée à l’image de la SNCF, c’est donc un cas de positionnement à revers de l’usage courant
Laurent Ndong, Senior Web Designer chez SpendeskOn peut enfin citer également la plateforme de streaming Netflix, dont le positionnement ici rejoint l’usage courant (dans une salle peu éclairée). Il s’agit ici de créer du mystère et d’imaginer une salle obscure, même dans son salon.
Un thème sombre = deux sites distincts
Il faut garder à l’esprit qu’entretenir un Dark Mode signifie entretenir deux designs différents et prévoir deux versions de tous les contenus publiés sur une page. Cela veut également dire que les équipes web et design ont à suivre en réalité deux versions parallèles.
Il convient donc de réfléchir au cas d’usage précis du Dark Mode avant même de penser à son implémentation. L’utilisateur moyen de la solution considère-t-il que le Dark Mode est indispensable à son confort d’usage ? Est-ce que ce design répond à un cas d’usage précis ? Est-ce que cette initiative est en adéquation avec l’image de marque et le positionnement du produit ?
Les composants d’une page vont devoir être en clair ou en foncé, c’est donc tout un système de design qu’il faut adapter d’une version à l’autre.
Laurent Ndong, Senior Web Designer chez SpendeskLe Dark Mode suppose donc une réflexion en amont. Comme évoqué plus haut, il faut donc se poser en premier la question de savoir si c’est un apport réel au business ou une feature de plaisance, auquel cas ce n’est pas une priorité absolue.
Le mode nuit
À ne pas confondre avec le Dark Mode, le mode nuit est lui pensé spécialement pour les utilisateurs travaillant après que le soleil soit couché. En réduisant l’exposition des yeux à la lumière bleue (reconnue comme étant l’une des principales sources d'inconfort visuel) le mode nuit privilégie les tons orangés et une luminosité adaptée.
Cette fonctionnalité est notamment utilisée par les smartphones et certains ordinateurs portables. On peut la recommander afin d’éviter la fatigue des yeux, tout comme les lunettes permettant de filtrer la lumière bleue.
Une conclusion en clair-obscur
Les entreprises voulant satisfaire des clients professionnels, de tous âges, utilisant leur solution en journée, dans un cadre de bureau, auront bien du mal à justifier l’existence d’un Dark Mode. C’est notamment le cas de Spendesk.
Faire passer des émotions à travers un design entièrement sombre est parfois une tâche particulièrement complexe. C’est pourquoi, en essayant de rendre les outils de gestion des dépenses plus accessibles, plus simples, ergonomiques et faciles à utiliser, nous pensons que le Dark Mode n’est pas un indispensable.
Enfin, le parti pris de design de Spendesk est la complémentarité des couleurs et des tons en fonction de la page affichée. Cohérence, facilité d’usage et prise en compte du profil utilisateur, la démarche de design chez Spendesk est customer-centric.
Pour toutes ces raisons, le Dark Mode serait, dans les cas d’usage les plus courants de Spendesk, une démarche plus esthétique que fonctionnelle. Lorsqu’on construit une solution faite pour tous, c’est l’usage qui prime sur le style. Notre équipe design a quand même réussi à allier les deux, et ce, même sans mode sombre !
Pour répondre à la question posée dans l'en-tête, le Dark Mode est tout à la fois, une évolution notable du design d'application tout au long des années 2010, et une nouvelle question posée aux futurs architectes de nos interfaces.
Ce qui peut ainsi apparaître comme un sujet anodin (noir ou blanc) est en réalité plus nuancé : pourquoi et pour qui créer un système visuel et iconographique ? Quelle place donner aux tendances dans ce qu'on construit ? Je vous laisse songer à cela par vous-même.