Lomakekenttä ei tunnu pieneltä asialta, kun täytät sellaista. Se on hetki, jolloin päätät, jatkatko vai lähdetkö. Ja se hetki riippuu täysin siitä, onko kenttä itse selkeä, ovatko ohjeet helppoja seurata ja ovatko virheilmoitukset järkeviä, kun jokin menee pieleen.
Tutkimusten mukaan 67 % ihmisistä jättää lomakkeen kesken, koska siinä on vaikea liikkua. Suurin osa vaikeudesta ei johdu siitä, että tietoa kysytään liikaa. Se johtuu siitä, miten tieto esitetään kenttätasolla. Yksi epäselvä nimike, hämmentävä paikkamerkki tai epämääräinen tarkistusvirhe voi estää ihmistä täyttämästä lomaketta, jonka hän oikeasti haluaa täyttää.
Tämä artikkeli käy läpi käytännön säännöt ilman teoriaa, joilla lomakekentät muuttuvat kitkakohdista konversiotyökaluiksi. Opit, miten nimikkeiden pitäisi toimia, miksi paikkamerkit epäonnistuvat, kun suunnittelijat luottavat niihin, ja miten tarkistusviestit vaikuttavat siihen, luottavatko käyttäjät lomakkeeseesi vai jättävätkö he sen kesken. Kun hallitset nämä yksityiskohdat, ymmärrät, miksi joidenkin brändien lomakkeiden täyttöaste on 80 % ja toisten tuskin 50 %.
Mikä tekee lomakekentästä helpon tai ylivoimaisen
Lomakekenttä on enemmän kuin syöttöruutu. Se on keskustelu brändisi ja kävijän välillä. Kenttä itse esittää kysymyksen, nimike kertoo, mitä haluat, ja paikkamerkki antaa vihjeen. Tarkistusviesti vastaa, kun jokin ei ole ihan oikein. Jokainen osa tekee yhdessä tunteen.
Tunne voi olla "Tiedän tasan, mitä tehdä, ja luotan tähän" tai "En ole varma, mitä tähän kuuluu, ja tämä lomake tuntuu rikkinäiseltä." Ero ei johdu onnesta. Se johtuu rakenteesta.
Kun kentät ovat helppoja, ne tuntuvat vaivattomilta. Nimike kertoo, mitä tietoa kenttään kuuluu, ennen kuin napsautat. Syöttökentässä on tarpeeksi tilaa kirjoittaa. Jos teet virheen, virheilmoitus kertoo tarkasti, mikä meni pieleen ja miten korjaat sen. Etenet lomakkeessa luottavaisesti.
Kun kentät ovat vaikeita, ne luovat kitkaa. Nimike voi puuttua tai olla epäselvä. Alat kirjoittaa ja paikkamerkki katoaa, joten unohdat, mitä sinun piti kirjoittaa. Virhe ilmestyy kertomatta, mikä ongelma on, ja joudut arvaamaan. Jokaisesta kentästä tulee pieni arvoitus ratkaistavaksi. Kolmen tai neljän tällaisen arvoituksen jälkeen ihmiset lähtevät.
Lomakkeen nimikkeet: tee niistä selkeitä ja aina näkyviä
Nimike ei ole koriste. Se on ohje, joka kertoo, mitä tietoa kenttään kuuluu. Parhaat nimikkeet ovat selkeitä, kuvaavia ja aina näkyvissä. Ei piilotettuja. Ei katoavia. Aina paikallaan.
Tutkimus kertoo tämän. Kun nimike on suoraan kentän yläpuolella ja pysyy näkyvissä käyttäjän kirjoittaessa, täyttöaste nousee. Kun nimikkeet korvataan paikkamerkeillä, jotka katoavat heti kun joku alkaa kirjoittaa, täyttöaste laskee. Syy on yksinkertainen. Ihmisten pitää muistaa, mitä he kirjoittivat, tarkistaa kirjoitusvirheet ja varmistaa työnsä ennen lähettämistä. Jos nimike katoaa, he eivät voi tehdä mitään näistä.
Nimikkeen pitäisi kuvata kenttä niin, että se vastaa yhteen kysymykseen. Mitä tietoa tähän kuuluu? "Sähköpostiosoite" tekee enemmän kuin "Sähköposti". "Puhelinnumero" on selkeämpi kuin "Puhelin". "Yrityksen nimi" voittaa nimikkeen "Yritys". Nämä pienet tarkkuuserot ratkaisevat, onko asia heti selvä vai syntyykö hetken epäröinti.
Vältä nimikkeitä, jotka piilottavat tietoa. Älä käytä epämääräisiä nimikkeitä kuten "Muu", "Lisätiedot" tai "Tiedot". Ne pakottavat käyttäjän napsauttamaan tai viemään hiiren päälle ymmärtääkseen, mihin kenttä on tarkoitettu. Tarkka nimike kuten "Mistä kuulit meistä?" tai "Mikä on suurin haasteesi?" tekee työn etukäteen ja pitää ihmiset liikkeessä.
Pakolliset ja valinnaiset kentät tarvitsevat visuaalisen eron, mutta eivät sanallista selitystä. Useimmissa lomakkeissa lukee "Pakolliset kentät on merkitty tähdellä", ja sitten odotetaan ihmisten muistavan tämän säännön. Merkitse sen sijaan pakolliset kentät näkyvästi (tähti tai piste) ja tee valinnaisista kentistä selviä pienellä "(valinnainen)"-nimikkeellä. Ihmiset tietävät yhdellä silmäyksellä, mikä on pakollista ja mikä ei.
Pitkät tai monimutkaiset lomakkeet hyötyvät lyhyestä ohjetekstistä nimikkeen alla. Se ei ole elämänohje. Se on yksi lause, joka selventää tarvittaessa. Jos kysyt puhelinnumeroa ja tarvitset tietyn muodon, lisää yksi rivi nimikkeen alle: "Lisää suuntanumero. Emme käytä tätä soittaaksemme sinulle kysymättä ensin." Tuo yksi rivi estää muotovirheet ja rakentaa luottamusta. Pidä se kuitenkin lyhyenä. Kappaleittain ohjetekstiä jokaisen kentän alla saa lomakkeen tuntumaan ylivoimaiselta.
Jos haluat syvällisemmin tietää, miten asettelupäätökset vaikuttavat siihen, miten lomakkeet koetaan, lue oppaamme aiheesta lomakkeen suunnitteluperiaatteet: asettelu, välit ja visuaalinen hierarkia.
Miksi paikkamerkit epäonnistuvat ja mitä käyttää tilalla
Paikkamerkki on lomakekentän sisällä oleva teksti, joka katoaa heti, kun sitä napsautetaan. Se näyttää hyödylliseltä. Se tuntuu vihjeeltä. Käytännössä se on lomakesuunnittelun yleisin virhe.
Näin käy, kun joku luottaa nimikkeiden sijaan paikkamerkkeihin. Kävijä saapuu lomakkeelle. Paikkamerkki sanoo "john@example.com" näyttääkseen odotetun muodon. He napsauttavat sähköpostikenttää ja alkavat kirjoittaa. Paikkamerkki katoaa. Nyt he eivät näe, mikä muoto oli odotettu, joten he miettivät, tekevätkö oikein. He kirjoittavat valmiiksi. He siirtyvät seuraavaan kenttään. Nyt he eivät muista, kirjoittivatko sähköpostin oikein, mutta eivät voi palata tarkistamaan, koska kenttä ei enää näytä paikkamerkkiä. Niinpä he poistavat merkinnän ja kirjoittavat sen uudelleen. Tämä toistuu jokaisessa kentässä, jossa ohje on vain paikkamerkissä. Täyttöaste romahtaa.
Tutkimusnäyttö on musertava. Paikkamerkit heikentävät lomakkeen täyttöä, haittaavat saavutettavuutta (ruudunlukijat kamppailevat niiden kanssa) ja luovat kitkaa ihmisille, joilla on kognitiivisia rajoitteita, tai kenelle tahansa, joka täyttää lomaketta nopeasti häiriötilanteessa. Kun paikkamerkit poistetaan ensisijaisena ohjeena ja tilalle lisätään näkyvät nimikkeet, täyttöaste nousee mitattavasti.
Tämä toimii: käytä nimikkeitä ohjeisiin ja paikkamerkkejä vain esimerkkeihin. Kenttä, jonka nimike on "Sähköpostiosoite" ja paikkamerkki "etunimi.sukunimi@yritys.fi", toimii hienosti. Nimike kertoo käyttäjälle, mitä kenttään kuuluu. Paikkamerkki näyttää muodon piilottamatta ohjetta. Kun käyttäjä napsauttaa ja paikkamerkki katoaa, hän tietää jo, mihin kenttä on tarkoitettu, koska näkyvä nimike kertoo sen.
Kaikki kentät eivät tarvitse paikkamerkkiä. Yksinkertaiset kentät kuten "Etunimi" tai "Yrityksen nimi" tarvitsevat vain nimikkeen. Paikkamerkistä on hyötyä kentissä, joissa muodolla on väliä (puhelinnumerot, päivämäärät, URL-osoitteet) tai joissa käyttäjä ei välttämättä tiedä, mikä esimerkkitieto kirjoitetaan (sosiaalisen median käyttäjätunnus, suosituskoodi).
Jos houkuttelee käyttää paikkamerkkiä nimikkeen sijaan tilan säästämiseksi, rakenna lomake silti nimikkeillä ja anna niiden pinoutua. Lomake, jossa on näkyvät nimikkeet ja ei paikkamerkkejä, päihittää aina lomakkeen, jossa on leijuvat nimikkeet ja piilotetut paikkamerkit. Käyttäjät täyttävät lomakkeet nopeammin, tekevät vähemmän virheitä ja luottavat lomakkeeseen enemmän.
Tarkistusviestit: muuta virheet ohjaukseksi
Tarkistus tapahtuu, kun joku täyttää kentän väärin. Virheilmoitus ilmestyy. Tuossa hetkessä käyttäjä tuntee jotain. Joko hän kokee, että lomake on rikki ja sekava, tai hän kokee, että lomake auttaa häntä tekemään oikein.
Huonot tarkistusviestit ovat epämääräisiä. Ne sanovat "Virheellinen syöte" tai "Virhe" eivätkä muuta. Käyttäjä ei tiedä, mikä meni pieleen. Oliko muoto väärä? Oliko merkintä liian lyhyt? Käyttikö hän merkkiä, jota ei sallita? Hänen pitää arvata ja yrittää uudelleen.
Hyvät tarkistusviestit ovat täsmällisiä ja toimintaan johtavia. Sanan "Virheellinen" sijaan sano "Salasanan pitää olla vähintään 8 merkkiä ja sisältää yksi iso kirjain ja yksi numero." Tämä kertoo käyttäjälle tarkasti, mikä meni pieleen ja miten sen korjaa. Lomake ei enää tunnu rikkinäiseltä. Se tuntuu auttavalta.
Myös ajoituksella on väliä. Tarkistus voi tapahtua kahdella tavalla. Reaaliaikainen tarkistus tutkii kentän, kun käyttäjä on lopettanut kirjoittamisen, ja näyttää virheen heti. Tämä tuntuu reagoivalta ja auttaa huomaamaan virheet ennen lähettämistä. Koko lomakkeen tarkistus tapahtuu, kun joku napsauttaa lähetä, ja kaikki virheet näkyvät kerralla. Tämä tuntuu vähemmän reagoivalta mutta toimii hyvin yksinkertaisissa lomakkeissa. Yhdistä molemmat, kun voit. Reaaliaikainen tarkistus tärkeille kentille (sähköposti, salasana, puhelinnumero) ja koko lomakkeen tarkistus lähetyksessä kaikelle muulle.
Virheilmoitusten sijainti vaikuttaa siihen, pystyvätkö ihmiset korjaamaan ne. Virheteksti pitäisi näkyä suoraan ongelman aiheuttaneen kentän alapuolella, ei lomakkeen yläosassa yhteenvetolistassa. Kun virhe on kentän alla, käyttäjä voi lukea virheen ja kentän yhtä aikaa. Hän näkee, mitä kirjoitti, ymmärtää, mikä meni pieleen, ja korjaa sen heti. Kun virhe on lomakkeen yläosassa listassa, hänen pitää vierittää takaisin ylös, löytää kenttä ja muistaa, mikä virhe oli.
Pelkkä väri ei riitä virheen merkitsemiseen. Älä luota vain punaiseen reunaan tai punaiseen tekstiin. Jotkut käyttäjät eivät erota värejä. Lisää kuvake (rasti, varoitusmerkki) ja tukiteksti, jotta virhe on selvä kaikille. Myös ruudunlukijat tarvitsevat tekstin virheen ilmoittamiseen, eivät pelkkää värin muutosta.
Virheilmoitusten sävy vaikuttaa siihen, miltä ihmisistä lomakkeesi tuntuu. Ankara viesti kuten "Antamasi sähköposti on virheellinen" saa ihmiset tuntemaan, että he tekivät jotain väärin. Avulias viesti kuten "Emme tunnistaneet sähköpostin muotoa. Tarkista kirjoitusvirheet ja yritä uudelleen" saa heidät tuntemaan, että heitä autetaan. Jälkimmäinen viesti tekee saman työn, mutta kokemus tuntuu enemmän yhteistyöltä kuin arvostelulta.
Ohjeita siihen, miten rakennat kaikille käyttäjille saavutettavia lomakkeita, löydät artikkelistamme saavutettavien lomakkeiden suunnittelu.
Kenttien välit vaikuttavat siihen, tuntuuko lomake lähestyttävältä
Lomake on visuaalinen ympäristö. Kunkin kentän ympärillä oleva tila, nimikkeiden ja syöttökenttien välinen etäisyys sekä kenttäryhmien väliset tauot kertovat kaikki, onko lomake hallittava vai ylivoimainen.
Tiukat välit saavat kymmenen kenttää näyttämään kolmellekymmenelle. Jokainen kenttä kilpailee visuaalisesta huomiosta. Käyttäjä ei tiedä, mitkä kentät kuuluvat yhteen. Nimikkeet ovat lähellä alapuolisia syöttökenttiä, ja seuraava nimike on vain muutaman pikselin päässä. Koko lomake tuntuu ahtaalta ja ylivoimaiselta. Keskeyttäminen tapahtuu ennen kuin ensimmäinen kenttä on täytetty.
Reilut välit toisiinsa liittyvien kenttien välillä ja isommat välit kenttäryhmien välillä saavat samat kymmenen kenttää tuntumaan lyhyeltä, järjestelmälliseltä prosessilta. Ensin täytät laskutustiedot. Sitten selkeä väli. Sitten toimitustiedot. Sitten toinen väli. Maksutiedot. Lomake tuntuu jäsennellyltä, ei kaoottiselta. Tämä ei ole turhaa tyhjää tilaa. Se on tietoarkkitehtuuria, joka ohjaa käyttäjää prosessin läpi.
Mobiililomakkeet tarvitsevat erityistä huomiota väleihin. Puhelimen näytöllä ahdas lomake on käyttökelvoton. Jokaisen kentän tarvitsee saada tarpeeksi pystysuuntaista tilaa, jotta sormi voi napauttaa sitä osumatta viereiseen kenttään. Mobiililomake, jossa on reilut pystyvälit ja selvästi erotetut osiot, konvertoi merkittävästi paremmin kuin tietokoneelle suunniteltu ja mobiiliin pienennetty. Tila ei mene hukkaan. Se on toimivaa.
Myös nimikkeen sijoittelu vaikuttaa välien kokemiseen. Nimikkeiden pitäisi olla suoraan syöttökenttien yläpuolella, ei niiden vieressä. Kun nimikkeet ovat vasemmalla, nimikkeen ja kentän välinen etäisyys kasvaa, mikä aiheuttaa sekaannusta siitä, mikä kenttä kuuluu millekin nimikkeelle. Tämä pätee erityisesti mobiilissa, jossa vasemmanpuoleiset nimikkeet pakottavat tekstin rivittymään tai kutistumaan lukukelvottomaksi. Ylhäällä olevat nimikkeet pysyvät yhteydessä kenttäänsä ja näyttävät siistimmiltä.
Valinnaisten ja pakollisten kenttien merkinnät, jotka oikeasti toimivat
Jokainen kenttä on joko pakollinen (pitää täyttää) tai valinnainen (voi ohittaa). Käyttäjän pitää tietää yhdellä silmäyksellä, kumpi on kumpi, lukematta ohjetekstiä tai ohjeita.
Perinteinen tapa merkitsee pakolliset kentät tähdellä ja sanoo "Pakolliset kentät on merkitty tähdellä". Tämä toimii vain, jos käyttäjät muistavat säännön. Monet eivät muista. He silmäilevät lomaketta ja näkevät tähtiä ymmärtämättä, mitä ne tarkoittavat.
Parempi tapa merkitsee pakolliset kentät näkyvästi (tähti tai värillinen piste) ja nimeää valinnaiset kentät selvästi "(valinnainen)" nimikkeen viereen. Nyt nopea silmäys kertoo käyttäjälle, onko kenttä pakollinen. Pakolliset kentät näyttävät tavallisilta merkillä. Valinnaisilla kentillä on selvä nimike. Näin sääntöä ei tarvitse muistaa.
Jotkin lomakkeet käyttävät väriä erottamaan pakolliset kentät valinnaisista. Se voi toimia, mutta vaatii korkean kontrastin ja pitäisi yhdistää tekstinimikkeisiin, ei käyttää yksin. Punainen tähti nimikkeen vieressä toimii paremmin kuin punainen kentän tausta, koska kentän tausta voi tehdä syöttökentästä vähemmän näkyvän.
Ehdolliset kentät ja vain tarvittavan näyttäminen
Joidenkin kenttien pitäisi näkyä vasta, kun käyttäjä on tehnyt valinnan aiemmassa kentässä. Valintaruutu "Asun Yhdysvalloissa" voisi näyttää osavaltion pudotusvalikon. Valinta "Yritys" tilityypin kentässä voisi näyttää yrityksen nimen kentän. Nämä ehdolliset kentät vähentävät kognitiivista kuormaa näyttämällä vain ne kentät, jotka käyttäjän oikeasti tarvitsee täyttää.
Kun ehdolliset kentät ilmestyvät, niiden pitäisi ilmestyä sulavasti ja selvästi. Äkillinen ilmestyminen ilman animaatiota voi säikäyttää. Häivytys tai alaspäin liukuva efekti tekee muutoksen selväksi. Uudella kentällä pitäisi olla oma nimike ja tarkistus aivan kuten tavallisellakin kentällä. Älä oleta, että käyttäjä ymmärtää, mitä hänen pitää tehdä, pelkästään siksi, että kenttä ilmestyi.
Ehdolliset kentät toimivat parhaiten, kun ne ilmestyvät laukaisevan kentän alapuolelle, ei sen yläpuolelle tai sivulle. Käyttäjä tekee valinnan, ja heti sen alapuolelle ilmestyy uusia valintaan liittyviä kenttiä. Tämä pitää kognitiivisen polun suoraviivaisena ja vähentää sekaannusta.
Näin WEMASY auttaa lomakekenttien suunnittelussa
WEMASYn lomakerakentajassa on muokattavia kenttävaihtoehtoja, tarkistussääntöjä ja reaaliaikaisia virheilmoituksia. Voit määrittää pakolliset ja valinnaiset kentät, asettaa tarkat tarkistussäännöt eri kenttätyypeille ja hallita täsmälleen, mitkä virheilmoitukset näkyvät ja milloin. Näin voit rakentaa lomakkeita, jotka noudattavat kaikkia tämän artikkelin parhaita käytäntöjä ilman koodausta.
Voit myös hallita kenttien asettelua, välejä ja nimikkeiden sijoittelua WEMASYn lomakkeiden suunnittelutyökaluilla. Rakenna lomakkeita, jotka tuntuvat selkeiltä, ammattimaisilta ja helpoilta täyttää.
Katso, mitä ominaisuuksia kuuluu kuhunkin WEMASY-pakettiin.