En strömbrytare i ett formulär ser enkel ut. En liten brytare som växlar mellan på och av. Men reglagefält förvirrar användare mer än nästan alla andra formulärelement. Folk tvekar. De vet inte om ett klick på brytaren ändrar något direkt eller väntar på en skickaknapp. De vet inte vilken sida som betyder ja och vilken som betyder nej. Ett felplacerat reglage i ett formulär kan sänka andelen som fyller i. Rätt reglage på rätt plats blir osynligt.
Ta vilket formulär som helst som använder reglage och titta på vad folk faktiskt gör. De rör sig långsamt. De håller muspekaren över. De går tillbaka för att kolla vad reglaget styr. De letar efter skickaknappar eftersom de inte är säkra på om ändringen har trätt i kraft. Det är inga användarfel. Det är designproblem. Reglage och brytare har ett särskilt jobb i formulär. De gör en sak bra. De gör inte allt. Att förstå när reglage hör hemma och när de inte gör det är skillnaden mellan ett formulär som flyter och ett som förvirrar.
Problemet med att kalla allt för ett reglage
Ordet reglage betyder något särskilt. Ett reglage är en brytare mellan två motsatta lägen. Du är antingen i läge A eller läge B. Inget mittemellan. Inget annat. Men många formulär kallar sina ja/nej-frågor reglage när de inte är det. En fråga som "Vill du ta emot reklammejl?" är inget reglage. Det är en ja-eller-nej-fråga som hör hemma i ett formulär. Ett riktigt reglage är "Aktivera mörkt läge". Brytaren ändrar din upplevelse just nu. Formuläret behöver ingen skickaknapp för att ändringen ska gälla.
Den förvirringen skapar verklig friktion. Lägg ett riktigt reglage mitt i ett formulär fullt av textfält och radioknappar. Användarna vet inte om ändringen gäller direkt eller om de fortfarande måste klicka på skicka. De kan vippa på reglaget, tro att inget hände, vippa tillbaka det och sedan bli förvirrade när formuläret visar motsatsen till det de valde.
När ett reglage faktiskt passar i ett formulär
Ett reglage hör bara hemma i ett formulär när två villkor är uppfyllda samtidigt. Först måste valet vara binärt. Exakt två lägen. Ja eller nej. På eller av. Inget annat. Sedan måste valet gälla direkt utan skickaknapp. Användaren vippar på reglaget och läget ändras direkt.
I de flesta formulär stämmer inget av villkoren. De flesta formulär kräver en skickaknapp i slutet. Alla ändringar gäller på en gång när någon klickar på skicka. Att lägga ett reglage i ett formulär med skickaknapp skapar förvirring eftersom reglaget verkar fungera direkt, medan hela formuläret väntar på inskick.
Reglage fungerar i inställningar. Reglage fungerar i kontopaneler där varje ändring är live. Reglage fungerar inte i vanliga formulär där du samlar in information och ber folk skicka i slutet. Om ditt formulär har en skickaknapp bör dina ja/nej-frågor använda kryssrutor eller radioknappar i stället för reglage.
Reglage eller kryssruta i formulärfält
Den visuella skillnaden mellan ett reglage och en kryssruta är uppenbar. Men det är den funktionella skillnaden som spelar roll. En kryssruta är en formulärkontroll som väntar på inskick. Du kan kryssa i flera kryssrutor. Du kan avmarkera dem. Inget händer förrän du skickar formuläret. Ett reglage är en lägesbrytare som ofta ändrar saker direkt. Formuläret behöver inte skickas för att ändringen ska gälla.
Därför visar NN/G:s forskning att användare blir förvirrade när du blandar reglage och kryssrutor i samma formulär. Reglage som verkar direkt känns helt annorlunda än kryssrutor som väntar. Att blanda dem skickar motstridiga signaler om vad som händer när någon använder formuläret.
Om du har en binär ja/nej-fråga i ett formulär som kräver en skickaknapp, använd en kryssruta eller ett par radioknappar. Båda är välbekanta. Båda är logiska i ett formulär. Användarna förstår att de väljer något som ska skickas in, inte utlöser en omedelbar ändring.
När du ska använda radioknappar i stället för ett reglage
Ett reglage kan bara visa ett läge åt gången. Du ser på eller av. Men ibland behöver användare se båda alternativen samtidigt för att kunna välja. Då fungerar radioknappar bättre än ett reglage.
Exempel: ett formulär som frågar "Vilken plan vill du ha?" med alternativen "Bas" eller "Premium". Du kan använda ett reglage för att växla mellan dem. Men användaren kan inte se båda planerna sida vid sida. Hen måste vippa på reglaget för att se vad det andra alternativet är. Ett par radioknappar visar båda alternativen samtidigt. Användaren ser Bas till vänster och Premium till höger. Hen kan jämföra och välja utan att vippa på något.
Varje gång du vill att användare ska jämföra två alternativ eller se båda valen, använd radioknappar. Varje gång reglaget är det enda sättet att växla mellan alternativ och användarna inte kan jämföra dem är radioknappar troligen ett bättre val.
Så märker du ett reglage så att folk förstår vad det gör
Det största problemet med reglage är etiketteringen. Många designers använder bara "På" och "Av". Men på och av för vad? Användaren måste gissa. Det skapar tvekan.
Varje reglage behöver en tydlig etikett som beskriver vad reglaget styr. Inte "På/Av". Något som "Aktivera mörkt läge" eller "Ta emot aviseringar" eller "Visa avancerade alternativ". Etiketten talar om för användaren vad som händer om hen vippar på brytaren.
Etiketten måste synas direkt och sitta nära reglaget. Om etiketten sitter långt bort eller är liten kopplar användarna inte ihop den med brytaren. De vippar på den utan att förstå vad de ändrar.
Vissa reglage visar både på- och av-etiketten direkt på brytaren. "Ja" på ena sidan och "Nej" på den andra. Det kan fungera om etiketterna är stora och tydliga. Men tester visar att folk är mindre bekanta med ja/nej-reglage än med på/av-reglage. Om du använder ja/nej-etiketter, testa med dina användare först. Men i allmänhet är på/av tydligare än ja/nej för reglage.
Tillgänglighetsproblemet med reglage
Reglage skapar verkliga problem för skärmläsaranvändare. Ett visuellt reglage är begripligt för den som ser det. Hen ser en brytare glida åt höger och förstår att den nu är på. Men en skärmläsaranvändare hör ingenting. Reglaget har ingen tillgänglig etikett. Användaren kan inte se vilket läge reglaget är i. Hen kan inte se vad reglaget styr.
Ett tillgängligt reglage kräver ett ARIA-attribut som heter aria-pressed. Det talar om för skärmläsare att elementet är en knapp och att den antingen är nedtryckt eller inte. Skärmläsaranvändaren hör "Mörkt läge, växlingsknapp, just nu på". Utan aria-pressed hör användaren inget meningsfullt.
Även med rätt ARIA-uppsättning är reglage inte naturliga formulärkontroller. En kryssruta är en formulärkontroll. Alla vet vad en kryssruta är. Ett reglage är en egen kontroll som kräver extra JavaScript. Därför hoppar många tillgängliga formulärdesigner över reglage helt och använder kryssrutor i stället. Kryssrutor är inbyggda i alla webbläsare. De fungerar med skärmläsare. De kräver inget eget JavaScript. De bara fungerar.
Färgkontrast och visuella markeringar spelar roll för reglagets lägen
Ett reglage som bara förlitar sig på färg för att visa sitt läge fungerar inte för personer med nedsatt syn eller färgblindhet. Om reglaget är grönt när det är på och rött när det är av kan en färgblind användare inte se vilket läge det är i.
Varje reglage behöver flera visuella signaler. Färg plus form. Färg plus position. Färg plus text. Reglagets form ska ändra position när det vippas. Cirkeln inuti ska glida från vänster till höger. Bakgrunden ska byta färg. Tillsammans skapar de tre signalerna redundans, så att någon med vilken synnedsättning som helst ändå kan se om reglaget är på eller av.
Textetiketter lägger till ytterligare ett lager. Om reglaget har en på/av-etikett synlig på själva brytaren förstärker etiketten det som färg och position redan visar. Det är visuell redundans. Det är inte överflödigt. Det är tillgänglighet.
Storleken spelar roll för tryckytor
Ett reglage som ser snyggt ut med 24 pixlars bredd blir en mardröm på mobilen. Användaren försöker trycka på det och träffar fel. Eller trycker flera gånger eftersom hen inte är säker på att det första trycket registrerades.
Minsta tryckyta för alla interaktiva element är 44x44 pixlar. Ett reglage bör vara minst så stort. Större är bättre, särskilt på mobilen. Ett reglage som är 60 pixlar brett är mycket lättare att träffa än ett på 30 pixlar.
Det här är ingen designpreferens. Det är ett tillgänglighetskrav. Användare med nedsatt finmotorik, darrningar eller bara stora fingrar på små skärmar behöver reglage som är stora nog att träffa med säkerhet.
Blanda inte reglage med skickaknappar i formulär
Det här är det största misstaget. Ett formulär med textfält, rullgardinslistor och andra vanliga formulärfält har en skickaknapp längst ned. Alla ändringar gäller när användaren klickar på skicka. Men ett reglage läggs till i formuläret och är utformat för att gälla direkt utan inskick. Användarens mentala modell går sönder. Hen förväntar sig att reglaget ska vänta på inskick som kryssrutorna. Men reglaget ändras direkt. Hen tror att hen gjorde fel. Hen vippar tillbaka det. Kaos.
Om du har ett formulär med skickaknapp, använd inte reglage. Använd kryssrutor för ja/nej-frågor. Alla ändringar i formuläret gäller samtidigt när användaren klickar på skicka. Formuläret är logiskt. Användaren förstår modellen.
Reglage hör hemma i instrumentpaneler, inställningspaneler och andra ställen där varje interaktion är omedelbar. De hör inte hemma i formulär som kräver inskick.
Så hanterar WEMASY reglage i formulär
WEMASY:s formulärbyggare har reglage som ett alternativ för formulärfält. Om du väljer att använda ett reglage kräver formulärbyggaren en tydlig etikett. Reglaget är tillräckligt stort för touch. Det har rätt ARIA-attribut för tillgänglighet. Formulärbyggaren varnar dig också om du lägger till ett reglage i ett formulär som har andra fälttyper och en skickaknapp. Varningen finns av en anledning. Den fångar ett verkligt användbarhetsproblem. Om du ser den varningen, byt till kryssrutor eller radioknappar i stället. Dina användare kommer att tacka dig.