Meningsbærende farger

[Febakke]

Vi trenger retningslinjer for hvordan vi bruker farger på meningsbærende komponenter.

•  Legg inn eksempler fra ulike norske designsystem

Aktuelle problemstillinger:

• Bør meldinger av typen "informasjon" alltid fremstilles i blå farge?
• Anbefaling: Vi kan ikke bare lene oss på farge. Hvordan kommuniserer vi med flere virkemidler enn farge?

[Camulos]

Funn hos gov.uk

Rødt og grønt er definert som "error state" og "success state"

• https://design-system.service.gov.uk/styles/colour/

De ulike feilsidene er definert uten egne "farger", heller bare informasjon som beskriver hva det gjelder

• https://design-system.service.gov.uk/patterns/problem-with-the-service-pages/
• https://design-system.service.gov.uk/patterns/page-not-found-pages/
• https://design-system.service.gov.uk/patterns/service-unavailable-pages/

Men på noen av komponentene som vi ofte tenker at kan ha farger er det definert bruk av blått i tillegg til error/success, eksempler:

• https://design-system.service.gov.uk/components/notification-banner/

Og kun svart tekst + symbol for noen typer feilmeldinger:

• https://design-system.service.gov.uk/components/warning-text/

Kan se ut som at de forsøker å holde igjen mest mulig med bruk av farger.

I diskusjonene på de enkelte komponentene er det en og annen nugget, feks:

• Notification banner, fra en kommentar om innsikt: "Where orange is used, the intention was often unclear and in a few place it indicated the alert contained information which should just be part of the page content."
• I diskusjon om å merke noe informasjon spesielt (highlighting information) er det noe sammendrag fra ulike tester, å merke feks informasjon som er endret med gult eller oransje ser ut til å være nyttig for noen, men det kan være utfordringen for fargeblinde eller om det skal merkes spesielt i kode for skjermleser i tillegg. Det er også andre utfordringer rundt korttidsminne og kognitiv belastning i diskusjonen.

[Camulos]

Oransje brukes som et visuelt cue for å merke tjenester og sider som er i alpha og beta hos gov.uk.

[Camulos]

I BR har vi en slags eskalerende skala, som kanskje egentlig er mer komplekst enn det trenger å være:

• Grønn - positiv melding/varsel eller liknende
• Blått eller grått - nøytral beskjed eller varsel
• Gult - Viktig melding
• Oransje - Advarsel
• Rødt - noe er feil, alvorlig

[Camulos]

I USWDS har de definert "State color tokens" med:

• info: Cyan (blå-turkis-isj?)
• error: Rødt, inkl en brun og en varm oransje
• warning: Gult og det de kaller gull (nærme oransje
• success: Grønt
• emergency: 2 veldig mørke røde
• disabled: Grått

Alle skalaene har 5 farger ("normal" og to lysere/mørkere) utenom emergency som kun har 2 farger.

Kilde: https://designsystem.digital.gov/design-tokens/color/state-tokens/

[Camulos]

Andre designsystem definerer liknende, med noe variasjon fargebruk, noen beskriver også symbol og form sammen med fargene:

• Carbon Design System: Eskalerende informasjonsnivå/alvorlighetsgrad, farge, symbol og form, i tillegg går de litt inn på layout.
• Material 3: Definerer rød som er feil-farge som er statisk og uavhengig av andre farger en kan definere, de bruker også grønt og andre farger for å kommunisere ulike ting, men det er ikke lett å finne at det er definert som noe fast i systemet.

[Camulos]

NAV
https://aksel.nav.no/grunnleggende/styling/design-tokens

Definerte farger:

• Success: Grønn
• Info: Lyseblå
• Warning: Oransje
• Danger: Rød

[Camulos]

Oslo kommune
https://designsystem.oslo.kommune.no/#/components-status_message

Definerer ikke funksjonene til fargene under "farger", men har under komponenten "Status message" eksempler på bruk hvor farger benyttes og er gitt et budskap:

• Default: Grå, nøytral bruk og farge
• Info: Blå, sammen med "i" i sirkel
• Success: Grønn, sammen med checkmark i firkant
• Warning: Gul-oransje, sammen med utropstegn i trekant
• Danger: Rød, sammen med "x" i hexagon

[Camulos]

Punkt (Oslo kommune Origo)
Definerer ikke funksjon eller mening under beskrivelse av farger, men under noen komponenter slik som "Alert" kan vi finne beskrivelse av meningsbærende farger. Origo, gjennom Punkt sammenfaller for "Alert" i stor grad med slik det er beskrevet på "Status message" på Oslo kommunes designsystem.

[Camulos]

Skatteetaten
Definerer noe meningsbærende rundt farger under stil og tone for farger:

• Success: Grønn
• Warning: Brungul? / Gull
• Danger: Rød
  I tillegg er blå definert for "interactive"
  

Under noen av komponentene har de vist fargene i praktisk bruk, for eksempel for "Alert" viser de at det for bruken av rød så har de to nivåer og avviker fra slik en kunne tolket det på siden om farger nevnt ovenfor:

Suksess: Grønn, sammen med checkmark i sirkel
Nøytral: Gul (gull?), sammen med "i" i sirkel
Advarsel: Rød, sammen med "i" i sirkel
Fare: Rød, sammen med utropstegn i trekant

[Camulos]

Fremtind: Jøkul

Under farger defineres meningsbærende "meldingsfarger":

• Info: Blå
• Suksess: Grønn
• Advarsel: Gul
• Feil: Rød

Under komponenter kan vi lære mer om bruken av farger, kombinert med symbol, feks for komponenten "systemmessage":

• Info: Blå, sammen med "i" i sirkel
• Success: Grønn, sammen med checkmark i sirkel
• Warning: Gul, sammen med utropstegn i trekant
• Error: Rød, sammen med utropstegn i sirkel