Type knapper i skjemaer

Neste

Lenke eller knapp til neste samling av spørsmål. Ikke gjør neste-knappen utilgjengelig for brukere selv om den ikke kan brukes. Vis heller en tilbakemelding om at det finnes ubesvarte spørsmål, eller feil.

Tilbake

Lenke eller knapp til forrige samling av spørsmål.

Send

Sender brukerens svar til systemene våre, hvor de behandles. Ordbruken på send knappen vil naturligvis variere avhengig av hvilken type skjema du lager.

Avbryt

Avbryt-knappen brukes for å avslutte utfyllingen.

Det er viktig å gi brukeren mulighet til å angre avbryt-handlingen. En god løsning kan være å vise en modal. Mange av søknadene våre lagrer brukernes svar automatisk. Husk å fortelle brukeren hvor lenge svarene lagres i modalen. Det betyr at brukeren kan ta et mer informert valg.

Nielsen-Norman Group har skrevet en god artikkel med ting å tenke på hva gjelder avbryting og tilbakestilling.

Stegindikatorer

En typisk stegindikator skal fortelle brukeren hvor hen er i utfyllingen. Disse har vært mye diskutert i NAV. Noe av det går på utforming, men noe går også på brukeropplevelse. Løsningen på mange av problemene kan faktisk være å droppe stegindikatoren.

Noen spørsmål du kan stille deg før du legger til en stegindikator:

• Trenger brukeren å navigere mellom ulike grupper spørsmål?
• Gir stegindikatoren oversikt?
• Forteller stegindikatoren hvor lang tid det vil ta å gjennomføre?
• Er stegindikatoren demotiverende for brukeren?

Stegindikatoren vi har utviklet i NAV kan brukes effektivt på desktop, både horisontalt og vertikalt. Den er derimot mindre effektiv på mobil, og krever andre måter å tenke på. Dette er noe vi jobber med, men i mellomtiden vil vi heller anbefale å droppe stegindikatoren på mobil enn å inkludere den om dere har problemer med den.

Har du fortsatt et ønske om å inkludere stegindikator i skjemaet ditt kan det være nyttig å lese denne artikkelen om skip-links.

Plassering av elementene

Knappene bør plasseres etter alle spørsmålene. Dette inkluderer tilbake-knappen. Stegindikatoren skal plasseres før spørsmålene.

Rekkefølge på knappene nederst

1. Neste. Neste-knappen burde være lengst til høyre, for å gjenspeile veien brukeren "går" (mot mål). Denne erstattes av send-knappen når skjemaet er ferdig utfylt.
2. Forrige. Av samme grunn burde tilbakeknappen plasseres til venstre. Neste og forrige knappen plasseres dermed ved siden av hverandre i grensesnittet.
3. Avbryt. Dette er den handlingen færrest skal utføre, og burde dermed komme til slutt, og under neste og forrige knappen.

En viktig huskeregel når vi designer og utvikler produkter er at det visuelle utrykket skal speile DOM-en. Derimot er det viktig å vite når du kan bryte denne regelen. I vår anbefaling vises neste-knappen lengst til høyre, men kommer øverst i DOM-en. Resultatet blir at skjermlesere speiler viktigheten, og ønsket bruk, heller enn visuell framstilling. Teknisk kan dette gjennomføres ved enkle CSS-grep.

Eksperimentering

Denne artikkelen er ikke ment som en fasit. Noen vil teste andre skjema-løsninger. I enkelte tilfeller kan det være gode grunner til dette, særlig i tilfeller hvor det er teknisk kompliserte systemer bak, med mye smart teknologi. Forslagene i denne artikkelen vil derimot fungere godt for mange av løsningene, og følger dagens anbefalte retningslinjer.

Om du tester andre bruksmønstre vil vi gjerne høre fra deg, for å oppdatere denne artikkelen om det kan komme andre til nytte.