Et kontaktskjema kan være lite, men oppgaven er viktig. Det er ofte siste steg før noen sender en forespørsel, ber om et tilbud, oppretter en konto eller fullfører en bestilling.

Hvis skjemaet skaper tvil på dette punktet, hjelper det lite at resten av nettsiden fungerer godt. God skjemadesign handler derfor om å gjøre oppgaven forståelig fra første felt til bekreftelsen etter innsending.

Be bare om informasjonen som trengs

Hvert ekstra felt er en ny oppgave for brukeren.

Dersom bedriften bare trenger navn, e-post og en kort melding for å starte en samtale, er det sjelden nødvendig å be om telefonnummer, firmanavn, stilling, adresse og budsjett samtidig.

Korte skjemaer er ikke alltid best. Et tilbudsskjema kan kreve mer informasjon enn et kontaktskjema. Men hvert felt bør ha en tydelig funksjon og brukes i den videre prosessen.

Feltetiketter må være tydelige

En plassholdertekst som «E-post» kan se ryddig ut, men forsvinner når brukeren begynner å skrive.

En fast feltetikett, ofte kalt label, gjør det lettere å huske hva feltet gjelder. Den kan også kobles programmatisk til feltet slik at hjelpemidler forstår sammenhengen. W3C anbefaler tydelige etiketter for skjemakontroller og eksplisitt kobling mellom tekst og felt.

Brukeren skal ikke måtte huske eller gjette hva som skal stå hvor.

Vis tydelig hva som er obligatorisk

Obligatoriske felt bør kunne identifiseres før brukeren trykker «Send».

W3C peker på at en stjerne alene kan være utilstrekkelig. Den kan overses visuelt og blir ikke alltid formidlet tydelig av en skjermleser.

Kravet bør derfor fremgå både visuelt og i koden. Hvis nesten alle felt er obligatoriske, kan det være mer oversiktlig å merke de få som er valgfrie. Det viktigste er at løsningen er konsekvent.

Feilmeldinger skal hjelpe brukeren videre

«Ugyldig verdi» beskriver en feil, men forklarer ikke hvordan den kan rettes.

Mer nyttige meldinger er konkrete:

  • «Skriv inn en e-postadresse, for eksempel navn@firma.no»
  • «Navn må fylles ut»
  • «Velg ett av alternativene før du går videre»

GOV.UK Design System anbefaler korte og konkrete feilmeldinger som bruker samme språk som feltet. W3C anbefaler også at feil identifiseres tydelig og at brukeren får hjelp til å rette dem.

Meldingen bør stå i nærheten av feltet den gjelder, ikke bare i en generell feilliste øverst på siden.

Behold informasjonen som allerede er skrevet

Hvis ett felt inneholder en feil, bør resten av skjemaet normalt beholde innholdet.

Det reduserer dobbeltarbeid og gjør det enklere å rette akkurat det som er feil. W3Cs veiledning for tilgjengelige skjemaer peker på dette som god praksis.

Validering er både brukeropplevelse og sikkerhet

Noen feil kan oppdages direkte i nettleseren, for eksempel et tomt obligatorisk felt eller en e-postadresse med feil format. Det gir rask tilbakemelding.

Klientvalidering er likevel ikke en sikkerhetsmekanisme. Data må også valideres på serversiden.

Skjemaet viser dermed tydelig hvordan design og utvikling møtes: Brukeren trenger rask og forståelig informasjon, mens systemet må behandle innsendte data på en trygg måte.

Etter «Send» trenger brukeren et svar

Et skjema er ikke ferdig når knappen er trykket. Brukeren må få vite om meldingen ble sendt, hva som skjer videre og om det kreves noe mer.

Hvis innsendingen mislykkes, må det også være tydelig. En knapp som stopper uten forklaring, eller en side som hopper tilbake til skjemaet, skaper usikkerhet.

En kort bekreftelse kan være nok, så lenge den er entydig.

Test hele oppgaven

Et skjema bør ikke bare vurderes som et skjermbilde i designfilen.

Bruk tastatur. La et obligatorisk felt stå tomt. Skriv en ugyldig e-postadresse. Send fra mobil. Test langsom forbindelse og feil ved innsending. Kontroller til slutt at bekreftelsen faktisk vises.

Da testes ikke bare feltene, men hele oppgaven brukeren skal gjennomføre.

De beste skjemaene krever lite oppmerksomhet. De forklarer hva som trengs, hjelper brukeren når noe er feil og bekrefter tydelig når oppgaven er fullført.