En toggle ser enkel ud. En lille kontakt, der vipper mellem til og fra. Men toggle-felter forvirrer brugere mere end næsten alle andre formularelementer. Folk tøver. De ved ikke, om et skift på kontakten ændrer noget med det samme eller venter på en send-knap. De ved ikke, hvilken side der betyder ja, og hvilken der betyder nej. Én toggle det forkerte sted i en formular kan få din udfyldelsesrate til at falde. Den rigtige toggle det rigtige sted bliver usynlig.
Tag en hvilken som helst formular med toggles, og se på, hvad folk faktisk gør. De bevæger sig langsomt. De holder musen over den. De går tilbage for at tjekke, hvad toggle'en styrer. De leder efter send-knapper, fordi de ikke er sikre på, om ændringen er slået igennem. Det er ikke brugerfejl. Det er designproblemer. Toggles og kontakter har et bestemt job i formularer. De gør én ting godt. De gør ikke alt. At vide, hvornår toggles hører til, og hvornår ikke, er forskellen på en formular, der flyder, og en, der forvirrer.
Problemet med at kalde alt for en toggle
Ordet toggle betyder noget bestemt. En toggle er en kontakt mellem to modsatte tilstande. Du er enten i tilstand A eller tilstand B. Intet midt imellem. Intet andet. Men mange formularer kalder deres ja/nej-spørgsmål for toggles, selv om de ikke er det. Et spørgsmål som "Vil du modtage reklamemails?" er ikke en toggle. Det er et ja-eller-nej-spørgsmål, der hører til i en formular. En rigtig toggle er "Slå mørk tilstand til". Kontakten ændrer din oplevelse lige nu. Formularen behøver ikke en send-knap, for at ændringen virker.
Den forvirring skaber reel gnidning. Sæt en rigtig toggle midt i en formular fuld af tekstfelter og radioknapper. Brugerne ved ikke, om ændringen blev anvendt med det samme, eller om de stadig skal klikke på send. De vipper måske kontakten, tror ikke, der skete noget, vipper den tilbage og bliver så forvirrede, når formularen viser den modsatte tilstand af det, de valgte.
Hvornår en toggle giver mening i en formular
En toggle hører kun hjemme i en formular, når to betingelser begge er opfyldt. For det første skal valget være binært. Præcis to tilstande. Ja eller nej. Til eller fra. Intet andet. For det andet skal valget slå igennem med det samme uden en send-knap. Brugeren vipper kontakten, og tilstanden ændres øjeblikkeligt.
I de fleste formularer er ingen af betingelserne opfyldt. De fleste formularer kræver en send-knap til sidst. Alle ændringer gælder på én gang, når nogen klikker på send. Hvis du sætter en toggle ind i en formular med en send-knap, skaber det forvirring, fordi toggle'en virker, som om den burde virke med det samme, men hele formularen venter på afsendelse.
Toggles virker i indstillinger. Toggles virker i kontodashboards, hvor hver ændring er live. Toggles virker ikke i almindelige formularer, hvor du indsamler oplysninger og beder folk sende til sidst. Hvis din formular har en send-knap, bør dine ja/nej-spørgsmål bruge afkrydsningsfelter eller radioknapper i stedet for toggles.
Toggle eller afkrydsningsfelt i formularfelter
Den visuelle forskel på en toggle og et afkrydsningsfelt er tydelig. Men det er den funktionelle forskel, der tæller. Et afkrydsningsfelt er et formularelement, der venter på afsendelse. Du kan sætte flere flueben. Du kan fjerne dem. Der sker ikke noget, før du sender formularen. En toggle er en tilstandskontakt, der ofte ændrer noget med det samme. Formularen behøver ikke afsendelse, for at ændringen slår igennem.
Derfor viser forskning fra et UX-forskningsfirma, at brugere bliver forvirrede, når du blander toggles og afkrydsningsfelter i samme formular. Toggles, der virker med det samme, føles helt anderledes end afkrydsningsfelter, der venter. Når du blander dem, sender du modstridende signaler om, hvad der sker, når nogen bruger formularen.
Hvis du har et binært ja/nej-spørgsmål i en formular med en send-knap, så brug et afkrydsningsfelt eller et par radioknapper. Begge kendes. Begge giver mening i en formular. Brugerne forstår, at de vælger noget, der bliver sendt, og ikke udløser en øjeblikkelig ændring.
Hvornår du bruger radioknapper i stedet for en toggle
En toggle kan kun vise én tilstand ad gangen. Du ser til eller fra. Men nogle gange har brugerne brug for at se begge muligheder på samme tid for at kunne vælge. Det er, når radioknapper virker bedre end en toggle.
Eksempel: En formular spørger "Hvilken plan vil du have?" med mulighederne "Basis" eller "Premium". Du kunne bruge en toggle til at skifte mellem dem. Men brugeren kan ikke se begge planer side om side. De skal vippe kontakten for at se, hvad den anden mulighed er. Et par radioknapper viser begge muligheder på samme tid. Brugeren ser Basis til venstre og Premium til højre. De kan sammenligne og vælge uden at vippe noget.
Hver gang du vil have brugerne til at sammenligne to muligheder eller se begge valg, så brug radioknapper. Hver gang toggle'en er den eneste måde at skifte mellem muligheder på, og brugerne ikke kan sammenligne dem, er radioknapper sandsynligvis et bedre valg.
Sådan giver du en toggle en label, så folk forstår, hvad den gør
Det største problem med toggles er labels. Mange designere bruger kun "Til" og "Fra". Men til og fra for hvad? Brugeren må gætte. Det skaber tøven.
Hver toggle skal have en tydelig label, der beskriver, hvad den styrer. Ikke "Til/Fra". Noget som "Slå mørk tilstand til" eller "Modtag notifikationer" eller "Vis avancerede indstillinger". Labelen fortæller brugeren, hvad der sker, hvis de vipper kontakten.
Labelen skal være lige synlig og tæt på toggle'en. Hvis labelen står langt væk eller er lille, kobler brugerne den ikke til kontakten. De vipper den, uden at forstå, hvad de ændrer.
Nogle toggles viser både til- og fra-label på selve kontakten. "Ja" på den ene side og "Nej" på den anden. Det kan virke, hvis labels er store og tydelige. Men test viser, at folk er mindre vant til ja/nej-toggles end til til/fra-toggles. Hvis du bruger ja/nej-labels, så test med dine brugere først. Men generelt er til/fra klarere end ja/nej til toggles.
Tilgængelighedsproblemet med toggles
Toggles skaber reelle problemer for brugere af skærmlæsere. En visuel toggle giver mening for en, der kan se den. De ser en kontakt glide til højre og forstår, at den nu er til. Men en skærmlæserbruger hører ingenting. Toggle'en har ingen tilgængelig label. Brugeren kan ikke høre, hvilken tilstand toggle'en er i. De kan ikke høre, hvad toggle'en styrer.
For at bygge en tilgængelig toggle skal du bruge en ARIA-attribut, der hedder aria-pressed. Den fortæller skærmlæsere, at elementet er en knap, og at den enten er trykket ned eller ikke. Skærmlæserbrugeren hører "Knap til mørk tilstand, er slået til". Uden aria-pressed hører brugeren ikke noget meningsfuldt.
Selv med den rigtige ARIA-opsætning er toggles ikke naturlige formularelementer. Et afkrydsningsfelt er et formularelement. Alle ved, hvad et afkrydsningsfelt er. En toggle er et brugerdefineret element, der kræver ekstra JavaScript. Derfor springer mange tilgængelige formulardesigns toggles helt over og bruger afkrydsningsfelter i stedet. Afkrydsningsfelter er indbygget i alle browsere. De virker med skærmlæsere. De kræver ikke egen JavaScript. De virker bare.
Farvekontrast og visuelle markeringer har betydning for toggle-tilstande
En toggle, der kun bruger farve til at vise sin tilstand, virker ikke for folk med nedsat syn eller farveblindhed. Hvis toggle'en er grøn, når den er til, og rød, når den er fra, kan en farveblind bruger ikke se, hvilken tilstand den er i.
Hver toggle skal have flere visuelle signaler. Farve plus form. Farve plus position. Farve plus tekst. Toggle'ens form skal skifte position, når den vippes. Cirklen indeni skal glide fra venstre mod højre. Baggrunden skal skifte farve. Sammen skaber de tre signaler overlap, så en person med en hvilken som helst synsnedsættelse stadig kan se, om toggle'en er til eller fra.
Tekstlabels tilføjer endnu et lag. Hvis toggle'en har en til/fra-label synlig på selve kontakten, understøtter labelen det, farven og positionen allerede viser. Det er visuelt overlap. Det er ikke overflødigt. Det er tilgængelighed.
Størrelsen har betydning for trykflader
En toggle, der ser nuttet ud ved 24 pixel i bredden, bliver et mareridt på mobil. Brugeren prøver at trykke på den og rammer det forkerte. Eller de trykker flere gange, fordi de ikke er sikre på, om det første tryk blev registreret.
Den mindste trykflade for ethvert interaktivt element er 44x44 pixel. En toggle bør være mindst så stor. Større er bedre, især på mobil. En toggle på 60 pixel i bredden er meget lettere at ramme end en på 30 pixel.
Det er ikke en designpræference. Det er et krav til tilgængelighed. Brugere med nedsat finmotorik, rystelser eller bare tykke fingre på små skærme har brug for, at toggles er store nok til at blive ramt sikkert.
Bland ikke toggles med send-knapper
Det er den største fejl. En formular med tekstfelter, dropdowns og andre almindelige formularfelter har en send-knap nederst. Alle ændringer gælder, når brugeren klikker på send. Men så tilføjes en toggle til formularen, og den er designet til at slå igennem med det samme uden afsendelse. Brugerens mentale model går i stykker. De forventer, at toggle'en venter på afsendelse ligesom afkrydsningsfelterne. Men toggle'en ændrer sig med det samme. De tror, de har lavet en fejl. De vipper den tilbage. Kaos.
Hvis du har en formular med en send-knap, så lad være med at bruge toggles. Brug afkrydsningsfelter til ja/nej-spørgsmål. Alle formularens ændringer gælder sammen, når brugeren klikker på send. Formularen giver mening. Brugeren forstår modellen.
Toggles hører hjemme i dashboards, indstillingspaneler og andre steder, hvor hver handling slår igennem med det samme. De hører ikke hjemme i formularer, der kræver afsendelse.
Sådan håndterer WEMASY toggles i formularer
WEMASY's formularbygger har toggles som en mulighed for formularfelter. Hvis du vælger at bruge en toggle, kræver formularbyggeren en tydelig label. Toggle'en er stor nok til touch. Den har de rigtige ARIA-attributter til tilgængelighed. Formularbyggeren advarer dig også, hvis du tilføjer en toggle til en formular, der har andre felttyper og en send-knap. Advarslen er der af en grund. Den fanger et reelt brugervenlighedsproblem. Hvis du ser advarslen, så skift til afkrydsningsfelter eller radioknapper i stedet. Dine brugere vil takke dig.