Le côté obscur de Digitec Galaxus : lever de rideau sur le nouveau mode sombre

Digitec Galaxus est désormais disponible en mode sombre. Aussi banal que cela puisse sembler, la mise en œuvre de ce mode n’a pas été une mince affaire. Nous sommes ravi·es de pouvoir enfin partager la bonne nouvelle.

Vous pouvez d’ores et déjà utiliser le mode sombre. S’il n’est pas automatiquement activé chez vous, vous pouvez y remédier dans les paramètres en pied de page.

Mais pourquoi la mise en œuvre a-t-elle été si longue ? Et pourquoi avons-nous besoin du mode sombre dans nos boutiques en ligne ? Leonardo Hauschild, Lead UX Designer, et Tobias Grundman, Product Owner, ont piloté le projet. Ils nous parlent aujourd’hui du long chemin vers le « côté obscur ». Il ne s’agissait en effet pas d’inverser simplement les couleurs de nos boutiques.

Pourquoi Digitec et Galaxus ont-elles besoin d’un mode sombre ?

Tobias explique : « C’est d’une part cool et esthétique, mais c’est aussi bon pour les yeux ; tant en soirée, lorsqu’il fait sombre, que pour les personnes atteintes d’héméralopie. Et si votre appareil est doté d’un écran OLED, le mode sombre vous permet même d’économiser de l’énergie et donc la batterie. Bien sûr, il est également passionnant de mettre en œuvre quelque chose d’aussi rare que presque aucune autre boutique en ligne n’a fait jusqu’alors. Mais le grand nombre d’utilisateur·rices qui attendaient ce mode était notre principale motivation. La communauté en a beaucoup parlé. C’était un argument essentiel. »

Comment en est-on venu à la mise en œuvre définitive ?

Leonardo explique : « Cela fait quelques années que nous parlons du mode sombre en interne. L’important était de trouver le moment idéal. Nous avons donc donné la priorité à des projets utiles pour le mode sombre ensuite. Des projets comme la “Widescreen Initiative” ont ainsi posé les premiers jalons. L’objectif de ce projet était d’afficher le site web correctement et en haute résolution sur les grands écrans. Pour cela, nos équipes d’ingénierie ont dû adapter la mise en page du site. Il est peu à peu devenu évident que le mode sombre était lui aussi réalisable. »

Tobias ajoute : « Le projet est devenu concret en juin 2022. Avec le nombre croissant d’utilisatrices et d’utilisateurs, nous avons pu réfléchir à la mise en œuvre du mode sombre. Nous avons dû prouver noir sur blanc que le mode serait effectivement utilisé et avons donc entamé une analyse. L’analyse devait montrer le nombre d’utilisateurs et d’utilisatrices qui utilisaient le mode sombre sur leur ordinateur ou leur smartphone. Dans l’ensemble, cela représentait environ 25 à 40 % de tous·tes nos utilisateur·rices, la mise en œuvre de ce projet ne serait donc pas vaine. Finalement, nous avons dû déterminer ce dont nous aurions besoin pour réaliser ce projet. »

Ne suffit-il pas d’inverser les couleurs ?

Selon Tobias, « Ça n’est malheureusement pas aussi simple. Ce n’est pas pour rien que nous avons toute une équipe aux manettes de l’aspect visuel de nos boutiques en ligne. Notre équipe framework “Infinity” se compose principalement de développeurs et développeuses front-end. Cette équipe s’occupe de la mise en page générale du site web chez Digitec Galaxus. Cela comprend par exemple l’en-tête de la page web, les différentes colonnes et le pied de page. Ces éléments ainsi que tous les autres composants de la boutique en ligne ont une couleur prédéfinie. Les palettes de couleurs prédéfinies sont appelées “thèmes” ; Digitec et Galaxus utilisent deux thèmes distincts dont les couleurs correspondent à leur logo respectif. Le bleu et le rouge dominent sur Digitec et une bande bleue borde le haut du site. Sur Galaxus, cette bande est multicolore et le blanc, le noir et le gris dominent sur le site. »

Dans nos boutiques à la structure complexe, il y a, au total, des milliers d’endroits où les couleurs sont définies. Et de plus en plus de composants se sont ajoutés au fil du temps. Chaque nouveau composant s’est vu attribuer une couleur appropriée dans le code.

En revanche, dans ce code, il n’est pas toujours clair de quel composant il s’agit exactement. L’élément défini par la ligne “arrière plan” est assez clair. En revanche, il y a quelques “boutons”. Et le mode sombre double ce nombre de paramètres. Le code devient alors illisible et bien trop complexe. Il nous fallait donc un système permettant de trier et d’attribuer les couleurs de manière efficace. »

Leonardo complète : « Le design était un projet à part entière. Nous avons commencé par terminer quelques chantiers et avons ainsi déroulé une bonne base pour le mode sombre. »

N’aurait-on pas pu mettre un place ce genre de système il y a dix ans ?

« Bien sûr », répond Tobias. « Mais nous aurions alors hérité de contraintes et d’une complexité qui ne correspondaient pas au résultat escompté. De nouveaux éléments sont ajoutés en permanence. En définir les couleurs individuellement et manuellement aurait entraîné trop d’erreurs. Il nous fallait donc revoir le code afin de pouvoir automatiser l’attribution des couleurs. »

Quelle était l’étape suivante ?

Tobias explique : « Il s’agissait de construire un système nous permettant de définir des couleurs pour le mode sombre en plus des couleurs pour Galaxus et Digitec. Et ce système devait être le plus efficace possible, de la conception au développement, jusqu’à la diffusion finale du résultat. L’exact opposé de notre système jusque là. La nouvelle version allait ensuite remplacer complètement l’ancienne afin d’éliminer autant que possible les erreurs. Pour ne rien oublier, les designers ont dû passer en revue tous les composants et déterminer la couleur à utiliser jusqu’au plus petit élément. »

Il y a cependant une chose qui n’est pas facile à traduire dans le mode sombre, n’est-ce pas ?

Leonardo sait tout de suite de quoi je parle : « Nous sommes une boutique en ligne. Par définition, elle compte de nombreuses photos de produits présentés sur fond blanc. Nous nous sommes penché·es assez longuement sur ce point, car c’est un thème qui nous tient à cœur. Sur fond noir, les contours des produits sont difficiles à distinguer. En termes de convivialité, la meilleure solution est donc effectivement de conserver le fond blanc. »

Le mode sombre est désormais disponible. Tout devrait donc rouler comme sur des roulettes, non ?

Tobias réfléchit : « Eh bien, le plus gros est fait. Le mode sombre est disponible. J’ai hâte de savoir ce que la communauté en pensera. Il suffit en quelque sorte de cliquer sur un bouton pour que tout le site passe en noir. Il s’agit d’un changement radical et nous ne sommes pas à l’abri d’éventuels problèmes. Galaxus et Digitec comptent donc sur les retours durs, mais honnêtes, de ses communautés pour apporter les dernières touches au mode sombre. »

Voilà une excellente conclusion. Merci à tous les deux ! Le mode sombre nous attend !

Chère communauté, nous comptons sur vous. Que pensez-vous du nouveau mode sombre ? Tobias, Leonardo et toute l’équipe d’UX designers et de développeur·ses front-end se réjouissent de lire ce que vous en pensez dans les commentaires.