Wat is dark mode, waarom wordt het steeds populairder en is het de moeite waard om het in te bouwen in je volgende project? En zo ja, welke ontwerp-uitdagingen kom je dan tegen? Ik ben van oorsprong designer en de laatste tijd heb ik me in het fenomeen dark mode verdiept. Dit zijn een paar van de dingen die ik ontdekte over het werken op een donkere achtergrond.
Toen computers net op onze bureaus begonnen te verschijnen, waren er maar twee soorten displays: zwart met groene letters en zwart met amberkleurige letters. Je zou dus kunnen zeggen dat dark mode, het werken met lichte tekst op een donkere achtergrond, de originele computer-interface is.
Toen kwamen de RGB-monitoren en gingen softwaremakers, Apple en Microsoft voorop, aan het werk met WYSIWYG-omgevingen en point-and-click-interfaces. Daarbij kozen ze ervoor om het fysieke papier en het fysieke bureaublad te imiteren. Sindsdien werken we met zijn allen op lichte achtergronden.
Dat we lichte schermen gebruiken is langzaam aan het veranderen. Steeds meer mensen komen erachter dat ze het prettiger vinden om in dark mode te werken. Sinds vorig jaar ondersteunt iOS dit en kunnen dus ook miljoenen iPhone- en iPad-gebruikers kiezen voor een minder felle werkomgeving. Ook macOS, Windows, Office en veel mobiele apps, waaronder webbrowsers, hebben inmiddels donkere thema’s.
Waarom dark mode?
Waar komt de populariteit van dark mode vandaan? Volgens mij spelen daarbij de volgende dingen mee:
- We zitten steeds meer online en lezen ook steeds meer content van het scherm. Juist als je leest is het fijn om rust aan je ogen te hebben. Nu.nl, Pocket en Facebook bieden dark mode om deze reden al aan. Je leest dit stuk ook op een donkere achtergrond, omdat onze nieuwe site dark mode gebruikt voor het bloggedeelte.
- De cultuur van software developers, designers en fotografen, die al heel veel met een donkere achtergrond werken, krijgt steeds meer invloed op de mainstream.
- Er is, door het toegenomen schermgebruik, steeds meer aandacht voor de gezondheidsgevolgen ervan. Donkerder displays zouden kunnen helpen om oogschade en slaapproblemen tegen te gaan.
- Schermen en devices worden steeds geavanceerder en vragen meer van de batterij. Hyperzuinige OLED-schermen kunnen stroom besparen dankzij veel zwart in het scherm: die pixels staan uit en vragen geen energie.
Nu de populariteit van dark mode groeit, wordt het belangrijk om erover na te denken als je een app of site aan het ontwerpen bent. Als jouw gebruiker de keuze maakt om in een donker thema te werken en je kunt daar bij aansluiten scoor je extra punten op het gebied van UX. Dat kan je hogere conversies en merktrouw opleveren. Maak je een ontwerp voor professionele gebruikers, zoals developers of fotografen? Publiceer je veel tekst? Wordt je interface meerdere uren achter elkaar gebruikt? Of denk je dat je site vaak ‘s avonds gebruikt zal worden? Dat kunnen allemaal redenen zijn om dark mode in je ontwerp op te nemen. Het gaat er uiteindelijk om dat je iets maakt dat past in de ervaring van je gebruiker. Denk ook aan een donkere vormgeving als je met veel video werkt, want dat is een goede combinatie. Probeer het donkere thema van YouTube maar eens. Heerlijk!
Het gaat er uiteindelijk om dat je iets maakt dat past in de ervaring van je gebruiker.
Dark mode, accessibility en productiviteit
Het verbaasde me dat dark mode weinig blijkt te verbeteren aan toegankelijkheid voor mensen met een visuele beperking. Dit artikel vat het onderzoek daarover goed samen. Ook is een donkere omgeving niet per se productiever. Uit tests blijkt dat we bepaalde taken zelfs beter verrichten in een lichte omgeving.
“Ontwikkelen voor Dark Mode of Light Mode maakt in de praktijk niet zoveel uit, zolang in beide gevallen de focus ligt op goed kleurcontrast. Maar de optie aanbieden om te switchen van light naar dark is voor je gebruiker altijd het vriendelijkst.”
Henk-Jan van Voorthuijsen, Accessibility Expert bij Enrise
Zelf merkte ik dat toen ik mijn e-mailprogramma in dark mode zette. Dat werkte niet fijn, omdat mailprogramma’s heel veel verschillende panelen, tekstjes, labeltjes, icoontjes en andere besturingselementen hebben. Daar kan ik makkelijker mee omgaan op een lichte achtergrond. Dark mode is beter voor toepassingen die focus vereisen, zoals lezen, fotobewerking, video-editting. Maar het is toch vooral een kwestie van smaak en voorkeur.
Professionals, zoals onze developers, gebruiken dark mode vooral om minder snel vermoeide ogen te krijgen. Maar ook dat is persoonlijk. Bepaalde oogafwijkingen kunnen er zelfs voor zorgen dat een donkere achtergrond juist vermoeiender is. Zelfs als je geen oogafwijking hebt, kan dark mode ook nadelig zijn voor je ogen. Er is dus niet één lijn te trekken en een advies te geven, jammer hè?
Ontwerpen voor dark mode: waar je rekening mee moet houden
Als je dan besluit dat je een donkere variant van je ontwerp wilt maken, dan is dat supersimpel; Je maakt gewoon alles zwart wat wit was en andersom.
Niet dus.
Een zwarte achtergrond is niet rustiger aan je ogen dan een witte. Integendeel. Een volzwarte achtergrond is keihard aan je ogen en heel vermoeiend. Je moet als designer dus op zoek naar een off-black of een donkergrijs voor de achtergrond. Harde witte tekst werkt ook niet. Daarvoor moet je dus een passende off-white zoeken, waarbij je veel aandacht hebt voor een passend contrast met de donkere achtergrond.
Eigenlijk is dat wat je moet doen met al je kleurkeuzes: geen harde kleuren, maar alles een beetje dempen en goed opletten hoe kleuren met elkaar contrasteren. Een paarse knop werkt bijvoorbeeld ook niet op een donkere achtergrond. En ook je afbeeldingen moet je aanpassen.
Compleet tweede kleurenschema
Voor dark mode ontwikkel je dus een compleet tweede kleurschema, dat hele andere kleuren bevat dan je lichte schema. Dat betekent dat je ook je branding moet aanpassen. Je bestaande huisstijl en logo kun je niet ongewijzigd gebruiken in dark mode. In feite zou dit natuurlijk gewoon al in de briefing moeten zitten. Dark mode in de browser is niet de enige plek waar je donkere achtergronden ziet. Ook bij het maken van tassen, t-shirts en andere merchandise kom je dit tegen. Het hoort er dus eigenlijk bij als je als designer een huisstijl als volledig pakket aflevert.
Fun fact: Offline Darkmode
Bij Enrise hebben we zelfs ons logo op het dak in dark mode: overdag is de tekst zwart, in de avond wordt de tekst wit.
Lettertypen en iconen
Niet alleen de kleuren, maar ook je lettertypen veranderen subtiel als je voor dark mode gaat ontwerpen. Vette fonts komen al snel hard over, dus moet je je tekst minder bold maken. Waar je op een lichte achtergrond werkt met de 600-variant van een font, ga je in dark mode bijvoorbeeld naar 400. Maar dat verschilt erg per font, dus daar zijn geen harde regels voor. Iconen zijn nog lastiger. Soms moet je daarbij niet alleen de kleuren aanpassen, maar ook de afbeelding zelf. Volledig ingekleurde iconen werken minder goed in dark mode. Als je iconen afbeeldingen zijn is dat iets meer werk omdat je twee afbeeldingen moet hebben: eentje voor light- en eentje voor dark mode. Werk je met een iconen-font, dan kan de aanpassing eenvoudig via CSS.
‘Dark mode first’?
Draait dark mode dan alleen om kleuren en iconen? Voor mijn gevoel is er meer aan de hand.
Misschien moeten we als designers nog beter kijken naar waarom mensen in dark mode willen werken. Zijn deze gebruikers op zoek naar rust en focus? En missen ze dat in de lichte interfaces? Dan moeten wij ons dat als ontwerpers aantrekken. We bouwen pagina’s en schermen stampvol met allerlei elementen. Om focus aan te brengen moeten we keuzes maken.
Minder laten zien en meer aandacht hebben voor die paar dingen die echt belangrijk zijn. Is het misschien tijd dat we, naar analogie van ‘mobile-first’, nu ‘dark mode first’ gaan ontwerpen? Eerst nadenken over wat echt belangrijk is voor de gebruiker, voordat we allemaal dingen toevoegen die vooral voor ons als maker belangrijk zijn?
Zo drastisch moeten we misschien niet zijn, maar dark mode first zou net als mobile-first een goede oefening zijn in het kijken naar je online product door de ogen van de bezoeker.
