Rekkefølge på knapper og lenker

Hvordan vi plasserer og utformer knapper og lenker påvirker hvor enkelt folk får til oppgaven og 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 se mer informasjon. Følg skriveregler for lenker.
Knapper bruker du når handlingen skjer på siden brukeren allerede er, for eksempel lukke eller sende inn skjema. Følg skriveregler for knapp.
Knapper plasser du fra venstre mot høyre av hensyn til dem med begrenset synsfelt. Primærknapp plasseres først, deretter sekundærknapp. Et unntaket er når «Neste» er hovedknappen – den plasseres etter «Forrige» for å unngå språklig forvirring.
Det skal som regel bare være én primærknapp på en og samme side.
Unngå disabled/deaktiverte knapper.

Merk: Selv om anbefalingene gjelder generelt, har vi hatt publikumsløsninger i bakhodet da vi laget dem. Vi mener at disse retningslinjene står støtt overalt, men for interne løsninger kan det likevel være argumenter for andre varianter.

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ærknapp. 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 fra 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 eller at vi trenger en tydelig «call to action» 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:
MegaButton kan settes opp slik at den kodemessig er en lenke, men beholder sitt vanlige utseende.

Å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.