Nesten hver nettside design inneholder noen form for form. Fra enkel e-postadresse samling for å registrere deg for nyhetsbrev eller varsel til full betaling innkreving skjemaer, er det viktig at du designer et skjema som er enkelt å bruke og forstå.

Standardene for formdesign utvikles også. Mens mange former pleide å inkludere flere kolonner og be om mye informasjon, foreslår de fleste beste praksis nå å holde skjemaer så enkle som mulig. Og det er også mye i designen. En god form er skannbar, krever ikke mye å skrive og inneholder smart merking og formatering for å hjelpe brukerne å fylle ut skjemaer riktig første gang.

Her er noen få hemmeligheter for å sikre at du utformer et skjema som brukerne faktisk fyller ut.

1. Gjør det enkelt å skanne og lese

Du vet at brukere skanner nettsteder for å hente informasjon og avgjøre hvilke handlinger de vil ta, eller om innholdet og designet interesserer dem eller ikke. Det samme gjelder for skjemaer. Brukeren skal kunne fortelle hvilken informasjon som er nødvendig, med en oversikt og gi en klar forklaring på hva skjemaet er for og hvordan du sender det inn.

En svært skannbar form inneholder følgende:

  • Kontrast: Tekst må være kort og lett å lese. Unngå mye farge og hold deg til tradisjonell mørk på lyse tekst-bakgrunnskombinasjoner.
  • Gruppering og plass: Grupper informasjon som ligner på lengre skjemaer. Når du samler inn betalingsinformasjon, for eksempel, gruppekundeinformasjon, betalingsinformasjon og fraktinformasjon. Tre kortere blokker er lettere å fordøye enn en lang en. Bruk smart avstand til at etikettene er koblet til feltet de forklarer, i stedet for ensartet avstand mellom tekst og feltelementer.
  • Klar finish / kall til handling : Gjør knappen stor og lett å se. Mikrokopien inne i knappen skal fortelle brukerne hva som skal skje, for eksempel "send", "betal nå" eller "gå videre til neste trinn." Husk å lukke tilbakemeldingssløyfen og la brukerne vite når et skjema er riktig innlevert.
airbnb

2. Tenk på flytende etiketter

Det har vært mye diskusjon om hvorvidt å bruke hinttekst i formfeltene eller ikke. Hovedproblemet er at for ofte går denne teksten ikke bort med et klikk, og brukerne må aktivt slette den for å begynne å skrive. Det er vanskelig.

flytende

Videre, Nielsen Norman Group funnet at tomme felter kan trekke øynene og hjelpe brukerne til å skrive inn informasjon tydeligere.

Hvis du føler at du trenger tips, bør du vurdere en interaktiv løsning-flytende etiketter. Ta med etikettinformasjonen i skjemafeltene slik at det ser ut som plassholdertekst, men la teksten animere og skifte til øverste venstre posisjon når en bruker henger over eller klikker inn i feltet. Etiketten eller hint går aldri bort, og det kommer ikke i veien for at brukeren prøver å fylle ut skjemaet. (Pluss den lille animasjonen er en morsom overraskelse for brukere.)

3. Bruk feltmasker

Feltmasker kan gi noen av de samme sporene og danne hint, men uten å komme i veien for brukbarheten. En feltmaske vises bare når en bruker aktiverer et felt og gir en ekstra skanningstrekning om hvilken informasjon som er nødvendig. Masken kan hjelpe brukeren ytterligere ved å formatere informasjon automatisk i et forsøk på å unngå feil som vil kaste skjemaet ut ved innsending.

Et godt eksempel på en feltmaske i aksjon er med telefonnumre. Vurder alternativene for flere format:

  • (000) 000-0000
  • 000-000-0000
  • 0000000000

Hvordan vet en bruker hvilken som skal fungere? Skjemafeltet vil spesifisere og justere formatet som en brukertyper, så han eller hun trenger ikke å tenke på det og må bare taste inn tall. (Dette sparer også bryet med å måtte bytte mellom tastaturer på en mobil enhet.)

Enger

4. Lag skjemaer tastaturvennlig

Du har ingen måte å vite hvilken type enhet en bruker vil møte skjemaet ditt på, men det bør være like lett å fylle ut uansett. Vurder alle de forskjellige tastaturtyper som kan sende informasjon til skjemaet og justere felt for å oppdage og bruke det aktuelle alternativet.

På skrivebord må brukerne skrive inn et skjema og fylle ut hvert felt uten å måtte klikke på en mus. Advance automatisk fra ett felt til det neste ved fullføring eller bruk faner eller skriv inn for å flytte rundt. W3.org har et solid sett av tastatur anbefalinger for deg å følge.

På mobile enheter, samsvarer tastaturtypen med de nødvendige dataene. Hvis inngangen er for bokstaver, ta opp alfatastaturet; for tall, ta opp det numeriske alternativet. Fra Google: "Appbrukere setter pris på apper som gir et passende tastatur for tekstoppføring. Sørg for at dette implementeres konsekvent gjennom hele appen, ikke bare for bestemte oppgaver, men ikke andre. "

Google

5. Velg vertikalformat

Vertikale skjemaer er enklere for brukere enn flere kolonneformater. Til beste praksis regel er å sikre at alle feltene kan passe på skjermen uten å bla i et topp til bunn format.

Det ene unntaket er for superkorte skjemaer der en bruker bare trenger å skrive inn en e-postadresse eller navn og e-postadresse. To kolonner side om side etterfulgt av en anrop til handlingsknapp kan fungere bra i denne situasjonen så lenge e-postboksen er lang nok til at brukerne kan se alle bokstavene i adressen sin.

Husk å bestille elementene logisk også i vertikal form. Hvis du samler fornavn, etternavn, e-postadresse og hårfarge, ordner dem på den måten.

beskytter

6. Limit Typing

Bruk så mange forfyllingsløsninger som mulig med skjemaer. Ingenting er mer herlig da skal du legge til en adresse, og etter de første kranene, går Google API inn og foreslår adressealternativer.

Dette gjør tre ting:

  • Det gjør det enklere for brukerne, spesielt på mobilen.
  • Det bidrar til å begrense antall felt som er nødvendige.
  • Det kan bidra til å eliminere noen brukerfeil, for eksempel mistyping.

Vurder det samme med e-postadresser, slik at brukerne får populære e-postdomener etter @ -symbolet. Når en bruker skriver inn [e-postbeskyttet] .... feltet foreslår automatisk [e-postbeskyttet] .

reise

7. Hold det kort og søt

Du vil bli fristet til å spørre brukerne om mye informasjon i skjemaer. Motstå trang!

Bare spør om viktig informasjon i skjemaer. Det er en sterkere sannsynlighet for at brukerne vil fylle ut skjemaer som krever mindre engasjement. Hvis du trenger mer informasjon senere, kan du deretter sende dem fra listen din og be om ytterligere detaljer. (Som noen som allerede har valgt, er brukeren mer sannsynlig å engasjere seg med deg for mer på dette tidspunktet.)

Unngå valgfrie felt. Ikke be om overflødig informasjon. Ikke bruk flere felt hvor du kan bruke en (f.eks. Telefonnumre).

breckbrew

Konklusjon

Gi brukerne noe i retur for å fylle ut et skjema. Gjør det morsomt eller interessant. Takk brukeren

Å lage et skjema som er lett å lese og brukervennlig, vil øke sjansene dine for å samle inn data og snu en besøkende til en gjenta bruker.