Knapper og lenker

Folk må «finne, forstå og få til» når de kommer til oss for å gjøre noe. Hvordan vi plasserer og utformer knapper og lenker påvirker hvor enkelt folk får oversikt over siden. Det påvirker også hvordan skjermlesere leser opp innholdet.

Generelt gjelder dette for knapper og lenker:

Lenker bruker du når folk skal navigere til en ny side for å fullføre en oppgave eller lete etter informasjon. Følg skriveregler for lenker.
Knapper bruker du når handlingen skjer utføres på siden, for eksempel åpne, lukke eller sende inn skjema. Følg skriveregler for knapp.
Knapper plasseres fra venstre mot høyre av hensyn til de med begrenset synsfelt. Primærknapp plasseres først, deretter sekundærknapp(er). Et unntaket er Forrige/Neste, der «Neste» er hovedknappen og plasseres etter «Forrige», for å unngå språklig forvirring. Det skal som regel bare finnes én primærknapp på en og samme side.
Unngå disabled/deaktiverte knapper.

Merk: Selv om disse anbefalingene gjelder generelt, har vi hatt publikumsløsninger i bakhodet da vi laget dem. Vi mener at retningslinjene står støtt overalt, men for for interne løsninger kan det likevel være argumenter som veier tyngre enn «finne, forstå og få til».

Plasser knapper fra venstre

Som hovedregel plasserer vi knapper fra venstre, og fyller på mot høyre. Dette er en fordel for brukere som har begrenset synsfelt, eller har behov for mye forstørrelse, samtidig som det understøtter skanning på siden ved at den viktigste informasjonen kommer først i leseretningen. Primærknapp plasseres først, deretter sekundærknapp(er). Dersom du må skille mellom sekundærknappene eller at en sekundærknapp får for mye oppmerksomhet opp mot primærhandlingen, kan du bytte ut sekundærknappen med en tertiær-knapp. Knappene skal ha samme plassering i kode som visuelt, slik at skjermleser leser opp slik det vises på skjermen. På mobil stilles knappene opp med primærhandlingen først/øverst, etterfulgt av sekundær- og tertiærhandlinger.

Gjør slik:

Ikke slik:

Forrige- og nesteknapper

Ved forrige- og nesteknapper er det et unntak til regelen om at primærknappen plasseres først. For å unngå språklig forvirring anbefaler vi å venstrestille knappene, men at sekundærknappen likevel kommer først.

Gjør slik:

Ikke slik:

Når hovedhandling er navigasjon

Når brukeren tas til en ny side skal vi som hovedregel bruke lenker. Hvis du har mange likeverdige lenker bør du bruke en lenkegruppe. Men når det er snakk om hovedhandlinger som vi vil fremheve blir gjerne en vanlig lenke for lite synlig. Enkelte av komponentene i designsystemet er derfor laget slik at de teknisk sett er lenker, men fremstår visuelt større og tydeligere enn en standard lenke. Dette gjelder for eksempel MegaButton og NavigationTile.

Gjør slik:

Gjør slik:
NavigationTile er kodet som lenke:

Gjør slik:
MegaButton kan settes opp slik at den kodemessig er en lenke, men beholder sitt vanlige utseende.

Ikke slik:
Unngå å bruke vanlig primærknapp for å navigere til ny side:

Ikke slik:

Åpne i ny fane eller vindu?

Lenker skal normalt åpnes i samme vindu

Når lenker åpnes i samme vindu sikrer vi en konsistent og forutsigbar brukeropplevelse fordi brukerens egne lenkeinnstillinger i nettleseren videreføres.

Unntak: lenker åpnes i ny fane eller som nedlastning

hvis brukeren risikerer å miste innhold ved å klikke på lenken. Eksempel: Ved utfylling av skjema.
hvis du lenker til innhold som brukeren trenger for å gjøre en oppgave. Eksempel: Veiledning.