Gå til sidens indhold

Komponenter

Headers

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

Anvendes til

Brug headeren til at give brugen et “ankerpunkt”, der er ens på tværs af trin og undersider i selvbetjeningsløsningen.

Brug headeren til at kommmunikere portal, NemLog-in-oplysninger, ansvarlig myndighed, evt. med kontakoplysninger.

En eventuel overordnet navigation (topnavigation) skal også placeres i headeren, så brugeren altid kan navigere rundt i selvbetjeningsløsningen.

Anvendes ikke til

Anvend ikke headeren andre steder i løsningen end i toppen af siden.

Brug ikke topnavigationen som faneblad, anvend da fanebladskomponenten.

Vejledning

En header består af et antal rækker med forskelligt indhold. Jo flere rækker jo mere kompleks en header. Designsystemet giver mulighed for op til 5 rækker og minimum 2 rækker.

  • 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:

  • Jo enklere navigationen er, desto bedre for brugeren.
  • Brug kun række 3, 4, 5, med knapper, links og ekstra navigation, når det er absolut nødvendigt.
  • Hold altid rækkefølgen, uanset kombinationen
Viser alle rækker i en header

Headerens rækker forklaret

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

Web Accessibility Tutorials: Headers

Standard header

Standard header med navigation

Kompleks header med alle rækker

Header med større logo og brugeroplysninger