Gå til hovedinnhold Gå til søkesiden
Finanstilsynet
Søk i nettstedet
Forside >
Designmanual >
Visuell identitet >
Informasjonsgrafikk >
Informasjonsgrafikk diagrammer

Informasjonsgrafikk diagrammer

Publisert: 5. januar 2023
Sist endret: 17. januar 2023

Formålet med informasjonsgrafikk er å formidle informasjon på en visuell og effektiv måte og samtidig følge kravene for universell utforming. Det er viktig å velge den visuelle formen som passer best for dataene som skal vises.

Bilde av eksempler på visuell stil på diagrammer og grafer i Finanstilsynet.

Retningslinjer for diagrammer og grafer

Det er en fordel at grafene har mest mulig kontrast, men i tilfeller hvor man må benytte flere variabler med små nyanser kan dette være utfordrende. Det er imidlertid mulig å ta flere grep for å skille elementene fra hverandre.

Under er det presentert forskjellige metoder for å tydeliggjøre innholdet i grafene samtidig som man ivaretar kontrastkravene.

Form og størrelser

Størrelsen på diagrammene må tilpasses de flatene de skal brukes på, men hvis mulig bør man bruke samme standardstørrelse på alle. Størrelser er definert som punkter (pt).

  • Grafene produseres normalt i Excel og limes inn i Word. Alle diagrammene som limes inn fra Excel gjøres via ctrl+c og ctrl+v.
  • Diagrammet for en enkel figur skal ha en bredde på 14 cm og en høyde på 7 cm.
  • Størrelsen på teksten skal være 7 pt i Excel/Word.
  • Er det liten plass til figuren, kan denne redigeres og tilpasses i Excel/Word.

NB! Tenk nøye gjennom hvilken grafe som brukes til hvert datasett.

Eksempel på stolper:

Eksempel på grafe med stopler, er dette riktig visning for dataen?

Eksempel på linjer:

Eksempel på visning av data som linjer, er dette riktig visning av dataen?

 

Visuell utforming

Hvit skille mellom sektorer og serier:

For å skille informasjon fra hverandre anbefales mellomrom mellom hver sektor. Dette gjelder både stolper og sektorer.

Eksempel:

Eksempel på hvit skille mellom stolper1

Eksempel:

Eksempel på hvit skille mellom stolper i en farge men flere toner

Eksempel:

Eksempel på Grafe med hvit skille mellom sektorer

Lyse fargetoner krever ramme:

  • De lyseste tonene som ikke tilfredsstiller kontrastkravene, må ha en ramme i en mørkere tone.
  • Velg en tone i samme fargeskala som tilfredsstiller kravene. Ved lys gul benyttes dermed en mørkere ramme som tilfredsstiller kravet (3:1).

Eksempel:

Eksempel på lyse fargetoner med ramme i samme  stolpe

Eksempel:

Eksempel på lyse fargetoner med ramme separate stolper

Trefargeskala

  • Grafer/diagrammer kan lages i en, to eller tre farger
  • Enkle grafer kan utformes i én farge uten å skille mellom nyanser, men man kan for eksempel utheve en av stolpene

Eksempel på stolper i samme farge og toneverdi:

Eksempel på grafe i èn farge

Eksempel på stolper med én fremhevet farge:

Eksempel på grafe med to frager, hvor èn er fremhevet med aksentfarge

Eksempel på stolper med en farge i tre toneverdier:

Eksempel på grafe i samme farge med tre toneverdier

Eksempel på stolper med tre farger gruppert:

Eksempl på garfe kombinasjon med flere farger

Rekkefølge og plassering av farger

  • For optimal kontrast i grafene med få dataserier anbefales det å benytte rekkefølgen mørk -> lys -> medium, eller en kombinasjon av to fargeskalaer med alternerende valør
  • Er det mange dataserier bør disse sorteres i "stigende" rekkefølge fra mørk til lys innenfor hver farge

Eksempel på diagram med flere farger i samme stolpe:

Eksempel på grafe med forskjellige farger i samme stolpe

Eksempel på diagram med flere farger gruppert:

Eksempel på farger i mørk-lys-mediom rekkefølge gruppert

Eksempel på diagram med toner av en farge i samme stolpe:

Eksempel på farger i mørk-lys-medium rekkefølge

Aksenotasjon og tegnforklaringer

  • Aksettittel skal stå horisontalt over aksen den refererer til. Der det passer kan man erstatte aksetittel med benevnelse på selve aksen (%, mill, kr o.l.).
  • Der det er mulig skal plassering av rekkefølge i tegnforklaringen samsvare med rekkefølgen i grafen.
  • Dersom det er plass, kan tegnforklaringen stå til høyre for grafen i samme rekkefølge som visningen.

Eksempel på aksentnotasjon i prosent og tegnfoklaring under diagrammet:

Eksempel på aksentnotasjon under diagrammet

Eksempel på aksentnotasjon over akse og tegnforklaring til høyre for diagrammet:

Eksempel på aksentnotasjon til venstre for diagrammet

Begge eksemplene har aksentnotasjon over Y-aksen.

 

Diagrammer med to verdiakser

  • Diagrammer kan ha verdiakser på hver side med farger som samsvarer med fargeskalaen i tilhørende dataserie i grafen.
  • Verdiaksene har noe tykkere linje for å gjøre det enklere å oppfatte fargene på verdiaksene.

Eksempel på verdiakser på begge sider av diagrammet med forskjellig farge, samt differensierte data med stolper og linje:

Eksempel på grafe med kobinasjon av stolpe, linje, og differensiert akse

Diagrammer med store mengder data

I diagrammer med store mengder data og et stort antall søyler i grafen er det ikke alltid plass til luft mellom søylene. Det er da viktig å vurdere hvilken type grafe som viser dataene på best mulig måte.

Eksempel på diagram med store datamengder vist med stolper:

Eksempel på grafe med store mengder data vist med stolper

Eksempel på diagram med store datamengder vist med linjer:

Eksempel på grafe med store mengder data vist med linjer og markører

Til toppen av siden expand_less

Fant du det du lette etter?

Del denne siden:

  • Twitter
  • Facebook
  • LinkedIn
Abonner på nyhetsvarsel
  • Presse
  • Jobb hos oss
  • Kontakt oss
  • Varsling til Finanstilsynet
  • eFormidling
  • Personvern og tilgjengelighetserklæring
  • RSS
  • API for åpne data

Besøksadresse: 
Revierstredet 3, 0151 Oslo


Postadresse: 
Postboks 1187 Sentrum
0107 Oslo


Tlf: 22 93 98 00
E-post: post@finanstilsynet.no
Org.nr: 840 747 972