Kaksi kolmesta lomakelähetyksestä tehdään nykyään puhelimella. Silti useimmat verkkosivustot suunnittelevat lomakkeensa pöytäkoneelle ja puristavat ne sitten mobiilinäytölle. Tulos: lomakkeita, joita on turhauttavaa täyttää, joita keskeytetään useammin ja jotka muuttavat vähemmän kävijöitä asiakkaiksi.
Mobiililomakkeiden suunnittelu ei tarkoita pöytäkonelomakkeiden pienentämistä. Se tarkoittaa koko kokemuksen uudelleenajattelua ihmiselle, joka pitää kädessään 6 tuuman näyttöä, käyttää peukaloaan heiluvassa bussissa tai ruuhkaisessa kahvilassa. Kaikki muuttuu. Käytettävissä oleva tila kutistuu. Napautuskohteista tulee paksumpia. Näppäimistö ponnahtaa esiin ja peittää puolet lomakkeesta. Kävijää keskeytetään ja hän lähtee.
Mobiili edellä -lomakesuunnittelu tarkoittaa lomakkeen jokaisen yksityiskohdan optimointia sille, miten ihmiset oikeasti käyttävät puhelimia. Tässä luvussa käydään läpi muutokset, jotka vähentävät keskeyttämistä, nopeuttavat täyttämistä ja muuttavat useampia mobiilikävijöitä liideiksi tai asiakkaiksi.
Pöytäkoneelle suunnitellut mobiililomakkeet menettävät asiakkaita
Katso, mitä tapahtuu, kun joku avaa lomakkeen puhelimellaan verrattuna pöytäkoneeseen. Puhelimen käyttäjällä on vähemmän näyttötilaa, vähemmän kärsivällisyyttä ja enemmän häiriötekijöitä. He hoitavat montaa asiayhteyttä kerralla. Heidän huomionsa on pirstaleista. Yksi kömpelö vuorovaikutus ja he lähtevät.
Data tukee tätä. Lomakkeilla, joiden mobiilisuunnittelu on huono, keskeyttämisasteet nousevat 20-40 prosenttiyksikköä pöytäkoneeseen verrattuna. Yksittäinen huonosti sijoitettu kenttä voi laukaista poistumisaallon. Pieni painike, jota on vaikea napauttaa, luo kitkaa, joka moninkertaistuu tuhansissa lähetyksissä.
Mutta tässä on se, minkä useimmat brändit ohittavat: mobiilille optimointi ei hidasta pöytäkoneen käyttäjiä. Mobiili edellä suunniteltu ja suuremmille näytöille parannettu lomake toimii itse asiassa paremmin kaikille. Tiiviimmät asettelut. Paremmat välit. Selkeämpi hierarkia. Nämä eivät ole mobiilikompromisseja, vaan suunnitteluparannuksia.
Mobiililomakkeen suunnitteluhaaste: mikä on oikeasti erilaista
Mobiililomakkeilla on rajoitteita, joita pöytäkonelomakkeilla ei ole. Sen ymmärtäminen, mikä muuttuu, auttaa suunnittelemaan fiksummin:
Näyttötila on rajallinen
Puhelimen näytöllä näkyy noin 30-40 % siitä sisällöstä, jonka pöytäkoneen näyttö voi näyttää kerralla. Jokainen elementti vie fyysistä tilaa. Ylimääräiset otsikot, ohjeet, vihjeet ja lomakekentät kilpailevat kaikki samasta pienestä tilasta. Näppäimistö ilmestyy ja kutistaa käytettävissä olevaa tilaa entisestään. Pitkät ohjetekstikappaleet katoavat näytön ulkopuolelle.
Napautuskohteet ovat suurempia ja epätarkempia
Sormi on 40-50 pikseliä leveä. Hiiren kursori on 1 pikseli. Tämä tarkoittaa, että painikkeiden, valintaruutujen, valintapainikkeiden ja linkkikohteiden täytyy olla mobiilissa huomattavasti suurempia, jotta ne on helppo napauttaa. Suurimpien mobiilialustojen suosittelemat vakiokoot ovat vähintään 44x44 pikseliä. Jos kohde on liian pieni, käyttäjät ohittavat sen, turhautuvat ja keskeyttävät lomakkeen.
Näppäimistöt ottavat ohjat
Mobiilissa, kun käyttäjä napauttaa lomakekenttää, näppäimistö liukuu esiin ja peittää puolet näytöstä. Jotkin kentät avaavat eri näppäimistöjä: sähköpostikentät näyttävät @-merkin, numerokentät piilottavat kirjaimet, päivämääräkentät avaavat kalenterivalitsimen. Jokainen näppäimistötyyppi muuttaa sitä, mitä käyttäjä näkee ja miten hän on vuorovaikutuksessa. Suunnittele jokaiselle erikseen.
Tilanne vaihtuu jatkuvasti
Pöytäkoneen käyttäjät istuvat alas ja täyttävät lomakkeen keskeytyksettä. Mobiilikäyttäjät täyttävät lomakkeita junissa, kaupoissa ja muiden sovellusten välissä. He saavat ilmoituksen, vaihtavat sovellusta ja palaavat viiden minuutin kuluttua. Vierittäminen tuntuu loputtomalta. Lomakekentät sulautuvat yhteen. Jokainen vaihe, joka vaatii muistamista tai asiayhteyden vaihtamista, saa ihmiset lopettamaan.
Laitetta käytetään yhdellä kädellä
Useimmat puhelimen käyttäjät pitävät laitetta yhdessä kädessä ja navigoivat peukalolla. Oikean alakulman painikkeet ovat ulottuvilla. Korkean lomakkeen yläreunan painikkeet vaativat toisen käden tai kömpelön venytyksen. Kenttien vasemmalla puolella olevia otsikoita on vaikeampi lukea peukaloasennon säilyttäen. Suunnittele yhden käden käyttöön.
Sääntö 1: Vähennä kysyttävien kenttien määrää
Jokainen kysymäsi kenttä on yksi napautus lisää, yksi päätös lisää, yksi mahdollisuus lisää lähteä. Lomake ei tarvitse kaikkea. Se tarvitsee vain sen, mitä oikeasti käytät jatkotoimiin.
Katso todellisia käyttötapauksiasi. Yhteydenottolomake tarvitsee harvoin toisia nimiä, yrityksen kokoa tai toimialaluokkaa ensimmäisellä lähetyksellä. Varauslomake ei tarvitse asiakkaan äidin tyttönimeä. Uutiskirjeen tilaus ei tarvitse ZIP-koodia ensimmäisenä päivänä. Voit kysyä lisätietoja myöhemmin, kun olet jo rakentanut luottamusta.
Suuri matkailuvaraussivusto testasi tätä periaatetta ja säästi $12 million vuodessa poistamalla valinnaisia kenttiä varauslomakkeestaan. Käyttäjät täyttivät lomakkeita useammin loppuun. Konversioita tuli enemmän. Yksinkertaistaminen kannatti.
Aloita ehdottomasta minimistä. Mobiilissa sääntö on tiukempi: jos et tarvitse sitä ydintoiminnon suorittamiseen, poista se. Testaa kenttien poistamista yksi kerrallaan ja katso täyttöasteesi nousevan.
Sääntö 2: Pinoa kentät yhteen sarakkeeseen
Kaksisarakkeiset asettelut mobiilissa ovat virhe. Ne vaativat vaakasuuntaista vierittämistä, luovat sekavan visuaalisen hierarkian ja tuhlaavat vaakatilaa. Yksi sarake pystysuunnassa pinottuna on nopein silmäillä ja täyttää.
Jokainen kenttä vie koko leveyden. Otsikot ovat syöttökentän yläpuolella, ei sen vieressä. Käyttäjä vierittää alas, lukee otsikon, napauttaa kenttää, kirjoittaa ja siirtyy seuraavaan. Kulku on lineaarinen. Kognitiivinen kuorma on pieni.
Vastusta kiusausta laittaa etu- ja sukunimi vierekkäin tai osoite ja ZIP-koodi samalle riville. Pystypinoaminen on hitaampaa pöytäkoneella, kyllä. Mutta mobiili edustaa kahta kolmasosaa liikenteestäsi. Optimoi enemmistön mukaan.
Sääntö 3: Tee napautuskohteista tarpeeksi suuria osuaksesi luotettavasti
Painikkeiden täytyy olla vähintään 44x44 pikseliä. Valintaruutujen ja valintapainikkeiden täytyy olla vähintään 40x40 pikseliä. Pienet painikkeet pakottavat käyttäjät tähtäämään tarkasti tai napauttamaan useita kertoja. Turhautuminen kasvaa. He lähtevät.
Seuraa omaa puhelimen käyttöäsi päivän ajan. Huomaa, kuinka monta napautusta menee ohi. Jopa kokeneet käyttäjät osuvat ohi. Suunnittele ihmissormiin sisäänrakennetun ohiosumisasteen mukaan.
Myös napautuskohteiden väliset välit ovat tärkeitä. Jos kyllä-painike on suoraan ei-painikkeen vieressä, käyttäjät osuvat väärään. Lisää 10-15 pikseliä hengitystilaa interaktiivisten elementtien väliin.
Sääntö 4: Laita otsikot kenttien yläpuolelle, älä niiden sisään
Syöttökenttien sisällä oleva paikkamerkkiteksti katoaa heti, kun käyttäjä alkaa kirjoittaa. He unohtavat, mihin kenttä oli tarkoitettu. Sitten he tekevät virheen, näkevät virheilmoituksen eivätkä tiedä, mitä korjata.
Otsikoiden täytyy olla kentän ulkopuolella ja yläpuolella. Selkeät, näkyvät, aina läsnä. Kun käyttäjä napauttaa kenttää ja näppäimistö ilmestyy, otsikko pysyy näkyvissä ja muistuttaa heitä siitä, mitä he kirjoittavat.
Kentän sisällä oleva otsikko on vain suunnittelijan mukavuus. Se säästää muutaman pikselin tilaa. Se maksaa konversioita.
Sääntö 5: Valitse oikea syöttötyyppi mobiilinäppäimistölle
Eri syöttötyypit avaavat mobiililaitteissa eri näppäimistöt. Käytä niitä tehdäksesi tietojen syöttämisestä nopeampaa ja tarkempaa:
Sähköpostiosoitteet
Käytä `type="email"` avataksesi näppäimistön, jossa @-merkki ja .com/.org-näppäimet ovat näkyvissä. Käyttäjien ei tarvitse etsiä erikoismerkkejä. Myös tarkistus tapahtuu automaattisesti.
Puhelinnumerot
Käytä `type="tel"` näyttääksesi numeronäppäimistön. Ohita hienot muotoilut, jotka jakavat kentän (suuntanumero) numero-osiin. Käyttäjät kamppailevat jäykkien kenttäjakojen kanssa ja poistavat väärästä osasta. Yksi yksinkertainen puhelinkenttä, joka hyväksyy numerot ja välilyönnit, on nopeampi.
Numerot ja määrät
Käytä `type="number"` näyttääksesi näppäimistössä vain numerot. Piilota kirjaimet. Jotkin numerokentät tarvitsevat desimaaleja; käytä `inputmode="decimal"` sallimaan ne.
Päivämäärät
Käytä `type="date"` avataksesi laitteen oman päivämäärävalitsimen sen sijaan, että pyydät käyttäjiä kirjoittamaan 03/15/2026. Kalenterivalitsin on nopeampi, siinä on vähemmän virheitä ja se tuntuu puhelimen omalta.
URL-osoitteet
Käytä `type="url"` näyttääksesi näppäimistön, jossa on kauttaviiva ja .com-näppäin. Käyttäjät voivat syöttää verkko-osoitteen etsimättä erikoismerkkejä.
Jokainen syöttötyyppi kertoo mobiiliselaimelle, minkä tyyppistä dataa odotat. Selain optimoi sitten näppäimistön sen mukaan. Sinun ei tarvitse selittää muotoa. Näppäimistö tekee työn.
Sääntö 6: Kirjoita selkeät virheilmoitukset, jotka ilmestyvät reaaliajassa
Kun joku täyttää lomakkeen mobiilissa ja painaa lähetä nähdäkseen vain "Virheellinen sähköpostiosoite", hän on jo unohtanut, mitä kirjoitti. He eivät tiedä, mikä kenttä laukaisi virheen. Pienellä näytöllä virheilmoitus voi olla näkyvän alueen alapuolella. Heidän täytyy vierittää takaisin ylös.
Tarkista sen sijaan kentät käyttäjän täyttäessä niitä. Heti kun he siirtyvät seuraavaan kenttään, tarkista juuri jättämänsä kenttä. Jos siinä on virhe, näytä se heti, suoraan kyseisen kentän alla. He näkevät ongelman, kun asiayhteys on vielä mielessä.
Virheilmoitusten täytyy olla tarkkoja. VÄÄRIN: "Virheellinen syöte." OIKEIN: "Sähköpostiosoitteessa täytyy olla @-merkki." Käyttäjä tietää tarkasti, miten se korjataan.
Vältä pelkkää punaista väriä virheiden merkitsemiseen. Värisokeat käyttäjät eivät huomaa sitä. Käytä punaista sekä kuvaketta tai tekstitunnistetta. "Virhe: tämä kenttä on pakollinen."
Sääntö 7: Optimoi painikkeet mobiilikäyttöön
Lähetyspainikkeiden pitäisi olla suuria, selvästi napautettavia ja sijaita siellä, missä peukalo luonnostaan lepää. 16 pikselin painiketeksti 44 pikselin korkuisessa painikkeessa on helppo napauttaa. 14 pikselin teksti 32 pikselin painikkeessa on ohiosuma odottamassa tapahtumistaan.
Painikkeen leveyden pitäisi kattaa suurin osa näytön leveydestä, ei puristua kapeaan sarakkeeseen. Koko leveyden painikkeet mobiilissa vähentävät kysymyksen "mihin klikkaan seuraavaksi" kognitiivista kuormaa.
Vältä toissijaisia painikkeita samalla näytöllä, ellei se ole ehdottoman välttämätöntä. Liian monta painiketta luo päätöshalvauksen. Yksi pääasiallinen toiminto näyttöä kohden on mobiili edellä -sääntö.
Sääntö 8: Käytä edistymisindikaattoreita monivaiheisissa lomakkeissa
Jos lomakkeesi ulottuu usealle näytölle, näytä edistymispalkki yläreunassa. "Vaihe 1/3" kertoo käyttäjälle, mitä odottaa. He tietävät, etteivät täytä loputonta lomaketta. He näkevät maalilinjan.
Jokaisen vaiheen pitäisi käsitellä yksi looginen tietokokonaisuus. Älä kaada viittä eri aihetta ensimmäiseen vaiheeseen. Jaa ne. Anna käyttäjien tuntea edistyminen edetessään.
Salli käyttäjien palata takaisin ja muokata aiempia vaiheita. Heidän ei pitäisi tuntea olevansa lukittuja. Mobiilikäyttäjät ovat arkoja. Pakotien tarjoaminen vähentää jännitystä.
Sääntö 9: Varmista, että lomakkeesi toimii mobiilinäppäimistöjen ja keskeytysten kanssa
Näppäimistö ponnahtaa esiin ja peittää lomakkeesi. Käyttäjä vierittää nähdäkseen seuraavan kentän. Hyvä. Nyt saapuu ilmoitus ja näppäimistö sulkeutuu. Lomake on näkyvissä, mutta käyttäjä on unohtanut, mitä oli täyttämässä. Huono.
Testaa lomakkeesi oikealla puhelimella ja oikealla näppäimistöllä. Ymmärrä, kuinka suuri osa lomakkeesta katoaa, kun näppäimistö ilmestyy. Jos kenttä on kokonaan piilossa, se on käyttökelvoton. Suunnittele asettelu uudelleen niin, että aktiivinen kenttä pysyy näkyvissä näppäimistön ollessa auki.
Tallenna lomakkeen eteneminen, kun käyttäjä täyttää kutakin kenttää. Jos he vaihtavat sovellusta tai lomake sulkeutuu vahingossa, heidän tietonsa säilyvät. Kun he palaavat, lomake on täsmälleen sellainen kuin he sen jättivät. Tämä poistaa valtavan keskeyttämisen lähteen.
Sääntö 10: Käytä automaattista täyttöä ja esitäyttöä nopeuttamaan täyttämistä
Matkapuhelimet tallentavat yhteystietoja, sähköpostiosoitteita, nimiä ja maksutietoja. Kun lomakkeesi käyttää vakiokenttänimiä ja HTML-attribuutteja, selain voi täyttää nämä automaattisesti. Puhelinnumerokenttä, jossa on `autocomplete="tel"`, näyttää tallennetut puhelinnumerot ehdotuksina.
Kenttien esitäyttö tiedoilla, jotka jo tiedät, on vielä tehokkaampaa. Jos joku kirjautuu sisään ja aloittaa lomakkeen, hänen sähköpostinsa on jo täytetty. Hänen osoitteensa on jo täytetty. He kirjoittavat vain sen, mikä on uutta. Täyttöasteet hyppäävät, kun käyttäjien ei tarvitse syöttää uudelleen tietoja, jotka sinulla jo on.
Automaattinen täyttö ja esitäyttö eivät ole huijaamista. Ne kunnioittavat käyttäjän aikaa. Ne vähentävät kirjoittamista. Ne vähentävät virheitä. Ne nostavat täyttöastetta.
Sääntö 11: Testaa oikeilla puhelimilla oikeiden käyttäjien kanssa
Pöytäkoneen selaimissa on laiteemulaatio. Se simuloi puhelimen näyttöä. Se on hyödyllinen nopeisiin tarkistuksiin. Mutta se ei simuloi todellista mobiilikokemusta. Näppäimistö ei toimi samoin. Vierittäminen ei tunnu samalta. Napautuskohteet eivät vaadi omaa peukaloasi.
Testaa lomakkeesi oikeilla puhelimilla. Pyydä kollegaa täyttämään se. Katso, missä he epäröivät. Katso, missä he tekevät virheitä. Katso, missä he keskeyttävät. Tuo todellinen data kertoo enemmän kuin mikään tarkistuslista.
Yleisiä mobiililomakkeen virheitä on vaikea huomata ilman testausta. Painike, joka näyttää suurelta pöytäkoneen emulaattorissa, voi olla liian pieni oikeassa puhelimessa kirkkaassa auringonvalossa. Otsikot, jotka näyttävät selkeiltä rautalankamallissa, voivat olla vaikealukuisia siinä kulmassa, jossa puhelinta pidetään. Vain oikea testaus paljastaa nämä ongelmat.
Miten WEMASY auttaa mobiililomakkeiden suunnittelussa
WEMASYn lomakerakentimessa on mobiili edellä -suunnittelu oletuksena. Lomakkeet pinoutuvat automaattisesti yhteen sarakkeeseen mobiilissa. Napautuskohteet on mitoitettu oikein. Otsikot pysyvät näkyvissä käyttäjien täyttäessä kenttiä. Mobiilinäppäimistö on optimoitu jokaiselle syöttötyypille.
Sisäänrakennettu lomakkeen tarkistus tapahtuu reaaliajassa, ei lähetyksen jälkeen. Edistymisindikaattorit näkyvät monivaiheisissa lomakkeissa. Lomakevastaukset tallentuvat automaattisesti, jotta käyttäjät eivät koskaan menetä edistymistään. Analytiikka seuraa, mitkä kentät aiheuttavat eniten keskeytyksiä, jotta voit optimoida suurimmat kitkakohdat.
Katso, mitä jokaiseen WEMASY-tilaukseen sisältyy ja miten lomakerakennin sopii työnkulkuusi.