Přepínač vypadá jednoduše. Malý spínač, který se přepíná mezi zapnuto a vypnuto. Přesto přepínače matou uživatele víc než skoro jakýkoli jiný prvek formuláře. Lidé váhají. Nevědí, jestli se po přepnutí něco změní hned, nebo se čeká na tlačítko pro odeslání. Nevědí, která strana znamená ano a která ne. Jediný špatně umístěný přepínač ve formuláři může srazit vaši míru dokončení. Správný přepínač na správném místě je přitom neviditelný.
Vezměte jakýkoli formulář s přepínači a podívejte se, co lidé opravdu dělají. Pohybují se pomalu. Přejíždějí myší. Vracejí se, aby zkontrolovali, co přepínač ovládá. Hledají tlačítko pro odeslání, protože si nejsou jistí, že se změna přepínače projevila. Nejde o chyby uživatelů. Jsou to chyby návrhu. Přepínače mají ve formulářích konkrétní úkol. Jednu věc dělají dobře. Nedělají všechno. Když víte, kdy přepínače patří do formuláře a kdy ne, rozdíl poznáte mezi formulářem, který plyne, a formulářem, který mate.
Problém s označováním všeho jako přepínač
Slovo přepínač znamená něco konkrétního. Přepínač je spínač mezi dvěma opačnými stavy. Jste buď ve stavu A, nebo ve stavu B. Nic mezi tím. Nic jiného. Mnoho formulářů ale nazývá přepínači své otázky ano/ne, i když jimi nejsou. Otázka jako „Chcete dostávat propagační e-maily?“ není přepínač. Je to otázka s odpovědí ano nebo ne, která do formuláře patří. Skutečný přepínač je „Zapnout tmavý režim“. Spínač změní váš zážitek hned teď. Aby se změna projevila, formulář tlačítko pro odeslání nepotřebuje.
Tento zmatek vytváří skutečné tření. Dejte skutečný přepínač doprostřed formuláře plného textových polí a přepínačů výběru. Uživatelé nebudou vědět, jestli se změna přepínače použila hned, nebo jestli ještě musí kliknout na odeslání. Mohou přepínač přehodit, usoudit, že se nic nestalo, přehodit ho zpátky a pak být zmatení, když formulář ukáže opačný stav, než jaký vybrali.
Kdy přepínač ve formuláři opravdu dává smysl
Přepínač patří do formuláře, jen když platí obě podmínky zároveň. Za prvé, volba musí být binární. Přesně dva stavy. Ano, nebo ne. Zapnuto, nebo vypnuto. Nic jiného. Za druhé, volba se musí projevit okamžitě bez tlačítka pro odeslání. Uživatel přepne spínač a stav se hned změní.
Ve většině formulářů neplatí ani jedna z těchto podmínek. Většina formulářů vyžaduje na konci tlačítko pro odeslání. Všechny změny se použijí najednou, když někdo klikne na odeslat. Přepínač ve formuláři s tlačítkem pro odeslání vytváří zmatek, protože se zdá, že by měl fungovat okamžitě, ale celý formulář čeká na odeslání.
Přepínače fungují v nastavení. Přepínače fungují v administraci účtu, kde je každá změna živá. Přepínače nefungují ve standardních formulářích, kde sbíráte informace a na konci žádáte lidi o odeslání. Pokud má váš formulář tlačítko pro odeslání, používejte pro otázky ano/ne místo přepínačů zaškrtávací pole nebo přepínače výběru.
Přepínač, nebo zaškrtávací pole ve formulářích
Vizuální rozdíl mezi přepínačem a zaškrtávacím polem je zřejmý. Důležitý je ale rozdíl ve fungování. Zaškrtávací pole je ovládací prvek formuláře, který čeká na odeslání. Můžete zaškrtnout více polí. Můžete je odškrtnout. Nic se nestane, dokud formulář neodešlete. Přepínač je spínač stavu, který často mění věci okamžitě. Formulář nepotřebuje odeslání, aby se změna projevila.
Proto výzkum NN/G ukazuje, že uživatelé jsou zmatení, když ve stejném formuláři smícháte přepínače a zaškrtávací pole. Přepínače, které jednají hned, působí úplně jinak než zaškrtávací pole, která čekají. Jejich smíchání vysílá protichůdné signály o tom, co se stane, když někdo s formulářem pracuje.
Pokud máte binární otázku ano/ne ve formuláři, který vyžaduje tlačítko pro odeslání, použijte zaškrtávací pole nebo dvojici přepínačů výběru. Oba prvky jsou známé. Oba dávají ve formuláři smysl. Uživatelé chápou, že vybírají něco, co se odešle, a nespouštějí okamžitou změnu.
Kdy použít přepínače výběru místo přepínače
Přepínač dokáže ukázat jen jeden stav najednou. Vidíte zapnuto, nebo vypnuto. Někdy ale uživatelé potřebují vidět obě možnosti zároveň, aby se mohli rozhodnout. V takovém případě fungují přepínače výběru lépe než přepínač.
Příklad: formulář se ptá „Který tarif chcete?“ a nabízí možnosti „Základní“ nebo „Premium“. Mezi nimi byste mohli přepínat přepínačem. Uživatel ale nevidí oba tarify vedle sebe. Musí přepnout spínač, aby zjistil, jaká je druhá možnost. Dvojice přepínačů výběru ukazuje obě možnosti zároveň. Uživatel vidí Základní vlevo a Premium vpravo. Může porovnat a vybrat, aniž by cokoli přepínal.
Kdykoli chcete, aby uživatelé porovnali dvě možnosti nebo viděli obě volby, použijte přepínače výběru. Kdykoli je přepínač jediný způsob, jak mezi možnostmi přecházet, a uživatelé je nemohou porovnat, jsou přepínače výběru pravděpodobně lepší volba.
Jak popsat přepínač, aby lidé chápali, co dělá
Největší problém s přepínači je popisek. Mnoho návrhářů používá jen „Zap“ a „Vyp“. Ale zapnout a vypnout co? Uživatel musí hádat. To vede k váhání.
Každý přepínač potřebuje jasný popisek, který říká, co ovládá. Ne „Zap/Vyp“. Spíš něco jako „Zapnout tmavý režim“, „Dostávat oznámení“ nebo „Zobrazit pokročilé možnosti“. Popisek říká uživateli, co se stane, když spínač přepne.
Popisek musí být okamžitě vidět a být blízko přepínače. Pokud je daleko nebo malý, uživatelé ho se spínačem nespojí. Přepnou ho, aniž by chápali, co mění.
Některé přepínače ukazují popisek zapnuto i vypnuto přímo na spínači. „Ano“ na jedné straně a „Ne“ na druhé. To může fungovat, pokud jsou popisky velké a čitelné. Testy ale ukazují, že lidé znají přepínače ano/ne méně než přepínače zapnuto/vypnuto. Pokud použijete popisky ano/ne, nejdřív je otestujte na svých uživatelích. Obecně je ale u přepínačů zapnuto/vypnuto srozumitelnější než ano/ne.
Problém přístupnosti u přepínačů
Přepínače způsobují skutečné problémy uživatelům čtečky obrazovky. Vizuální přepínač dává smysl tomu, kdo ho vidí. Vidí, jak se spínač posune doprava, a chápe, že je zapnutý. Uživatel čtečky obrazovky ale neslyší nic. Přepínač nemá přístupný popisek. Uživatel nepozná, v jakém stavu přepínač je. Nepozná, co přepínač ovládá.
Přístupný přepínač vyžaduje atribut ARIA zvaný aria-pressed. Ten říká čtečkám obrazovky, že prvek je tlačítko a je buď stisknuté, nebo nestisknuté. Uživatel čtečky obrazovky uslyší „Tlačítko přepínače tmavého režimu, aktuálně zapnuto“. Bez aria-pressed neuslyší nic užitečného.
I se správným nastavením ARIA nejsou přepínače přirozeným prvkem formuláře. Zaškrtávací pole je prvek formuláře. Každý ví, co zaškrtávací pole je. Přepínač je vlastní prvek, který vyžaduje další JavaScript. Proto mnoho přístupných formulářů přepínače úplně vynechává a používá místo nich zaškrtávací pole. Zaškrtávací pole jsou součástí každého prohlížeče. Fungují se čtečkami obrazovky. Nevyžadují vlastní JavaScript. Prostě fungují.
Na kontrastu barev a vizuálních signálech u stavů přepínače záleží
Přepínač, který ukazuje svůj stav jen barvou, nebude fungovat pro lidi se slabým zrakem nebo barvoslepostí. Pokud je přepínač zapnutý zelený a vypnutý červený, barvoslepý uživatel nepozná, v jakém je stavu.
Každý přepínač potřebuje několik vizuálních signálů. Barva plus tvar. Barva plus poloha. Barva plus text. Tvar přepínače by se měl při přepnutí posunout. Kolečko uvnitř by mělo sjet zleva doprava. Pozadí by mělo změnit barvu. Tyto tři signály dohromady vytvářejí redundanci, takže i člověk s jakoukoli poruchou zraku pozná, jestli je přepínač zapnutý, nebo vypnutý.
Textové popisky přidávají další vrstvu. Pokud má přepínač popisek zapnuto/vypnuto viditelný přímo na spínači, popisek posiluje to, co už ukazuje barva a poloha. To je vizuální redundance. Není nadbytečná. Je to přístupnost.
U dotykových ploch záleží na velikosti
Přepínač, který vypadá roztomile při šířce 24 pixelů, se na mobilu stává noční můrou. Uživatel se ho snaží klepnout a trefí něco jiného. Nebo klepe víckrát, protože si není jistý, že první klepnutí zabralo.
Minimální velikost dotykové plochy pro jakýkoli interaktivní prvek je 44x44 pixelů. Přepínač by měl být alespoň tak velký. Větší je lepší, zvlášť na mobilu. Přepínač široký 60 pixelů se trefí mnohem snáz než přepínač široký 30 pixelů.
Není to otázka vkusu. Je to požadavek přístupnosti. Uživatelé s omezenou obratností, s třesem nebo prostě s velkými prsty na malých obrazovkách potřebují, aby byly přepínače dost velké na spolehlivé trefení.
Nemíchejte přepínače s tlačítky pro odeslání formuláře
Tohle je největší chyba. Formulář s textovými poli, rozbalovacími seznamy a dalšími standardními poli má dole tlačítko pro odeslání. Všechny změny se použijí, když uživatel klikne na odeslat. Pak se do formuláře přidá přepínač, který je navržený tak, aby se projevil okamžitě bez odeslání. Uživatelův mentální model se rozpadne. Čeká, že přepínač bude čekat na odeslání jako zaškrtávací pole. Přepínač ale změní stav hned. Uživatel si myslí, že udělal chybu. Přehodí ho zpátky. Chaos.
Pokud máte formulář s tlačítkem pro odeslání, přepínače nepoužívejte. Pro otázky ano/ne použijte zaškrtávací pole. Všechny změny formuláře se použijí společně, když uživatel klikne na odeslat. Formulář dává smysl. Uživatel chápe model.
Přepínače patří do administrací, panelů nastavení a dalších míst, kde je každá akce okamžitá. Do formulářů, které vyžadují odeslání, nepatří.
Jak WEMASY řeší přepínače ve formulářích
Tvůrce formulářů ve WEMASY nabízí přepínače jako možnost pro pole formuláře. Pokud se pro přepínač rozhodnete, tvůrce formulářů vyžaduje jasný popisek. Přepínač je dost velký pro dotyk. Obsahuje správné atributy ARIA pro přístupnost. Tvůrce formulářů vás také upozorní, když přidáte přepínač do formuláře, který má jiné typy vstupů a tlačítko pro odeslání. To upozornění tam má důvod. Zachytává skutečný problém použitelnosti. Když ho uvidíte, přejděte místo toho na zaškrtávací pole nebo přepínače výběru. Vaši uživatelé vám poděkují.