In verdediging van theme-toggles met twee standen

Voordat ik inga op wat ik ideaal vind en waarom, is het goed om eerst naar de details en de afwegingen van beide benaderingen te kijken.

De oorsprong van het debat

Een paar weken geleden publiceerde Lea Verou een uitstekend artikel getiteld Dark mode toggles: two states are enough. In dit grondige en inzichtelijke bericht betoogt Dr. Verou dat twee standen in de meeste gevallen voldoende zijn, mits de schakelaar onderdeel is van de hoofdinterface van de site. Dit laatste punt is cruciaal:

"In de meeste gevallen zoeken gebruikers niet naar die derde 'systeem'-optie en zullen ze deze waarschijnlijk ook niet nuttig vinden. Ze zoeken gewoon naar de lichtknop."

Er zijn uiteraard uitzonderingen. Op een specifieke instellingenpagina, waar het mentale model minder is gericht op "wat wil ik op dit moment" en meer op "hoe moet deze app er in de toekomst uitzien", is een driestandige toggle logischer.

Een slimme implementatie

Naast de discussie over binair versus trinair, is de implementatie van Dr. Verou bijzonder slim. In plaats van expliciet te schakelen tussen "licht" of "donker", schakelt de toggle tussen het terugvallen op de systeeminstelling en het tegenovergestelde van de systeeminstelling.

Concreet betekent dit dat de voorkeur alleen in localStorage wordt opgeslagen als deze afwijkt van de systeeminstelling van het apparaat. Als de gebruiker de voorkeur weer wijzigt zodat deze overeenkomt met het besturingssysteem, wordt de opgeslagen voorkeur simpelweg verwijderd. Hierdoor valt de site weer terug op de systeemvoorkeur. Hiermee wordt een veelgehoorde kritiek op binaire controls vermeden: het idee dat je "vast komt te zitten" in één modus zonder weg terug naar de systeeminstellingen.

Andere punten uit het artikel van Verou:

• Bij een drieweg-toggle doen op elk gegeven moment twee van de drie opties hetzelfde. Dit is redundant en creëert complexiteit door gebruikers meer keuze te bieden dan ze willen of begrijpen.
• Dit is geen "one-size-fits-all"-oplossing. Het argument voor twee standen is afhankelijk van de context.

Ondanks deze nuances is de weerstand tegen een twee-standen-implementatie in sommige kringen groot. Sommigen in de frontend-community beschouwen het weigeren van die derde optie bijna als een vorm van wanpraktijken. De meest zichtbare tegenreactie is het artikel The Case for Tri-State Dark Mode Toggles van Bramus, wat als uitgangspunt dient voor de discussie over de dissidente mening.

De argumenten voor driestandige theme-toggles

Bijna alle argumenten tegen de twee-standen-toggle en vóór de drie-standen-optie kunnen worden teruggebracht tot twee zorgen:

1. De voorkeur voor duidelijkheid boven eenvoud.
2. Rekening houden met gebruikers die een dynamisch systeemthema hebben (dat bijvoorbeeld op basis van het tijdstip wisselt tussen licht en donker).

Het eerste punt is valide, hoewel ik geloof dat de afweging in de meeste gevallen de moeite waard is. Het is mogelijk dat sommige gebruikers die keuze willen, en dat is prima.

Het punt over dynamische thema's lijkt mij echter een extreme edge case. Hoewel we geen directe data hebben van fabrikanten als Apple, suggereren onafhankelijke enquêtes dat slechts een zeer kleine minderheid van de gebruikers een dynamisch thema gebruikt (waarschijnlijk een laag enkelvoudig percentage).

Bovendien is een twee-standen-benadering niet automatisch een probleem voor deze gebruikers. Het wordt pas een probleem in het volgende scenario:

1. Iemand met een dynamisch thema bezoekt de site en besluit het thema handmatig te wijzigen.
2. Deze persoon komt later terug, nadat het dynamische systeemthema is gewisseld tussen licht en donker.
3. Op dat moment is het thema niet wat de gebruiker wil, en willen ze het opnieuw wijzigen.

Dat zijn veel voorwaarden waaraan voldaan moet worden voordat we überhaupt een probleem hebben. Zelfs als we optimistisch uitgaan van 10% gebruikers met een dynamisch thema, is de groep die al deze stappen doorloopt waarschijnlijk zeer klein. In het ergste geval resulteert dit voor deze minuscule groep in één extra klik.

Ik pleit niet voor het negeren van minderheidsgroepen—dat is vaak hoe toegankelijkheidsproblemen ontstaan. Maar er is een verschil tussen beperkingen in vermogen, bandbreedte of hardware (zaken waar een gebruiker geen controle over heeft) en een vrije keuze voor een specifieke instelling. We kunnen er redelijk van uitgaan dat deze keuze niet gerelateerd is aan toegankelijkheid; wie comfortabel wisselt tussen licht en donker gedurende de dag, wordt door geen van beide gehinderd.

Ik vind het moeilijk om extra complexiteit toe te voegen voor ~95% van de gebruikers, enkel gebaseerd op een hypothetische reeks "wat-als"-scenario's voor een kleine minderheid. Kortom: ik vermoed dat echte gebruikers dit probleem simpelweg niet hebben; we hebben het grotendeels zelf bedacht.

"Systeem" is onduidelijk voor veel gebruikers

Het is een veelvoorkomende psychologische valkuil om te denken dat iedereen denkt zoals wij. Ontwikkelaars denken dat iedereen geobsedeerd is door kleurthema's, maar ik zie weinig bewijs dat niet-technische gebruikers daar zoveel waarde aan hechten.

Om mijn theorie te testen, vroeg ik mijn vrouw (die geen ontwikkelaar is, maar wel regelmatig een smartphone, iPad en laptop gebruikt) op welk kleurthema haar telefoon stond ingesteld. Ze had absoluut geen idee. Ondanks dat ze uren per dag op haar telefoon kijkt, moest ze het fysiek controleren om erachter te komen dat ze in dark mode zat zonder dat ze het doorhad.

Daarna vroeg ik of ze ooit op een knop op een website of in een app had gedrukt om het thema te wijzigen. Haar antwoord: "Nee, letterlijk nooit."

Hoewel dit slechts één datapunt is, geeft het aan dat een aanzienlijk aantal gebruikers niet weet wat hun systeemthema is—of zelfs niet begrijpt wat "systeem" in deze context betekent. Voor hen is een "systeem"-instelling actief onhulpzaam. Het toevoegen van deze optie introduceert complexiteit die verwarrend kan zijn, zeker omdat twee van de drie opties er vaak hetzelfde uitzien.

Sommige driestandige toggles gebruiken enkel een computertje-icoon. Hoewel wij weten wat dit betekent, is het onwaarschijnlijk dat elke gebruiker dit onmiddellijk en zonder nadenken begrijpt.

"Systeem" is alleen nuttig in specifieke situaties

Omdat de "systeem"-optie standaard is, is deze alleen relevant als iemand er eerst vanaf is geweken en vervolgens wil terugkeren. Om de "systeem"-optie nuttig te maken, moet aan vier voorwaarden worden voldaan:

1. De gebruiker moet weten wat hun systeemthema is.
2. De gebruiker moet begrijpen wat het computertje-icoon representeert (of de optie moet duidelijk gelabeld zijn).
3. De gebruiker moet al zijn afgeweken van het systeemthema.
4. De gebruiker moet specifiek terug willen naar het systeemthema, en niet gewoon naar het tegenovergestelde van het huidige thema.

Ik vermoed dat weinigen deze stappen regelmatig doorlopen. Dit betekent niet dat we driestandige toggles nooit moeten gebruiken; ze hebben hun plek, maar ik denk niet dat die plek in de hoofdinterface van een website is.

Twijfelachtige data

In zijn pleidooi voor de driestandige toggle verwijst Bramus naar een enquête op sociale media. De voorkeur ging overweldigend uit naar drie standen, maar er zijn problemen met deze dataverzameling:

• Psychologie van keuze: Mensen zeggen vaak dat ze meer opties willen, zelfs als ze die in de praktijk niet gebruiken.
• Beïnvloeding: De suggestie van een voorkeur door de vragensteller kan de resultaten kleuren.
• Doelgroep: De respondenten waren waarschijnlijk hoofdzakelijk ontwikkelaars. De resultaten weerspiegelen dus de meningen van mensen met een ongewoon diepe kennis van het onderwerp, in plaats van een representatieve groep gebruikers.

De Vale-benadering

Bramus wijst ook op een implementatie door Vale (Declan Chidlow), die als een middenweg fungeert. Het ziet eruit als een toggle met twee standen, maar is standaard ingesteld op systeemvoorkeur (geen van beide opties is geselecteerd). Als je een thema kiest, kun je dit opnieuw aanklikken om de selectie te verwijderen, waardoor de site terugvalt op de systeemvoorkeur.

Hoewel dit technisch clever is, raad ik deze aanpak af voor grotere projecten. Er is namelijk geen bestaande "affordance" (gebruiksindicator) die hiermee overeenkomt. Het is een uitgevonden gedrag dat gebruikers waarschijnlijk nog nooit zijn tegengekomen. Het is in feite een driestandige toggle die zich voordoet als een tweestandige, waarbij de eigenschappen van checkboxes en radiobuttons worden gemengd. De mogelijkheid om een thema te deselecteren is niet intuïtief ontdekbaar, behalve door trial-and-error.

Wat is de juiste aanpak?

Uiteindelijk keren we terug naar de kern: het hangt af van de context.

• Is de toggle onderdeel van de hoofd-UI? Maak er dan een toggle met twee standen van. Dit dient de overgrote meerderheid van de gebruikers die simpelweg het thema willen wijzigen vanaf het moment dat ze de site bezoeken. Geef iemand geen configuratiemenu wanneer ze gewoon op zoek zijn naar de lichtknop.
• Staat de toggle op een instellingen- of accountpagina? Dan is een expliciete driestandige toggle waarschijnlijk beter. Hier is de gebruiker in de mindset om de app naar eigen voorkeur in te richten voor de toekomst.
• Is het een app of site die men de hele dag door gebruikt (zoals Slack of GitHub)? In dat geval is een drieweg-toggle gerechtvaardigd.

De push om driestandige toggles als standaard te hanteren, is grotendeels bedoeld om een extreme minderheid te accommoderen die dat waarschijnlijk niet eens nodig heeft, ten koste van het verwarren of vertragen van een veel grotere groep gebruikers.