Guide: Godt skjemadesign

SkjemadesignSkjema sjekkliste

17 prinsipper for godt skjemadesign

Skjemaer brukes mye hos Origo og i Oslo kommunes lÞsninger, og bÞr derfor vÊre konsekvente, ryddige og enkle Ä forstÄ. Det er mye godt innhold om det Ä lage bra skjemaer og det er ikke helt enkelt.

FĂžrst og fremst bĂžr du vurdere om du trenger et skjema i det hele tatt. Bruk tid med teamet og gjĂžre innsikt i hva dere trenger Ă„ vite, og hva dere skal gjĂžre med det dere samler inn i skjemaet.

Vi har samlet 17 retningslinjer du bÞr ta stilling til nÄr du Þnsker Ä designe eller bygge et godt skjema. Vi anbefaler ogsÄ Ä ta en titt pÄ lenkene nederst pÄ siden.

1. Skriv en forklarende intro 👋

FĂžr du i det hele tatt begynner med input-felter og filopplastning kan det vĂŠre lurt Ă„ skrive en kort, forklarende intro til skjemaet ditt. Her kan du gjerne beskrive:

  • Hvor langt skjemaet er, for eksempel hvor mange steg eller hvor lang tid det forventes Ă„ ta Ă„ fylle det ut. PĂ„ denne mĂ„ten kan brukeren gjĂžre en vurdering pĂ„ om de skal fylle ut med en gang, eller vente til de har bedre tid.
  • Om de trenger noe for Ă„ fylle ut skjemaet, for eksempel dokumenter, filer, bilder, datoer, fĂždselsnummere eller lignende. PĂ„ denne mĂ„ten sikrer du at brukeren fyller ut skjemaet ferdig, og ikke mĂ„ avslutte midt i for Ă„ finne ytterligere dokumentasjon eller lignende.

Obs: Dersom brukeren trenger dokumentasjon for Ă„ fylle ut skjemaet, bĂžr du gi brukeren mulighet til Ă„ lagre skjemaet underveis for Ă„ komme tilbake til det senere.

Eksempel pÄ introtekst.

2. Ha alle felter under hverandre pĂ„ Ă©n linje đŸȘœ

Plasser skjemafeltene under hverandre med venstrestilt tekst, med noen unntak (f.eks. postnummer og poststed og landskode og telefonnummer).

PrÞv Ä holde skjemaomrÄdet til maks 500 px bredt. Dette gir bedre lesbarhet og gjÞr det enklere Ä skanne over skjemaet.

PÄ mobil burde skjemaelementene fylle bredden pÄ siden, men fortsatt holde seg til satt stÞrrelse der vi vet lengden pÄ inputteksten.

3. Alltid bruk label og plasser den over tekstfeltet 🙋

Plasser alltid label over tekstfeltet, sammen med eventuell hjelpetekst. Å plassere teksten pĂ„ venstre side gjĂžr det vanskeligere Ă„ scanne over skjemaet.

Husk pÄ at en god label:

  • Er konsis og konsistent slik at brukeren skjĂžnner hva som forventes av hen
  • Om mulig: kun er 1-3 ord og under 20 bokstaver, inkludert mellomrom
  • Ikke har bare store eller bare smĂ„ bokstaver
  • Ikke inneholder kolon

4. Ikke bruk plassholdertekst som hjelpetekst eller label 👀

Tekstfeltet har mulighet for plassholdertekst, men unngÄ Ä bruke plassholdertekst med meningsbÊrende eller viktig innhold. Den er nemlig ikke tilgjengelig for skjermlesere og kan skape forvirring for brukeren. GÄ heller for ledetekst og/eller hjelpetekst.

PrÞv generelt Ä unngÄ plassholdertekst, vi vet ogsÄ at folk kan oppleve det som at det allerede er utfylt og dermed hopper de over det.

5. Hjelp brukeren pĂ„ vei med gode hjelpetekster đŸ«¶

Hjelpetekstene skal brukes for Ă„ gi ytterligere informasjon om hva som forventes av brukeren. Hjelpeteksten skal supplere label (ledetekst) og aldri erstatte den.

Teksten skal vÊre kort og konkret, og forklare brukeren hva hen skal gjÞre. Det er viktig Ä vurdere om hjelpetekst virkelig er nÞdvendig, eller kan label forbedres til Ä vÊre lettere Ä forstÄ og dermed fjerne behovet for ekstra forklaring?

I Punkt har vi to typer hjelpetekster: den som skrives rett under label og ekspanderende hjelpetekst, der brukeren aktivt mÄ klikke for Ä fÄ mer informasjon. Ekspanderende hjelpetekst brukes nÄr det er behov for en lengre forklaring som gÄr mer i dybden. Ofte holder det med vanlig hjelpetekst over én linje.

NĂ„r du skriver hjelpetekster er det greit Ä 

  • Holde teksten kort
  • Bruke enkle ord som alle brukere kan forstĂ„
  • UnngĂ„ faguttrykk og vanskelige ord sĂ„ langt det er mulig (hvis du mĂ„ bruke spesialiserte temaer, bĂžr det alltid vĂŠre tilgjengelig hjelpetekst).

Noen ganger kan det ogsÄ vÊre hjelp i Ä legge til format og forventet antall direkte i label-teksten.

Tre varianter av hjelpetekst.

6. Lag grupper - plasser det som hþrer sammen, sammen 👯

Ofte har vi forskjellige temaer (eller kategorier) i et skjema. Derfor er det lurt Ä gruppére de feltene som hÞrer sammen i en gruppe for Ä gjÞre det enklere for brukeren Ä navigere seg gjennom skjemaet.

En eller flere skjemakomponenter sammen utgjÞr en skjemaseksjon, og et skjema kan bestÄ av en eller flere seksjoner.

Du kan enten gruppere gjennom overskrifter og visuell kategorisering, eller dele opp skjemaet i flere steg.

To muligheter for gruppering, enten med titler eller med stegviser.

7. Merk det som er valgfritt (eller det som er obligatorisk) 🌟

Å markere obligatoriske felter i skjema med en asterisk* har blitt vanlig, men det kan fĂžre til visuell stĂžy. Det er bedre Ă„ merke valgfrie felt med “(valgfri/valgfritt)”, slik at det er tydeligere for brukerne hvilke felter som mĂ„ fylles ut. Å bruke en asterisk kan vĂŠre forvirrende for noen. Å plassere den med liten tekst over skjemaet er heller ikke alltid tilstrekkelig for forstĂ„else. Likevel sier UUtilsynet at det er obligatoriske felter som skal merkes pĂ„ grunn av skjermlesere. Her mĂ„ ditt team ta en vurdering av hva som vil fungere best i deres lĂžsning.

I Punkt har du mulighet til Ä velge enten valgfritt-tag eller obligatorisk-tag. Bruk kun én av variantene i din tjeneste eller lÞsning for Ä unngÄ Ä forvirre brukeren. Selv om du har mulighet for begge, anbefales det Ä markere de valgfrie feltene.

Skjema med valgfrie felter markert, og skjema med obligatoriske felter markert.

8. 
 Men trenger du egentlig Ă„ spĂžrre om det? đŸ€”

SpĂžr deg selv: om dette feltet er valgfritt, trenger vi egentlig Ă„ spĂžrre om det i det hele tatt? Ikke putt inn “standard”-felter bare fordi det er nice to have. Det er ofte ikke nĂždvendig Ă„ spĂžrre om informasjon som mĂ„ lagres og behandles pĂ„ en god mĂ„te, med mindre vi trenger informasjonen til vĂ„rt formĂ„l. Du kan lese mer om dataminimeringsprinsippet hos Datatilsynet som skriver mer om dette.

Og du, husk at du bÞr ha god grunn til Ä spÞrre om kjÞnn i et skjema, er det egentlig nÞdvendig? Generelt er det greit Ä tenke over om man bruker inkluderende og nÞytralt sprÄk, KS har en fin oversikt over gode prinsipper for inkluderende sprÄk som kan vÊre verdt en titt.

9. Tekstfeltet skal vére like bredt som innholdet 📏

For Ä gi brukeren en indikasjon pÄ riktig utfylling og for Ä hjelpe dem pÄ veien er det viktig at selve tekstfeltet kun er like stort som innholdet som skal tastes inn. For eksempel ved telefonnummer (som vi vet er 8 tegn), CVC-kode (som vi vet er tre tegn) eller postnummer (som er fire tegn).

10. Dropdown/select er ikke alltid det beste valget: prĂžv heller Ă„ liste ut elementene 📄

Det er ikke alltid at dropdown er det beste valget. Har du veldig mange alternativer kan det vÊre en god lÞsning, men har du mellom 2-6 kan det vÊre en idé Ä liste dem ut i stedet.

Her har Team Booking lĂžst det helt perfekt:

Eksempel hentet fra Booking sin digitale lĂžsning.

11. Keep it short and sweet! 😚

Hold skjemaet ditt sÄ kort som mulig! Det Þker sjansene betydelig for at folk fyller ut.

12. Er det noe vi kan fĂ„ gratis? Ja, da burde vi det 💾

F.eks fĂždselsnummer sier noe om folkeregistrert kjĂžnn, postnummer sier noe om poststed. Ikke be folk fylle ut om de kan slippe.

I tillegg kan det hende vi allerede har informasjon om brukerne vÄre, spesielt om de har registrert seg eller brukt tjenestene vÄre tidligere, dette gjÞr det mulig for oss Ä hjelpe brukerne med Ä fylle ut skjemaene vÄre mer effektivt. Tenk ogsÄ over om det er mulig Ä koble seg til noen offentlige registre, f.eks fra Folkeregisteret i en sÞknad eller informasjon om inntekt fra Altinn.

13. Opt-in, ikke opt-out ✅

IfĂžlge GDPR kan vi ikke lenger forhĂ„ndsvelge at brukerne skal motta nyhetsbrev, reklame eller annen relevant informasjon. De mĂ„ aktivt gi samtykke (“opt-in”) for Ă„ motta slike ting, og det er ikke lenger tillatt Ă„ ha “opt-out” som standardvalg.

14. Merk feil tydelig og i sammenheng med der feilen har oppstĂ„tt ❌

Det er viktig Ä gi brukeren god hjelp dersom de har fylt ut feil. Feltet skal markeres tydelig og feilmeldingen mÄ vÊre lett Ä forstÄ. Gi brukeren en vei videre for hvordan de skal fikse feilene, gi dem god hjelp.

Husk at:

  • Skjemaet valideres nĂ„r brukeren prĂžver Ă„ sende inn skjemaet eller det gjeldende steget
  • Hvert skjemafelt som er feil eller mangelfullt skal merkes med en statusfarge for feil og fĂ„ en beskrivende feilmelding. Styling pĂ„ dette ligger inne i designsystemet Punkt.
  • NĂ„r brukeren retter feilen, skjules feilmeldingen med Ă©n gang bĂ„de pĂ„ feltet, og gĂ„r tilbake til standard farge

Det er viktig Ä skrive gode og beskrivende feilmeldinger. Under ser du et eksempel pÄ en god oppbygning av feilmeldinger:

Du kan lese enda mer om hvordan du kan skrive gode meldinger i Drive-mappen kalt Retningslinjer og prinsipper for meldinger .

15. Ha en tydelig call-to-action 🔮

Fortell brukeren hva som skjer etter at de er ferdig med skjemaet og trykker seg videre. Dersom det er flere steg i skjemaet, bruker du knapp med “forrige” og “neste”. I siste steg mĂ„ det komme tydelig frem hva som kommer til Ă„ skje nĂ„r brukeren trykker pĂ„ knappen, for eksempel med “Send inn skjema” eller “Send til godkjenning”.

Knappen skal inneholde det som faktisk kommer til Ă„ skje, et verb og den faktiske handlingen sĂ„ konkret som mulig. F.eks: send inn skjemaet, avbryt bestillingen, se oppsummering og betal eller slett kontoen, unngĂ„ “OK”, “Klikk her” eller “Ferdig”.

16. Utviklerne mĂ„ pĂ„ banen đŸ§‘â€đŸ’»

Hvis man for eksempel koder skjemaet slik at hvert felt vet hva det er, altsÄ hvilken type input man ber om, kan man for eksempel fÄ egne tastaturer for hvert felt pÄ mobile enheter. Det vil si at nÄr vi for eksempel ber om et nummer, sÄ fÄr brukeren opp nummertastaturet pÄ mobilen. Dette gjÞr utfyllingen uendelig mye enklere for folk som fyller ut skjema pÄ mobil. Les mer om dette pÄ UUtilsynet sine sider.

Det er generelt viktig Ă„ sette opp skjemaet semantisk og kode det optimalt for skjermlesere.

17. Design skjemaet som en samtale! 💬

Daniel i Netlife har skrevet en fantastisk artikkel om hvordan du burde sette opp skjemaet som en samtale.

Det kan ogsĂ„ vĂŠre lurt Ă„ lese seg opp pĂ„ skjemadesign! đŸ€“

Her er noen gode ressurser for Ă„ lĂŠre enda mer om det Ă„ sette opp et godt skjema: