Intro
Alert er et varslingskomponent som skaper fokus rundt en responsmelding uten nødvendigvis å avbryte brukerens oppgaveflyt.
Egnet til:
- Kort informativ varselsmelding.
Når bør man vurdere noe annet:
- Erstatter feks. ikke system notification eller lignende.
- Informasjon som ikke passer innenfor varselkonseptet.
- Innhold som oppdateres etter siden lastes inn.
aksel.nav.no
aksel.nav.no
Anatomi
Alert komponentet består av tekstbudskap, ikon og et tradisjonelt hierarkisk fargekonsept. Rødt for error, grønt for success osv. (Inline versjon har kun ikon og tekst). Da fargen i komponentet har lav metningsgrad for ikke å fremstå for intens har den en ramme som øker kontrasten mot bakgrunnen den står på, som i NAV oftest er lys.
- 1. Icon
Forsterker sammen med farge varseltypen.
- 2. Message label
Kort tekstbudskap.
- 3. Background
Bakgrunnsfargen signaliserer varseltypen. Grønt for success i dette eksemplet.
- 4. Border
Øker kontrasten mot bakgrunnen.
Demo
Varianter
Størrelse
Alert finnes i medium og small, sistnevnte er laget for interne flater (feks saksbehandlingssystemer) som har kompakte brukergrensesnitt og tidvis redusert høydeplass.
Information alert
Brukes som navnet angir til rene informasjonsmeldinger. Den blå fargen og informasjonsikonet gir et udramatisk inntrykk.
Success alert
Opptrer for eksempel i sammenheng med en vellykket brukerhandling.
Warning alert
Advarselen kan spesifisere hva som eventuelt hindrer fremdrift eller skaper problemer. Denne varianten kan ha flere roller avhengig av interaksjonskontekst men hovedformålet er å formidle at status ikke er optimal.
Error alert
Dette varselet gir informasjon om at noe er feil. Hvis mulig kan meldingen også angi løsningsforslag.
Heading
Denne varianten har en innledende heading. Headingen blir en del av sidens overordnet headingsstruktur. Det betyr at du må velge et headingnivå basert på Alert'ens plass i sidens innholdsstruktur.
Inline / plain
Uten farget bakgrunnsfelt eller ramme blir varselet mindre fremtredende og det er kun ikonet som definerer varseltypen rent grafisk.
Tilgjengelighet
Interaksjon Skjermleser
Alert-komponenten er ikke en ARIA live region og er ikke relatert til ARIA role="alert". Komponenten skal ikke motta dynamiske oppdateringer. Den blir presentert for skjermleserbrukere som vanlig statisk innhold.
Ikonene har alternativtekst som kommuniserer alvorlighetsgrad: informasjon, suksess, advarsel og feil.
Design
Ikke lag andre versjoner
Regelen for kontinuitet og forutsigbarhet gjelder som alltid, det skal derfor ikke lages andre versjoner av alert komponentet enn de som eksisterer i designsystemet. Eksempelet viser fjernet ramme.
Velg rett variant
Hvis du ønsker å bruke alert uten ramme så velg inline/plain varianten.
Fargekontrast
Lenker i komponenten er svart med underline for å ivareta fargekontrast.
Innhold
Det er ikke alle som har en intuitiv forståelse av betydningen av ikonene og fargene, derfor er det viktig at ordene du velger gjør det åpenbart for brukerne hvordan de skal forholde seg til informasjonen i varselet. Særlig for feilmeldinger er det viktig at du forteller om det er noe de må eller kan gjøre for å komme videre med oppgaven sin.
Semantisk struktur
Alert har ikke noe semantisk struktur som skiller den fra vanlig tekst. Hvis du bruker varianten med heading, sørg for at du setter headingnivået basert på Alert'ens plass i innholdsstrukturen.