Paras käyttöliittymämuotoilu lomakkeille: Parhaat valinnat verrattuna

Lomakkeiden käyttöliittymäsuunnittelu kattaa neljä käytännöllistä tasoa: asettelun, syöttöohjaimet, validoinnin ja arvoluettelot, joita käsitellään parhaiten yhtenä järjestelmänä neljän erillisen tehtävän sijaan. 4D:ssä tämä järjestelmä on rakennettu noin tusinasta alkuperäisestä lomakeobjektista, kahdesta lomaketyypistä sekä lista-, valintaluettelo- ja alilomakemekanismeista, joten pieni tiimi voi tarjota käyttökelpoisen tiedonsyöttönäytön ilman ulkoisia käyttöliittymäkirjastoja.

• Lomakkeen käyttöliittymän laadusta päätetään neljällä tasolla: asettelu ja ryhmittely, syöttöohjaimen valinta, validointi ja virheiden käsittely sekä arvojen luettelo/tietojen sitomisstrategia. Yhden tason heikkous heikentää kolmea muuta.
• 4D jakaa lomakkeet syöttölomakkeisiin (tietojen syöttö) ja tulostuslomakkeisiin (näyttö ja tulostus), ja sama taulukko voi sisältää useita kutakin. Oikean tyypin valinta jokaiseen tehtävään on ensimmäinen suunnittelupäätös, ei yksityiskohta.
• Alkuperäiset 4D-objektit – syöttöruudut, avattavat luettelot, valintaruudut, radioryhmät, välilehtien säätimet, alilomakkeet, luetteloruudut ja hierarkkiset luettelot – kattavat useimmat yrityssovellusten tarpeet ilman kolmannen osapuolen widgetejä.
• 4D:n arvoluetteloita on useita versioita: staattiset luettelot, kenttään tai taulukkoon linkitetyt luettelot, hierarkkiset luettelot ja kenttään liitetyt valintaluettelot. Väärän vaihtoehdon valinta on yleisin syy “pudotusvalikko on tyhjä” -virheisiin.
• Validointi kuuluu kahteen paikkaan: kenttätason sääntöihin (syöttösuodattimet, pakolliset kentät, aluesäätimet) ja lomaketason sääntöihin (kenttien välinen logiikka, tallennussäätimet). Jakamalla ne voit säilyttää tietyt virheilmoitukset.
• Helppokäyttöisyys ja näppäimistön sujuvuus eivät ole valinnaisia ​​parannuksia. Välilehtien järjestys, kenttiin liittyvät tarrat ja näkyvät kohdistustilat määräävät, pystyykö tiedonsyöttöhenkilöstö työskentelemään nopeasti.

Mitä “lomakkeiden käyttöliittymäsuunnittelu” itse asiassa tarkoittaa tietokantakontekstissa

Lomakkeiden käyttöliittymäsuunnitteluun kuuluu tietojen syöttö- ja näyttöpintojen järjestäminen siten, että käyttäjä voi syöttää oikeat tiedot nopeasti, mahdollisimman vähän virheitä ja vähän koulutusta. Yleisessä web-suunnittelukontekstissa ilmaus tarkoittaa yleensä HTML-muotoilua. Tietokannassa tai matalakoodikontekstissa tämä tarkoittaa jotain laajempaa: lomake on linkitetty taulukkoon tai kyselyyn, jokainen ohjausobjekti kartoitetaan kenttään tai muuttujaan, ja asettelun on selviydyttävä todellisista tietueista, joissa on pitkiä nimiä, nolla-arvoja ja odottamattomia merkkejä.

Tietokantalomakkeilla on rajoituksia, joita markkinointisivulomakkeilla ei ole. Lomakkeessa on ehkä näytettävä 40 kenttää jaettuna kolmeen loogiseen ryhmään. Saattaa olla tarpeen säilyttää käyttökelpoinen, kun liittyvässä taulukossa on 200 000 riviä.

Se saattaa joutua tulostamaan. Sitä voidaan joutua käyttämään kokonaan näppäimistöllä, jos joku syöttää laskuja kahdeksan tuntia päivässä. Nämä rajoitteet työntävät suunnittelua kohti tiheyttä, selkeää ryhmittelyä ja ennakoitavissa olevaa tarkennusliikettä sen sijaan, että edistettäisiin runsaasti tyhjää tilaa ja koristeellisia animaatioita.

Käytännön vaikutukset: Arvioi mitä tahansa lomakesuunnittelun lähestymistapaa (alkuperäiset työkalut, kolmannen osapuolen komponenttijoukot tai täysi matalakoodialusta) tietokannan todellisuuteen, älä aloitussivun estetiikkaan nähden.

Lomakkeen käyttöliittymäsuunnittelun neljä kerrosta

Taso 1: Asettelu ja ryhmittely

Asettelu päättää, kuinka monta päätöstä käyttäjä kohtaa samanaikaisesti. Tehokkain tekniikka lomakkeiden käyttöliittymäsuunnittelussa on ryhmitellä toisiinsa liittyvät kentät visuaalisiksi lohkoiksi otsikolla ja järjestää sitten lohkot sen järjestyksen mukaan, jossa tiedot todella saapuvat. Laskulomake ryhmittelee asiakastiedot, rivikohdat, loppusummat ja maksuehdot – tässä järjestyksessä, koska siinä järjestyksessä tiedot kerätään.

Aiheeseen liittyvä: Claris FileMaker Pro — Pitkäaikainen relaatiotietokanta-alusta tiimeille, jotka tarvitsevat mukautettuja sovelluksia työpöydälle, verkkoon ja mobiililaitteille yhdestä tiedostosta..

Välilehti- ja sivusäätimet käsittelevät lomakkeita, jotka muuten olisivat liian korkeita. Välilehtiohjaus jakaa tietueen kentät useisiin paneeleihin; käyttäjä näkee yhden paneelin kerrallaan, mutta tietue pysyy ennallaan. Tämä on tavallinen vastaus “lomakkeessa on 60 kenttää” ja se on yleensä parempi kuin kirjasimien vähentäminen tai vierittäminen.

Ristikkokohdistus on tärkeämpää kuin koristelu. Tarrojen ja syöttöruutujen kohdistaminen yhtenäiseen sarakeruudukkoon tekee tiheästä lomakkeesta skannattavan. Vasemmalle tasatut tarrat kenttien yläpuolella sopivat kapeille lomakkeille. kenttien vieressä oikealle kohdistetut tarrat sopivat tiiviille, leveille lomakkeille, koska silmä voi kulkea lyhyen ja tasaisen matkan tarrasta syötteeseen.

Taso 2: Syöttöohjaimen valinta

Ohjauksen valinta on se, missä suurin osa käytettävyydestä saadaan tai häviää. Sääntö on yksinkertainen: ohjaimen on tehtävä laillinen vastaussarja ilmeiseksi.

Jos olet ostoksilla: Zoho Creator — Halpakoodisovellusten rakentaja, joka liitetään laajempaan Zoho-sviittiin ja hinnat käyttäjää kohti sovelluksen sijaan..

• Ilmaiset tekstinsyöttölaatikot nimille, kuvauksille, viittauksille - mitä tahansa, jossa on avoin vastaussarja.
• Pudotusvalikot, kun vastausjoukko on suljettu ja riittävän lyhyt skannattavaksi (noin alle 15 kohdetta).
• Yhdistelmäruudut, kun vastausjoukko on suljettu mutta pitkä tai kun käyttäjien on ehkä kirjoitettava suodattaakseen.
• Radiopainikkeet, kun vaihtoehtoja on vähän ja niiden näkeminen kerralla helpottaa päätöstä.
• Valintaruudut riippumattomille kyllä/ei-ilmaisimille, mukaan lukien monivalintajoukot, joissa useat vastaukset voivat olla tosia.
• Päivämäärävalitsimet ja kellonajan säätimet ajallisille tiedoille, joiden taustalla oleva tallennusmuoto määrittää tietokanta, ei widget.
• Luettelolaatikot ja alilomakkeet yksi-moneen -suhteille: tilausrivit, yhteystietoluettelot, tehtävämääritykset.
• Hierarkkiset luettelot puumaisille tiedoille, kuten tilikartalle tai luokkapuille.

Yleinen virhe on käyttää vapaata tekstikenttää asialle, joka on itse asiassa koodi: tila, luokka, valuutta. Vapaa teksti kutsuu kirjoitusvirheitä, jotka hajottavat raportoinnin. Suljettu lista estää ne.

Taso 3: Validointi ja virheiden käsittely

Validoinnilla on kaksi tehtävää: estetään huonojen tietojen pääsy tietokantaan ja kerrotaan käyttäjälle tarkalleen, mitä hänen tulee korjata. Molemmat tehtävät toimivat parhaiten jakamalla validointi tasoihin.

Kenttätason vahvistus suoritetaan, kun käyttäjä poistuu kentästä tai kun hän kirjoittaa. Syöttösuodattimet rajoittavat syötettävissä olevia merkkejä. Vaaditut kenttäliput, aluetarkistukset ja muotoilumaskit havaitsevat suurimman osan virheistä syöttökohdassa, kun käyttäjä vielä muistaa, mitä aikoi.

Lomaketason validointi suoritetaan, kun käyttäjä yrittää tallentaa tai siirtyä seuraavaan tietueeseen. Tämä taso hallitsee sääntöjä, jotka kattavat kentät: lopetuspäivämäärä aloituspäivän jälkeen, summa on yhtä suuri kuin rivien summa, vähintään yksi yhteydenottotapa on käytössä. Näitä tarkistuksia ei voida suorittaa kenttäkohtaisesti, koska ne riippuvat arvoista, joita käyttäjä ei ole syöttänyt loppuun.

Virheiden näyttäminen on osa suunnittelua, ei jälkikäteen. Tehokkain malli on rivillä, virheellisen kentän vieressä, selkeällä kielellä, jossa kerrotaan mikä on väärin ja mikä on hyväksyttävää. Yksi modaalinen valintaikkuna, jossa luetellaan kaksitoista virhettä, pakottaa käyttäjän metsästämään. Pelkkä väri ei riitä: yhdistä se tekstin tai kuvakkeen kanssa niin, että viesti selviää värisokeudesta ja mustavalkotulostuksesta.

Taso 4: Arvoluettelot ja tietojen sidonta

Arvolistat ovat sidekudosta lomakkeiden ja tietojen välillä. 4D:ssä arvoluettelo voi olla staattinen (syötetty kerran, käytetty kaikkialla), linkitetty kenttään tai taulukkoon (joten se heijastaa reaaliaikaista dataa), hierarkkinen (puurakenteille) tai liitetty kenttään valintaluettelona, ​​joka rajoittaa sen, mitä kenttä hyväksyy.

Aiheeseen liittyvä: Knack — Kooditon tietokannan rakentaja, joka on tarkoitettu portaaleihin, hakemistoihin ja sisäisiin työkaluihin – kiinteähintaisella hinnoittelulla käyttäjäkohtaisten maksujen sijaan..

Suunnittelupäätös koskee kunnossapitoa. Kolmen maksutavan staattinen luettelo voidaan syöttää käsin. Asiakastaulukkoon tulee linkittää 400 asiakkaan lista, muuten se vanhenee viikon sisällä. Luettelo, jonka täytyy näyttää vain aktiiviset asiakkaat, tarvitsee kyselyn tukeman luettelon koko taulukkoluettelon sijaan.

Sidonta määrittää myös käyttäytymisen poistamisen ja uudelleennimeämisen yhteydessä. Kenttiin liitetty valintaluettelo pakottaa rajoitteen tietokerroksessa; lomakkeen latauksen yhteydessä täytetty avattava luettelo pakottaa sen vain kyseisessä muodossa. Tietojen eheyden vuoksi valitse rajoite, joka elää kentän kanssa.

Vertailu: muotoa rakentavia lähestymistapoja pienille ryhmille

Lähestymistapa	Paras	Vahvuudet	Kompromissit
Alkuperäiset lomakkeet (esim. 4D-syöttö-/tulostuslomakkeet)	Yrityssovellukset, jotka on sidottu relaatioskeemaan	Suora kenttäsidonta, sisäänrakennettu validointi ja arvoluettelot, tulostus, ei ylimääräistä ajoaikaa	Visuaalinen tyyli on pikemminkin toimiva kuin muodikas; syvään räätälöintiin tarvitaan alustatuntemusta
Low-code vedä ja pudota -rakentajat	Sisäiset työkalut, CRUD-näytöt, nopea iterointi	Nopea ensimmäinen versio, muut kuin kehittäjät voivat osallistua	Tietomallin kurinalaisuus voi luistaa; monimutkainen validointi vaatii usein koodin joka tapauksessa
Käsin koodattu verkkokäyttöliittymä (React, Vue jne.)	Asiakkaille suunnatut tuotteet räätälöidyllä UX:lla	Asettelun, käytettävyyden ja toiminnan täydellinen hallinta	Rakennat uudelleen vahvistuksen, luettelot, tulostuksen ja käyttöoikeudet itse
Komponenttikirjastot ja suunnittelujärjestelmät	Tiimit standardoivat monia muotoja	Johdonmukaisuus näyttöjen välillä, dokumentoidut kuviot	Vaatii edelleen
Taulukkotaulukkotyyliset ruudukot	Joukkotietojen syöttäminen ja muokkaaminen	Talous- ja operaatiohenkilöstölle tuttu, nopea taulukkotyöskentelyyn	Huono yksi tietue kerrallaan työnkuluille ja monimutkaiselle validoinnille

Rehellinen neuvo lomakkeiden käyttöliittymäsuunnitteluun: sovita työkalu työnkulkuun. Lomake, jota kolme sisäistä työntekijää käyttää tilausten syöttämiseen, ei tarvitse mukautettua käyttöliittymää. 50 000 asiakkaan käyttämä lomake tekee.

Meidän valintamme: Airtable — Yksinkertainen laskentataulukkokäyttöliittymä, joka sijaitsee todellisen relaatiotietokannan päällä, jossa on automaatioita, näkymiä ja jaettavia käyttöliittymiä..

Kuinka päättää: kriteerien tarkistuslista

Ratkaise nämä lomakkeiden käyttöliittymäsuunnittelua koskevat kysymykset ennen rakentamista, ja suunnittelu päättää suurelta osin itse.

1. Kuka käyttää sitä ja kuinka usein? Satunnaiset käyttäjät tarvitsevat runsaasti ohjeita ja tarroja. jokapäiväiset käyttäjät tarvitsevat tiheyttä ja pikanäppäimiä.
2. Kuinka monta kenttää ja miten ne on ryhmitelty? Alle 15 kenttää, yksi paneeli. Suunnittele yli 25 välilehtiä tai sivuja.
3. Mitkä kentät ovat suljettuja ryhmiä? Jokaisesta suljetusta joukosta tulee luettelo, radioryhmä tai valintaruutujen joukko – ei koskaan vapaata tekstiä.
4. Mitkä kentät ovat pakollisia ja millä on muotosäännöt? Näistä tulee kenttätason validointi.
5. Mitkä säännöt kattavat kentät? Näistä tulee lomaketason vahvistus, joka säästää aikaa.
6. Tulostetaanko lomake? Jos näin on, suunnittele tulostelomake tietoisesti sen sijaan, että luottaisit näytön asetteluun hyväksyttävän tulostuksen saamiseksi.
7. Mikä on näppäimistön polku? Määritä sarkainjärjestys erikseen; älä hyväksy oletusarvoa, jos se ei noudata tiedonsyöttöjärjestystä.
8. Mitä tapahtuu pitkälle arvolle? Testaa 60 merkin pituisella yrityksen nimellä ja tyhjällä kentällä ennen toimitusta.

Helppokäyttöisyys ja näppäimistön kulku

Tietokantalomakkeiden käytettävyys – keskeinen osa lomakkeiden käyttöliittymäsuunnittelua – on pääasiassa sitä, ettei asioita riko. Jokainen merkintä vaatii ohjelmallisen tunnisteen, ei vain läheistä tekstilohkoa. Painopisteen tulee olla näkyvissä. Sarkainjärjestyksen tulee noudattaa lomakkeen lukujärjestystä. Virheilmoitusten tulee olla saatavilla ja niistä ilmoitetaan, ei vain punaisia.

W3C Web Content Accessibility Guidelines (WCAG) on edelleen kultainen standardi taustalla oleville periaatteille, ja WAI-ARIA-luontikäytännöt dokumentoivat odotetun näppäimistön käyttäytymisen komposiittiwidgeteissä, kuten välilehtipaneeleissa ja luettelolaatikoissa. Pöytätietokoneet ja matalakoodialustat toteuttavat omat saavutettavuustasonsa, mutta periaatteet jatkavat: kunkin säätimen nimeäminen, tarkennuksen pitäminen ennustettavana eikä koskaan luota pelkästään väreihin.

Näppäimistön kulku ansaitsee erityistä huomiota, koska se on suurin tuottavuusvipu syötettäessä suuria tietomääriä. Hyvin suunnitellun tilauslomakkeen avulla taitava käyttäjä voi viimeistellä tietueen koskettamatta hiirtä: välilehtiä kenttien välillä, käyttää nuolinäppäimiä luetteloissa ja käynnistää tallennus pikanäppäimellä. Testaa tätä syöttämällä kymmenen tietuetta hiiri fyysisesti irrotettuna.

Yleisiä virheitä ja niiden välttämistä

Kun harkitset lomakkeiden käyttöliittymäsuunnittelua, vältä näitä sudenkuoppia:

Liian monta kenttää yhdellä näytöllä. Välilehdiksi ja ohjattuihin toimintoihin jakaminen vähentää virheiden määrää ja kognitiivista kuormitusta. Hinta on yksi ylimääräinen napsautus; voitto on yleensä suurempi.

Vapaa teksti, johon luettelo kuuluu. Tila-, luokka-, alue- ja valuuttakenttien tulee olla lähes aina rajoitettuja.

Liian aikaisin käynnistyvä vahvistus. Kentän merkitseminen virheelliseksi käyttäjän kirjoittaessa on vihamielistä. Vahvista sumennuksen tai tallennuksen yhteydessä, ei jokaisella näppäinpainalluksella, ellei tarkistus ole todella hyödyllinen kirjoittaessasi.

Yleiset virheilmoitukset. “Virheellinen syöttö” ei kerro käyttäjälle mitään. “Aloituspäivän on oltava ennen lopetuspäivää” kertoo heille kaiken.

Ohita tyhjä tila. Uusilla tietueilla on nolla-arvot kaikkialla. Suunnittele, miltä lomake näyttää ennen kuin tietoja on olemassa.

Unohda tulostuslomake. Ruudun asettelu, jossa on vierityspalkkeja ja välilehtiä, ei tulostu hyvin. Luo asiakirjoille erillinen tulostelomake.

Ei testitietojen kurinalaisuutta. Testaa pisimmillä realistisilla arvoilla, aksentoiduilla merkeillä ja tietueilla, jotka rikkovat kaikkia valinnaisia ​​suhteita.

Usein kysyttyjä kysymyksiä

Mikä on paras käyttöliittymämuoto tietokantasovelluksen lomakkeille?

Tietokantasovelluksen lomakkeiden paras käyttöliittymämuotoilu ryhmittelee toisiinsa liittyvät kentät merkittyihin lohkoihin, käyttää suljetun luettelon ohjausobjekteja mille tahansa kentille, joilla on kiinteä vastausjoukko, vahvistaa kenttä- ja lomaketasolla ja määrittää selkeän näppäimistöpolun. Tiheys ja ennustettavuus päihittävät sisustuksen, sillä tietokantalomakkeet ovat toistuvasti käytettyjä työvälineitä kerran katsottujen markkinointipintojen sijaan.

Pitäisikö minun käyttää avattavia valikoita vai valintanappeja?

Pudotusvalikot sopivat suljetuille vastaussarjoille, jotka ovat pitkiä tai tilasta on rajoitettu; valintanapit sopivat lyhyisiin sarjoihin, joissa kaikkien vaihtoehtojen näkeminen samanaikaisesti auttaa päätöksenteossa. Hyödyllinen nyrkkisääntö on, että jopa noin viisi vaihtoehtoa, valintanapit tai segmentoidut säätimet ovat yleensä selkeämpiä, ja noin viidentoista vaihtoehdon lisäksi haettava yhdistelmäruutu voittaa yksinkertaisen avattavan luettelon.

Kuinka monta kenttää lomakkeessa tulee olla?

Yksi lomakepaneeli toimii hyvin noin 15–25 kentän kanssa; sen lisäksi jaa tietue välilehdiksi, sivuiksi tai käyttämällä monivaiheista ohjattua toimintoa. Rajoitus ei ole tekninen, vaan kognitiivinen: käyttäjät menettävät käsityksensä missä he ovat ja mitä kenttiä he ovat täyttäneet, kun lomake vierii paljon yhden näytön yli.

Mitä eroa on syöttölomakkeilla ja tulostuslomakkeiden?

Syöttölomakkeet on suunniteltu tietojen syöttämistä ja muokkaamista varten, joten ne priorisoivat ohjaimet, vahvistuksen ja näppäimistövirran. Tulostuslomakkeet on suunniteltu näyttöä ja tulostamista varten, joten ne asettavat etusijalle asettelun, typografian ja sivun sovituksen. Monet tietokanta-alustat, mukaan lukien 4D, käsittelevät niitä erillisinä lomaketyyppeinä, jotka on liitetty samaan taulukkoon.

Kuinka hoidan validoinnin häiritsemättä käyttäjiä?

Tarkista säännöt kenttätasolla, kun käyttäjä poistuu kentältä, ei jokaisella näppäinpainalluksella, ja jätä kenttien väliset säännöt tallennusvaiheeseen. Näytä virheet suoraan kyseisen kentän viereen selkeällä kielellä ja liitä väri tekstiin tai kuvakkeeseen. Älä koskaan estä käyttäjää siirtymästä lomakkeen läpi vain siksi, että kenttä on tällä hetkellä virheellinen.

Tarvitsenko suunnittelujärjestelmän sisäisille yrityslomakkeille?

Kevyt järjestelmä on hyödyllinen, kun sinulla on enemmän kuin kourallinen lomakkeita. Jaettu joukko otsikoiden sijoittelua, väliarvoja, ohjauskokoja ja virhetyylejä pitää näytöt yhtenäisinä ja nopeuttaa uusien lomakkeiden luomista. Täydellinen suunnittelujärjestelmä on yleensä liikaa pienelle joukolle sisäisiä työkaluja, mutta yksisivuinen tyyliopas ei ole.