Yleistä
Virheilmoitus näytetään tilanteessa, jossa prosessia ei voida jatkaa eteenpäin ilman, että käyttäjä ensin korjaa virheellisen tilanteen. Siten virheilmoitusten tarkoitus on viestiä käyttäjälle, minkälainen virhe on tapahtunut ja mitä käyttäjä voi tehdä sen korjaamiseksi.
Komponentit
Virheilmoitusten näyttämiseen voidaan käyttää erilaisia komponentteja.
Lomakekomponenttien omat virhetekstit (errorText
) näyttävät kyseiseen lomakekomponenttiin liittyvän virheen.
<TextInput
labelText="Puhelinnumero"
errorText="Vastaus puuttuu."
invalid
required
inputWidth={(children) => <Column md={6}>{children}</Column>}
/>
Alert-komponentti sopii tilanteeseen, jossa virhetilanne liittyy
yksittäistä lomakekenttää laajempaan kokonaisuuteen.
<Alert variant="danger">
<Text>
Asiakirjaa ei voida välittää asiakkaalle sähköisesti, koska yhteystiedot puuttuvat. Lähetä asiakirja
toimistotulostuksen kautta.
</Text>
</Alert>
Jos prosessi päättyy virheelliseen tilanteeseen, voidaan virheellisen tilanteen kuvaamiseen käyttää Result-komponenttia.
<Result variant="danger" title="Pahoittelut, jokin meni pieleen!" msg="Jatka kirjautumalla ulos palvelusta.">
<Button as="a" href="/#">
Kirjaudu ulos
</Button>
</Result>
Joissain tilanteissa voi olla tarpeen ohjata asiakas myös kokonaan erilliselle virhesivulle.
Kun kirjoitat virheviestiä
Huomioi kohderyhmä
- Suuntaa teksti asiakkaalle.
- Käytä sinuttelua, kun annat käyttäjälle toimintaohjeita.
- Huomoi kognitiivinen saavutettavuus - esitä tieto selkeästi ja helppotajuisesti.
- Jos kyse on asiantuntijakäyttöliittymästä, virheilmoitus voi sisältää myös tietylle kohderyhmälle tuttua ammattisanastoa.
"Hakuasi vastaavia asiakirjoja ei löytynyt."
"Haku ei palauttanut kriteerejäsi vastaavia asiakirjoja."
"Liite tulee lisätä uudelleen."
Kirjoita lyhyesti ja selkeästi
- Käytä selkeää yleiskieltä, jota jokaisen on helppo ymmärtää.
- Vältä kapulakieltä ja tarpeettoman teknisiä ilmaisuja.
- Kerro selkeästi virheen syy.
- Älä käytä asiakkaalle suunnatussa viestissä Kelan tai Kannan ammattisanastoa tai lyhenteitä (esim. totu - toimeentulotuki).
"Tiedoston nimi on liian pitkä. Nimessä saa olla tiedostopäätteen lisäksi enintään 80 merkkiä."
"Tiedon muoto tai pituus on virheellinen."
"Viesti voi sisältää ainoastaan kirjaimia, numeroita, pilkkuja ja pisteitä."
"Kentässä on kiellettyjä merkkejä."
Muotoile asia kohteliaasti
- Älä syytä käyttäjää, vaikka virhe johtuisi hänen omasta toiminnastaan.
- Pahoittele virhettä tarvittaessa. Pahoittelu voi olla aiheellinen, jos käyttäjä menettää tietoja tai joutuu palamaan tehtävässään taaksepäin virheen takia.
"Sivustolla tapahtui virhe."
"Teit sivustolla virheen."
"Valitettavasti tietojen tallennus ei onnistunut. Yritä hetken kuluttua uudelleen."
"Tietojen tallennus ei onnistunut. Yritä hetken kuluttua uudelleen."
"Hakemusta ei voi tehdä ajanjaksolle, joka oli ennen vuotta 2015. Korjaa sairausaika tai täytä paperinen hakemuslomake."
"Et voi tehdä hakemusta ajanjaksolle, joka oli ennen vuotta 2015. Korjaa sairausaika tai täytä paperinen hakemuslomake."
Opasta käyttäjää eteenpäin
- Sisällytä virheilmoitukseen toimintokehote eli kerro, mitä käyttäjän tulee tilanteessa tehdä.
- Ohjaa käyttäjää toimimaan oikein.
- Viesti tarvittaessa, että ongelma on tunnistettu ja että se pyritään ratkaisemaan.
- Opasta käyttäjää olemaan yhteydessä tekniseen tukeen vain niissä tilanteissa, joissa se on välttämätöntä.
"Maksutietojen haku epäonnistui. Yritä hetken kuluttua uudelleen."
"Maksutietoja ei voida näyttää."
"Järjestelmässä tapahtui tekninen virhe. Sulje kaikki selainikkunat ja aloita uudelleen. Jos ongelma jatkuu, ota yhteyttä Kelan tekniseen asiakastukeen."
"Järjestelmässä tapahtui tekninen virhe."
Virheilmoitukset ruudunlukijalla
Ruudunlukijat lukevat virheelliseen lomakekenttään siirryttäessä sekä lomakkeen nimilapun, täyttöohjeen että virheilmoituksen. Alla esimerkkejä siitä, miten ruudunlukija lukee eri lomakekomponenttien kohdalla niihin liittyviä virheilmoituksia.
Huomaa, että ruudunlukijan toiminta vaihtelee käytettävästä ruudunlukijasta sekä käyttäjän asettamista asetuksista riippuen.
<TextInput
labelText="Työsuhteen pääättymisen syy"
errorText="Valitse vastaus."
element="select"
defaultValue={0}
required
invalid
inputWidth={(children) => <Column md={6}>{children}</Column>}
>
<option value="0">(Valitse)</option>
<option value="0">Määräajan umpeutuminen</option>
<option value="0">Irtisanoutuminen</option>
<option value="0">Työsopimuksen purkautuminen</option>
</TextInput>
Ruudunlukija: "Työsuhteen päättymisen syy. Pakollinen kenttä. yhdistelmäruutu (Valitse) suljettu Valitse vastaus."
<TextInput
labelText="Koulutustaso"
errorText="Valitse vastaus."
element="select"
defaultValue={0}
invalid
required
inputWidth={(children) => <Column md={6}>{children}</Column>}
>
<option value="0">(Valitse)</option>
<option value="0">Alempi korkeakoulututkinto</option>
<option value="0">Ylempi korkeakoulututkinto</option>
</TextInput>
Ruudunlukija: "Koulutustaso Pakollinen kenttä. yhdistelmäruutu (Valitse) suljettu Valitse korkein koulutustaso. Valitse vastaus."
<div>
<SelectionGroup
labelText="Osallistutko työllistymistä tukevaan palveluun?"
helpText="Työmarkkinatukea voidaan maksaa korotusosan verran enemmän, kun osallistut työllistymistä tukevaan palveluun."
invalid
required
requiredLabel="Pakollinen tieto."
errorText="Valitse vastaus."
>
<Radio name="radio-invalid" id="radio-invalid-kaikki" labelText="Kyllä" value="Kyllä" />
<Radio name="radio-invalid" id="radio-invalid-jäljellä" labelText="En" value="En" />
</SelectionGroup>
</div>
Ruudunlukija: "Osallistutko työllistymistä tukevaan palveluun? Työmarkkinatukea voidaan maksaa korotusosan verran enemmän, kun osallistut työllistymistä tukevaan palveluun. Valitse vastaus. Pakollinen tieto."
<InputGroup>
<InputLabel htmlFor="invalid-phone-number-field" required requiredLabel="Pakollinen kenttä.">
Puhelinnumero
</InputLabel>
<Input
id="invalid-phone-number-field"
type="text"
aria-describedby="invalid-phone-number-field-error"
required
invalid
style={{ maxWidth: "12rem" }}
/>
<InputText id="invalid-phone-number-field-error" error>
Vastaus puuttuu.
</InputText>
</InputGroup>
Ruudunlukija: "Puhelinnumero Pakollinen kenttä. muokkaa pakollinen Vastaus puuttuu. tyhjä "
<TextInput
labelText="Puhelinnumero"
errorText="Korjaa vastaus."
helpText="Ilmoita puhelinnumero muodossa 1234567890."
defaultValue="0a504567890"
invalid
required
inputWidth={(children) => <Column md={6}>{children}</Column>}
/>
Ruudunlukija: "Puhelinnumero muokkaa pakollinen Ilmoita puhelinnumero muodossa 1234567890. Korjaa vastaus. valittu 0a504567890"
<SelectionGroup
labelText="Päiväraha jonka määrän arvioit"
helpText="Valitse yksi tai useampi vaihtoehto."
invalid
required
errorText="Valitse vastaus."
>
<Checkbox name="sairauspäiväraha" labelText="Sairauspäiväraha" />
<Checkbox name="osasairauspäiväraha" labelText="Osasairauspäiväraha" />
</SelectionGroup>
Ruudunlukija: "Päiväraha jonka määrän arvioit Valitse yksi tai useampi vaihtoehto. Valitse vastaus. ryhmä Osasairauspäiväraha valintaruutu ei valittu pakollinen virheellinen arvo "
Malleja yleisiin virhetilanteisiin
Yksinkertaisissa ja usein toistuvissa virhetilanteissa ilmoitukset kannattaa muotoilla seuraavien ohjeiden mukaan. Näiden mallien tarkoituksena on nopeuttaa ja helpottaa määrittely-, kielenhuolto- ja käännöstyötä sekä tarjota asiakkaalle selkeät virheilmoitukset.
Virheilmoituksissa ei tarvitse toistaa nimilapun tai täyttöohjeen tekstiä. Kun käytetään KDS-komponentteja, ruudunlukuohjelmat lukevat nimilapun ja täyttöohjeen tekstin automaattisesti siirryttäessä virheelliseen lomakekenttään.
Tyypillisesti virheilmoituksissa tulee kertoa, minkälainen virhe on tapahtunut ja miten sen voi korjata. Seuraavien esimerkkien mukaisissa yksinkertaisissa virhetilanteissa ohjetekstin voi kuitenkin muotoilla lyhyesti ja napakasti.
Puuttuva valinta
Kun pakollinen valinta puuttuu, näytetään ilmoituksena “Valitse vastaus.” Ruotsiksi ilmoitus on “Välj ett svar.”
- Käytetään komponenteissa, joissa tehdään valinta valmiista vaihtoehdoista (esim, Select, Radio, CheckBox).
- Valitse-sana antaa toimintokehotteen ja kertoo, että puuttuva tieto annetaan valitsemalla annetuista vaihtoehdoista.
<SelectionGroup
labelText="Onko sinulla puoliso?"
helpText="Puolisolla tarkoitetaan avio- tai avopuolisoa sekä rekisteröidyn parisuhteen osapuolta."
invalid
required
errorText="Valitse vastaus."
>
<Radio name="invalid-missing-value" labelText="Kyllä" />
<Radio name="invalid-missing-value" labelText="Ei" />
</SelectionGroup>
<TextInput
labelText="Työsuhteen pääätyymisen syy"
element="select"
defaultValue={0}
errorText="Valitse vastaus."
required
invalid
inputWidth={(children) => <Column md={6}>{children}</Column>}
>
<option value="0">(Valitse)</option>
<option value="0">Määräajan umpeutuminen</option>
<option value="0">Irtisanoutuminen</option>
<option value="0">Työsopimuksen purkautuminen</option>
</TextInput>
<SelectionGroup
labelText="Päiväraha jonka määrän arvioit"
helpText="Valitse yksi tai useampi vaihtoehto."
invalid
required
errorText="Valitse vastaus."
>
<Checkbox name="sairauspäiväraha" labelText="Sairauspäiväraha" />
<Checkbox name="osasairauspäiväraha" labelText="Osasairauspäiväraha" />
</SelectionGroup>
Puuttuva syöte
Kun pakollisesta kentästä puuttuu asiakkaan antama vastaus, näyetään ilmoituksena “Vastaus puuttuu. Ruotsiksi ilmoitus on “Svar saknas.”
- Käytetään komponenteissa, joihin asiakas voi kirjoittaa itse vastauksen.
- Lyhyt ja selkeä ilmoitus kertoo, että asiakkaan antama vastaus puuttuu.
- Vaikka ilmoituksessa ei ole toimintokehotetta, se ei tässä tapauksessa haittaa. Toimintokehote tekisi ilmoituksesta kömpelön ja toisi siihen turhaa toistoa (esim. “Vastaus puuttuu. Kirjoita vastaus”).
<InputGroup>
<InputLabel htmlFor="invalid-number-field" required requiredLabel="Pakollinen kenttä">
Veroprosentti
</InputLabel>
<Input
id="invalid-number-field"
type="number"
aria-describedby="invalid-number-field-error"
required
invalid
style={{ maxWidth: "12rem" }}
/>
<InputText id="invalid-number-field-error" error>
Vastaus puuttuu.
</InputText>
</InputGroup>
<DatePickerV2
labelText="Alkamispäivä"
helpText="Ilmoita päivämäärä muodossa pp.kk.vvvv"
errorText="Vastaus puuttuu."
invalid
required
/>
<TextInput
labelText="Kerro, miten sairaus vaikuttaa työkykyysi."
errorText="Vastaus puuttuu."
element="textarea"
infoText="200 merkkiä jäljellä."
rows={4}
invalid
required
autogrow={false}
/>
Virheellinen tieto
Kun asiakkaan antama vastaus on virheellinen, voidaan käyttää yleistä virheilmoitusta “Korjaa vastaus.” Ruotsiksi ilmoitus on “Korrigera svaret.”
Jos lomakekentällä on kyseiseen virhetilanteeseen sopiva täyttöohje, pelkkä Korjaa vastaus -teksti riittää.
Jos lomakekentällä ei ole täyttöohjetta tai ohje ei anna vastausta kyseisen virhetilanteen ratkaisemiseen, lisää tarkemmat ohjeet Korjaa vastaus -virkkeen perään.
<TextInput
labelText="Puhelinnumero"
errorText="Korjaa vastaus."
helpText="Ilmoita puhelinnumero muodossa 1234567890."
defaultValue="0a504567890"
invalid
required
inputWidth={(children) => <Column md={6}>{children}</Column>}
/>
<TextInput
labelText="Veroprosentti"
errorText="Korjaa vastaus. Luvun täytyy olla 0-99, ja siinä voi olla enintään kaksi desimaalia."
invalid
required
inputWidth={(children) => <Column md={6}>{children}</Column>}
/>
<DatePickerV2
labelText="Alkamispäivä"
helpText="Ilmoita päivämäärä muodossa pp.kk.vvvv"
errorText="Korjaa vastaus. Päivämäärän tulee olla välillä 1.1.2024 - 31.3.2024"
invalid
required
/>
Virheilmoituskoosteet
Koosteet sopivat tilanteisiin, jossa sivulla on useita virheitä. Koosteita käytetään esimerkiksi lomakkeissa, jotka etenevät sivu kerrallaan. Koosteeseen käytetään Alert-komponenttia.
Koosteen on tarkoitus toimia yhteenvetona, joka näyttää virheiden määrän ja tarjoaa siirtymät kyseisiin virheellisiin kohtiin. Koosteessa näytetään linkkeinä virheellisten kohtien nimilaput. Linkit vievät lomakkeella kyseisen lomakekentän kohdalle.
Jos sivulla on useita samannimisiä lomakekenttiä (esimerkiksi useita alkamis- tai päättymispäiviä), nämä kohdat täytyy yksilöidä koosteeseen samoin kuin ne on yksilöity sivulla.
<Alert variant="danger">
<strong>Korjaa vastaukset seuraavista kohdista:</strong>
<List ordered className="kds-mt-4">
<ListItem>
<Link href="/#">Mikä on koulutustasosi?</Link>
</ListItem>
<ListItem>
<Link href="/#">Asuuko samassa taloudessa muu täysi-ikäinen henkilö?</Link>
</ListItem>
<ListItem>
<Link href="/#">Kuinka monta alle 18-vuotiasta lasta taloudessasi asuu vakituisesti?</Link>
</ListItem>
<ListItem>
<Link href="/#">Palkkajakso 1 - Päättymispäivä</Link>
</ListItem>
</List>
</Alert>