Siirry sisältöön
Kela Design System KDS

17.2.0

Alert

Komponentti ilmoitusten esittämiseen.

Julkaistu versiossa 0.15.3

Esikatselu

Käyttötarkoitus

Alertin eli ilmoituksen avulla voit kiinnittää huomion käyttäjän kannalta tärkeään asiaan. Tyypillisiä ilmoituksia ovat esimerkiksi järjestelmän tilaan liittyvät ilmoitukset ja ilmoitukset muista käyttäjän huomioita tai toimenpiteitä vaativista asioista. Tällaisia ovat esimerkiksi virhetilanteet, tarkistettava asiat, tärkeiden toimintojen onnistumiset ja muut huomioitavat tiedot.

Tee näin
  • Näytä ilmoitus vain tarvittaessa, ei varmuuden vuoksi.
  • Käytä tilanteeseen sopivaa ilmoitustyyppiä.
  • Näytä ilmoitus sen kohdan yhteydessä, johon se liittyy (esim. tietyn näkymän yläosassa tai tietyn osion alussa).
  • Pidä ilmoitusten tekstit lyhyinä ja selkeinä. Käytä kokonaisia virkkeitä ja käyttäjälle tuttua kieltä.
  • Sisällytä yhteen ilmoitukseen vain yksi asia.
  • Näytä ilmoitus kyselytilassa vain, jos käyttäjä tarvitsee kyseistä tietoa myös kyselytilassa.
Älä tee näin
  • Älä käytä ilmoituksia kertomaan asiasta, joka ei vaadi käyttäjän välitöntä huomiota ja/tai toimenpiteitä. Voit harkita tällöin käytettäväksi esim. Toast-komponenttia.
  • Älä käytä ilmoituksia korostamaan yleisluontoisia nostoja. Käytä tällöin mieluummin Card-komponenttia.
  • Älä käytä ilmoituksia korostamaan leipätekstistä käyttäjän kannalta tärkeitä sisältöjä, kuten lomakkeiden täyttöohjeita. Käytä tällöin mieluummin sisältönostoa (ContentHighlight).

Saavutettavuus

Oletuksena Alert-komponentti ei keskeytä ruudunlukijoiden toimintaa tai siirrä kohdistusta ilmoitukseen. Jos ruudunlukijan toiminta on tarpeen keskeyttää ja lukea ilmoitus heti, se onnistuu lisäämällä komponentille attribuutti role="alert" (ja lisäämällä ilmoitus DOM:iin JavaScriptillä).

Komponentin ikoni-elementille voi välittää aria-label-attribuutin käyttämällä iconAriaLabel-proppia.

Ilmoituksen sisältö

Otsikointi

Ilmoituksen silmäiltävyyttä parantaa korostamalla ilmoituksen tärkeimmän asian lihavoinnilla ja kappalejaolla, jos ilmoituksessa on useampi lause tekstiä. Näytä ilmoituksen muu sisältö tämän jälkeen. Jos ilmoitus on lyhyt, sitä ei tarvitse erikseen otsikoida.

Linkkien käyttö

Varsinaisen ilmoitustekstin lisäksi ilmoituksessa voi olla esimerkiksi linkkejä. Linkit sopivat tilanteisiin, joissa käytttäjälle halutaan tarjota asiaan liittyen lisätietoa tai käyttäjä halutaan ohjata muualle tekemään jatkotoimenpiteitä.

Esimerkki varoittavasta ilmoituksesta:

Ilmoitustyypit

Kriittinen ilmoitus

Käytä kriittistä ilmoitusta silloin, kun haluat kiinnittää käyttäjän huomion välitöntä reagointia vaativaan asiaan, kuten virhetilanteeseen.

Tutustu myös virheviestin kirjoitusohjeisiin ohjeessa Virheilmoitukset.

Tee näin
  • Jos kyseessä on virhetilanne, kerro, minkälainen virhe on tapahtunut ja mitä käyttäjä voi tehdä virheen korjaamiseksi.
  • Kerro, mitä käyttäjän tulee tilanteessa tehdä ja miksi.
Älä tee näin
  • Älä syytä käyttäjää virhetilanteesta, vaan käytä kohteliasta sävyä.
  • Vältä liian teknisen termistön ja kielen käyttöä.
  • Älä suosittele käyttäjää ottamaan yhteyttä tekniseen tukeen, ellei se ole aivan välttämätöntä.
  • Älä käytä kriittistä ilmoitusta yksittäisen lomakekentän virhetilanteen näyttämiseen. Käytä tällöin lomakekentän korostusta ja virhetekstiä.

Varoittava ilmoitus

Käytä varoittavaa ilmoitusta, kun haluat kiinnittää käyttäjän huomion tilanteeseen, joka saattaa aiheuttaa ongelmia myöhemmin. Varoittavan ilmoituksen avulla pyritään estämään ongelmien syntyminen tilanteessa, jossa virhettä ei vielä ole tapahtunut. Voit esimerkiksi pyytää käyttäjää tarkistamaan jonkin asian, joka voi mahdollisesti aiheuttaa virheen.

Varoittava ilmoitus sopii esimerkiksi seuraaviin tilanteisiin:

  • Tiedot ovat ristiriitaisia ja ne voivat johtaa virheeseen, jos käyttäjä ei korjaa niitä.
  • Joitain tietoja ei voida tarkistaa automaattisesti, vaan tarkistaminen jää käyttäjän vastuulle.
  • Jokin toimenpide, jonka käyttäjä on tehnyt tai jättänyt tekemättä, voi aiheuttaa myöhemmin ongelman.
Tee näin
  • Kerro tarkistettava asia tai mahdollinen syntyvä ongelma.
  • Kerro, mitä käyttäjän tulee tehdä ja miksi.
Älä tee näin
  • Älä näytä varoittavia ilmoituksia varmuuden vuoksi. Jos varoituksia on liikaa, käyttäjät eivät jaksa lukea niitä.
  • Älä käytä varoittavaa ilmoitusta ilmoittamaan virheestä, joka on jo tapahtunut. Käytä tällöin kriittistä ilmoitusta.

Lisätieto

Käytä lisätietoa, kun haluat kiinnittää käyttäjän huomion sellaiseen asiaan, joka käyttäjän on hyvä tietää tai joka tukee hänen toimintaansa. Lisätiedossa näytettävät tiedot eivät kuitenkaan saa olla kriittisiä eivätkä vaatia käyttäjältä välittömiä toimenpiteitä.

Jos tarkoituksena on korostaa leipätekstin seasta käyttäjän kannalta mielenkiintoinen kohta, käytä mieluummin sisältönostoa (ContentHighlight).

Tee näin
  • Näytä lisätieto vain, jos siitä on hyötyä suurimmalle osalle käyttäjistä.
Älä tee näin
  • Älä näytä lisätietoja varmuuden vuoksi.
  • Vältä lisätietojen antamista rutiiniluontoisten toimintojen yhteydessä.
  • Älä käytä lisätietoa korostamaan sellaista tietoa, jota vain pieni osa käyttäjistä tarvitsee. Harkitse tällöin mieluummin erikseen avautuvaa ohjetekstiä (esim. haitari, työkaluvihje tai linkki erilliselle sivulle).
  • Älä käytä lisätietoa, kun haluat antaa yksittäisen lomakekomponentin yhteydessä lisäohjeistusta kyseisen kohdan täyttämiseen. Käytä tällöin komponenttikohtaista täyttöohjetta
  • Älä käytä ilmoitusta palvelun yleisohjeiden esittämiseen. Käytä tällöin mieluummin ohje-tyyppistä sisältönostoa (ContentHighlight).

Onnistumisilmoitus

Käytä onnistumisilmoitusta korostamaan käyttäjälle tärkeän toiminnon onnistumista, kuten hakemuksen lähettämistä.

Tee näin
  • Käytä onnistumisilmoitusta vain sellaisten käyttäjän kannalta kriittisten toimintojen yhteydessä, joiden onnistumista käyttäjä ei näe helposti muualta.
  • Kerro selkeästi ja ytimekkäästi, mikä toiminto on suoritettu onnistuneesti.
Älä tee näin
  • Älä näytä onnistumisilmoitusta kaikkien onnistuneiden toimintojen yhteydessä, vaan ainoastaan tarvittaessa.
  • Älä sisällytä onnistumisilmoitukseen käyttäjän toimenpiteitä vaativia toimintoja.

Ilmoitus toisen komponentin sisällä

Ilmoituksia voi näyttää myös erilaisten ryhmittelevien komponenttien, kuten paneelien ja korttien sisällä. Tällöin ilmoituksesta kannattaa käyttää tyyliä, jossa ei ole reunaviivoja.

Ilmoituksen koko

Oletuksena ilmoituksesta käytetään suurinta kokoa, jonka selkeä välistys soveltuu useimpiin käyttötilanteisiin. Joskus ilmoituksia voi kuitenkin olla tarve mahduttaa tiiviisti pieneen tilaan. Tällöin ilmoituksesta voi käyttää pienempää kokoa.

Laajennettava ilmoitus

Ilmoituksen voi määritellä laajennettavaksi. Silloin ilmoitukselle tulee antaa

  • otsikko, joka näkyy aina, sekä
  • ilmoitusteksti, joka näkyy kun ilmoituksen laajentaa.

Pidä sekä otsikko että ilmoitusteksti lyhyenä. Ilmoitusteksti voi tarvittaessa sisältää linkin.

Laajennetussa näkymässä voi olla myös monta ilmoitusta, rivinvaihdoilla erotettuna. Huomaa tällöin, että yksittäinen ilmoitus ei voi sisältää rivinvaihtoja, jotta ilmoitukset erottuvat toisistaan.

Laajennettava ilmoitus voidaan avata automaattisesti, kun selaimen hakutoiminto löytää hakusanan sen sisällöstä. Toiminnon saa käyttöön lisäämällä ilmoitukselle onBeforeMatch-propin, joka suorittaa avausfunktion.

Toiminto kannattaa ottaa käyttöön, jos paneelin sisällä on paljon käyttäjälle hyödyllistä sisältöä, joka voi muuten jäädä löytämättä.

Suljettava ilmoitus

Oletuksena ilmoituksia ei voi sulkea. Joissain tilanteissa voi kuitenkin olla tarpeen saada kuitattua ilmoitus pois. Tällöin voit käyttää suljettavaa ilmoitusta. Huomioi, että sulkemisen jälkeen käyttäjä ei välttämättä enää muista, mitä ilmoitus koski, joten siihen liittyvät tiedot voi olla hyvä löytää myös muualta.

Taustavärin ja ikonin sijainnin muokkaaminen

Taustavärin voi vaihtaa valkoiseksi, mikäli ilmoituksen käyttämä taustaväri ei sovellu taustaan, jolle ilmoitus sijoitetaan.

Ikonin sijaintia voi tarvittaessa myös muuttaa. Jos ilmoitus sijoitetaan valmiiksi kapeaan tilaan, kannattaa ikoni sijoittaa tekstin yläpuolelle iconPosition-propilla. Arvolla auto, ikonin sijaintia muutetaan, kun ruudunleveys alittaa 468 pikseliä.

Koko näytön levyisten ilmoitusten näyttäminen

Ilmoitukselle voidaan välittää container-elementti, joka määrittää otsikon ja sisällön maksimileveyden.

Laajennettavan ilmoituksen painikkeelle annettava containerin (collapseTitleContainer-prop) HTML-elementti tulee olla inline-elementti, koska se lisätään painikkeen sisälle.

Skeleton

Käytä skeleton-komponentissa vaaleanharmaata versiota ilmoituksesta.

Huomioitavaa selaintuessa