Testaat lomakkeesi tietokoneella ja se näyttää täydelliseltä. Täysi leveys, kaksi saraketta, väljä. Lähetät testin mobiilissa ja huomaat heti, että jokin on pielessä. Kentät ovat pieniä. Näppäimistö peittää puolet lomakkeesta. Napautat väärää kenttää. Koko kokemus tuntuu rikkinäiseltä.
Puolet kävijöistäsi käyttää mobiilia. Jos lomakkeesi ei ole responsiivinen, menetät puolet lähetyksistä. Tässä artikkelissa kerrotaan, miten suunnittelet lomakkeet, jotka toimivat puhelimilla, tableteilla ja tietokoneilla.
Mobiililomakkeet eroavat tietokonelomakkeista
Mobiilikäyttäjät täyttävät lomakkeita eri tavalla kuin tietokoneen käyttäjät. Tietokoneella tilaa on. Voit käyttää usean sarakkeen asetteluja. Voit laittaa nimet kenttien viereen. Mobiilissa jokainen pikseli on tärkeä.
Mobiilinäppäimistöt ovat isoja. Kun näppäimistö aukeaa, se peittää puolet näytöstä. Lomake vierittyy. Käyttäjä menettää kokonaiskuvan. Painike, joka oli näkyvissä, onkin nyt näppäimistön takana.
Kosketusalueiden pitää olla isompia. Napsautettava alue, joka on 14 x 14 pikseliä, toimii hyvin hiirellä. Sormi tarvitsee vähintään 48 x 48 pikseliä, tai käyttäjä osuu ohi.
Mobiilikäyttäjillä on usein heikko verkko. Jokainen ylimääräinen lomakkeen lataus tai kuva lisää aikaa. Nopeus on tärkeämpää kuin tietokoneella.
Yhden sarakkeen lomakeasettelu
Turvallisin responsiivinen lomake on yhden sarakkeen lomake. Yksi kenttä riviä kohden, näytön koosta riippumatta.
Yhden sarakkeen asettelut ovat yksinkertaisia, toimivat kaikilla näytöillä, tekevät kokemuksesta yhtenäisen ja ovat erittäin ennustettavia. Suurin haitta on, että lomakkeet näyttävät pidemmiltä tietokoneella ja vaativat enemmän vierittämistä.
Useimpien lomakkeiden pitäisi olla yhden sarakkeen lomakkeita. Jos lomakkeessa on viisi kenttää, yksi sarake on tietokoneella oikeasti lyhyempi kuin kahden sarakkeen asettelu. Käyttäjä vierittää vähemmän ja näkee enemmän asiayhteyttä.
Yhden sarakkeen asettelun saat näin: input, textarea, select { display: block; width: 100%; margin-bottom: 1rem; }. Tämä pinoaa kaiken pystysuunnassa kaikilla leveyksillä.
Kaksi saraketta tietokoneella, yksi sarake mobiilissa
Jos haluat käyttää isojen näyttöjen vaakatilaa, käytä ruudukkoa: .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } ja mediakyselyä @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }. Tietokoneella tämä tekee kaksi saraketta, ja mobiilissa kentät pinoutuvat yhteen sarakkeeseen. Asettelu pysyy yksinkertaisena ja responsiivisena.
Ryhmittele vain kentät, jotka todella kuuluvat yhteen. "Etunimi" ja "Sukunimi" vierekkäin on järkevää. "Katuosoite" ja "Maa" vierekkäin ei ole.
Kosketusalueet ja sormiystävällinen suunnittelu
Pienin kosketusalue mobiilissa on 44 x 44 pikseliä (yhden mobiilialustan ohjeen mukaan) tai 48 x 48 pikseliä (toisen alustan ohje). Tavoittele vähintään 44:ää.
Kosketusalueen koko koskee syöttökenttiä, joiden pitää olla niin korkeita, että niitä on helppo napauttaa (40 tai 50 pikseliä on hyvä), valintaruutuja ja valintanappeja, jotka ovat oletuksena 13 x 13 pikseliä ja pitäisi suurentaa vähintään 44 x 44 pikseliin CSS:llä tai JavaScriptillä, painikkeita, joiden pitäisi olla vähintään 44 x 44 pikseliä lisätyllä täytteellä, sekä nimikkeitä, joiden pitää olla myös 44 x 44 pikseliä, jos niitä napsautetaan for-attribuutin kautta. Joskus nimike ja kenttä yhdessä muodostavat koko kosketusalueen.
Isommat ja helpommin napautettavat kentät saat näin: input[type="text"], input[type="email"], textarea { padding: 0.75rem; font-size: 1rem; }. Täyte tekee kentästä korkeamman ja helpottaa napautusta.
Näppäimistön huomioiminen
Mobiilissa selaimen näppäimistö peittää näytön alapuoliskon. Jos lomakkeesi on sivun alaosassa, lähetyspainike jää piiloon. Käyttäjän pitää vierittää alas tai sulkea näppäimistö nähdäkseen painikkeen.
Pidä lomakkeesi sivun yläosan lähellä. Tai laita lähetyspainike sekä ylä- että alaosaan. Älä piilota tärkeitä painikkeita näppäimistön alle.
Myös näppäimistön tyyppi on tärkeä. Sähköpostikentässä käytä <input type="email">, jolloin näkyviin tulee sähköpostinäppäimistö @-merkillä. Puhelinkentässä käytä <input type="tel">, jolloin näkyviin tulee numeronäppäimistö. Numerosyötössä käytä <input type="number">, jolloin näkyviin tulee numeronäppäimistö. Kun käytät oikeaa kenttätyyppiä, selain valitsee näppäimistön automaattisesti.
Kun käyttäjä napauttaa syöttökenttää, selain vierittää kentän näkyviin. Se on hyvä. Kenttä on näkyvissä, kun käyttäjä haluaa kirjoittaa. Joskus se voi kuitenkin vierittää muun asiayhteyden ohi. Kokeile lomaketta oikealla puhelimella nähdäksesi toiminnan.
Nimikkeiden sijoittelu mobiilissa
Tietokoneella nimikkeet voivat olla kentän yläpuolella, vieressä tai sisällä. Mobiilissa yläpuoli on lähes aina paras.
Kentän yläpuolella oleva nimike on selkeä. Käyttäjä näkee ensin nimikkeen ja sitten kentän. Kapealla näytöllä kentän vieressä oleva nimike tuhlaa vaakatilaa. Kentän sisällä oleva paikkamerkkiteksti katoaa, kun alat kirjoittaa.
Hyvä käytäntö: Sijoita nimikkeet kenttien yläpuolelle. Aina.
<label for="email">Sähköposti</label>
<input type="email" id="email">
Välit ja täyte
Responsiiviset lomakkeet tarvitsevat mobiilissa enemmän tilaa, eivät vähemmän. Vaistosi käskee puristaa kaiken näytölle. Taistele sitä vastaan.
Käytä reilua täytettä ja marginaaleja: vähintään 1rem (16 pikseliä) kenttien välillä, vähintään 0.75rem (12 pikseliä) kentän täytteenä joka sivulla ja vähintään 1rem (16 pikseliä) painikkeen täytteenä joka sivulla. Reilu tila helpottaa lomakkeen käyttöä, vähentää ohi napautuksia ja parantaa luettavuutta. Mobiilissa väljyys on arvokkaampaa kuin näyttötila.
Tekstin koko mobiilissa
Käytä syöttökentissä vähintään 16 pikseliä. Pienempi teksti pakottaa käyttäjän zoomaamaan tai siristelemään silmiään. 16 pikseliä on oletus, ja se toimii.
Nimikkeet voivat olla pienempiä, noin 14 pikseliä. Syöttökenttien pitää kuitenkin olla vähintään 16 pikseliä.
Jotkin selaimet zoomaavat automaattisesti, kun napautat alle 16 pikselin kenttää. Silloin lomake hyppää ja zoomaa yllättäen. Estä tämä: input { font-size: 16px; }.
Yleisiä virheitä responsiivisissa lomakkeissa
Kahden sarakkeen asettelun käyttö kaikilla näyttökoilla
Lomakkeet puristuvat mobiilissa kasaan. Kentät ovat pieniä. Nimikkeet pinoutuvat kömpelösti. Pinoa aina yhteen sarakkeeseen pienemmillä leveyksillä.
Liian pienet kosketusalueet
Valintaruutujen, valintanappien ja painikkeiden pitää olla vähintään 44 x 44 pikseliä. Testaa oikealla puhelimella. Jos sitä pitää keskittyä napauttamaan, se on liian pieni.
Paikkamerkkitekstin käyttö ainoana nimikkeenä
Kun käyttäjä alkaa kirjoittaa, paikkamerkki katoaa. Hän unohtaa, mitä kenttään kuuluu kirjoittaa. Käytä aina kunnollista nimike-elementtiä. Voit pitää paikkamerkin, jos haluat, mutta älä luota pelkkään siihen.
Lomakkeen sijoittaminen pitkän sivun alaosaan
Käyttäjä vierittää alas yhteydenottolomakkeelle, napauttaa sähköpostikenttää, ja mobiilinäppäimistö peittää lomakkeen. Hän ei näe, mitä kirjoittaa, eikä pääse lähetyspainikkeeseen. Sijoita lomakkeet sivun yläosan lähelle tai varmista, että ne mahtuvat näytölle näppäimistön kanssa.
Testaamatta jättäminen oikeilla mobiililaitteilla
Tietokoneen selaimessa on mobiilinäkymä. Siitä on hyötyä pikatarkistukseen. Se ei kuitenkaan näytä, miten lomake oikeasti toimii puhelimessa. Testaa oikeilla laitteilla. Lainaa puhelin, jos sinulla ei ole sellaista.
Responsiiviset lomaketekniikat
CSS Grid joustaviin asetteluihin
Käytä .form-group { display: grid; gap: 0.5rem; } ja .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }. Arvot auto-fit ja minmax luovat asettelun, joka mukautuu käytettävissä olevaan tilaan: kentät pinoutuvat kapeilla leveyksillä ja asettuvat vierekkäin leveillä.
Flexbox painikkeiden asetteluun
Käytä .form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } ja .form-actions button { flex: 1; min-width: 150px; }. Painikkeet ovat tietokoneella vierekkäin, mobiilissa ne rivittyvät useammalle riville, ja jokainen painike kasvaa täyttämään käytettävissä olevan tilan.
Mediakyselyt tietyille leveyksille
Käytä @media (max-width: 480px) { label { display: block; margin-bottom: 0.5rem; } input { width: 100%; } } pakottaaksesi yhden sarakkeen asettelun alle 480 pikselin näytöillä.
Näin WEMASY-lomakkeet mukautuvat kaikkiin näyttökokoihin
WEMASYn lomakerakentaja tekee automaattisesti responsiivisia lomakkeita. Rakenna tietokoneella, niin mobiili on jo hoidettu. Lomakkeet pinoutuvat puhelimilla yhteen sarakkeeseen. Kosketusalueet on mitoitettu mobiilille. Nimikkeiden ja kenttien välit on mitoitettu oikein. Lisätyötä ei tarvita.
Katso, miten lomakkeiden responsiivisuus toimii WEMASY-paketissasi.