Plassering av knapper

[mrosvik]

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:

• Nav: https://aksel.nav.no/god-praksis/artikler/navigasjon-i-skjemaer?tema=skjemaer
• Ulike navigeringsknapper innsiktsbibliotek#24
• Tilbake-knapp: Forventet plassering
• Pattern: Button placement and order #508

[remyeik]

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.

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.

[itskari]

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:

[mrosvik]

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:

• Morten Tollefsens arbeidsnotat om plassering og rekkefølge på knapper: https://mortentollefsen.no/artikler/knapper-arbeidsnotat.html
• Brukertest med blinde og svaksynte fra Brønnøysundregistrene: https://player.vimeo.com/video/713674977?h=31aae91dc0 . Videoen viser blant annet hvorfor venstrejustering av knapper er en fordel.
• Skatteetatens retningslinjer for plassering av knapper: https://www.skatteetaten.no/stilogtone/monster/interaksjon/knapperoglenker/
• Artikkel om navigasjon i skjemaer fra Nav: https://aksel.nav.no/god-praksis/artikler/navigasjon-i-skjemaer#8c27bd3076b1
• Artikkel om Knappegruppering fra Oslo Origo (Punkt): https://punkt.oslo.kommune.no/latest/maler-og-monstre/button-groups/
• A/B-test fra Entur rundt rekkefølge på knapper på mobil

Veien videre

• Diskutere innsikten videre
• Vurdere om vi trenger mer innsikt
• Lande på felles anbefalinger for ulikhetene vi i dag har
• Skrive artikkel: https://pr-3968.designsystemet.no/no/patterns/button-placement-and-order

---

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

[mrosvik]

Første utkast: https://www-pr-4251.victoriousglacier-eb9399b9.norwayeast.azurecontainerapps.io/no/patterns/button-placement-and-order/

[mrosvik]

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.

[mrosvik]

Jeg har i dag (22.april 2026) fått støtte fra arbeidsgruppen om å publisere artikkelen slik den står nå.