Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
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
Indhold
Footer
Header
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.
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.
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
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).
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å.
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.
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.
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.
Footer
Footeren fungerer som sidens afslutning. Her får du mulighed for endnu en gang at angive informationer om løsningen: Hvilken myndighed, der er ansvarlig for selvbetjeningsløsningen, og hvordan brugeren får support og kommer i kontakt med dig som myndighed.
I footeren har du også mulighed for at sende brugere videre ved at linke ud af selvbetjeningsløsningen. Fx kan du angive ikke-løsningsspecifikke informationer i form af telefontider og lignende.
Vi anbefaler, at du afslutter din selvbetjeningsløsning med en footer.
Designsystemet giver mulighed for forskellige typer footer, som dækker forskellige behov. En footer kan være placeret i en række eller i 4 blokke af 3 kolonner.
Footer på en række
Footer i 4 blokke af 3 kolonner
Linjen skærer hele skærmens bredde og er af typen “ydre streg”. Footeren placerer sig enten i bunden af browservinduet eller 64px fra sidste element på siden ned til linjen.
Under linjen er der 24 px til overskrifter og tekst. Overskrifter og tekst er 16px med linjehøjde 24px. Herunder er der endnu 24px, inden siden slutter.
Footeren indeholder altid ansvarlig myndighed, tilgængelighedserklæring og cookieoplysning. Det er op til den enkelte myndighed at vælge en footer, som passer til den mængde indhold, der er rigtig for den konkrete selvbetjeningsløsning.