Gå til sidens indhold

Om designsystemet

Det visuelle design

Ved etableringen af designsystemet har det været afgørende at skabe et design, der lever op til nogle grundlæggende vilkår:

  • det skal være så tilpas neutralt, at det ikke konflikter den visuelle stil for hverken borger.dk eller Virk
  • det er simpelt at forstå og anvende for alle, fra designere over udviklere til projektansvarlige
  • det er fleksibelt nok til at kunne favne alle typer af selvbetjeningsløsninger.

Ved at skabe et design, som opfylder disse vilkår, er det målsætningen, at produktejere, projektledere og udviklere får frigjort tid til at fokusere på brugerne: Dvs. bruge mere tid på brugerinddragelse og brugertests af flow og funktionalitet, end på at diskutere synsninger om former og farver.

Visuel integration på portalerne

Ganske få elementer brander en selvbetjeningsløsning som en del af borger.dk eller Virk og skaber sammenhængen til den ene eller anden portal. Brandingen sker via en simpel temahåndtering og nogle få linjers kode.

Du integrerer selvbetjeningsløsningen visuelt til én af de to portaler gennem disse fem elementer:

  1. Logo
  2. Baggrundsfarve i headerens første linje
  3. Valgt-topmenupunkt-markering
  4. Valgt-menupunkt-markering i venstremenuen/tringuiden.
  5. Primærknap

Alle andre komponenter er helt ens på tværs af de to portaler.

Header-temaer

Temahåndtering i header

Gå til headerkomponenten

Læs om layout til headeren

Venstremenu/tringuide-temaer

Temahåndtering i venstremenu

Gå til venstremenukomponenten

Læs om de forskellige tringuides

Primærknap-temaer

Temahåndtering og knapper

Læs om knapper

Principper for den visuelle stil

Det visuelle design skal på én gang passe ind på både borger.dk og Virk og understøtte brugervenlighed i selvbetjeningsløsninger. De kan bestå i komplekse systemer og forretningsprocesser, som skal være brugervenlige og simple at anvende. For understøtte denne kompleksitet er der tre principper som gennemsyrer designet:

Neutralt design signalerer seriøsitet

Et neutralt og minimalistisk design er mere robust i forhold til tidens trends, fremtidige grafiske ændringer på portalerne og skiftende myndighedskonstruktioner. Det neutrale design prioriterer et konservativt og tidløst udseende fremfor det moderne og trendy: En selvbetjeningsløsning er en seriøs dialog med brugeren via inputfelter og tekst - ikke et udfordrende kunstværk.

Simpelt design hjælper brugerne

Simpelt at bruge. Simpelt for brugerne. Designet skal være nemt at anvende og gøre det let at bygge løsninger, der er nemme at anvende for brugerne. Designet søger at understøtte en tilgang, hvor det funktionelle og det æstetiske går op i en højere enhed uden store kreative penselstrøg.

Målrettet design skaber ensartethed

Designet er målrettet selvbetjeningsløsninger. Det skal kunne bruges til alle typer af selvbetjeningsløsninger med forskellige målgrupper. Og det skal sikre konsistens og sammenhæng på tværs ved at anvende de samme komponenter og de samme interaktionsmønstre på tværs af selvbetjeningsløsningerne.

Sammenhæng og konsistens på tværs af selvbetjeningsløsninger

Ved at følge retningslinjerne i designsystemet og gøre brug af komponenterne som anbefalet, sikrer du, at brugerne ikke skal genlære nye komponenter på tværs af selvbetjeningsløsninger og måder de opfører sig på.

Din selvbetjeningsløsning er en del af et større kompleks af offentlige selvbetjeningsløsninger. Det kan du udnytte til din fordel. Den typiske bruger er måske kun sjældent i kontakt med lige netop din selvbetjeningsløsning, men samtidig i kontakt med en række andre selvbetjeningsløsninger. Brugeren får derfor nemmere ved at anvende lige netop din løsning, når alle selvbetjeningsløsninger følger de samme retningslinjer, og anvender de samme komponenter og dermed minder om hinanden.

Brugerne bliver mere effektive

Når brugerne genkender designet på tværs af selvbetjeningsløsninger bliver de mere effektive i deres interaktion med løsningerne.

Brugervenligheden øges

Brugerne føler sig trygge, når de kan genkende din løsning, fordi de genkender den fra de mange andre selvbetjeningsløsninger, hvor komponenterne fungerer på samme måde. Det øger brugervenligheden.

Brugeroplevelsen bliver bedre

Brugeroplevelsen bliver bedre, når du bruger mere tid på brugerinddragelse, brugertests, procesforbedringer og sammenhænge til andre selvbetjeningsløsninger i stedet for at bruge tid på design og komponenter.

Se eksempler på selvbetjeningsløsninger

Baggrund for designsystemet

Der er flere grunde til at Det Fælles Designsystem er blevet til, men særligt tre står frem som udfordringer, designsystemet skal løse.

  1. Det er ineffektivt med to forskellige manualer

    Indtil nu har der været to forskellige manualer at forholde sig til, når man skulle bygge selvbetjeningsløsninger. Det er ineffektivt og fordyrende. Nu er der kun ét designsystem at forholde sig til.

  2. Lav opdateringsfrekvens

    De eksisterende manualer er forældede og bliver sjældent opdaterede. Det Fælles Designsystem bliver løbende opdateret.

  3. Manglende åbenhed

    Det har været svært at præge indholdet i de eksisterende manualer. Det Fælles Designsystem er et open source system via GitHub. Alle kan derfor arbejde på designsystemet og bidrage til udviklingen.

To forskellige manualer

HTML-guiden

HTML-guiden

Virks Designmanual

Virks designmanual

Det Fælles Designsystem

Det Fælles Designsystem

Det Fælles Designsystem

Portalerne er to selvstændige brands

Borger.dk er et brand under Digitaliseringsstyrelsen, som henvender sig til og samler digital selvbetjening til borgere. Virk er et brand under Erhvervsstyrelsen, som henvender sig til og samler digitale selvbetjeningsløsninger til virksomheder. De to brands adskiller sig kommunikativt såvel som visuelt. Det Fælles Designsystem har indbygget temahåndtering. Dvs. uanset om du udvikler en løsning til borger.dk eller Virk, så anvender du den samme kode, mens nogle få komponenter bærer portalernes brands videre ind i løsningen. I stedet for at fokusere på borger.dk og Virk som brands er fokus målrettet den gode brugeroplevelse og et sammenhængende design på tværs af løsningerne. Det gælder, uanset hvilken portal løsninger er knyttet til. Borgere og virksomheder skal altså kunne genkende komponenter og mønstre i brugergrænsefladerne, uanset hvem en selvbetjeningsløsning er henvendt til og hvilken portal, der har ansvar for at udstille den.

Borger.dk

Borger.dk

Virk

Virk