Ota minkä tahansa brändin lomake, niin löydät todennäköisesti suunnitteluongelmia, jotka maksavat liidejä. Useimmat keskittyvät siihen, mitä kysyvät, eivät siihen, miten sen esittävät. Mutta brändit, jotka konvertoivat? Ne tietävät salaisuuden: se, miten kentät on järjestetty, niiden väliset välit ja jokaisen elementin visuaalinen paino ratkaisevat, onko täyttäminen vaivatonta vai tuskallista.
Ero on valtava. Ero 50 %:n ja 85 %:n täyttöasteen välillä tiivistyy usein vain kolmeen asiaan.
Lomakkeen suunnitteluperiaatteet ovat käytännön sääntöjä, jotka ohjaavat tätä näkymätöntä kokemusta. Asettelu, välit ja visuaalinen hierarkia ohjaavat yhdessä kävijöitäsi lomakkeen läpi luontevasti, ilman kitkaa tai hämmennystä. Hallitse nämä kolme, niin jokainen rakentamasi lomake tuntuu luontevalta täyttää.
Tässä oppaassa opit tarkasti, miten kutakin periaatetta sovelletaan. Ei teoriaa. Ei täytettä. Vain toimintaan johtava malli, joka muuttaa sekavat lomakkeet konversioiksi.
Mitä lomakkeen suunnitteluperiaatteet ovat?
Lomakkeen suunnitteluperiaatteet ovat järjestämisen ja visuaalisen esittämisen sääntöjä, jotka saavat lomakkeet toimimaan. Ne eivät ole koristelua tai makuasioita. Ne koskevat käyttäjän käyttäytymistä. Miten ihmissilmä silmäilee lomaketta? Miten aivot ryhmittelevät toisiinsa liittyvää tietoa? Mitkä signaalit kertovat, että kenttä on tärkeä, valinnainen tai liittyy toiseen kenttään? Näihin kysymyksiin lomakkeen suunnittelu vastaa.
Parhaat lomakkeen suunnitteluperiaatteet pätevät kaikkiin lomaketyyppeihin. Suunnitteletpa yhteydenottolomaketta, kassalomaketta tai tapahtuman ilmoittautumislomaketta, samat asettelun, välien ja hierarkian säännöt pätevät. Nämä periaatteet perustuvat siihen, miten ihmiset oikeasti käsittelevät visuaalista tietoa ja tekevät päätöksiä kognitiivisen kuorman alla.
Kun lomakkeen suunnitteluperiaatteita ei noudateta, täyttöasteet romahtavat. Tutkimusten mukaan huonosti välitetyillä lomakkeilla on 20-40 % korkeampi keskeyttämisaste kuin hyvin välitetyillä. Epäselvä visuaalinen hierarkia saa käyttäjät ohittamaan tärkeitä kenttiä tai täyttämään valinnaisia kenttiä, joita he eivät aikoneet täyttää. Huono asettelu saa viiden kentän lomakkeen tuntumaan kahdenkymmenen kentän lomakkeelta.
Miksi lomakkeen suunnitteluperiaatteilla on väliä liiketoiminnallesi
Jokainen verkkosivustosi lomake on konversiopiste. Siinä mahdolliset asiakkaat muuttuvat liideiksi, asiakkaat tekevät ostoksia ja tietoja kerätään. Jos lomakkeitasi on vaikea käyttää, menetät tuloja suoraan.
Mieti, mitä tapahtuu, kun joku saapuu lomakkeellesi. Hän on jo päättänyt, että haluaa tehdä kauppaa kanssasi. Hän haluaa täyttää lomakkeen. Ainoa, mikä pysäyttää hänet, on suunnittelun kitka. Hän ei näe, onko kenttä pakollinen vai valinnainen. Hän ei ymmärrä, miksi tietoa kysytään. Hän ei helposti näe, mihin klikata seuraavaksi. Joten hän lähtee.
Lomakkeen suunnitteluperiaatteet vaikuttavat suoraan liiketoimintalukuihisi. Brändit, jotka soveltavat lomakkeisiinsa vahvoja suunnitteluperiaatteita, näkevät korkeammat täyttöasteet, vähemmän keskeytyksiä ja paremman datan laadun. Teknologiayritys, joka paransi lomakkeen välejä ja visuaalista hierarkiaa, näki täyttöasteen nousevan 62 %:sta 84 %:iin. Verkkokauppa, joka järjesti kassalomakkeen asettelun uudelleen, vähensi ostoskorin hylkäämistä 23 %.
Tämä ei ole teoriaa. Näin käyttäjät päättävät, onko lomakkeesi heidän aikansa arvoinen.
Kolme lomakkeen suunnitteluperiaatetta: asettelu, välit ja visuaalinen hierarkia
Lomakkeen suunnittelu rakentuu kolmen pilarin varaan. Jokaisella on oma tehtävänsä. Yhdessä ne luovat lomakkeen, joka tuntuu yksinkertaiselta ja ohjaa käyttäjää alusta loppuun.
Periaate 1: Lomakkeen asettelu
Asettelu on se, miten järjestät tiedon sivulle. Se on kenttien, otsikoiden, painikkeiden ja osioiden fyysinen sijoittelu. Vahva asettelu tekee heti selväksi, miten lomake täytetään ja missä järjestyksessä.
Tehokkain lomakkeen asettelu noudattaa yhden sarakkeen rakennetta. Se ei ole muoti-ilmiö, vaan perustuu siihen, miten ihmiset lukevat. Silmä liikkuu sivulla ylhäältä alas. Kun laitat lomakekentät yhteen sarakkeeseen, käyttäjät etenevät niiden läpi luontevasti, ilman että heidän tarvitsee katsoa vasemmalle ja oikealle tai takaisin tarkistaakseen, jäikö jokin väliin.
Monisarakkeiset lomakkeet pakottavat silmän tekemään enemmän työtä. Käyttäjän pitää päättää, täyttääkö vasemman sarakkeen ensin vai oikean. Hänen pitää muistaa, missä oli. Jo kaksisarakkeinen lomake lisää kognitiivista kuormaa ja keskeytyksiä. Yhden sarakkeen lomakkeet konvertoivat merkittävästi paremmin, joskus 20 % tai enemmän.
Sen yhden sarakkeen sisällä toisiinsa liittyvät kentät pitäisi ryhmitellä visuaalisesti. Toimitusosoitelomakkeessa kaikkien osoitekenttien pitäisi olla yhdessä (katu, kaupunki, osavaltio, postinumero). Laskutusosion pitäisi olla visuaalisesti erillään toimitusosiosta. Nämä ryhmät kertovat käyttäjille, että kentät kuuluvat yhteen ja ne voi täyttää kokonaisuutena. Ryhmittelemättömät kentät tuntuvat sattumanvaraisilta ja epäjärjestyksessä oleviltä, vaikka tieto olisi järkevää.
Myös kenttien otsikot ohjaavat asettelua. Jokaisen otsikon pitäisi olla suoraan sen syöttökentän yläpuolella, ei vasemmalla. Kun otsikot ovat syöttökenttien vasemmalla puolella, otsikon ja kentän välinen etäisyys kasvaa, ja on epäselvää, mikä kenttä kuuluu mihinkin otsikkoon. Yläpuolella olevat otsikot pitävät otsikon ja kentän suhteen selvänä. Tämä on erityisen tärkeää mobiilissa, jossa vierekkäiset otsikot ja kentät ovat mahdottomia.
Myös painikkeen sijoittelulla on väliä. Pääasiallisen toimintakehotuspainikkeen pitäisi olla lomakkeen alareunassa, suoraan viimeisen kentän alapuolella. Sen pitäisi olla selkeä, näkyvä ja ensimmäinen asia, johon silmä osuu, kun käyttäjä on valmis. Toissijaisten painikkeiden (kuten "Tallenna luonnoksena" tai "Peruuta") pitäisi olla pienempiä tai pääpainikkeen alapuolella, jotta ne eivät vie huomiota pääasialliselta toiminnolta.
Periaate 2: Välit lomakkeissa
Välit ovat tyhjää tilaa. Se on etäisyys kenttien välillä, osioiden välillä ja otsikon ja sen syöttökentän välillä. Väleistä ei tunnu, että ne olisivat "periaate". Ne tuntuvat näkymättömiltä. Mutta ne tekevät lomakkeesi suunnittelun tärkeimmän työn.
Oikeat välit tekevät kaksi asiaa. Ne selventävät, mikä kuuluu yhteen, ja antavat hengitystilaa, joka tekee lomakkeesta vähemmän ylivoimaisen.
Sääntö on yksinkertainen. Toisiinsa liittyvien kenttien välillä pitäisi olla tiivis väli. "Etunimi"- ja "Sukunimi"-kenttien välillä pitäisi olla 8-12 pikseliä pystysuuntaista tilaa. Se on tarpeeksi lähellä, jotta ne tuntuvat pariksi. Kun yksi ryhmä (kuten nimiosio) on valmis, kasvata väliä ennen seuraavaa ryhmää 24-32 pikseliin. Tämä visuaalinen rako kertoo käyttäjälle, että uusi osio alkaa.
Ajattele välejä välimerkkeinä. Tiivis väli sanoo "nämä kuuluvat yhteen". Suuri väli sanoo "tämä on uusi ajatus". Käyttäjät lukevat nämä signaalit heti.
Näin käy, kun välit ovat kaikkialla liian tiiviit. Lomake, jossa on kymmenen kenttää ilman hengitystilaa, tuntuu syöttökenttien muurilta. Käyttäjä tuntee olonsa ylivoimaiseksi jo ennen kuin aloittaa. Hänen aivonsa eivät tiedä, mitkä kentät liittyvät mihinkin. Keskeytys tapahtuu ennen ensimmäisen kentän täyttämistä.
Näin käy oikeilla väleillä. Sama kymmenen kentän lomake tuntuu hallittavalta. Käyttäjä näkee, että jotkin kentät ryhmittyvät yhteen (laskutusosoite), sitten on rako ja sitten toinen ryhmä (toimitusosoite). Lomake tuntuu lyhyemmältä, koska se on jaettu sulavasti pureskeltaviin paloihin.
Vuoden 2024 lomakkeiden käyttökokemustutkimuksessa havaittiin, että lomakkeilla, joissa on oikeat välit ja ryhmittely, on 32 % korkeampi täyttöaste kuin samoilla lomakkeilla ahtaalla asettelulla. Ainoa muuttunut tekijä oli väli.
Mobiililomakkeet tarvitsevat enemmän tilaa, eivät vähemmän. Mobiilinäytöt ovat pieniä ja sormet suuria. Kenttien ahtaaminen yhteen mobiilissa tappaa konversion. Jokaisen kentän ympärillä pitää olla riittävästi tilaa, jotta käyttäjä voi napauttaa sitä osumatta viereisiin kenttiin. Tämä ei tarkoita syöttökentän sisäistä täytettä (vaikka sekin on tärkeää). Tämä on kenttien välinen tila. Mobiililomake, jossa on runsaat pystysuuntaiset välit ja pinottu yhden sarakkeen asettelu, konvertoi merkittävästi paremmin kuin pöytäkoneelle tehty ja mobiiliin pienennetty lomake.
Periaate 3: Visuaalinen hierarkia lomakkeissa
Visuaalinen hierarkia on järjestys, jossa silmä ja aivot käsittelevät näkemäänsä. Lomakkeessa se on ero "pakollisen" kentän välillä, joka hyppää käyttäjän silmään, ja sellaisen, joka sulautuu taustaan. Se on ero pääasiallisen lähetyspainikkeen välillä, joka näyttää klikattavalta, ja toissijaisen peruuta-painikkeen, joka näyttää tekstiltä.
Visuaalinen hierarkia lomakkeissa syntyy neljällä pääkeinolla. Koko, väri, kontrasti ja sijoittelu kukin ohjaavat käyttäjän huomiota.
Koko viestii tärkeydestä. Näkyvä kentän otsikko 16 pikselin tekstillä on tärkeämpi kuin ohjeteksti 12 pikselillä. Iso lähetyspainike tuntuu merkittävämmältä kuin pieni "Nollaa"-painike. Pakollisuuden merkin pitäisi olla hieman näkyvämpi kuin valinnaisten kenttien otsikot. Älä tee tästä muutoksesta ilmeistä. Tee siitä vain hieman näkyvämpi. Tämä hienovarainen kokoero ohjaa silmää huutamatta.
Väri luo hierarkiaa kontrastin kautta. Tumma otsikko valkoisella taustalla on korkean kontrastin ja erottuu. Vaaleanharmaa ohjeteksti on matalamman kontrastin ja väistyy taka-alalle. Kirkkaan sininen lähetyspainike lomakkeessa, jossa on harmaat syöttökentät, on heti kontrastinen ja vetää silmän puoleensa. Toissijainen painike samassa harmaassa kuin lomakkeen tausta väistyy. Silmä osuu ensin pääasialliseen toimintoon, täsmälleen siihen, mihin haluat.
Rajoitus on tärkeä. Käytä yhdessä lomakkeessa enintään kolmea visuaalista painoa. Paino voi olla väri, koko, sävy tai tyyli (lihavoitu vs. tavallinen). Jos kaikki on kirkasta, mikään ei ole kirkasta. Jos tekstiin on viisi eri väriä, käyttäjä ei tiedä, mihin kiinnittää huomiota. Kolme visuaalisen tärkeyden tasoa riittää ohjaamaan huomiota sekoittamatta. Tämän hierarkiasäännön useimmat lomakkeet rikkovat, ja se näkyy tuloksena: "En tiennyt, että se oli valinnainen" tai "Luulin, että painike oli epäaktiivinen."
Myös sijoittelu luo hierarkiaa. Ensimmäinen kenttä, jonka käyttäjä näkee, on näkyvin. Alareunan pääasiallinen toimintakehotuspainike on viimeinen asia, jonka he näkevät, ja se on toiminto, jonka todennäköisimmin tehdään loppuun. Pakollisuuden merkit, ohjetekstit ja virheilmoitukset tarvitsevat sijoittelun, joka tekee ne ilmeisiksi häiritsemättä.
"Siristystesti" paljastaa, toimiiko visuaalinen hierarkiasi. Hämärrä katseesi (tai siristä silmiäsi kirjaimellisesti) lomaketta katsoessasi. Mitä näet ensin? Jos näet tärkeimmät kentät ja pääasiallisen toimintapainikkeen, hierarkiasi toimii. Jos silmäsi menevät satunnaisiin paikkoihin tai hämmentyvät siitä, mitä tehdä, hierarkiasi kaipaa työtä.
Näin sovellat lomakkeen suunnitteluperiaatteita jokaiseen lomaketyyppiin
Nämä kolme periaatetta pätevät jokaiseen verkkosivustosi lomakkeeseen. Yhteydenottolomake käyttää samoja asettelun, välien ja hierarkian sääntöjä kuin kassalomake, rekisteröitymislomake tai tapahtumailmoittautumislomake. Ero ei ole periaatteissa itsessään. Ero on siinä, mitkä kentät ovat tärkeimpiä kyseiselle lomaketyypille.
Sovella periaatteita lomakkeisiisi aloittamalla asettelusta. Valitse yksi sarake, ylhäältä alas. Ryhmittele toisiinsa liittyvät kentät ja lisää suurempia rakoja ryhmien väliin.
Sovella sitten välejä. Käytä johdonmukaista väliä ryhmän sisäisten kenttien välillä (8-12 px). Käytä suurempaa väliä ryhmien välillä (24-32 px). Testaa mobiilissa ja varmista, että jokainen kenttä on helppo napauttaa.
Luo lopuksi visuaalinen hierarkia. Tunnista, mitä käyttäjän pitäisi huomata ensin. Onko se lomakkeen otsikko? Pakollisuuden merkki? Pääasiallinen toimintapainike? Varmista, että tuo elementti on visuaalisesti näkyvä. Pidä kaikki muu tukirooleissa.
Tuloksena on lomake, joka tuntuu luontevalta. Käyttäjien ei tarvitse ajatella. He vain täyttävät sen ja lähettävät.
Miten WEMASY auttaa rakentamaan parempia lomakkeita
WEMASYssa on lomakerakennin, jossa nämä suunnitteluperiaatteet ovat valmiina. Yhden sarakkeen asettelu on oletus. Välit on esimääritetty noudattamaan 8 px/24 px -sääntöä. Visuaalinen hierarkia muodostuu valmiiden lomakekenttätyylien kautta, jotka pitävät otsikot, pakollisuuden merkit ja syöttökentät oikeassa suhteessa toisiinsa.
Voit mukauttaa värit, fontit ja painikkeiden tekstit brändiisi sopiviksi. Taustalla oleva rakenne pysyy hyvänä. Näin saat lomakkeen, joka näyttää omaltasi ja toimii hyvin.
Katso lomakerakennin toiminnassa ja tutustu WEMASYn hintoihin, niin näet, mikä tilaus sisältää lomakkeiden rakentamisen ja mukauttamisen.