Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Design

Layout

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.

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)

Navigation (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). Placer så vidt som muligt det vigtigste indhold øverst.

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

Undersider