Kytkimet ja kyllä/ei-kentät lomakkeissa

Opi, milloin lomakkeessa käytetään kytkimiä ja kyllä/ei-kenttiä. Ymmärrä kytkimen ja valintaruudun ero ja miten suunnittelet ne selkeiksi ja saavutettaviksi.

Luonnos

Kytkin näyttää yksinkertaiselta. Pieni vipu, joka kääntyy päälle ja pois. Silti kytkinkentät hämmentävät käyttäjiä enemmän kuin lähes mikään muu lomakkeen elementti. Ihmiset epäröivät. He eivät tiedä, muuttuuko jokin heti kytkintä käännettäessä vai odottaako se lähetyspainiketta. He eivät tiedä, kumpi puoli tarkoittaa kyllä ja kumpi ei. Yksi väärin sijoitettu kytkin lomakkeessa voi romahduttaa täyttöasteesi. Oikea kytkin oikeassa paikassa muuttuu näkymättömäksi.

Ota mikä tahansa lomake, joka käyttää kytkimiä, ja katso, mitä ihmiset oikeasti tekevät. He liikkuvat hitaasti. He pysähtyvät osoittimen kanssa. He palaavat tarkistamaan, mitä kytkin ohjaa. He etsivät lähetyspainikkeita, koska eivät ole varmoja, tuliko kytkimen muutos voimaan. Nämä eivät ole käyttäjävirheitä. Ne ovat suunnitteluongelmia. Kytkimillä on lomakkeissa tietty tehtävä. Ne tekevät yhden asian hyvin. Ne eivät tee kaikkea. Sen ymmärtäminen, milloin kytkimet kuuluvat lomakkeeseen ja milloin eivät, on ero sujuvan ja sekavan lomakkeen välillä.

Ongelma, kun kaikkea kutsutaan kytkimeksi

Sana kytkin tarkoittaa jotain tiettyä. Kytkin on vipu kahden vastakkaisen tilan välillä. Olet joko tilassa A tai tilassa B. Ei mitään siltä väliltä. Ei mitään muuta. Monet lomakkeet kutsuvat kyllä/ei-kysymyksiään kytkimiksi, vaikka ne eivät ole. Kysymys kuten "Haluatko vastaanottaa mainossähköposteja?" ei ole kytkin. Se on kyllä tai ei -kysymys, joka kuuluu lomakkeeseen. Todellinen kytkin on "Ota tumma tila käyttöön". Kytkin muuttaa kokemustasi heti. Lomake ei tarvitse lähetyspainiketta, jotta muutos tulee voimaan.

Tämä sekaannus aiheuttaa todellista kitkaa. Aseta oikea kytkin keskelle lomaketta, joka on täynnä tekstikenttiä ja valintanappeja. Käyttäjät eivät tiedä, tuliko kytkimen muutos voimaan heti vai pitääkö heidän vielä napsauttaa lähetä. He saattavat näpäyttää kytkintä, ajatella, ettei mitään tapahtunut, näpäyttää sen takaisin ja hämmentyä, kun lomake näyttää päinvastaisen tilan kuin mitä he valitsivat.

Milloin kytkin oikeasti sopii lomakkeeseen

Kytkin kuuluu lomakkeeseen vain, kun kaksi ehtoa täyttyy yhtä aikaa. Ensin valinnan täytyy olla kaksijakoinen. Täsmälleen kaksi tilaa. Kyllä tai ei. Päällä tai pois. Ei mitään muuta. Sitten valinnan täytyy tulla voimaan heti ilman lähetyspainiketta. Käyttäjä kääntää kytkimen ja tila muuttuu välittömästi.

Useimmissa lomakkeissa kumpikaan näistä ehdoista ei täyty. Useimmat lomakkeet vaativat lähetyspainikkeen lopussa. Kaikki muutokset tulevat voimaan kerralla, kun joku napsauttaa lähetä. Kytkimen asettaminen lomakkeeseen, jossa on lähetyspainike, aiheuttaa sekaannusta, koska kytkin vaikuttaa siltä, että sen pitäisi toimia heti, mutta koko lomake odottaa lähettämistä.

Kytkimet toimivat asetuksissa. Kytkimet toimivat tilin hallintapaneeleissa, joissa jokainen muutos on heti voimassa. Kytkimet eivät toimi tavallisissa lomakkeissa, joissa keräät tietoja ja pyydät ihmisiä lähettämään ne lopuksi. Jos lomakkeessasi on lähetyspainike, kyllä/ei-kysymyksissäsi pitäisi käyttää kytkinten sijaan valintaruutuja tai valintanappeja.

Kytkin vai valintaruutu lomakekentissä

Visuaalinen ero kytkimen ja valintaruudun välillä on ilmeinen. Mutta toiminnallinen ero on se, millä on väliä. Valintaruutu on lomakkeen ohjausobjekti, joka odottaa lähettämistä. Voit valita useita valintaruutuja. Voit poistaa valinnan. Mitään ei tapahdu ennen kuin lähetät lomakkeen. Kytkin on tilakytkin, joka muuttaa usein asioita heti. Lomake ei tarvitse lähettämistä, jotta muutos tulee voimaan.

Siksi käytettävyystutkimus osoittaa, että käyttäjät hämmentyvät, kun kytkimiä ja valintaruutuja sekoitetaan samassa lomakkeessa. Heti vaikuttavat kytkimet tuntuvat täysin erilaisilta kuin odottavat valintaruudut. Niiden sekoittaminen antaa ristiriitaisia signaaleja siitä, mitä tapahtuu, kun joku käyttää lomaketta.

Jos lomakkeessasi on kaksijakoinen kyllä/ei-kysymys ja lomake vaatii lähetyspainikkeen, käytä valintaruutua tai valintanappiparia. Molemmat ovat tuttuja. Molemmat sopivat lomakkeen yhteyteen. Käyttäjät ymmärtävät valitsevansa jotain, mikä lähetetään, eikä käynnistävänsä välitöntä muutosta.

Milloin kytkimen sijaan käytetään valintanappeja

Kytkin voi näyttää vain yhden tilan kerrallaan. Näet päällä tai pois. Joskus käyttäjien täytyy kuitenkin nähdä molemmat vaihtoehdot samaan aikaan päätöstä varten. Silloin valintanapit toimivat kytkintä paremmin.

Esimerkki: lomake kysyy "Minkä paketin haluat?" vaihtoehdoilla "Perus" tai "Premium". Voisit käyttää kytkintä niiden välillä vaihtamiseen. Mutta käyttäjä ei näe molempia paketteja rinnakkain. Hänen täytyy kääntää kytkintä nähdäkseen, mikä toinen vaihtoehto on. Valintanappipari näyttää molemmat vaihtoehdot samaan aikaan. Käyttäjä näkee Perus-paketin vasemmalla ja Premiumin oikealla. Hän voi verrata ja valita kääntämättä mitään.

Aina, kun haluat käyttäjien vertaavan kahta vaihtoehtoa tai näkevän molemmat valinnat, käytä valintanappeja. Aina, kun kytkin on ainoa tapa vaihtaa vaihtoehtojen välillä eivätkä käyttäjät voi verrata niitä, valintanapit ovat todennäköisesti parempi valinta.

Miten nimeät kytkimen niin, että ihmiset ymmärtävät, mitä se tekee

Kytkinten suurin ongelma on nimeäminen. Monet suunnittelijat käyttävät vain "Päällä" ja "Pois". Mutta päällä ja pois minkä suhteen? Käyttäjän täytyy arvata. Se aiheuttaa epäröintiä.

Jokaisella kytkimellä täytyy olla selkeä nimi, joka kuvaa, mitä kytkin ohjaa. Ei "Päällä/Pois". Jotain kuten "Ota tumma tila käyttöön" tai "Vastaanota ilmoituksia" tai "Näytä lisäasetukset". Nimi kertoo käyttäjälle, mitä tapahtuu, jos hän kääntää kytkimen.

Nimen täytyy olla heti näkyvissä ja lähellä kytkintä. Jos nimi on kaukana tai pieni, käyttäjät eivät yhdistä sitä kytkimeen. He kääntävät sitä ymmärtämättä, mitä ovat muuttamassa.

Jotkin kytkimet näyttävät sekä päällä- että pois-tekstin suoraan kytkimessä. "Kyllä" toisella puolella ja "Ei" toisella. Tämä voi toimia, jos tekstit ovat suuria ja selkeitä. Testit kuitenkin osoittavat, että ihmiset tuntevat kyllä/ei-kytkimet huonommin kuin päällä/pois-kytkimet. Jos käytät kyllä/ei-tekstejä, testaa ensin käyttäjilläsi. Yleisesti päällä/pois on kuitenkin kytkimissä selkeämpi kuin kyllä/ei.

Kytkinten saavutettavuusongelma

Kytkimet aiheuttavat todellisia ongelmia ruudunlukijan käyttäjille. Visuaalinen kytkin on järkevä sille, joka näkee sen. Hän näkee vivun liukuvan oikealle ja ymmärtää, että se on nyt päällä. Mutta ruudunlukijan käyttäjä ei kuule mitään. Kytkimellä ei ole saavutettavaa nimeä. Käyttäjä ei voi tietää, missä tilassa kytkin on. Hän ei voi tietää, mitä kytkin ohjaa.

Saavutettavan kytkimen rakentaminen vaatii ARIA-määritteen nimeltä aria-pressed. Se kertoo ruudunlukijoille, että elementti on painike ja se on joko painettuna tai ei painettuna. Ruudunlukijan käyttäjä kuulee "Tumma tila -kytkinpainike, tällä hetkellä päällä." Ilman aria-pressed-määritettä käyttäjä ei kuule mitään merkityksellistä.

Oikeallakaan ARIA-asetuksella kytkimet eivät ole luonnollisia lomakkeen ohjausobjekteja. Valintaruutu on lomakkeen ohjausobjekti. Kaikki tietävät, mikä valintaruutu on. Kytkin on mukautettu ohjausobjekti, joka vaatii lisää JavaScriptiä. Siksi monet saavutettavat lomakesuunnitelmat jättävät kytkimet kokonaan pois ja käyttävät valintaruutuja. Valintaruudut on rakennettu jokaiseen selaimeen. Ne toimivat ruudunlukijoiden kanssa. Ne eivät vaadi mukautettua JavaScriptiä. Ne vain toimivat.

Värikontrasti ja visuaaliset merkit ovat tärkeitä kytkimen tiloissa

Kytkin, joka luottaa vain väriin tilansa näyttämisessä, ei toimi heikkonäköisille tai värisokeille. Jos kytkin on vihreä päällä ja punainen pois, värisokea käyttäjä ei voi sanoa, missä tilassa se on.

Jokaisella kytkimellä täytyy olla useita visuaalisia signaaleja. Väri ja muoto. Väri ja sijainti. Väri ja teksti. Kytkimen muodon pitäisi vaihtaa paikkaa, kun se kääntyy. Sisällä olevan ympyrän pitäisi liukua vasemmalta oikealle. Taustan pitäisi vaihtaa väriä. Yhdessä nämä kolme signaalia luovat päällekkäisyyttä, jotta kuka tahansa näkövammastaan riippumatta voi silti kertoa, onko kytkin päällä vai pois.

Tekstinimet lisäävät vielä yhden kerroksen. Jos kytkimessä on näkyvä päällä/pois-teksti itse vivussa, teksti vahvistaa sen, minkä väri ja sijainti jo näyttävät. Tämä on visuaalista päällekkäisyyttä. Se ei ole ylimääräistä. Se on saavutettavuutta.

Koolla on väliä kosketuskohteissa

Kytkin, joka näyttää söpöltä 24 pikselin leveydellä, muuttuu painajaiseksi mobiilissa. Käyttäjä yrittää napauttaa sitä ja osuu väärään kohtaan. Tai hän napauttaa sitä useita kertoja, koska ei ole varma, rekisteröityikö ensimmäinen napautus.

Minkä tahansa interaktiivisen elementin pienin kosketuskohteen koko on 44x44 pikseliä. Kytkimen pitäisi olla vähintään sen kokoinen. Suurempi on parempi, erityisesti mobiilissa. 60 pikselin levyinen kytkin on paljon helpompi napauttaa tarkasti kuin 30 pikselin kytkin.

Tämä ei ole suunnittelumieltymys. Tämä on saavutettavuusvaatimus. Käyttäjät, joilla on rajallinen näppäryys, vapinaa tai vain isot sormet pienillä näytöillä, tarvitsevat riittävän suuria kytkimiä osuakseen luotettavasti.

Älä sekoita kytkimiä ja lomakkeen lähetyspainikkeita

Tämä on suurin virhe. Lomakkeessa, jossa on tekstikenttiä, pudotusvalikoita ja muita tavallisia lomakekenttiä, on lähetyspainike alareunassa. Kaikki muutokset tulevat voimaan, kun käyttäjä napsauttaa lähetä. Mutta lomakkeeseen lisätään kytkin, joka on suunniteltu tulemaan voimaan heti ilman lähettämistä. Käyttäjän mielikuva hajoaa. He odottavat kytkimen odottavan lähettämistä kuten valintaruudut. Mutta kytkin muuttuu heti. He luulevat tehneensä virheen. He kääntävät sen takaisin. Sekasotku.

Jos lomakkeessasi on lähetyspainike, älä käytä kytkimiä. Käytä valintaruutuja kyllä/ei-kysymyksiin. Kaikki lomakkeen muutokset tulevat voimaan yhdessä, kun käyttäjä napsauttaa lähetä. Lomake on järkevä. Käyttäjä ymmärtää mallin.

Kytkimet kuuluvat hallintapaneeleihin, asetuspaneeleihin ja muihin paikkoihin, joissa jokainen toiminto on välitön. Ne eivät kuulu lomakkeisiin, jotka vaativat lähettämisen.

Miten WEMASY käsittelee kytkimet lomakkeissa

WEMASYn lomakerakentajassa kytkimet ovat yksi lomakekenttävaihtoehto. Jos päätät käyttää kytkintä, lomakerakentaja vaatii selkeän nimen. Kytkin on riittävän suuri kosketukseen. Siinä on oikeat ARIA-määritteet saavutettavuutta varten. Lomakerakentaja myös varoittaa, jos lisäät kytkimen lomakkeeseen, jossa on muita syöttötyyppejä ja lähetyspainike. Varoitus on siellä syystä. Se huomaa todellisen käytettävyysongelman. Jos näet tuon varoituksen, vaihda kytkin valintaruutuihin tai valintanappeihin. Käyttäjäsi kiittävät sinua.

Usein kysytyt kysymykset

Pitäisikö lomakkeeni kyllä/ei-kysymyksissä käyttää kytkintä vai valintaruutua?
Jos lomakkeesi lopussa on lähetyspainike, käytä kyllä/ei-kysymyksiin valintaruutua tai valintanappia. Älä käytä kytkintä. Kytkin vaikuttaa siltä, että sen pitäisi muuttaa jotain heti, mutta lomakkeessa, jossa on lähetyspainike, niin ei tapahdu. Ristiriita hämmentää käyttäjiä. Kytkimet toimivat hallintapaneeleissa ja asetuksissa, joissa jokainen muutos on heti voimassa. Valintaruudut toimivat lomakkeissa. WEMASYn Sivustonrakentajalla voit tehdä tämän suoraan verkkosivustollasi.
Mitä eroa on kytkimellä ja valintanappiparilla?
Kytkin näyttää yhden tilan kerrallaan. Käännät sitä nähdäksesi toisen vaihtoehdon. Valintanapit näyttävät molemmat vaihtoehdot samaan aikaan vierekkäin. Jos käyttäjien täytyy verrata kahta vaihtoehtoa, valintanapit ovat parempia. Jos sinulla on tilaa vain yhdelle ohjausobjektille eikä vaihtoehtoja tarvitse verrata, kytkin voi toimia. Useimmissa lomakkeissa valintanapit ovat kuitenkin selkeämpiä, koska käyttäjät näkevät molemmat valinnat kerralla.
Miten teen kytkimestä saavutettavan ruudunlukijan käyttäjille?
Kytkin tarvitsee aria-pressed-määritteen, joka kertoo ruudunlukijoille, onko se päällä vai pois. Se tarvitsee selkeän nimen, joka kuvaa, mitä kytkin ohjaa. Se tarvitsee korkean värikontrastin, jotta se näkyy heikkonäköisille. Se tarvitsee suuren kosketuskohteen, vähintään 44x44 pikseliä. Rehellisesti sanottuna, jos saavutettavuus on sinulle tärkeää, harkitse valintaruudun käyttöä. Valintaruudut on rakennettu jokaiseen selaimeen, ne toimivat kaikkien apuvälineiden kanssa eivätkä vaadi mukautettua JavaScriptiä.
Voinko käyttää kytkimessä kyllä/ei-tekstejä päällä/pois-tekstien sijaan?
Voit, mutta testit osoittavat, että käyttäjät tuntevat päällä/pois-tekstit paremmin kuin kyllä/ei-tekstit kytkimissä. Jos käytät kyllä/ei-tekstejä, tee niistä hyvin suuret ja selkeät. Testaa ensin käyttäjilläsi. Turvallisin valinta on päällä/pois-tekstit, koska useampi käyttäjä ymmärtää, mitä ne tarkoittavat.
Pitäisikö kytkimet asettaa aina oletuksena pois päältä?
Kyllä. Oletustilan pitäisi olla pois päältä tai valitsematon. Älä koskaan aseta oletukseksi päälle. Jos asetat kytkimen oletuksena päälle, käyttäjät eivät ehkä huomaa sen olevan jo käytössä ja lähettävät lomakkeen tajuamatta muuttaneensa asetusta. Aloita aina kytkin pois päältä, ellei ole hyvin vahvaa syytä toimia toisin. Ja jos asetat oletukseksi päälle, sinun täytyy olla äärimmäisen selkeä siitä, mikä oletustila on.

Ota se heti käyttöön
omalla verkkosivullasi.

Aloita ilmaiseksi WEMASYlla ja rakenna sivusi muutamassa minuutissa.