Skrev ikke du over 2000 ord om skjemadesign for ikke så lenge siden?

- Deg, akkurat nå?

Jo, jeg har skrevet om skjemadesign tidligere. Der skriver jeg om at et godt skjema må være lett å forstå og enkelt å bruke, og hvilke grep du, som designer, kan gjøre for å lage et slikt skjema — men det holder ikke! Et godt skjema styrer også brukernes forventninger, gir dem oversikt og forutsigbarhet, styrer dem i riktig retning og gjør ting enklere (hvis det er mulig).

Å designe enkeltelementene i skjema på en god og brukervennlig måte er et flott utgangspunkt, men vi må også ta hensyn til brukernes situasjon og våre egne forretningsmål.

God forventningsstyring

Se for deg situasjonen: Du skal søke boliglån. Du har mer enn nok å tenke på  for  du må planlegge flytting, barna trenger middag (og konstant oppmerksomhet), og kjæresten må jobbe overtid så kan ikke du bare ordne den lånesøknaden, takk! Endelig har du et kvarter ledig, og du klikker deg inn på nettsiden til favorittbanken din.

Du begynner å fylle ut et boliglånskjema, noe som i seg selv kan være en utfordring, og etter å ha holdt på i ti minutter får du plutselig beskjed om å laste opp de tre siste lønnsslippene dine. De du fremdeles får i den fysiske postkassen din hver måned. Så du reiser deg fra maskinen, roter i samtlige skuffer i huset til du endelig finner lønnslippene, som du mirakuløst nok ikke har kastet, tar bilder av dem med mobilen (for du eier jo ikke en scanner), overfører bildene til datamaskinen din, og setter deg ned for å fullføre skjemaet. Og så får du beskjed om at du har vært for lenge borte fra maskinen og må starte på nytt.

Det kunne vært unngått så enkelt: En kort setning og en nummerert liste kan spare flere megatonn med raseri.

Bilde fra et skjema som forventningsstyrer brukeren for hva du trenger før de starter

Det skal ikke mer til enn et par setninger for å gi brukerne all informasjonen de trenger for å fylle et skjema i ro og mak. Dette er spesielt viktig når det gjelder kompliserte og omfattende skjema, som søknad på boliglån, studieplass eller dagpenger -  skjema som ofte krever vedlegg du ikke alltid har lett tilgjengelig.

Hvis du i tillegg opplyser om hvor mye tid det vil ta å fylle ut skjemaet før brukeren har begynt, hjelper du folk å planlegge tiden sin og legger til rette for at når de setter seg ned er de godt forberedt til å gi den informasjonen du trenger. Hvis du har mulighet kan du i tillegg mellomlagre brukernes data, for å la dem fortsette senere, dersom du kan gjøre det på en trygg måte som ikke bryter med personvernet.

Bilde av Nav sitt skjema som gir brukeren mulighet til å lagre underveis
NAV hjelper folk å navigere et komplisert lovverk gjennom enkle søknadsdialoger hvor du kan fortsette der du slapp.

For å se et godt eksempel fra den virkelige verden, kan du forsøke å finne ut hvor stort du kan bygge hos Direktoratet for byggkvalitet. De forventningsstyrer godt, og spør om du vil starte på nytt eller fortsette dersom du besøker skjemaet for andre gang. Da kan du enten fortsette der du slapp hvis du måtte finne frem ekstra informasjon, eller se resultatet av veiviseren på nytt hvis du ikke skrev det ut eller lagret det sist du fylte det ut.

Hvis det kan tenkes at brukerne ikke har tilgjengelig det du ber om umiddelbart, er det alltid positivt å minne dem på hva de trenger før de begynner å fylle ut. Dette gjelder også ting som du selv kanskje tenker at er helt naturlig at brukerne har kontroll på, men som spesielt uerfarne brukere kanskje ikke vet at de bør finne frem. Hvis du skal søke om boliglån for første gang, vet du kanskje ikke hvilke papirer du må ha tilgjengelig.

Navigasjon

God forventningsstyring handler også om navigasjon. Å gi brukerne en god oversikt over hvor de er, hvor de er på vei, og mulighet til å gå tilbake for å endre svarene sine. Del skjemaet opp i forståelige biter, hvor informasjon som hører naturlig sammen grupperes i samme steg. Hva disse stegene skal hete er selvsagt avhengig av hva skjema handler om, men så lenge ting hører logisk sammen vil det være en stor hjelp for brukeren, som vil slippe å bytte kontekst oftere enn nødvendig.

Bilde av et skjema som gir brukeren god oversikt og kan klikke fremover
Vi trenger ikke en tilbakeknapp i første steg, for her er det bare en vei, og det er fremover!
Bilde av sidenavigasjon, gå tilbake og gå fremover
I tillegg til Tilbake og Gå videre kan vi gjerne gjøre selve navigasjonen klikkbar, da blir det lettere for brukerne å komme seg fra steg 5 til steg 2, uten å måtte klikke seg gjennom tre ekstra sider. Hvis du har spesielt mange steg, kan du vurdere å liste ut sidenavigasjonen vertikalt, så den ikke blir for bred for skjermen.
Bilde av at siste knapp er sende inn
Vi kan også endre på knappetekstene underveis. I siste steg skal man ikke lenger Gå videre, man skal Sende søknad. Knappen bør reflektere dette, så det er tydelig for brukeren hva som skjer når de trykker på den.

Har du et lengre og komplisert skjema, eller det er spesielt viktig at brukerne sender inn riktig informasjon, bør du inkludere et siste oppsummerende steg. Der kan brukerne se over all informasjonen de skal sende inn, og enkelt gå tilbake og endre dersom de ser at noe er feil.

Det samme gjelder lengre bestillingsløp, hvor brukerne bør få en oversikt over hva de faktisk er i ferd med å betale for. Husket du å kjøpe den ekstra innsjekkede bagasjen? Og husket du å bestille vegetarmeny på returflyvningen?

Bruk data du allerede har

Vi vet ofte mye om brukerne våre, spesielt om de har registrert seg eller brukt tjenestene våre tidligere. Dette kan vi bruke til å hjelpe folk med å fylle ut skjemaene vi lager. Hvis brukerne våre er logget inn, kan vi hente lagret informasjon som navn og e-post og forhåndsutfylle disse feltene. Vi kan koble oss på offentlige registre, slik for eksempel Interflora gjør når de ber deg legge inn telefonnummeret til den du skal sende blomster til så henter de navn og adresse.

Bilde av innhenting av informasjon om brukeren
Men husk å la brukerne endre adressen etter at den er hentet inn. Det er ikke alltid opplysningene stemmer.

Eller vi kan gjøre som NAV og hente informasjon om søker direkte fra Folkeregisteret i en ellers komplisert søknad om overgangsstønad. Eller som mange banker og hente informasjon om gjeld og inntekt fra Altinn når du søker boliglån. Dette er begge skjema hvor brukerne må logge seg inn med BankID før de starter å fylle ut søknaden, noe som gir en sikrere tilgang til informasjon.

Vi må selvsagt gi folk muligheten til å endre dataen vi forhåndsutfyller. Kanskje kjøper de ikke flybillett til seg selv, men til en venn, og kanskje har de flyttet uten å melde flytting i Folkeregisteret. Hvis vi fratar brukerne kontroll, øker vi sjansen for frustrasjon og en dårlig opplevelse.

Apropos forhåndsutfylling:

Nav.no viser opplysninger fra folkeregisteret og spørr brukeren om å bekrefte disse

Bruk smarte standardvalg

Smarte standardvalg betyr at vi forhåndsutfyller det vi ønsker at brukerne skal fylle ut.

Bilde fra Kirkens Nødhjelp sitt giverskjema

Her er det summen 300 kr som er forhåndsvalgt, at du skal vi månedlig og at støtten skal gå dit behovet er størst. Mange studier har vist, og årevis med erfaring med design av digitale tjenester har vist, at brukerne mest sannsynlig vil velge det vi presenterer som et godt valg for dem, så lenge det ikke er urimelig. Kan du velge sum helt selv er det mange som tenker det vil holde med 50 eller 100 kroner, men ved å sette den forhåndsvalgte summen til 300 kroner i månedlig sum nudger (eller dulter) Kirkens Nødhjelp potensielle givere i en retning som er bedre for dem.

I Netlife har vi selv erfart dette da vi hjalp Kreftforeningen med deres nettsider (blitt en stund siden 2013 men det er fortsatt gjeldende). Bare det å endre det forhåndsvalgte beløpet på donasjoner fra 250 til 500 kroner gjorde at antall givere som gav nettopp 500 kroner økte drastisk over natten:

Bilde som viser penger inn til Kreftforeningen når standardbeløpet ble satt opp
Grafen viser prosentandelen av givere som donerte 250 vs 500 kroner når de fikk valget

Smarte standardvalg fungerer ikke kun på nettsider. En masteroppgave fra NHH i Bergen fra 2017 – En nudge for likestilling: små grep for en mer balansert fordeling av foreldrepengeperioden – fant at kun det å endre standardvalget for fordeling av fellesperioden av foreldrepengeperioden fra en hvor mor fikk mest, til en jevn fordeling mellom mor og far, førte til at flere fedre tok ut mer foreldrepermisjon.

Altså: kun et enkelt standardvalg i et skjema førte til at fedre tok ut mer permisjon, et stort valg som påvirker flere måneder av livet! Studier har også vist at standardvalg kan øke andelen folk som er villige til å donere organer, og det hjelper brukere å redusere kognitiv belastning.

Enkelt forklart kan vi veilede brukere til å ta gode valg – for dem selv, og for oss. Men nå som vi vet hvor enkelt det er å lede folk sine valg, må vi passe oss så vi ikke misbruker denne makten. Vi kan lett sette standardvalg som kanskje gagner oss på kort sikt, men som ikke er det beste for brukeren, verden eller miljøet, noe som vil føre til en verre kundeopplevelse på sikt, og at vi oppnår det motsatte av det vi ønsker: glade og fornøyde brukere som kommer tilbake til oss.

Samtalebasert skjema

Luke Wroblewski skriver i sin bok Web form design at man kan tenke på det å designe et skjema som å ha en samtale med brukeren. Og da kan vi spørre oss selv: hvilken type samtale vil vi ha? En høflig samtale der vi finner ut det vi trenger for å hjelpe brukerne, eller et forhør hvor vi presser dem for informasjon?

Europeiske reiseforsikring bruker et samtalebasert skjema når man melder skade.

På samme måte som man kan med en samtale, kan man følge noen enkle tips for å få en god flyt i skjema.

Skjemaet til Europeiske reiseforsikring viser en samtale

Spørsmålene man stiller bør ha en naturlig flyt

Hvis du pratet med en kollega eller en venn ville du ikke hoppet fra tema til tema og stilt spørsmål som tilsynelatende ikke hang sammen. På samme måte bør vi gruppere relatert informasjon i skjema, og stille oppfølgingsspørsmål i det det blir naturlig - enten etter et relevant spørsmål, eller seinere i prosessen hvis du egentlig ikke trenger å vite det enda. Vi bør heller ikke spørre for mye om ting vi ikke trenger å vite, eller ordlegge oss unødvendig krast.

Still forståelige spørsmål

Hvis du bruker ord som folk forstår, og formulerer gode setninger som formidler det du egentlig ønsker å vite, er det høyere sannsynlighet for at brukerne forstår hva du spør om, og kan svare riktig. Bruk tid på å ordlegge deg riktig, ikke bare si det første som faller deg inn. Som i virkeligheten, så i skjemadesign.

Forklar hvorfor du trenger å vite det du spør om

Hvis du ber om sensitiv informasjon, eller noe som det ikke er selvsagt at man skal oppgi, er det fint å si hvorfor. Hvis du for eksempel trenger selvangivelsen for å behandle en lånesøknad, kan det være fint å si at det er for å sjekke gjeld og inntekt, ikke bare be om informasjon som brukerne ikke nødvendigvis forstår hva du skal bruke til.

I følge Wroblewski er de beste skjemaene usynlige - man merker ikke at man fyller ut et skjema, for flyten er så naturlig at du bare plutselig har oppnådd det du ønsket. Ikke alle skjema kan være en chat eller en interaktiv wow-opplevelse, men de aller aller fleste kan være enkle og forståelig nok til at folk klarer å fylle dem ut uten store utfordringer.

Kode skjemaene riktig

Til sist må vi kode skjemaene våre riktig. Det har mange fordeler – ikke bare vil et skjema som er kodet riktig fungere på alle mulige enheter, det vil også være mer brukervennlig og sikret å fungere i fremtiden på tvers av alle enheter, alt fra det smarte kjøleskapet til Teslaen i garasjen.

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 på egne tastaturer for hvert felt på mobile enheter, noe som gjør utfyllingen uendelig mye enklere for folk som fyller ut skjema på mobil.

Vanlige input-felter gir et vanlig tastatur

Bilde av at du får vanlig tastatur når det er input-felter kodet inn

Tallfelter som telefonnummer, postnummer, kortnummer osv gir talltastatur som er mye enklere å bruke enn det vanlige for å taste inn tall

Bilde viser at du får nummer når det er tallfelt.

Dette er også en stor hjelp for folk med nedsatt funksjonsevne, og gjør skjemaene mye enklere å bruke med tanke på universell utforming – å kode skjema riktig gjør at flere kan bruke våre tjenester og delta i samfunnet, noe som både er en god gjerning, og som potensielt gir deg flere fornøyde og betalende kunder.

Også e-postfelter blir enklere ved å inkludere krøllalfa lett tilgjengelig på bunnen av tastaturet.

Bildet viser bruk av e-postverktøy

En historie fra virkeligheten

Vi gjorde et redesign av Folkehøgskolene sine søknadsskjema som blir brukt av alle som ønsker å søke plass på en folkehøgskole i Norge. Skjemaet var langt og ble brukt forskjellig av de ulike skolene, og konverterte ikke så bra som Folkehøgskolene selv ønsket - halvparten av alle som begynte å fylle det ut, sendte ikke engang inn skjema. Ved å bruke prinsippene for godt skjemadesign, redusere antall steg og felter, forenkle språket, forbedre interaksjonen og koble inn et API for raskere utfylling av personalia, økte antall konverteringer med 45%!

Nå vet dere cirka like mye som skjemadesign som meg, og det er bare å komme dere ut og designe flotte, brukervennlige skjema. Skjemaer som forventningsstyrer godt, føles som en samtale med noen som ønsker å hjelpe meg, og som jeg kan bruke på smartklokka mi mens jeg går en tur!

Vil du ha hjelp til å lage bedre skjemaer som konverterer? La oss ta en prat!

Har du fått med deg disse?