Welkom aan de donkere kant: alles wat je moet weten over de nieuwe donkere modus van Digitec Galaxus
De Digitec Community heeft gewacht op dit moment voor wat voelt als een eeuwigheid. Lange tijd was het onduidelijk of het ooit zou gebeuren. Toen stapte een dapper team naar voren. Nu presenteren ze met trots cue uitbundig applaus... de donkere modus.
Digitec Galaxus heeft de donkere versie van zijn online winkels onthuld. En laten we zeggen dat het implementeren van de functie iets langer heeft geduurd dan het schrijven van deze zin. Maar nu kunnen we eindelijk de introductie aankondigen.
Natuurlijk is de donkere modus nu beschikbaar voor gebruik. Als het niet automatisch is geactiveerd, kun je het onderaan de pagina inschakelen.
Maar waarom hebben we er zo lang over gedaan om de donkere modus te realiseren? En waarom hebben we eigenlijk een donkere versie van onze online winkels nodig? Lead UX Designer Leonardo Hauschild en Product Owner Tobias Grundman waren verantwoordelijk voor het project met de donkere modus. In dit interview leggen ze uit waarom "het pad naar de donkere kant" zo lang was. We konden immers niet zomaar van de ene op de andere dag al onze winkelkleuren veranderen.
Bron: Michelle Brändle
Bron: Michelle Brändle
Waarom heeft Digitec Galaxus een donkere stand nodig?
Tobias legt uit: "Het ziet er zeker cool uit, maar het kan ook prettiger zijn voor de ogen. Dat geldt voor gebruik 's avonds, maar ook voor mensen met nachtblindheid (pagina in het Duits). En als je een OLED-scherm gebruikt, kun je de batterij zelfs sparen in de donkere modus. Natuurlijk is het ook spannend om zoiets zeldzaams te kunnen implementeren - bijna geen enkele online winkel heeft een donkere modus. Het belangrijkste is in ieder geval dat er genoeg gebruikers zijn die er interesse in hebben. De Community heeft zich er echt over uitgesproken, wat ook een cruciale rol heeft gespeeld in de beslissing."
Bron: Michelle Brändle
Hoe is de modus uiteindelijk geïmplementeerd?
Leonardo legt uit: "We praten intern al een aantal jaar over de donkere modus. Projecten zoals ons breedbeeldinitiatief legden de basis. Het doel van dat project was om onze website correct en in hoge resolutie weer te geven, zelfs op grote schermen. Dit betekende dat onze technici moesten gaan sleutelen aan de lay-out van de website. Ondanks de schaal en complexiteit van onze winkels, werd het gaandeweg duidelijk dat het implementeren van de donkere modus ook te doen was."
Tobias gaat verder: "Het project werd een zekerheid in juni 2022. We schatten dat het ongeveer 1.000 werkdagen zou duren om het te implementeren. In dit soort gevallen moet je goed nadenken of het de moeite waard zal zijn. We moesten ook overwegen of de donkere modus uiteindelijk echt gebruikt zou worden. Daar moest concreet bewijs voor zijn, dus deden we een analyse. Deze was bedoeld om te laten zien hoeveel gebruikers de donkere modus daadwerkelijk gebruiken op computers en smartphones. Het bleek in totaal om 25-40 procent van onze gebruikers te gaan. Het implementeren van de functie was dus de moeite waard voor een aanzienlijk deel van de mensen. Toen kwamen we voor de vraag te staan wat er voor nodig zou zijn om het te implementeren."
Betekent het niet gewoon alle kleuren "omkeren"?
Tobias legt uit: "Zo eenvoudig is het helaas niet. Daarom hebben we een heel team dat verantwoordelijk is voor de visualisatie van onze online winkels. Ons frameworkteam, dat we Team Infinity noemen, bestaat voornamelijk uit frontend ontwikkelaars. Zij zorgen voor de algehele lay-out van de Digitec Galaxus website. Dit omvat de header van de website, de zijkolommen en de footer. Deze elementen, evenals alle andere onderdelen van de online shop, hebben een vooraf gedefinieerde kleur nodig. Deze vooraf gedefinieerde kleurenschema's worden "thema's" genoemd. Digitec en Galaxus gebruiken twee afzonderlijke thema's die overeenkomen met de kleuren van hun respectievelijke logo's. Het thema van Digitec combineert veel blauw en rood en heeft een blauwe balk bovenaan. De balk bovenaan de website van Galaxus bevat meerdere kleuren, terwijl de rest voornamelijk wit, zwart en grijs is."
Bron: Michelle Brändle
Bron: Michelle Brändle
Er zijn duizenden gebieden binnen de complexe structuur van onze winkels waar kleuren worden gedefinieerd. In de loop van de tijd zijn er steeds meer onderdelen bijgekomen en aan elk onderdeel is een passende kleur toegewezen in de code van de winkel.
Het is niet altijd duidelijk in elk deel van de code naar welk onderdeel wordt verwezen. "Achtergrond" spreekt voor zich, maar we hebben zeker meer dan een paar "knoppen". En de donkere modus verdubbelt dat aantal. Je begint het overzicht te verliezen en de dingen worden veel te complex. Daarom hadden we een systeem nodig dat kleuren efficiënt kon organiseren en toewijzen."
Leonardo voegt eraan toe: "Tijdens een afzonderlijk project om een ontwerpsysteem te ontwikkelen, zijn we erin geslaagd om een paar obstakels uit de weg te ruimen, waardoor we een goede basis hebben gelegd voor het project voor de donkere modus."
Konden we 10 jaar geleden niet zo'n ontwerpsysteem gebruiken?
"Natuurlijk," antwoordt Tobias, "maar we zouden ook beperkingen en complexiteit hebben gecreëerd die niet het gewenste resultaat zouden hebben opgeleverd. In de loop van de tijd zijn er voortdurend nieuwe elementen bijgekomen en als we al die kleurdefinities handmatig hadden moeten aanpakken, zou dat veel te veel ruimte voor fouten hebben gecreëerd. Dus moest de code worden herzien om de kleurtoewijzing te automatiseren."
En wat was je volgende stap?
Tobias legt uit: "Het was onze taak om een systeem te bouwen waarmee we kleuren konden definiëren voor zowel de donkere modus als de sites van Galaxus en Digitec. Van ontwerp, tot ontwikkeling, tot eindresultaat, het moest super efficiënt zijn - geen woord dat je zou kunnen gebruiken om ons vorige systeem te beschrijven. De nieuwe versie moest de oude volledig vervangen, zodat we zoveel mogelijk fouten eruit konden halen. Om er zeker van te zijn dat we niets over het hoofd zagen, moesten de ontwerpers door alle onderdelen ploegen en bepalen welke kleur ze moesten gebruiken, tot en met de allerlaatste elementen."
Maar één ding wordt niet zo gemakkelijk weergegeven in de donkere modus, toch?
Leonardo weet precies waar ik het over heb: "Wij zijn een online winkel. Dus onze site bestaat natuurlijk uit een enorm aantal productafbeeldingen. Elk product verschijnt op een witte achtergrond. Dit is iets waar we al een tijdje mee aan het worstelen waren, omdat dit onderwerp echt belangrijk voor ons is. Als je een zwart product op een zwarte achtergrond hebt, zijn de contouren en tinten van het artikel moeilijk te zien. Het beste resultaat in termen van gebruiksvriendelijkheid is eigenlijk een witte achtergrond. Daarom houden we het voorlopig bij deze versie."
Bron: Michelle Brändle
Donkere modus is hier Heeft het realiseren van de donkere modus echt 1000 dagen werk gekost?
Tobias denkt even na: "Ik kan je daar nog geen definitief antwoord op geven. Ik denk dat het ongeveer 700 dagen waren, ongeveer. Maar we zijn nog maar net bij het meest cruciale deel aangekomen. We hebben nu de donkere modus beschikbaar gemaakt voor onze Community. Ik ben benieuwd wat ze ervan maken. Het scherm virtueel donker maken met één druk op de knop is een behoorlijk agressieve verandering en er kunnen altijd fouten insluipen. Dat betekent dat Galaxus en Digitec rekenen op eerlijke, hoogwaardige feedback van de community om ons te helpen de laatste hand te leggen aan de donkere modus."
Wat een geweldige manier om alles af te ronden. Hartelijk dank aan jullie beiden! Ik kan alleen maar zeggen: de donkere modus wacht!
Dus, beste mensen van de Community, nu is het jullie beurt. Wat vinden jullie van onze donkere modus? Tobias, Leonardo en iedereen in onze UX Design en Frontend Development Teams zijn benieuwd naar jullie feedback in de comments.
In mijn wereld achtervolgt Super Mario Stormtroopers met een eenhoorn en mixt Harley Quinn cocktails voor Eddie en Peter in de strandbar. Overal waar ik mijn creativiteit kan uitleven, tintelen mijn vingers. Of misschien komt het omdat er niets anders door mijn aderen stroomt dan chocolade, glitter en koffie.
Interessante feiten uit de wereld van producten, een kijkje achter de schermen van fabrikanten en portretten van interessante mensen.
Alles tonen
