Lomakkeet

Käyttötarkoitus

Lomakkeiden avulla kerätään tietoa. Lomakkeen täyttäminen tulisi olla mahdollisimman joustavaa ilman turhia keskeytyksiä. Lomakkeesta tulisi silmäilemällä selvitä sen käyttötarkoitus ja laajuus.

Saavutettavuus

Lomakkeiden tulisi olla teknisesti saavutettavia, selkeitä ja ymmärrettäviä. Huolellisesti suunnitellut ja toteutetut lomakkeet tekevät niiden täyttämisestä helppoa kaikille käyttäjille.

• Jokaisella lomake-elementillä on oltava nimilappu (label tai aria-label), josta käy ilmi, mitä kuhunkin lomakekenttään tulee kirjoittaa.
• Pidä nimilappu lyhyenä ja ytimekkäänä.
• Tarjoa tarvittaessa lisäohjeita ja avaa vaikeita termejä.
• Lomake-elementtien, kuten esimerkiksi painikkeiden, on oltava riittävän suuria, jotta ne erottuvat ja niihin on helppo osua hiirellä tai kosketusnäyttöisillä laitteilla.
• Lomakkeella tapahtuvat merkittävät muutokset (esim. tietojen lähetys tai näkymän muuttuminen) tulee käynnistää niin, että käyttäjä ymmärtää aina, että tällainen muutos tapahtuu. Muutokset eivät saa käynnistyä kohdistusta muutettaessa tai jonkin asetuksen seurauksena, vaan esimerkiksi selkeästi nimetyistä painikkeista. Kun mikä tahansa käyttöliittymäkomponentti saa kohdistuksen, se ei aiheuta kontekstin muutosta.
  • WCAG Onnistumiskriteeri 3.2.1 Kohdistaminen
  • WCAG Onnistumiskriteeri 3.2.2 Syöte
• Varmista, että lomakkeen voi täyttää käyttäen pelkkää näppäimistöä.
• Kuuntele lomake ruudunlukuohjelmalla tai pyydä jotain toista henkilöä lukemaan sen ääneen. Tämä voi auttaa arvioimaan, kuinka looginen ja selkeä lomake on.

Asettelu

Asettelulla tarkoitetaan lomake-elementtien sijoittelua; kokoa, sijaintia ja välejä suhteessa toisiinsa. Asettelun avulla ohjataan käyttäjää tekemään oikeita valintoja ja osoitetaan mihin käyttäjän tulisi ensimmäiseksi kiinnittää huomiota:

• Ohjataan käyttäjää etenemään käyttöliittymässä vaivattomasti ja työn kulun kannalta loogisessa järjestyksessä.
• Korostetaan tärkeimpiä elementtejä.
• Syöttökentän leveyden tulisi kuvastaa halutun syötteen pituutta.

Yhden palstan pystysuuntaisessa asettelussa lomakekentän eri osat ovat allekkain.

• Käytä oletuksena esim. henkilöasiakkaiden ja kumppaneiden asiointipalveluissa.
• Allekkainen asettelu tukee luontaista ylhäältä-alas lukusuuntaa eikä vaadi katseen siirtämistä vasemmalta oikealle.
• Älä jaa lomaketta vierekkäisille palstoille ilman perusteltua syytä, koska tällöin lomakkeen etenemisjärjestys on vaikeampi päätellä.
• Soveltuu parhaiten mobiilikäyttöön.

Kahden palstan asettelussa lomakekentän eri osa ovat rinnakkain.

• Sopii erityisesti sisäisiin järjestelmiin tilankäytön tehokkuuden takia.
• Pienellä näytöllä kaksipalstaisten lomakkeiden tulee mukautua yhden palstan asetteluun.
• Kahden palstan asettelussa lukusuunta on vasemmalta oikealle, ylhäältä alas, ja vaatii katseen siirtämistä edestakaisin.

Muokkaa lomakekenttien leveyttä ja responsiivisuutta käyttämällä sivun rakenteen toteutukseen tarkoitettuja Row ja Column -komponentteja. Lomakekenttien leveys määräytyy käytetyn palstarakenteen perusteella.

Lomakekenttien ja niiden osien johdonmukainen välistys on tärkeää lomakkeen luettavuuden ja ymmärrettävyyden kannalta. Johdonmukainen tyhjän tilan käyttö luo lomakkeelle selkeän rakenteen.

Lomakkeiden välistys noudattaa KDS:n kahdeksalla jaollisia välistysarvoja. Sovella alla olevia perussääntöjä myös omien, räätälöityjen lomakekenttien toteutuksessa.

Syöttökentissä käyteään sivusuunnassa 16px välistyksiä ja pystysuunnassa 8px välistyksiä. Kentän korkeus noudattaa painikkeiden korkeutta (40px + 1px reunaviiva).

Yksittäisen lomakekentän osien, kuten tekstien ja syöttökentän, välillä käytetään pääsääntöisesti 8px välistystä. Virheellisen kentän korostettua, punaista reunaviivaa ei lasketa mukaan välistykseen vaan se käyttäytyy kuin normaali kenttä 1px reunaviivalla.

Lomakekenttien ja kenttäryhmien välissä käytetään 24px välistystä erottamaan eri kentät ja toimintopainikkeet toisistaan.

Kaksi palstaisen lomakkeen välistyksessä käytetään samoja perussääntöjä.

Lomakekentän osat

Erilaiset lomakekentät rakentuvat pääpiirteittäin samanlaisista osista:

1. Nimilappu (label)
2. Pakollisen kentän merkki (*)
3. Täyttöohje
4. Syöttökenttä tai valinta
5. Kenttään sidottu teksti
6. Aputeksti
7. Placeholder
8. Virheilmoitus
9. Kenttään sidottu toiminto

1. Nimilappu

Jokaisella lomake-elementillä ja kenttäryhmällä on oltava nimilappu, josta käy ilmi, mitä kuhunkin lomakekenttään tulee syöttää.

2. Pakollisen kentän merkki

Pakollisen kentän merkki kertoo, että lomaketta ei voi lähettää ennen kuin ko. kenttä on täytetty.

3. Täyttöohje

Jos nimilappu ei tarjoa riittävästi ohjeistusta kentän täyttämiseen, voi ohjeen kirjoittaa tavallisena tekstinä kentän yläpuolelle. Ohjetekstissä voi avata esim. vaikeita termejä. Täyttöohje sisältää minimiohjeen.

Pyri pitämään täyttöohjeet lyhyenä. Mahdolliset lisäohjeet esim. erityistilanteisiin tai rajatuille asiakasryhmille kannattaa näyttää piilotetulla täyttöohjeella. Piilotettua täyttöohjetta kannattaa käyttää myös, jos ohjeteksti on pitkä.

4. Syöttökenttä tai valinta

Lomakekomponentti, jonka avulla asiakas voi syöttää ja muokata tietoja sekä tehdä valintoja ja määrityksiä.

5. Kenttään sidottu teksti

Kenttään sidotun tekstin avulla voidaan ilmaista esim. yksiköitä.

6. Aputeksti

Aputekstin avulla voidaan kertoa esim. käytettävissä oleva merkkimäärä. Aputeksti on tasattu kentän vasempaan reunaan.

Valintanapin ja -ruudun kohdalla aputekstiä voi käyttää kentän täyttöohjeen tilalla tai sen apuna selkeyttämään vaihtoehtoja.

Käytä aputekstiä valintojen ohjeistukseen kun

• lomakekentän täyttöohje on vaikea muotoilla selkeäksi
• täyttöohjeesta tulee liian pitkä
• valinnan nimilapusta tulee liian pitkä
• vaihtoehtoja on useita
• vaihtoehtojen seuraukset tarvitsevat kuvausta.

7. Placeholder

Placeholder-tekstin avulla voidaan antaa asiakkaalle vinkkiä syötteen muodosta. Placeholder-teksti katoaa, kun asiakas vie kohdistuksen kenttään.

8. Virheilmoitus

Virheilmoitus ilmaisee virheellisesti täytetyn tai puuttuvan lomakekentän.

9. Kenttään sidottu toiminto

Kenttään sidottu toiminto sopii tilanteisiin, joissa halutaan esittää tiiviisti yksittäinen kenttä ja siihen liittyvä toimintopainike, esimerkiksi hakukenttä.

Kenttäryhmä

Lomakekenttien ryhmittely loogisiin kokonaisuuksiin helpottaa lomakkeen ymmärtämistä ja täyttämistä. Lomakeryhmä (fieldset) koostuu useasta, samaan aiheeseen liittyvästä lomakekentästä ja kenttäryhmän otsikosta (legend). Valintanapit (radio button) tulee toteuttaa aina kenttäryhmänä. Samoin valintaruudut, jos samaan aiheeseen liittyviä valintoja on useita.

Vuorovaikutus

Kohdistus

Asiakkaan tulee nähdä, missä elementissä näppäimistön kohdistus (focus) kulloinkin on.

Aktiivinen, estetty tai lukutila

Lomake-elementit voivat olla joko aktiivisia, estettyjä (disabled) tai lukutilaisia (read-only).

• Lomake-elementit ovat oletuksena aktiivisia. Aktiivinen elementti saa fokuksen ja sen arvoa voi muokata.
• Lukutilassa lomake-elementin arvoa ei voi muokata.
• Estettyjä lomake-elementtiä ei voi klikata eivätkä ne saa fokusta. Lomake-elementti voi olla estettynä esim. kunnes jokin tietty valinta on tehty tai painike voi olla estettynä, kunnes kaikki pakolliset kentät on täytetty.
• Jos elementti on estetty, tulee asiakkaan kannalta olla ilmiselvää, mitä hänen tulee tehdä saadakseen elementin aktiiviseksi.
• Piilota lomake-elementti silloin, kun asiakas ei toiminnallaan voi sitä aktivoida tai esim. puuttuvien käyttöoikeuksien takia käyttää.

Tyhjä vai täytetty

Tee lomake-elementtien käytöstä ja silmäilystä mahdollisimman sujuvaa.

Ohjeistus

Käyttäjälle tulee antaa riittävä ohjeistus lomakkeen täyttämistä varten. Lomakkeen pääotsikko kertoo lomakkeen käyttötarkoituksen. Ryhmittelevät otsikot helpottavat varsinkin pitkän lomakkeen silmäilyä ja ymmärrettävyyttä.

Koko lomaketta koskevat ohjeet tulisi kertoa lomakkeen alussa, esimerkiksi pakollisten tietojen merkitseminen. Pakolliset kentät merkitään mustalla tähdellä *.

Jokaisella lomake-elementillä on oltava nimilappu (Aria-label), josta käy ilmi, mitä kuhunkin lomakekenttään tulee kirjoittaa. Tarjoa tarvittaessa lisäohjeita esim. täyttöohje ja avaa vaikeita termejä.

Palaute

Käyttäjälle on hyvä antaa palautetta lomakkeen täytöstä. Ilmoitukset keskeyttävät normaalin työnkulun ja niitä tulee siksi käyttää harkiten.

Virheellisesti täytetyt kentät tai muut virhetilanteet on hyvä sekä listata yhteen lomakkeen alkuun että ilmoittaa virheestä jokaisen virheellisesti täytetyn lomakekentän kohdalla. Virheilmoituksessa kerrotaan mitä on tapahtunut ja ohjeistetaan virheen korjaamiseen. Lomakkeen alkuun tuleva listaus sopii esim. kansalaisen palveluissa tilanteeseen, jossa lomakkeella on vain yksi lähetä-painike. Sisäisissä järjestelmissä ns. asiantuntijakäyttöliittymissä, riittää usein virheilmoituksen näyttäminen asiayhteydessä tai esim. tietyn paneelin yläreunassa.

Muodollisuus- ja oikeinkirjoitukseen liittyvät virheilmoitukset näytetään mahdollisuuksien mukaan heti kentästä poistuttaessa. Virheilmoituksen aktivoituessa fokuksen eli kohdistimen on oltava virheilmoituksessa.

Virheilmoitus esitetään virheen aiheuttaneen lomakekentän alapuolella.

Kun lomake on onnistuneesti lähetetty, asiakkaalle on annettava tästä palautetta. Vältä kuitenkin turhien onnistumisilmoitusten esittämistä rutiiniluontoisten toimintojen yhteydessä.

Lomakkeen käyttäminen näppäimistön avulla

Varmista, että lomake voidaan täyttää käyttäen pelkkää näppäimistöä. Asiakkaan ei tule joutua vaihtamaan hiiren ja näppäimistön välillä pystyäkseen navigoimaan ja täyttämään lomaketta.