Alert

Komponentti ilmoitusten esittämiseen.

Julkaistu versiossa 0.15.3

Esikatselu

Käyttötarkoitus

Alertin eli ilmoituksen avulla voit kiinnittää huomion asiakkaan kannalta tärkeään asiaan. Tyypillisiä ilmoituksia ovat esimerkiksi järjestelmän tilaan liittyvät ilmoitukset ja ilmoitukset muista asiakkaan 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 asiakkaalle tuttua kieltä.
Sisällytä yhteen ilmoitukseen vain yksi asia.
Näytä ilmoitus kyselytilassa vain, jos asiakas tarvitsee kyseistä tietoa myös kyselytilassa.

Älä tee näin

Älä käytä ilmoituksia kertomaan asiasta, joka ei vaadi asiakkaan 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ä asiakkaan 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ö

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.

Varsinaisen ilmoitustekstin lisäksi ilmoituksessa voi olla esimerkiksi linkkejä. Linkit sopivat tilanteisiin, joissa asiakkaalle halutaan tarjota asiaan liittyen lisätietoa tai asiakas halutaan ohjata muualle tekemään jatkotoimenpiteitä.

Esimerkki varoittavasta ilmoituksesta:

Ilmoitustyypit

Kriittinen ilmoitus

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

Tee näin

Jos kyseessä on virhetilanne, kerro, minkälainen virhe on tapahtunut ja mitä asiakas voi tehdä virheen korjaamiseksi.
Kerro, mitä asiakkaan tulee tilanteessa tehdä ja miksi.

Älä tee näin

Älä syytä asiakasta virhetilanteesta, vaan käytä kohteliasta sävyä.
Vältä liian teknisen termistön ja kielen käyttöä.
Älä suosittele asiakasta 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ää asiakkaan 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ää asiakasta tarkistamaan jonkin asian, joka voi mahdollisesti aiheuttaa virheen.

Varoittava ilmoitus sopii esimerkiksi seuraaviin tilanteisiin:

Tiedot ovat ristiriitaisia ja ne voivat johtaa virheeseen, jos asiakas ei korjaa niitä.
Joitain tietoja ei voida tarkistaa automaattisesti, vaan tarkistaminen jää asiakkaan vastuulle.
Jokin toimenpide, jonka asiakas 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ä asiakkaan tulee tehdä ja miksi.

Älä tee näin

Älä näytä varoittavia ilmoituksia varmuuden vuoksi. Jos varoituksia on liikaa, asiakkaat 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ää asiakkaan huomion sellaiseen asiaan, joka asiakkaan 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 asiakkaalta välittömiä toimenpiteitä.

Jos tarkoituksena on korostaa leipätekstin seasta asiakkaan 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 asiakkaita.

Ä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 asiakkaista 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 asiakkaalle tärkeän toiminnon onnistumista, kuten hakemuksen lähettämistä.

Tee näin

Käytä onnistumisilmoitusta vain sellaisten asiakkaan kannalta kriittisten toimintojen yhteydessä, joiden onnistumista asiakas 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 asiakkaan 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.

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 asiakas 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.