3 typiske fallgruver når man designer skjema

Ingen liker i utgangspunktet å fylle ut skjema, hverken på papir eller på nett. Du har vel sjelden gledet deg til å fylle ut selvangivelsen? Og kanskje er du en av dem som river seg i håret av unødvendig lange registreringsskjema, “jeg skal jo bare kjøpe og sende avgårde en blomsterbukett!”.

• Hva bør vi tenke på når vi designer skjema, og hvordan designer vi gode skjema for ulike formål?
• Hvilke fallgruver må vi unngå?

Fallgruve 1: Brukeren blir frustrert over å finne ut at skjemaet utvider seg i nye og uventede former

I web-baserte skjema er det vanskelig for brukeren å måle størrelsen på skjemaet. En av de vanligste fallgruvene under design av skjema er å unnlate å vise brukeren hvor mye informasjon hun skal fylle ut. Brukeren starter optimistisk å fylle ut skjemaet, for så å bli overrasket over å finne ut at skjemaet utvider seg under prosessen.
Dette kan høres ut som en selvfølge, men det syndes stadig mot denne første, gyldne regel:

Løsning fallgruve 1:
Fortell alltid brukeren hvor mange sider, eller seksjoner, skjemaet er delt inn i (hvis flere).
Eksempel fra www.blogger.com:

Steg 1: Opprett blogg
Steg 2: Navngi blogg
Steg 3: Velg mal.

Fallgruve 2: Brukeren har problemer med å svare på spørsmålet
Det kan noen ganger være vanskelig å forstå spørsmålene som stilles i skjema.
Plassen for å svare på et spørsmål er noen ganger for liten, det er for brukeren uklart hvilket spørsmål som henvender seg til henne, hun kan være usikker på hvilket svar som er passende, eller hun kan ha problemer med å finne det riktige svaret på spørsmålet.

Caroline Jarrett svarer på denne utfordringen i artikkelen Designing usable forms: The three-layer model of the form (pdf format, 172 Kb).

Løsning fallgruve 2:
Tenk på skjemaet som en samtale mellom deg og brukeren.

1. Hjelp brukeren med å forstå spørsmålet.
   Som i en vanlig samtale, hjelper det dersom begge parter bruker det samme vokabularet. Sett deg inn i brukernes vokabular, og sørg for å bruke de riktige ordene i skjemaet. Vær nøye når du utformer spørsmål, og test skjemaet på noen reelle brukere før du lanserer det.
2. Hjelp brukeren med å finne svaret.
   Noen svar er selvsagte (”Hva er navnet ditt?”). Andre svar kan være mer komplekse, feks når man skal fylle ut søknadsskjema om fødselspermisjon. Når du designer et skjema, tenk over hvor svaret kommer fra. Er det informasjon som du forventer at brukeren har i hodet sitt? Trenger hun å få tak i informasjonen et annet sted, fra en annen person eller organisasjon? Pek ut retningen for brukeren angående hvor hun kan finne svaret på spørsmålet du stiller.
3. Hjelp brukeren med å plassere svaret.
   Input-feltet må tilpasses informasjonen du spør etter.
• For lite input-felt er det samme som å avbryte brukeren midt i en samtale.
• For stort input-felt kan gjøre brukeren usikker på om hun har misforstått spørsmålet, siden svaret hun har i hodet er kort.
• Radio buttons eller check-boxes kan være et godt alternativ, men bare hvis alternativene stemmer overens med de svarene brukerne ønsker eller trenger å gi.
• Et åpent ”Annet”-felt kan være en god idé for å gi brukerne mulighet til å gi andre svar eller kommentarer.

Eksempel på et skjema som kan være vanskelig å fylle ut er søknad om fødselspermisjon. Ulike ting jeg var usikker på den gang jeg skulle fylle ut dette skjemaet, var:

• Hvordan er sammenhengen mellom fedrekvote og deling av fødselspermisjon?
• Er det arbeidsgiver eller trygdekontor jeg må avtale med dersom jeg ønsker ferieavvikling for permisjonen?
• Ved uttak av fedrekvote: Hva betyr ”morens dekningsgrad før fødselspenger”?

Ved å benytte brukernes sjargong og ordlyd, og ved å tilby forklaringer til noen av de kompliserte feltene, kunne dette skjemaet være langt enklere å fylle ut.

Se eksempel fra Storebrand.no for hvordan man kan tilby forklaringer til input-feltene, uten at forklaringene står i veien for feltene som skal fylles ut. Legg også merke til at det aktive feltet (her Om bilen) kommer i fokus ved bruk av bakgrunnsfarge:
Storebrand – Skadeforsikring bil:

Fallgruve 3: Skjemaet blir oppfattet som rotete og uoversiktlig, og tar dermed lengre tid å svare på.

Her er to eksempler på skjema for skademelding, fra hhv. Storebrand og Vesta:

1. Storebrand – Skademelding (reise)
   Her er input-feltene plassert vertikalt etter hverandre. Input-feltene står ikke på linje, og det er svært vanskelig å skanne ledetekstene:
2. Vesta – Generell skademelding
   Input-feltene er plassert under hverandre, og lengden på input-felt er tilpasset den informasjonen som blir etterspurt. Ledetekstene er plassert vertikalt for input-feltene. At ledetekstene er venstrejustert gjør dem enkle å skanne. Skjemaet oppfattes likevel som unødvendig rotete, pga at det er lite luft mellom feltene.

Disse eksemplene viser noen typiske utfordringer som vi ofte ser i skjemautforming. Utfordringen er hvordan vi skal kategorisere input-felt i gode kategorier, hvordan vi skal plassere ledetekster i forhold til input-felt, og hvordan vi skal sørge for en god flyt i skjemautfyllingen.

Skjema-guru Luke Wroblewski har skrevet en svært god artikkel om skjemadesign og plassering av ledetekster og input-felt. Her følger et kort sammendrag, med noen eksempler fra norske og utenlandske skjema:

Løsninger fallgruve 3:
Vertikale ledetekster plassert ovenfor input feltet.

Luke Wroblewski, Web Application Form Design:

Fordel: Den konsistente utformingen av input-felt og ledetekster reduserer øyebevegelser og tiden det tar å bearbeide informasjonen. Øynene trenger bare å bevege seg i én retning: Nedover.
Viktig: Angi ledetekstene i fet skrift for å utheve dem, og plasser dem nær de gjeldene input-feltene.
Bruk denne typen skjema når:

• Tiden man bruker for å fylle ut et skjema skal minimeres
• Svar på spørsmål er stort sett kjent for brukeren (navn, adresse, osv.)

Horisontale ledetekster plassert til høyre for input feltet.
Eksempel fra Komplett:

Luke Wroblewski, Web Application Form Design:

Fordel: Venstrejustering av ledetekstene gjør informasjonen enkel å lese, fordi brukerne kan skanne den venstre kolonnen med ledetekster opp og ned uten å bli forstyrret av input-felt.
Utfordring: Avstanden mellom ledetekst og input-felt blir noen ganger stor pga at noen ledetekster er vesentlig lengre enn andre. Fordi brukerne må “hoppe” mellom kolonnene for å skrive inn riktig data i riktig input-felt tar det lengre tid å fylle ut skjemaet.
Eksempel fra Euroflorist:

Bruk denne typen skjema når:

1. Dataene du spør etter ikke enkelt faller inn i en gruppe. Feks en adresse som består av flere deler.
2. Dataene du spør etter er (eller kan være) ukjente for brukerne dine. (Det er da en fordel at brukerne enkelt kan skanne hvilken informasjon det spørres etter).

Label er plassert til høyre for input feltet, men er høyrejustert

Eksempel fra Flickr:

Fordel: Assosiasjonen mellom ledetekst og input-felt er klar og tydelig.
Utfordring: I den vestlige verden leser vi fra venstre til høyre. Øynene våre foretrekker derfor en skarp linje fra venstre.
Bruk denne typen skjema kun når:
Det blir svært lang avstand mellom ledetekst og input-felt dersom man benytter venstrejustering.

Bruk av visuelle elementer i skjema

Eksempel fra NetShop:

Skjemaet over er hentet fra Netshop’s registreringsskjema for ny kunde. Sammenlign dette med Kompletts registreringsskjema for å se et eksempel på hvordan tydelige bokser hjelper til å skille elementene fra hverandre og gjøre skjemaet enklere å bruke:

Les hele artikkelen til Luke Wroblewski.

Luke kommer forøvrig til Lillehammer på årets Yggdrasil konferanse 15.-16. oktober. Han er keynote foredragsholder, og skal også holde et halvdags seminar om visuell kommunikasjon, og hvordan vi kan utnytte visuelt design for å skape bedre brukeropplevelser. Han lover presentasjoner, interaktive diskusjoner og praktisk oppgaveløsing i forbindelse med seminaret.

Få det med deg, sett av datoen nå!

Har du kommentarer, eller eksempler på gode skjema til etterfølgelse? Vi hører gjerne fra deg!