Guide
Slik bruker du Alert, InfoCard og InlineMessage
Denne artikkelen forklarer forskjellen på varsler og informasjon, og hjelper deg å velge riktig komponent til riktig bruk.
Forskjellige komponenter for ulike behov
Varsler er noe brukeren skal legge merke til og forholde seg til, mens informasjon er noe som gir kontekst og støtte, men som ikke nødvendigvis krever umiddelbar handling. For de ulike behovene har vi fire forskjellige komponenter:
Alert-komponentene
GlobalAlert og LocalAlert skal kun brukes til varsler, i fire definerte situasjoner:
- Announcement – Kunngjøre noe om appen, systemet, eller endringer som påvirker brukerne. For eksempel planlagt vedlikehold, eller driftsmeldinger.
- Success – Varsle brukeren om at en handling er gjennomført, eller at noe positivt har skjedd. For eksempel at data er lagret, eller at en prosess er fullført.
- Warning – Varsle brukeren om noe viktig. For eksempel at det mangler informasjon, eller at en handling kan få negative konsekvenser.
- Error – Varsle brukeren om at noe kritisk har skjedd. For eksempel at en handling ikke ble fullført, eller at systemet er nede.
Begge komponentene har innebygd role="alert", slik at skjermlesere automatisk tolker dem som varsler.
GlobalAlert – når hele løsningen er berørt
GlobalAlert bruker du når noe påvirker alle brukere eller hele løsningen. Dette er meldinger brukeren må få med seg, uansett hvor de er. Den plasseres øverst i løsningen, og tar opp hele bredden.
Typiske bruksområder:
- tjenesten er nede eller ustabil
- planlagt eller pågående vedlikehold
- kritisk informasjon som gjelder alle
Slik bruker du GlobalAlert:
- Plasser varselet øverst på siden.
- Bruk korte og tydelige tekster.
- Ha som regel bare ett globalt varsel om gangen.
- Ikke bruk GlobalAlert hvis meldingen bare gjelder en del av siden. Da bør du bruke LocalAlert.
LocalAlert – hendelser som påvirker deler av løsningen
LocalAlert bruker du når noe skjer lokalt, for eksempel i et skjema eller en seksjon. Varslet skal ligge tett på der problemet oppstår, slik at brukeren forstår hva det gjelder.
Typiske bruksområder:
- En innsending feiler.
- Et API-kall feilet for en bestemt seksjon på siden.
Slik bruker du LocalAlert:
- Plasser varselet nær feilen eller innholdet det gjelder.
- Forklar hva som gikk galt og hva brukeren kan gjøre.
- Ikke bruk LocalAlert for generelle tips eller forklaringer. Da bør du bruke InfoCard eller InlineMessage.
InfoCard – informasjon som ikke er et varsel
InfoCard bruker du når du vil fremheve informasjon som er nyttig å vite, men som ikke er et varsel. Dette er gjerne forklarende eller veiledende innhold.
Typiske bruksområder:
- tips til utfylling av skjema
- forklaring av regler eller vilkår
- viktig bakgrunnsinformasjon som alltid gjelder
Slik bruker du InfoCard:
- Bruk klart språk og konkrete eksempler.
- Ikke overbruk komponenten – for mange kort gir lavere effekt.
- InfoCard skal ikke brukes til feil eller kritiske beskjeder. Da trenger du en Alert.
InlineMessage – korte meldinger i kontekst
InlineMessage passer når du vil gi en kort status eller tilbakemelding, uten å avbryte brukeren. Den vises der handlingen skjer, og er mindre fremtredende enn et varsel.
Typiske bruksområder:
- bekreftelse på at noe er lagret
- informasjon etter et valg i et skjema
- små statusendringer
Slik bruker du InlineMessage:
- Plasser meldingen rett ved elementet den gjelder.
- Hold teksten kort og konkret.
- Hvis meldingen er kritisk eller krever handling, bør du heller bruke LocalAlert.
Sammenligning av komponentene
| Komponent | Formål | Plassering | Eksempel |
|---|---|---|---|
| GlobalAlert | Varsel som gjelder hele løsningen | Øverst på siden | Innlogging |
| LocalAlert | Varsel knyttet til et område | Nær hendelsen | API-feil i seksjon |
| InfoCard | Fremheve fast informasjon | I innholdet på siden | Tips eller retningslinjer |
| InlineMessage | Kort statusmelding i kontekst | I kontekst av innhold | Utkastet ble lagret klokken 14:35 |
Medvirkende
Team
Aksel