Een toggle (schakelaar) ziet er simpel uit. Een kleine schakelaar die tussen aan en uit wisselt. Maar toggles brengen gebruikers meer in de war dan bijna elk ander formulierelement. Mensen aarzelen. Ze weten niet of het omzetten van de schakelaar direct iets verandert of dat het wacht op een verzendknop. Ze weten niet welke kant ja is en welke kant nee. Eén verkeerd geplaatste toggle in een formulier kan je conversie doen instorten. De juiste toggle op de juiste plek wordt onzichtbaar.
Neem een formulier met toggles en kijk wat mensen echt doen. Ze bewegen langzaam. Ze hoveren. Ze gaan terug om te checken wat de toggle regelt. Ze zoeken naar verzendknoppen omdat ze niet zeker weten of de wijziging al is doorgevoerd. Dat zijn geen gebruikersfouten. Het zijn ontwerpproblemen. Toggles en schakelaars hebben een specifieke taak in formulieren. Ze doen één ding goed. Ze doen niet alles. Weten wanneer toggles passen en wanneer niet, is het verschil tussen een formulier dat vloeiend loopt en een formulier dat verwart.
Het probleem met alles een toggle noemen
Het woord toggle betekent iets specifieks. Een toggle is een schakelaar tussen twee tegengestelde standen. Je zit in stand A of in stand B. Niets ertussen. Niets anders. Maar veel formulieren noemen hun ja/nee-vragen toggles terwijl ze dat niet zijn. Een vraag als "Wil je promotionele e-mails ontvangen?" is geen toggle. Het is een ja-of-nee-vraag die in een formulier thuishoort. Een echte toggle is "Donkere modus inschakelen". De schakelaar verandert je ervaring direct. Het formulier heeft geen verzendknop nodig om die wijziging door te voeren.
Deze verwarring zorgt voor echte frictie. Zet een echte toggle midden in een formulier vol tekstvelden en keuzerondjes. Gebruikers weten niet of de wijziging direct is doorgevoerd of dat ze nog op verzenden moeten klikken. Ze kunnen de toggle omzetten, denken dat er niets gebeurde, hem terugzetten en dan in de war raken als het formulier de tegenovergestelde stand toont van wat ze kozen.
Wanneer een toggle echt zin heeft in een formulier
Een toggle hoort alleen in een formulier als aan twee voorwaarden tegelijk is voldaan. Ten eerste moet de keuze binair zijn. Precies twee standen. Ja of nee. Aan of uit. Niets anders. Ten tweede moet de keuze direct van kracht worden zonder verzendknop. De gebruiker zet de toggle om en de stand verandert meteen.
In de meeste formulieren is aan geen van beide voorwaarden voldaan. De meeste formulieren hebben onderaan een verzendknop nodig. Alle wijzigingen gelden tegelijk als iemand op verzenden klikt. Een toggle in een formulier met een verzendknop zorgt voor verwarring, omdat de toggle lijkt te moeten werken op het moment van omzetten, terwijl het hele formulier op verzending wacht.
Toggles werken in instellingen. Toggles werken in accountdashboards waar elke wijziging direct live gaat. Toggles werken niet in standaardformulieren waarin je informatie verzamelt en mensen onderaan vraagt om te verzenden. Heeft je formulier een verzendknop, gebruik dan voor je ja/nee-vragen selectievakjes of keuzerondjes in plaats van toggles.
Toggle of selectievakje in formuliervelden
Het visuele verschil tussen een toggle en een selectievakje is duidelijk. Maar het functionele verschil is wat telt. Een selectievakje is een formulierelement dat op verzending wacht. Je kunt meerdere selectievakjes aanvinken. Je kunt ze uitvinken. Er gebeurt niets tot je het formulier verzendt. Een toggle is een standschakelaar die vaak direct iets verandert. Het formulier heeft geen verzending nodig om de wijziging door te voeren.
Daarom laat onderzoek van NN/G zien dat gebruikers in de war raken als je toggles en selectievakjes in hetzelfde formulier mengt. Toggles die direct werken, voelen totaal anders dan selectievakjes die wachten. Ze mengen levert tegenstrijdige signalen op over wat er gebeurt als iemand met het formulier werkt.
Heb je in een formulier met een verzendknop een binaire ja/nee-vraag, gebruik dan een selectievakje of een paar keuzerondjes. Beide zijn bekend. Beide zijn logisch in de context van een formulier. Gebruikers begrijpen dat ze iets selecteren dat wordt verzonden, en niet een directe wijziging in gang zetten.
Wanneer je keuzerondjes gebruikt in plaats van een toggle
Een toggle kan maar één stand tegelijk tonen. Je ziet aan of uit. Maar soms moeten gebruikers beide opties tegelijk zien om te kiezen. Dan werken keuzerondjes beter dan een toggle.
Voorbeeld: een formulier dat vraagt "Welk abonnement wil je?" met de opties "Basis" of "Premium". Je zou een toggle kunnen gebruiken om tussen die twee te wisselen. Maar de gebruiker ziet de abonnementen niet naast elkaar. Hij moet de toggle omzetten om te zien wat de andere optie is. Een paar keuzerondjes toont beide opties tegelijk. De gebruiker ziet Basis links en Premium rechts. Hij kan vergelijken en kiezen zonder iets om te zetten.
Gebruik keuzerondjes altijd als je wilt dat gebruikers twee opties vergelijken of beide keuzes zien. Is de toggle de enige manier om tussen opties te wisselen en kunnen gebruikers ze niet vergelijken, dan zijn keuzerondjes waarschijnlijk een betere keuze.
Zo label je een toggle zodat mensen begrijpen wat hij doet
Het grootste probleem met schakelaars is het label. Veel ontwerpers gebruiken alleen "Aan" en "Uit". Maar aan en uit waarvoor? De gebruiker moet raden. Dat zorgt voor aarzeling.
Elke toggle heeft een duidelijk label nodig dat beschrijft wat de toggle regelt. Niet "Aan/Uit". Iets als "Donkere modus inschakelen" of "Meldingen ontvangen" of "Geavanceerde opties tonen". Het label vertelt de gebruiker wat er gebeurt als hij de schakelaar omzet.
Het label moet direct zichtbaar zijn en dicht bij de toggle staan. Staat het label ver weg of is het klein, dan koppelen gebruikers het niet aan de schakelaar. Ze zetten hem om zonder te begrijpen wat ze veranderen.
Sommige toggles tonen zowel het aan- als het uitlabel op de schakelaar zelf. "Ja" aan de ene kant en "Nee" aan de andere. Dat kan werken als de labels groot en duidelijk zijn. Maar tests laten zien dat mensen minder vertrouwd zijn met ja/nee-toggles dan met aan/uit-toggles. Gebruik je ja/nee-labels, test dan eerst met je gebruikers. Over het algemeen is aan/uit duidelijker dan ja/nee bij schakelaars.
Het toegankelijkheidsprobleem van schakelaars
Toggles zorgen voor echte problemen bij gebruikers van schermlezers. Een visuele toggle is logisch voor iemand die hem kan zien. Hij ziet een schakelaar naar rechts schuiven en begrijpt dat hij nu aan staat. Maar een schermlezergebruiker hoort niets. De toggle heeft geen toegankelijk label. De gebruiker kan niet zien in welke stand de toggle staat. Hij kan niet zien wat de toggle regelt.
Voor een toegankelijke toggle heb je een ARIA-attribuut nodig dat aria-pressed heet. Dat vertelt schermlezers dat het element een knop is en dat die is ingedrukt of niet ingedrukt. De schermlezergebruiker hoort "Donkere modus, schakelknop, momenteel aan". Zonder aria-pressed hoort de gebruiker niets zinvols.
Zelfs met de juiste ARIA-opzet zijn toggles geen natuurlijke formulierelementen. Een selectievakje is een formulierelement. Iedereen weet wat een selectievakje is. Een toggle is een eigen element dat extra JavaScript nodig heeft. Daarom slaan veel toegankelijke formulierontwerpen toggles helemaal over en gebruiken ze selectievakjes. Selectievakjes zijn ingebouwd in elke browser. Ze werken met schermlezers. Ze hebben geen eigen JavaScript nodig. Ze werken gewoon.
Kleurcontrast en visuele aanwijzingen zijn belangrijk voor togglestanden
Een schakelaar die alleen op kleur vertrouwt om zijn stand te tonen, werkt niet voor mensen met een slecht gezichtsvermogen of kleurenblindheid. Als de toggle groen is bij aan en rood bij uit, kan een kleurenblinde gebruiker niet zien in welke stand hij staat.
Elke toggle heeft meerdere visuele signalen nodig. Kleur plus vorm. Kleur plus positie. Kleur plus tekst. De vorm van de toggle moet van positie veranderen als hij wordt omgezet. Het rondje erin moet van links naar rechts schuiven. De achtergrond moet van kleur veranderen. Samen zorgen deze drie signalen voor redundantie, zodat iemand met een visuele beperking toch kan zien of de toggle aan of uit staat.
Tekstlabels voegen nog een laag toe. Heeft de toggle een zichtbaar aan/uit-label op de schakelaar zelf, dan versterkt het label wat kleur en positie al tonen. Dit is visuele redundantie. Het is niet overbodig. Het is toegankelijkheid.
Grootte telt voor tikdoelen
Een toggle die er schattig uitziet op 24 pixels breed, wordt een nachtmerrie op mobiel. De gebruiker probeert hem aan te tikken en raakt het verkeerde. Of tikt meerdere keren omdat hij niet zeker weet of de eerste tik is geregistreerd.
De minimale grootte van een tikdoel voor elk interactief element is 44x44 pixels. Een toggle moet minstens zo groot zijn. Groter is beter, zeker op mobiel. Een toggle van 60 pixels breed is veel makkelijker nauwkeurig aan te tikken dan een toggle van 30 pixels.
Dit is geen ontwerpvoorkeur. Dit is een toegankelijkheidseis. Gebruikers met beperkte handvaardigheid, trillende handen of gewoon dikke vingers op kleine schermen hebben toggles nodig die groot genoeg zijn om betrouwbaar te raken.
Meng toggles niet met verzendknoppen in formulieren
Dit is de grootste fout. Een formulier met tekstvelden, dropdowns en andere standaardvelden heeft onderaan een verzendknop. Alle wijzigingen gelden als de gebruiker op verzenden klikt. Maar dan wordt er een toggle aan het formulier toegevoegd die is ontworpen om direct te werken zonder verzending. Het mentale model van de gebruiker breekt. Hij verwacht dat de toggle net als de selectievakjes op verzending wacht. Maar de toggle verandert direct. Hij denkt dat hij een fout maakte. Hij zet hem terug. Chaos.
Heb je een formulier met een verzendknop, gebruik dan geen toggles. Gebruik selectievakjes voor ja/nee-vragen. Alle wijzigingen in het formulier gelden samen als de gebruiker op verzenden klikt. Het formulier is logisch. De gebruiker begrijpt het model.
Toggles horen in dashboards, instellingenpanelen en andere plekken waar elke interactie direct werkt. Ze horen niet in formulieren die verzending vereisen.
Hoe WEMASY omgaat met toggles in formulieren
De formulierenbouwer van WEMASY heeft toggles als optie voor formuliervelden. Kies je een toggle, dan vraagt de formulierenbouwer om een duidelijk label. De toggle is groot genoeg voor aanraking. Hij heeft de juiste ARIA-attributen voor toegankelijkheid. De formulierenbouwer waarschuwt je ook als je een toggle toevoegt aan een formulier met andere invoertypes en een verzendknop. Die waarschuwing is er met een reden. Ze vangt een echt bruikbaarheidsprobleem op. Zie je die waarschuwing, stap dan over op selectievakjes of keuzerondjes. Je gebruikers zullen je dankbaar zijn.