Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Plassering av knapper #1671

Pinned
mrosvik started this conversation in Patterns for public services
Discussion options

Ulike plasseringer og rekkefølger på knapper, særlig navigasjonsknapper, skaper unødvendig forvirring for brukerne. Det gjelder blant annet i navigasjonsflyter, i skjemaer, steg-for-steg-prosesser, modaler, popuper. Felles mønstre for knapperekkefølge og plassering kan bidra til en mer forutsigbar opplevelse.

Relevant:

You must be logged in to vote

Replies: 5 comments

Comment options

Jeg har sett litt på dette med plassering av tilbake knapper i forskjellige interfacer i det siste.

I tilfeller hvor man fyller ut et form, mener jeg det er viktig at tilbakeknappen er lett tilgjengelig ved første øyekast når man kommer til neste steg. Slik slipper man evt. å scrolle til bunnen for å gå tilbake om man ønsker å ende noe right off the bat. Har vært borti nettsider som også tar deg helt ut av skjemaet om man trykker tilbake, og man mister all progresjon. 
I slike tilfeller er det jo også fint å ha en annen muglighet for å komme ut av innfyllingen om det har blitt åpnet som en modal, med et kryss i hjørnet evt. Bare man skiller godt på "tilbake" og "lukk"

I mer åpne design som ikke har noe med skjemaer/forms å gjøre synes jeg fortsatt det er fint å ha tilbakeknapp godt tilgjengelig i topp-venstre. I disse tider hvor alle er godt vant med mobilinterfacer har det jo havnet i muskelminnet at man finner tilbake til forrige side enten ved en swipe eller en tilbakeknapp i topp-venstre.

image

Det finnes jo selvsagt flust av tilfeller, og det jo ikke så lett å sette rigide regler på hvordan ting skal oppføre seg. I tilfeller som bildet vist under, ønsker man kanskje å hoppe litt frem og tilbake mellom forskjellige steps i en progresjon - da kan det jo være veldig godt for brukeropplevelsen å tilby "tilbake" og "neste" i nærheten av hverandre, for å unngå unødvendig scroll/leting etter knapper.

image

You must be logged in to vote
0 replies
Comment options

Noen tanker om en favoritt-nøtt (etter oppfordring fra @Camulos :) ):

Tiltreder primærknapp først-regelen for skjema, altså venstre-aligned.

  • Det følger F-shape-reading-pattern, som jeg forstår skjema oftest er lagt opp etter (forutenom i dialoger?), og sikrer lik alignment som skjemafelter
  • Primærhandlingen (som også kan være en neste-knapp) er det brukeren søker når hen er ferdig med et skjema
  • Sikrer riktig tabrekkefølge (at man ikke havner på en tilbake- eller avbryt-knapp først)

Hvis caset er Neste/Tilbake-knapper, støtter jeg også tilbakeknapp over skjema, som inne på oven. Tilbakeknapp kan jo også plasseres til høyre for neste-knappen; Mener jeg leste noe forskning for lenge siden på at dette ikke var noe brukere intuitivt reagerte på eller merket, uten at jeg finner denne forskningen.
På mobil kan Primær-knappen være full-width for å ha større touchflate.

Visualisert:
Screenshot 2025年07月01日 at 14 55 48

You must be logged in to vote
0 replies
Comment options

mrosvik
Aug 19, 2025
Maintainer Author

I dag (19.august) hadde vi første møte i arbeidsgruppen. Vi har begynt å samle innsikt fra egne organisasjoner, og går gjennom dette i fellesskap for å vurdere hva vi skal lande på som en felles anbefaling.

Ulikheter vi har identifisert:

  • Plassering av Tilbake-knapp, Neste-knapp og Avbryt-knapp i skjemaer, dialoger og popover
  • Rekkefølge på primærknapp, sekundærknapp og tertiærknapp
  • Tilbakeknapp både øverst og nederst (Overflødig eller nødvendig?)
  • Begreper og språk
  • Hvordan tilbakeknappen i nettleseren oppfører seg (single-page-applications)

Noe av innsikten som ble delt og diskutert:

Veien videre


Deltakerne i arbeidsgruppen er fra Digdir, Nav, Skatteetaten, Oslo kommune, Brønnøysundregistrene, Entur og Politiet.

You must be logged in to vote
0 replies
Comment options

mrosvik
Nov 24, 2025
Maintainer Author

You must be logged in to vote
0 replies
Comment options

mrosvik
Dec 1, 2025
Maintainer Author

Vi har valgt å utsette publiseringen av artikkelen om plassering av knapper. Arbeidsgruppen har gjort et solid arbeid, men det gjenstår noen områder der vi ikke har et tydelig nok grunnlag for felles anbefalinger ennå.

Før vi konkluderer ønsker vi derfor å utvikle noen kjøreregler for hvordan vi sammen skal lande slike spørsmål fremover i mønster-samarbeidet. Dette gjør vi for å sikre en forutsigbar, åpen og faglig forankret prosess der flere perspektiver blir ivaretatt.

Kjørereglene utvikles nå og etter jul i samarbeid med hovedgruppen i mønster-samarbeidet. Når de er på plass, tar vi opp igjen arbeidet med plassering av knapper. @frankdahle holder i dette.

Tusen takk til alle som har engasjert seg så langt. Vi gleder oss til å fortsette arbeidet sammen med dere.

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pattern Patterns are best practice solutions for how a user achieves a goal.

AltStyle によって変換されたページ (->オリジナル) /