Meldinger

Bruk av meldinger

I designsystemet finnes det 3 forskjellige meldingskomponenter, og hvilken som skal brukes kommer an på hva slags type informasjon du ønsker å gi brukeren. Felles for alle er at de bør holdes korte og konsise, og inneholde relevante tips eller informasjon som brukeren trenger å vite. Eksempler på situasjoner der meldinger kan brukes er når systemet er nede, betaling er gjennomført eller at det kommer en eller flere endringer på en tjeneste.

Målet med meldinger er å bekrefte og skape trygghet hos brukerne, slik at de opplever at de har kontroll over situasjonen.

Noen prinsipper vi bør følge:

• Meldingene skal være relevante og informative
• Selve meldingsboksen skal være responsiv, tilpasses lengden på innholdet og skaleres etter flaten den vises på (f.eks. full bredde på mobil)
• Teksten skal følge retningslinjene nevnt i Stil og tone
• Hvis meldingen skal benyttes for å belyse feil og mangler i skjema, må meldingen inneholde lenker (<a>) som peker mot skjemafeltet som må fylles ut på nytt
• Hvis meldingen dukker opp dynamisk ved endringer på siden, må den annonseres med role="alert"

Valg av farge

Alle meldingskomponentene kommer i 4 farge-varianter.

Hvilken av disse du skal bruke, avhenger av hva slags informasjon du prøver å formidle. Er det ren informasjon, som brukeren bør få med seg, er info-varianten god å bruke.

Tips / News

Tips kan brukes når du vil tipse brukeren om alternativer, eller andre valg. Dette kan også være informasjon som brukere ikke må forholde seg til. F.eks. tips til andre tjenester, forenkling av prosesser etc.

Info

Info brukes der du vil informere om noe som ikke er kritisk. Det kan for eksempel være planlagt vedlikehold, endring av tjenester eller ønske om at brukerne bekrefter kontaktinformasjon.

Suksess

Suksess-varianten brukes til å formidle «gode nyheter», eller når ønsket respons på en handling skjer. Det kan f.eks. være om en tjeneste blir tilgjengelig igjen, eller om betalingen ble gjennomført.

Error

Error-varianten brukes bare i sammenhenger der det har skjedd en feil, eller hvis det er en pågående feil. Det kan f.eks. være at en tjeneste er nede akkurat nå, eller at en betaling ikke gikk igjennom.

Vær oppmerksom på at alle feilmeldinger automatisk får role="alert". Det gjør at en skjermleser automatisk vil lese opp innholdet i meldingen med en gang den vises. Hvis meldingen er tilstede ved initiell sidelasting leses den opp like etter sidetittel. Dette kan slås av, se eksempelet under:

MessageBox

Meldingsboksene skal inneholde informasjon som er nyttig og relevant for brukerne. De skal holdes konsise og ikke brukes til å forklare ting «man ikke finner noe annet sted til».

Bruk meldingsbokser:

• Når du trenger å informere kort om et tema
• Der du vil utheve noe informasjon fra en større sammenheng
• Når du har innhold som skal utheves, men som er selvforklarende uten kontekst

Med liste

SystemMessage

Systemmeldinger skal bare brukes til viktige, midlertidige meldinger. De plasseres direkte under headeren og det skal helst bare brukes 1 per side.

Bruk systemmelding:

• Der meldingen skal vises i en gitt tidsperiode
• Når det skal brukes til informasjon, som ikke krever en handling fra bruker

Ikke bruk systemmelding:

• Der det ikke gir mening at meldingen er rett under header
• Der det skal vises mange meldinger samtidig

ContextMessage

Kontekstuelle meldinger er informasjon som skal gis i en kontekst. Dette er meldinger som skal utheves, men som bare gir mening i konteksten den er plassert. I motsetning til systemmeldinger, kan disse meldingene plasseres midt i innholdet på siden.

Bruk kontekstuelle meldinger:

• Når du vil gi ekstra informasjon i en gitt situasjon

Ikke bruk kontekstuelle meldinger:

• Hvis du egentlig bare trenger en brødtekst

Alle variantene som kompakt finnes i alle fargevariantene.

Bruk på andre bakgrunner

I tilfeller der meldingsboksene ikke får god nok kontrast mot valgt bakgrunnsfarge, finnes det en alternativ versjon. Den alternative versjonen gir meldingsboksen hvit bakgrunn i light-mode, men beholder standard farge i darkmode. Du skrur på denne versjonen ved å bruke onColoredBg-propertyen i hvilken som helst av meldingskomponentene.