Gå til sidens indhold

Kom i gang

Regler og principper for layout

Dette afsnit beskriver regler og principper for struktur og placering af komponenter i en selvbetjeningsløsning. Et godt layout er harmonisk, ensartet, logisk opbygget, og understøtter brugerens handlinger. Det er således både behageligt for øjet og let for brugeren at anvende.

Grid (12 kolonner)

Det Fælles Designsystem baserer sit responsive layout på en opdeling af siden i 12 lige bredde kolonner med 32px (16px på hver side af en kolonne) afstand mellem hver kolonne. Det giver ro, overskuelighed og forudsigelighed, når man placerer sidens komponenter indenfor et grid og får en side og dens søskendesider til at fremtræde sammenhængende. Det har positiv betydning for billedstørrelser og andre elementer.

Responsivt med break points

Det Fælles Designsystem er responsivt og tilpasser sig således automatisk det tilgængelige vinduesareal.

Sidens break points – de værdier, hvorefter siden automatisk tilpasser sig arealet – er:

  • Desktop/stor skærm: 1200px
  • Desktop/middel skærm: 992px
  • Tablet: 768px
  • Mobil: 576px

Baseline grid

8 point

I Det Fælles Designsystem går alle lodrette dimensioner, højder på komponenter og afstande i højderetningen op med en faktor 8. Dvs. 8px, 16px, 24px, 32px, 40px, 48px, 56px, etc. Det er designsystemets baseline grid.

Gentagelsen af værdier skaber ro og balance på tværs af det visuelle layout og mellem sidens lodrette elementer. For tekst er det ikke tekstens størrelse, men linjehøjden, der skal gå op i en faktor 8.

Du kan læse mere om baseline grid i artiklen 8-Point Grid: Vertical Rhythm.

4 point

Ikoner, typografi og nogle elementer i komponenter kan justeres til et 4px grid.

Se Material Designs forklaring af baseline grid i artiklen Spacing Methods - Baseline.

Grundlæggende struktur

En selvbetjeningsløsning er delt op i tre overordnede områder.

  • Header
  • Indhold
  • Footer

Header

Viser opbygningen af en side i designsystemet

Indhold

Viser opbygningen af en side i designsystemet

Footer

Viser opbygningen af en side i designsystemet

Headeren identificerer portal, ansvarlig myndighed og den bruger, der er logget ind med NemLog-in. Headeren fungerer også til navigation og overordnet styring af selvbetjeningsløsningen.

Headeren er ens på tværs af trin og undersider i en given selvbetjeningsløsning. Den er således et “ankerpunkt”, som brugeren altid kan vende tilbage til og orientere sig ved.

Se header-komponenten

En header består af et antal rækker, som vist nedenfor.

  • Række 1 og 2 er obligatoriske
  • Række 3 til 5 er valgfri

Når du laver en header, bør du følge disse principper:

  • Brug kun de nødvendige rækker
  • Hold altid rækkefølgen, uanset kombinationen

OBS: Jo enklere navigationen er, desto bedre for brugeren. Brug derfor kun række 3 til 5, knapper, links og ekstra navigation, når det er absolut nødvendigt.

Brug kun rækker 3,4,5, samt knapper, links og ekstra navigation, når det er nødvendigt.

Viser opbygningen af designsystemets header

Række 1 (obligatorisk)

Portal-logo, NemLog-in-oplysninger og ”Log af” knap.

Række 2 (obligatorisk)

Selvbetjeningens navn (løsningstitel), ansvarshavende myndighed og eventuelt support/kontakt oplysninger.

Række 3 (frivillig)

Sidenavigation (topnavigation) i løsningen, eventuelt knapper, eventuelt ekstramenu.

Række 4 (frivillig)

Flere sorteringsmuligheder, eventuelt ekstramenu, eventuelt knapper.

Række 5 (frivillig)

Funktionslinks (igangsætter system- eller OS-funktionalitet, fx gem, print osv.)

En header med fem rækker er meget tilpasningsvenlig og gør det muligt at servicere både simple og komplekse løsninger. Den er også kompleks at anvende for brugerne. Du bør derfor udgangspunkt anvende færre end fem rækker i din header.

Links

Tilgængelighed: sidestruktur og header

Indhold

Det specifikke indhold i selvbetjeningsløsningerne kan variere. De konkrete retningslinjer for layout er derfor erstattet af nogle principper, som du skal betragte som anbefalinger, da de ikke stiller krav om, hvordan en given selvbetjeningsløsning specifikt skal se ud. Principperne retter sig særligt mod selvbetjeningsløsninger til lavfrekvente og ikke-professionelle brugere. De er følgende:

Gør det let at skimme indholdet

Lad fx overskrifter, labels, brødtekst, inputfelter og primærknap flugte til venstre ned ad siden, så øjets flugt primært foregår i en bevægelse op og ned ad siden (i én kolonne).

Grafisk visning af en side som er let at skimme

Gør løsningen let og luftigt

Dvs. gør god brug af “luft” (white space). Det gør sidens indhold lettere at overskue og forstå.

Luft omkring elementer

Vis hvad der hænger sammen med hvad

Skab fx klare gestalter: Placer elementer, der hører sammen, tættere på hinanden, og adskil/fjern elementer, der ikke hører sammen, fra hinanden.

Billedet viser gruppering af elementer

Del indholdet op i små bidder

Gør layoutet overskueligt ved at dele løsningen eller siden op i mindre bidder. Fx et spørgsmål pr. side i en trinbaseret løsning. Brug overskrifter, underoverskrifter og lister til at skabe overskuelighed på teksttunge sider.

Gruppering af indhold i små bidder

Brug et responsivt grid

Brug et grid-system til fx til at styre dit layout. Grid skaber struktur i informationer. Responsivt grid tilpasser sig desuden skærmformatet.

Grid’et i designsystemet

Eksempler på selvbetjeningsløsninger

Side med gridsystem