A kapcsoló egyszerűnek látszik. Egy kis kapcsoló, amely be- és kikapcsolt állapot között vált. De a kapcsolómezők szinte minden más űrlapelemnél jobban megzavarják a felhasználókat. Az emberek habozni kezdenek. Nem tudják, hogy a kapcsoló átbillentése azonnal változtat-e valamit, vagy egy beküldés gombra vár. Nem tudják, melyik oldal jelent igent és melyik nemet. Egyetlen rosszul elhelyezett kapcsoló egy űrlapon lerontja a kitöltési arányokat. A jó helyen lévő jó kapcsoló láthatatlanná válik.
Vegyél bármilyen kapcsolót használó űrlapot, és nézd meg, mit csinálnak valójában az emberek. Lassan mozognak. Rámutatnak. Visszamennek ellenőrizni, mit szabályoz a kapcsoló. Beküldés gombot keresnek, mert nem biztosak benne, hogy a kapcsoló változása érvénybe lépett-e. Ezek nem felhasználói hibák. Tervezési problémák. A kapcsolóknak konkrét feladatuk van az űrlapokban. Egy dolgot csinálnak jól. Nem csinálnak mindent. Az, hogy megérted, mikor valók a kapcsolók, és mikor nem, a különbség egy gördülékeny és egy zavaros űrlap között.
A gond azzal, ha mindent kapcsolónak nevezünk
A kapcsoló szó valami konkrétat jelent. A kapcsoló két ellentétes állapot közötti váltás. Vagy az A állapotban vagy a B állapotban vagy. Semmi a kettő között. Semmi más. De sok űrlap kapcsolónak nevezi az igen/nem kérdéseit, pedig azok nem azok. Egy olyan kérdés, mint "Szeretnél promóciós e-maileket kapni?", nem kapcsoló. Ez egy igen vagy nem kérdés, amely egy űrlapba való. Egy valódi kapcsoló az "Sötét mód engedélyezése." A kapcsoló azonnal megváltoztatja az élményedet. Az űrlapnak nincs szüksége beküldés gombra, hogy a változás érvénybe lépjen.
Ez a félreértés valódi súrlódást okoz. Tegyél egy valódi kapcsolót egy szövegbevitelekkel és rádiógombokkal teli űrlap közepére. A felhasználók nem fogják tudni, hogy a kapcsoló változása azonnal életbe lépett-e, vagy még a beküldésre kell-e kattintaniuk. Átbillenthetik a kapcsolót, azt gondolhatják, hogy semmi sem történt, visszabillenthetik, majd megzavarodhatnak, amikor az űrlap az általuk választott állapot ellentétét mutatja.
Mikor van értelme a kapcsolónak egy űrlapon
A kapcsoló csak akkor való egy űrlapba, ha két feltétel egyszerre teljesül. Először a választásnak kétállapotúnak kell lennie. Pontosan két állapot. Igen vagy nem. Be vagy ki. Semmi más. Másodszor a választásnak azonnal érvénybe kell lépnie beküldés gomb nélkül. A felhasználó átbillenti a kapcsolót, és az állapot azonnal változik.
A legtöbb űrlapon egyik feltétel sem igaz. A legtöbb űrlap a végén beküldés gombot igényel. Minden változás egyszerre lép érvénybe, amikor valaki a beküldésre kattint. Ha olyan űrlapba teszel kapcsolót, amelyen van beküldés gomb, az zavart kelt, mert a kapcsoló úgy tűnik, mintha azonnal működnie kellene, de az egész űrlap a beküldésre vár.
A kapcsolók a beállításokban működnek. A kapcsolók a fiókvezérlőpultokban működnek, ahol minden változás azonnali. A kapcsolók nem működnek a szokásos űrlapokon, ahol információt gyűjtesz, és arra kéred az embereket, hogy a végén küldjék be. Ha az űrlapodon van beküldés gomb, az igen/nem kérdéseidhez jelölőnégyzetet vagy rádiógombot használj kapcsoló helyett.
Kapcsoló vagy jelölőnégyzet az űrlapmezőkben
A vizuális különbség a kapcsoló és a jelölőnégyzet között nyilvánvaló. De a funkcionális különbség számít. A jelölőnégyzet olyan űrlapvezérlő, amely a beküldésre vár. Több jelölőnégyzetet is bejelölhetsz. Kijelölésüket megszüntetheted. Semmi nem történik, amíg be nem küldöd az űrlapot. A kapcsoló egy állapotváltó, amely gyakran azonnal változtat valamit. Az űrlapnak nincs szüksége beküldésre ahhoz, hogy a változás érvénybe lépjen.
Ezért mutatják a felhasználói élmény kutatások, hogy a felhasználók megzavarodnak, ha ugyanabban az űrlapban keveri a kapcsolókat és a jelölőnégyzeteket. Az azonnal ható kapcsolók teljesen másként éreződnek, mint a várakozó jelölőnégyzetek. A keverésük ellentmondó jelzéseket küld arról, mi történik, amikor valaki használja az űrlapot.
Ha olyan űrlapon van egy igen/nem kérdésed, amelyen van beküldés gomb, használj jelölőnégyzetet vagy rádiógomb-párt. Mindkettő ismerős. Mindkettőnek van értelme az űrlap kontextusában. A felhasználók értik, hogy olyasmit választanak, amit be fognak küldeni, nem azonnali változást váltanak ki.
Mikor használj rádiógombokat kapcsoló helyett
A kapcsoló egyszerre csak egy állapotot mutathat. Bekapcsoltat vagy kikapcsoltat látsz. De néha a felhasználóknak egyszerre kell látniuk mindkét opciót a döntéshez. Ilyenkor a rádiógombok jobban működnek, mint a kapcsoló.
Példa: egy űrlap azt kérdezi, "Melyik csomagot szeretnéd?", az opciók "Alap" vagy "Prémium". Használhatnál kapcsolót a váltáshoz. De a felhasználó nem látja egymás mellett a két csomagot. Át kell billentenie a kapcsolót, hogy lássa, mi a másik opció. A rádiógomb-pár egyszerre mutatja mindkét opciót. A felhasználó az Alapot balra, a Prémiumot jobbra látja. Összehasonlíthat és választhat bármi átbillentése nélkül.
Valahányszor azt szeretnéd, hogy a felhasználók összehasonlítsanak két opciót, vagy lássák mindkét választást, használj rádiógombokat. Valahányszor a kapcsoló az egyetlen mód az opciók közötti váltásra, és a felhasználók nem tudják összehasonlítani őket, a rádiógombok valószínűleg jobb választás.
Hogyan címkézz egy kapcsolót, hogy az emberek értsék, mit csinál
A kapcsolók legnagyobb problémája a címkézés. Sok tervező csak "Be" és "Ki" feliratot használ. De mi be, és mi ki? A felhasználónak találgatnia kell. Ez habozást okoz.
Minden kapcsolónak világos címkére van szüksége, amely leírja, mit szabályoz. Nem "Be/Ki". Valami olyasmi, mint "Sötét mód engedélyezése", "Értesítések fogadása" vagy "Speciális opciók megjelenítése". A címke megmondja a felhasználónak, mi fog történni, ha átbillenti a kapcsolót.
A címkének azonnal láthatónak és a kapcsoló közelében kell lennie. Ha a címke messze van, vagy kicsi, a felhasználók nem kötik össze a kapcsolóval. Úgy billentik át, hogy nem értik, mit változtatnak.
Egyes kapcsolók magán a kapcsolón mutatják a be és a ki címkét is. "Igen" az egyik oldalon és "Nem" a másikon. Ez működhet, ha a címkék nagyok és világosak. De a tesztek szerint az emberek kevésbé ismerik az igen/nem kapcsolókat, mint a be/ki kapcsolókat. Ha igen/nem címkéket használsz, először teszteld a felhasználóiddal. De általában a be/ki világosabb, mint az igen/nem a kapcsolóknál.
A kapcsolók akadálymentességi problémája
A kapcsolók valódi problémákat okoznak a képernyőolvasót használóknak. Egy vizuális kapcsoló értelmes annak, aki látja. Látja, hogy a kapcsoló jobbra csúszik, és érti, hogy most be van kapcsolva. De a képernyőolvasót használó nem hall semmit. A kapcsolónak nincs akadálymentes címkéje. A felhasználó nem tudja megmondani, milyen állapotban van a kapcsoló. Nem tudja megmondani, mit szabályoz.
Egy akadálymentes kapcsoló felépítéséhez aria-pressed nevű ARIA-attribútumra van szükség. Ez megmondja a képernyőolvasóknak, hogy az elem gomb, és vagy lenyomott, vagy nem lenyomott. A képernyőolvasót használó ezt hallja: "Sötét mód kapcsológomb, jelenleg be." Az aria-pressed nélkül a felhasználó semmi értelmeset nem hall.
Még a helyes ARIA-beállítással is a kapcsolók nem természetes űrlapvezérlők. A jelölőnégyzet űrlapvezérlő. Mindenki tudja, mi az a jelölőnégyzet. A kapcsoló egyéni vezérlő, amely további JavaScriptet igényel. Ezért hagyja ki sok akadálymentes űrlapterv a kapcsolókat, és használ helyette jelölőnégyzeteket. A jelölőnégyzetek minden böngészőbe be vannak építve. Működnek a képernyőolvasókkal. Nem igényelnek egyéni JavaScriptet. Egyszerűen működnek.
A színkontraszt és a vizuális jelzések számítanak a kapcsolóállapotoknál
Az a kapcsoló, amely csak a színre támaszkodik az állapota jelzéséhez, nem fog működni a gyengénlátóknak vagy színtévesztőknek. Ha a kapcsoló bekapcsolva zöld, kikapcsolva piros, a színtévesztő felhasználó nem tudja megmondani, milyen állapotban van.
Minden kapcsolónak több vizuális jelzésre van szüksége. Szín plusz alak. Szín plusz pozíció. Szín plusz szöveg. A kapcsoló alakjának pozíciót kell váltania, amikor átbillen. A benne lévő körnek balról jobbra kell csúsznia. A háttérnek színt kell váltania. Együtt ez a három jelzés redundanciát teremt, így bármilyen látássérüléssel élő ember meg tudja állapítani, hogy a kapcsoló be vagy ki van-e kapcsolva.
A szöveges címkék újabb réteget adnak. Ha a kapcsolón maga a be/ki címke is látható, a címke megerősíti, amit a szín és a pozíció már mutat. Ez vizuális redundancia. Nem extra. Ez akadálymentesség.
A méret számít az érintési célpontoknál
Egy kapcsoló, amely 24 pixel szélesen aranyosan néz ki, rémálommá válik mobilon. A felhasználó megpróbál rákoppintani, és mellé talál. Vagy többször koppint, mert nem biztos benne, hogy az első koppintás regisztrálódott.
Bármely interaktív elem minimális érintési célpontmérete 44x44 pixel. Egy kapcsolónak legalább ekkorának kell lennie. A nagyobb jobb, különösen mobilon. Egy 60 pixel széles kapcsolóra sokkal pontosabban lehet koppintani, mint egy 30 pixelesre.
Ez nem tervezési preferencia. Ez akadálymentességi követelmény. A korlátozott ügyességű, remegő kezű, vagy egyszerűen kis képernyőn vastag ujjú felhasználóknak elég nagy kapcsolókra van szükségük, hogy megbízhatóan eltalálják őket.
Ne keverd a kapcsolókat űrlap-beküldés gombokkal
Ez a legnagyobb hiba. Egy szövegbevitelekkel, legördülő menükkel és más szokásos űrlapmezőkkel rendelkező űrlap alján beküldés gomb van. Minden változás érvénybe lép, amikor a felhasználó a beküldésre kattint. De hozzáadnak az űrlaphoz egy kapcsolót, amelyet úgy terveztek, hogy beküldés nélkül azonnal életbe lépjen. A felhasználó mentális modellje összeomlik. Azt várja, hogy a kapcsoló a beküldésre vár, mint a jelölőnégyzetek. De a kapcsoló azonnal változik. Azt hiszi, hibázott. Visszabillenti. Káosz.
Ha olyan űrlapod van, amelyen van beküldés gomb, ne használj kapcsolókat. Használj jelölőnégyzeteket az igen/nem kérdésekhez. Az összes űrlapváltozás együtt lép érvénybe, amikor a felhasználó a beküldésre kattint. Az űrlapnak van értelme. A felhasználó érti a modellt.
A kapcsolók műszerfalakba, beállítási panelekre és más olyan helyekre valók, ahol minden interakció azonnali. Nem valók olyan űrlapokba, amelyek beküldést igényelnek.
Hogyan kezeli a WEMASY a kapcsolókat az űrlapokban
A WEMASY űrlapépítője opcióként tartalmaz kapcsolókat az űrlapmezőkhöz. Ha kapcsolót használsz, az űrlapépítő világos címkét követel meg. A kapcsoló elég nagy az érintéshez. Megfelelő ARIA-attribútumokat tartalmaz az akadálymentességhez. Az űrlapépítő figyelmeztet is, ha olyan űrlaphoz adsz kapcsolót, amelyben más beviteli típusok és beküldés gomb is van. Ez a figyelmeztetés okkal van ott. Valódi használhatósági problémát fog meg. Ha látod a figyelmeztetést, válts jelölőnégyzetekre vagy rádiógombokra. A felhasználóid hálásak lesznek.