10 Säännöt käyttäjäystävällisten web-lomakkeiden tekemiseksi

Sep 11, 2025

Miten tehdään

Illustration of web forms on an iMac and tablet

Huolimatta ihmisen tietokoneen vuorovaikutuksen kehityksestä muodot ovat edelleen yksi tärkeimmistä vuorovaikutuksista käyttäjille. Ihmiset, jotka käyttävät sovellustasi tai verkkosivustollasi on erityinen tavoite, ja usein yksi asia, joka seisoo käyttäjän ja niiden tavoitteen välillä on muoto. Joka päivä käytämme niitä olennaiseen toimintaan - suorittamaan ostoksia, allekirjoittamaan sosiaaliset verkostot, antamaan palautetta tuotteesta, jonka olemme ostaneet ja enemmän - he ovat valtava osa käyttäjäkokemus .

Tämän seurauksena on erittäin tärkeää, että voimme suorittaa verkkomuotoja nopeasti ja ilman sekaannusta. Vähemmän vaivaa meidän on käytettävä, onnellisempi olemme. Suunnittelijoina ja kehittäjinä meidän pitäisi pyrkiä tuottamaan nopeampaa, helpompaa ja tuottavampaa muotoa käyttäjillemme.

Toisessa kahdesta artikkelista, jotka tutkivat parempia muotoja ( Etsi ensimmäinen täällä ), tässä on minun 10 vinkkiin suunnittelun muotoja, jotka ovat käyttäjäystävällisiä. Ei aivan mitä etsit? Saatat tarvita oppaita ylhäältä Verkkosivuston rakentaja tai pilvivarasto Palvelu.

01. Kysy vain, mitä vaaditaan

Tarvittavien tietojen määrän leikkaaminen tekee muodon helpommin täyttää. Sinun pitäisi aina kyseenalaistaa miksi ja miten pyytämäsi tiedot käytetään. Yritä minimoida kenttien määrä mahdollisimman paljon, koska kaikki lomakkeeseen lisäät kentät vaikuttavat sen muuntokurssiin. Kysymysten ja kenttien lukumäärän rajoittaminen Tee lomakkeen vähemmän ladattu, varsinkin kun pyydät paljon tietoja käyttäjiltäsi.

02. Tilaa kentät loogisesti

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Ajattele muotoa kuin keskustelu; haluat ryhmitellä ja tilata kentät järjestyksessä, joka on järkevää käyttäjälle

On hyödyllistä ajatella muotoa samankaltaisena keskusteluna. Kuten normaali keskustelu, sen olisi edustettava looginen viestintä kahden osapuolen välillä: henkilö ja sovelluksesi. Yksityiskohdat on pyydettävä järjestyksessä, joka on looginen käyttäjän näkökulmasta, ei sovelluksen tai tietokannan. Esimerkiksi on epätavallista pyytää jonkun osoitetta ennen heidän nimensä.

On myös erittäin tärkeää ryhmitellään liittyviä kysymyksiä lohkoissa, joten virtaus yhdestä kysymyksestä seuraavaan muistuttaa keskustelua paremmin. Ryhmittelyyn liittyvät kentät auttavat myös käyttäjiä antamaan tunnetta, jonka heidän on täytettävä.

Kuvassa kuvataan esimerkkejä kahdesta rekisteröintimuodosta. Pitkät muodot voivat tuntea ylivoimainen, jos et ole ryhmiteltyjä kenttiä - vertaa lomake vasemmalle parempaan versioon oikealla.

Ryhmittely on suoritettava visuaalisesti sekä koodiin. Voit esimerkiksi käyttää & lt; fortset & gt; ja & lt; legenda & gt; Elementit liittyvät liittyvien lomakkeiden valvontaan:

 & lt; fortset & gt;
  & lt; legenda & gt; henkilökohtaiset tiedot: & lt; / legend & gt;
  & lt; div & gt;
    & lt; etiketti = "first_name" & gt; etunimi & lt; / etiketti & gt;
    & lt; syöttötyyppi = "Teksti" nimi = "first_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; etiketti = "last_name" & gt; sukunimi & lt; / etiketti & gt;
    & lt; syöttötyyppi = "Teksti" nimi = "LAST_NAME" ID = "LAST_NAME" & GT;
  & lt; / div & gt;
    & lt; etiketti = "sukupuoli" & gt; ammatti & lt; / etiketti & gt;
    & lt; syöttötyyppi = "Teksti" nimi = "Ammatti" ID = "Ammatti" & GT;
  & lt; / div & gt;
& lt; / Fielts & GT;

03. Pidä tarroja lyhyt

Kenttätarrat kertovat käyttäjille, mitä vastaavat syöttökentät tarkoittavat. Selkeä etiketti Teksti on yksi ensisijaisista tavoista, joilla voit tehdä UIS: n helpommin. Etiketit kertovat käyttäjälle kentän tarkoituksen, mutta ne eivät auta tekstejä. Siksi varmistetaan, että ne skannataan helposti, on ensisijainen tavoite - sinun pitäisi suunnitella suppeita, lyhyitä ja kuvaavia tarroja (pitää ne sana tai kaksi).

04. Älä kaksinkertaista kenttiä

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Älä tee käyttäjiä kirjoittamalla tietoja kahdesti - vain turhautuvat heille tuhlaamalla aikaa

Tämä ongelma on erityisen yleinen rekisteröintilomakkeille: Lähes kaikki ovat törmänneet lomakkeen, joka edellyttää sinua kirjoittamaan sähköpostiosoitteen tai salasanan kahdesti. Historiallisesti tämä on suunniteltu estämään väärinkäytökset virheet. Kuitenkin useimmat käyttäjät yksinkertaisesti kopioivat tarvittavat kentät aina, kun sovellus salli sen. Ja jos alkuperäisen kentän tiedot sisälsivät virheen, se oli päällekkäinen.

05. Korosta valinnaiset kentät

Ihannetapauksessa on parasta olla valinnaisia kenttiä. Säännön numeron 1 mukaisesti, jos tietoja ei tarvita, ei ole mitään syytä tuhlata käyttäjän aikaa. Mutta jos käytät niitä, sinun on erotettava selvästi, mitä syöttökenttiä ei voi jättää tyhjäksi. Yleensä pieni merkki kuin tähdellä (*) tai "valinnainen" etiketti riittää.

06. Ole varovainen oletusarvoilla

Vältä sisältäen staattisen oletuksen, ellet usko suuren osan käyttäjistäsi (esim. 90 prosenttia), valitse tämä arvo - varsinkin jos se on pakollinen kenttä. Miksi? Tällä lähestymistavalla olet todennäköisesti esitellä virheitä, koska ihmiset skannataan nopeasti verkossa. Älä oleta, että he vievät aikaa jäsentää kaikkia valintoja. Ne voivat ohittaa jotain, jolla on jo arvo.

Ainoa poikkeus tästä kohdasta on älykkäitä oletusarvoisia - kuten ne, jotka valittavat käyttäjän maan niiden maantieteellisten tietojen perusteella - jotka voivat tehdä lomakkeen nopeammin ja tarkemmin. Mutta sinun pitäisi silti käyttää niitä varoen, koska käyttäjät voivat jättää ennalta valitut kentät.

07. Minimoida kirjoittamisen tarve

Typing on hidas ja virheellinen prosessi, ja se on erityisen tuskallista matkaviestimessä, jossa käyttäjät kohtaavat rajoitetun näytön rajoitukset. Ja yhä useammat ihmiset käyttävät pieniä näytöitä, mitä voidaan tehdä tarpeetonta kirjoittamisen estämiseksi parantamaan käyttökokemusta. Tarvittaessa voit käyttää ominaisuuksia, kuten automaattisen täydennyksen ja prefililliksi, joten käyttäjien on vain kirjoitettava paljain vähimmäismäärä tietoa.

Osoitetietosi täyttäminen on usein kaikkein hankalin osa online-rekisteröintilomakkeesta useiden kenttien, pitkät nimet ja niin edelleen. Tallenna käyttäjiltäsi kirjoittamasta koko osoiteaan toteuttamalla valmiuksia näille kentille. Kirjastot, kuten Google Maps Tarjoa yksinkertainen JavaScript API Tämän saavuttamiseksi. Sinä pystyt Etsi työratkaisu täältä .

08. Käytä reaaliaikaista validointia

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Varoituskäyttäjät heti, jos he tekevät virheen - älä tee niitä odottamaan, kunnes he ovat suorittaneet koko muodon

Ihanteellisessa maailmassa käyttäjät täyttävät lomakkeet tarvittavat tiedot ja lopettavat työnsä onnistuneesti, mutta todellisessa maailmassa ihmiset tekevät usein virheitä. Se on turhauttavaa käydä läpi koko lomakkeen täyttämisestä vain selvittääkseen hakemuksen, jonka olet tehnyt virheen.

Oikea aika ilmoittaa jollekin toimitettujen tietojen onnistumisesta tai epäonnistumisesta, kun ne toimittavat tiedot. Tässä todetaan reaaliaikainen validointi. Se ilmoittaa käyttäjistä virheistä heti ja mahdollistaa heidät korjaamaan ne nopeammin, ilman, että he ovat odottamaan, kunnes he painat "Lähetä" -painiketta.

Ja muistakaa, validointi ei pitäisi vain kertoa käyttäjille, mitä he tekivät väärin; Sen pitäisi myös kertoa heille, mitä he tekevät oikein. Tämä antaa käyttäjille enemmän luottamusta siirtyä lomakkeen kautta.

Persilja on erinomainen JavaScript-lomakkeen validointikirjasto. Se on avoimen lähdekoodin ja UX-keskittyneen, joten voit ohittaa lähes kaikki oletuskäyttäytymisen tarkat tarpeisiisi. Seuraavassa koodissa on yksinkertainen persiljan validointiesimerkki "Viesti" -kenttään. Kentän tulisi olla vähintään 20 merkkiä, mutta enintään 100.

 & lt; etiketti = "viesti" & gt; viesti (20 merkkiä min, 100 max): & lt; / etiketti & gt;
& lt; textrea id = "-viesti" Class = "Muoto-ohjaus" Nimi = "Viesti" Data-Parsley-Trigger = "KeyUp" data-persilja-minlength = "20" data-persilja-maxlength = "100" data-persilja -Minlength-viesti = "Tule! Sinun täytyy syöttää vähintään 20 merkkiä." Data-Parsley-validointi-kynnys = "10" & gt; & lt; / textarea & gt;

Sinä pystyt Etsi täydellinen koodinäyttely täällä .

09. Vältä kiinteitä tuloformaatteja

Yleisin syy kiinteän muodon pakottamiseksi on validointi Script -rajoitus (takapää ei voi määrittää sen tarpeita), mikä useimmissa tapauksissa on toteutusongelma. Sen sijaan, että pakottaisi jotain puhelinnumeroa käyttäjän syötteen aikana, sinun on voitava muuttaa mitä käyttäjä siirtyy haluamaasi muotoon tai tallentaa.

10. Älä käytä nollauspainikkeita

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Vähän hyviä koskaan tuli mukaan lukien nollauspainike suoraan lähetysvaihtoehdon vieressä

Nollauspainike ei koskaan auta käyttäjää. On vaikea kuvitella, että joku haluaisi napin, joka peruuttaa kaiken työnsä, puhumattakaan, että he haluaisivat, että painike istuu sen vieressä, joka säästää sitä. Verkko olisi onnellisempi paikka, jos lähes kaikki nollauspainikkeet poistettiin.

Haluatko tietää, miten käyttäjät vastaavat verkkosivustoosi? Kunnollinen sivujen ylläpito Palvelu antaa sinulle tarvitsemasi Analyticsin.

Tämä artikkeli oli alun perin ilmestynyt netto , ammattimaisten web-suunnittelijoiden ja kehittäjien aikakauslehti. Tilaa verkko tähän .

Aiheeseen liittyvät artikkelit:

29 Web-suunnittelutyökalut työnkulun nopeuttamiseksi
41 parasta ilmainen web-fontti
13 parhaita käyttäjän testausohjelmistoja

10 Säännöt käyttäjäystävällisten web-lomakkeiden tekemiseksi

01. Kysy vain, mitä vaaditaan

02. Tilaa kentät loogisesti

03. Pidä tarroja lyhyt

04. Älä kaksinkertaista kenttiä

05. Korosta valinnaiset kentät

06. Ole varovainen oletusarvoilla

07. Minimoida kirjoittamisen tarve

08. Käytä reaaliaikaista validointia

09. Vältä kiinteitä tuloformaatteja

10. Älä käytä nollauspainikkeita

Miten tehdään - Suosituimmat artikkelit

Luo WebGL 3D-aloitussivu

Miten vaihtaa fonttia Twitter Bio

Affinity Designer: Viennin käyttäminen

10 Vinkkejä Applen valokuvien hallintaan

Kuinka luoda kojelaudan sovellus reagoimaan

Jump Start reagoi natiivi Expo

Kuinka saavuttaa paremman valaistuksen V-ray

Kuinka luoda Lava-lampun keyshot

Luokat