Il lato oscuro di Digitec Galaxus: tutto sul nuovo Dark Mode
Retroscena

Il lato oscuro di Digitec Galaxus: tutto sul nuovo Dark Mode

La Community Digitec ha aspettato questo momento da tempo immemore. L'implementazione era già nell'aria. Ora presentiamo con orgoglio il Dark Mode, tra applausi ed esultazioni.

Digitec Galaxus presenta i suoi negozi online in nero. L'implementazione ha richiesto molto più tempo di quello che si impiega per leggere la frase. Ora possiamo finalmente annunciare la notizia.

  • Novità aziendali

    Galaxus e Digitec sono ora disponibili anche in Dark Mode

    di Catherine Barth

Naturalmente d'ora in poi puoi utilizzare il Dark Mode. Se non si attiva automaticamente, puoi impostarlo nel piè di pagina.

Ma perché ci è voluto così tanto tempo per implementarlo? E perché abbiamo bisogno di una versione scura dei nostri negozi online? Leonardo Hauschild, Lead UX Designer, e Tobias Grundman, Product Owner, hanno tenuto le redini del progetto. Nell'intervista, spiegano il lungo cammino verso il «lato oscuro». Infatti, non tutti i colori presenti nei nostri negozi possono essere semplicemente invertiti a questo scopo.

Ecco come appare il Dark Mode su Digitec.
Ecco come appare il Dark Mode su Digitec.
Fonte: Michelle Brändle
Ed ecco il Dark Mode su Galaxus.
Ed ecco il Dark Mode su Galaxus.
Fonte: Michelle Brändle

Perché Digitec Galaxus ha bisogno di un Dark Mode?

Tobias spiega: «L'aspetto è sicuramente cool, ma può anche essere utile per proteggere gli occhi. Sia in generale la sera che per le persone affette da cecità notturna. E con i display OLED, grazie al Dark Mode è possibile risparmiare la batteria. Naturalmente, è anche emozionante realizzare qualcosa di così raro. Perché finora quasi nessun negozio online lo ha fatto. Ma l'importante è che ci sia un numero sufficiente di utenti interessati. La Community si è espressa molto a riguardo. Anche questo gioca un ruolo essenziale».

La discussione sul tema scuro in Dark Mode.
La discussione sul tema scuro in Dark Mode.
Fonte: Michelle Brändle

E come si è arrivati all'implementazione finale?

Leonardo spiega: «Abbiamo discusso internamente del Dark Mode per diversi anni. L'importante era capire quando sarebbe stato il momento ottimale. Per questo motivo abbiamo dato maggiore priorità ai progetti che sono rilevanti per la modalità scura. Ad esempio, la ‹Widescreen Initiative›. L'obiettivo era quello di visualizzare il sito web correttamente e in alta risoluzione anche su schermi di grandi dimensioni. Già per questo, i nostri team di ingegneri hanno dovuto fare ordine nel layout del sito web. In qualche modo è stato chiaro: è tempo per il Dark Mode».

  • Dietro le quinte

    Galaxus e digitec ora in widescreen

    di Alex Hämmerli

Tobias continua: «Il progetto si è concretizzato nel giugno del 2022. A causa del crescente numero di utenti, ci siamo chiesti se valesse la pena implementare la modalità scura. Questo doveva essere dimostrato nero su bianco. Per questo motivo abbiamo avviato un'analisi con l'intento di mostrare quanti utenti utilizzano effettivamente la modalità scura su computer e smartphone: in generale, si tratta di circa il 25-40 percento dei nostri utenti, quindi l'implementazione è utile per una buona parte di essi. Dopodiché si trattava di capire cosa sarebbe stato necessario fare per implementarlo».

Non basta semplicemente «invertire» i colori?

Tobias spiega: «Purtroppo non è così semplice. Non per niente abbiamo un intero team che si occupa della visualizzazione dei nostri negozi online. Il nostro team di framework ‹Infinity› è composto principalmente da cosiddetti sviluppatori front-end che si occupano del layout generale del sito web di Digitec Galaxus. Questo include, ad esempio, l'area dell'intestazione della pagina web, le colonne laterali e l'area del piè di pagina in basso. Questi e tutti gli altri componenti del negozio online hanno bisogno di un colore predefinito. Gli schemi di colore predefiniti sono chiamati ‹temi›. Digitec e Galaxus utilizzano due temi distinti che corrispondono ai colori dei rispettivi loghi. Digitec è composto da molti blu e rossi e ha una barra blu in alto. Galaxus ha diversi colori sul bordo superiore e per il resto è più bianco, nero e grigio».

Con il tema Digitec, molte cose sono blu, rosse e grigie.
Con il tema Digitec, molte cose sono blu, rosse e grigie.
Fonte: Michelle Brändle
Il tema di Galaxus è un po' più colorato.
Il tema di Galaxus è un po' più colorato.
Fonte: Michelle Brändle

«Complessivamente, nei nostri negozi ci sono migliaia di punti in cui i colori sono definiti. E nel tempo sono stati aggiunti sempre più componenti. A ogni nuovo componente è stato assegnato un colore corrispondente nel codice.

In questo codice, non è più chiaro ovunque quale componente si intenda esattamente. Il componente ‹sfondo› è chiaro, ma ci sono anche diversi ‹pulsanti›. Il Dark Mode raddoppia questa quantità. Diventa confuso e troppo complesso. Avevamo quindi bisogno di un sistema in grado di smistare e assegnare i colori in modo efficiente»

Leonardo aggiunge: «Il sistema di progettazione era un progetto completamente separato, dove abbiamo già sistemato alcuni lavori e gettato una buona base per il progetto Dark Mode».

Non si sarebbe potuto usare un sistema di progettazione di questo tipo 10 anni fa?

«Certo», risponde Tobias. «Ma avremmo anche creato limitazioni e complessità che non avrebbero portato al risultato desiderato. Sono stati aggiunti continuamente nuovi elementi. Inoltre, la gestione manuale delle numerose definizioni di colore comporta un numero eccessivo di errori. Quindi il codice deve essere rielaborato per automatizzare l'assegnazione dei colori».

Qual è stato il passo successivo?

Tobias spiega: «Il compito era quello di costruire un sistema che ci permettesse di definire i colori per Galaxus e Digitec e quelli per la modalità scura. Il tutto doveva essere il più efficiente possibile, dalla progettazione allo sviluppo, fino alla riproduzione finale del risultato. Il nostro sistema era tutt'altro che così. La nuova versione deve sostituire completamente la vecchia per eliminare il più possibile gli errori. Per essere sicuri di non sbagliare nulla, i designer hanno dovuto analizzare tutti i componenti e stabilire quale colore utilizzare, anche per gli elementi finali».

Una cosa, però, non si lascia implementare così facilmente in Dark Mode?

Leonardo sa a cosa alludo: «Il nostro negozio online è composto da molte immagini di prodotti. I prodotti sono rappresentati su sfondo bianco. È un punto che abbiamo trattato a lungo perché questo argomento ci sta molto a cuore. Con il nero su nero, i contorni e le sfumature dei prodotti sono difficili da vedere. Il risultato migliore in termini di usabilità è quindi uno sfondo bianco. Per questo motivo, per il momento, ci atteniamo a questa variante».

Le immagini dei prodotti rimarranno per il momento su sfondo bianco.
Le immagini dei prodotti rimarranno per il momento su sfondo bianco.
Fonte: Michelle Brändle

Il Dark Mode è stato implementato. Ora non può più andare storto nulla?

Tobias riflette: «Beh, ora arriva la parte più importante. Il Dark Mode è ora disponibile per la nostra Community. Sono curioso di sapere cosa pensa del risultato. Quando tutto viene visualizzato in scuro premendo un pulsante, si tratta di un cambiamento piuttosto aggressivo. E possono insinuarsi sempre degli errori. Galaxus e Digitec contano quindi sul feedback duro ma di alta qualità della Community per poter dare il tocco finale al Dark Mode».

Das ist ein tolles Schlusswort. Grazie a entrambi! Il Dark Mode aspetta!

Quindi, cara Community, ora tocca a te. Cosa ne pensi del nostro Dark Mode? Tobias, Leonardo, l'intero team di UX designer e gli sviluppatori front-end attendono il tuo feedback nella colonna dei commenti.

A 134 persone piace questo articolo


User Avatar
User Avatar

Nel mio mondo, Super Mario insegue gli Stormtrooper con un unicorno e Harley Quinn mescola cocktail per Eddie e Peter al bar della spiaggia. Ovunque possa dare sfogo alla mia creatività, le mie dita fremono. O forse perché nelle mie vene non scorre altro che cioccolato, brillantini e caffè. 


Potrebbero interessarti anche questi articoli

Commenti

Avatar