10 Regler for å lage brukervennlige webskjemaer

Sep 15, 2025

hvordan

Illustration of web forms on an iMac and tablet

[1. 3]

Til tross for utviklingen av human-datamaskin interaksjon, er skjemaene fortsatt en av de viktigste typer interaksjon for brukerne. Folk som bruker søknaden eller nettstedet ditt, har et bestemt mål, og ofte er den ene tingen som står mellom brukeren og deres mål et skjema. Hver dag bruker vi dem til våre essensielle aktiviteter - for å fullføre kjøp, for å registrere seg for sosiale nettverk, for å gi tilbakemelding på et produkt vi har kjøpt, og mer - de er en stor del av Brukererfaring .

Som et resultat er det svært viktig for oss å kunne fullføre online skjemaer raskt og uten forvirring. Jo mindre innsats vi må bruke, jo lykkeligere er vi. Som designere og utviklere bør vi streve for å produsere raskere, enklere og mer produktive formopplevelser for våre brukere.

I den andre av mine to artikler som utforsker hvordan man bygger bedre former ( Finn den første her ), her er mine 10 tips for å designe skjemaer som er brukervennlige. Ikke helt hva du leter etter? Du trenger kanskje våre guider til toppen Nettstedbygger eller skylagring service.

01. Bare spør hva som kreves

Kutting av mengden nødvendig informasjon gjør skjemaet enklere å fylle ut. Du bør alltid stille spørsmål om hvorfor og hvordan informasjonen du ber om, blir brukt. Prøv å minimere antall felt så mye som mulig, fordi hvert felt du legger til i et skjema, vil påvirke konverteringsfrekvensen. Begrensning av antall spørsmål og felt gjør skjemaet ditt mindre lastet, spesielt når du ber om mye informasjon fra brukerne.

02. Bestil feltene logisk

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Tenk på skjemaet ditt som en samtale; Du vil gruppere og bestille feltene i en ordre som gir mening til brukeren

Det er nyttig å tenke på et skjema som ligner en samtale. Som en hvilken som helst normal samtale, bør den representeres av en logisk kommunikasjon mellom to parter: en person og din app. Detaljer bør bli bedt om i en ordre som er logisk fra en brukers perspektiv, ikke den for applikasjonen eller databasen. For eksempel er det uvanlig å be om noens adresse før navnet deres.

Det er også veldig viktig å gruppere relaterte spørsmål i blokker, så strømmen fra ett sett med spørsmål til neste vil bedre ligne en samtale. Grupperende relaterte felt hjelper også brukerne til å gi mening om informasjonen de må fylle ut.

På bildet ovenfor er eksempler på to registreringsskjemaer. Lange skjemaer kan føle seg overveldende hvis du ikke grupperer relaterte felt - sammenlign skjemaet til venstre til den forbedrede versjonen til høyre.

Gruppering må utføres visuelt så vel som i koden. For eksempel kan du bruke & lt; fieldset & gt; og & lt; legend & gt; Elementer å knytte relaterte formekontroller:

 & lt; fieldset & gt;
  & lt; Legend & GT; Personlig informasjon: & lt; / legend & gt;
  & lt; div & gt;
    & lt; etikett for = "first_name" & gt; fornavn og lt; / label & gt;
    & lt; input type = "tekst" navn = "first_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; etikett for = "last_name" & gt; etternavn & lt; / label & gt;
    & lt; input type = "tekst" navn = "last_name" id = "last_name" & gt;
  & lt; / div & gt;
    & lt; etikett for = "kjønn" & gt; yrke & lt; / label & gt;
    & lt; input type = "tekst" navn = "yrke" id = "yrke" & gt;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. Hold etikettene korte

Feltetiketter Fortell brukere hva de tilsvarende inntastingsfeltene betyr. Klar etiketttekst er en av de viktigste måtene for å gjøre UiS mer tilgjengelig. Etiketter forteller brukeren formålet med feltet, men de hjelper ikke tekster. Derfor, slik at de skanner lett, er en prioritet - du bør designe kortfattet, korte og beskrivende etiketter (hold dem til et ord eller to).

04. Ikke dupliserende felt

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Ikke gjør brukerne skrive inn informasjon to ganger - du vil bare frustrere dem ved å kaste bort tiden sin

Dette problemet er spesielt vanlig for registreringsskjemaer: Nesten alle har kommet over et skjema som krever at du skriver en e-postadresse eller et passord to ganger. Historisk var dette designet for å forhindre feilaktig feil. Imidlertid kopierte de fleste brukere bare det nødvendige feltet når appen tillot det. Og hvis det opprinnelige feltets data inneholdt en feil, ble den duplisert.

05. Fremhev valgfrie felt

Ideelt sett er det best å ha ingen valgfrie felt. I tråd med regel nummer 1, hvis et stykke informasjon ikke er nødvendig, er det ikke noe poeng å kaste bort en brukers tid. Men hvis du bruker dem, bør du tydelig skille ut hvilke inntastingsfelt som ikke kan stå tomt. Vanligvis er et lite merke som en stjerne (*) eller 'valgfri' etikett nok.

06. Vær forsiktig med standardinnstillinger

Unngå å inkludere en statisk standard, med mindre du mener at en stor del av brukerne dine (f.eks. 90 prosent) vil velge den verdien - spesielt hvis det er et obligatorisk felt. Hvorfor? Med denne tilnærmingen vil du sannsynligvis introdusere feil fordi folk skanner danner raskt på nettet. Ikke anta at de vil ta deg tid til å analysere gjennom alle valgene. De kan blithely hoppe over noe som allerede har en verdi.

Det eneste unntaket for dette punktet er smarte standardinnstillinger - som de som forvalg av brukerens land basert på deres geolokale data - som kan gjøre ferdigstillelsen av skjemaet raskere og mer nøyaktig. Men du bør fortsatt bruke disse med forsiktighet, fordi brukerne har en tendens til å forlate forhåndsvalgte felt som de er.

07. Minimer behovet for å skrive

Typing er en langsom og feilaktig prosess, og det er spesielt smertefullt på en mobil, hvor brukere står overfor begrensningene på begrenset skjerm. Og med flere og flere mennesker som bruker små skjermer, vil alt som kan gjøres for å forhindre unødvendig å skrive ut brukeropplevelsen. Hvor det er hensiktsmessig, kan du bruke funksjoner som AutoComplete og Prefill for data, slik at brukerne må bare skrive inn den minste minimumsbeløpet.

Fylling av adresseinformasjonen din er ofte den mest besværlige delen av en hvilken som helst online registreringsskjema, takket være flere felt, lange navn og så videre. Lagre brukerne fra å skrive inn hele adressen sin ved å implementere prefills for disse feltene. Biblioteker som Google Maps Tilbyr en enkel JavaScript API for å oppnå dette. Du kan Finn en arbeidsløsning her .

08. Bruk real-time validering

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Varsle brukere umiddelbart hvis de gjør en feil - ikke få dem til å vente til de har fullført hele skjemaet

I en ideell verden fyller brukerne i skjemaer med nødvendig informasjon og fullfører jobben sin, men i den virkelige verden gjør folk ofte feil. Det er frustrerende å gå gjennom prosessen med å fylle ut en hel form bare for å finne ut på innleveringsstedet at du har gjort en feil.

Riktig tid for å informere noen om suksessen eller feilen i dataene de har gitt, er rett etter at de har sendt inn informasjonen. Dette er hvor sanntids validering kommer i spill. Det varsler brukere til feil med en gang og gjør det mulig for dem å rette dem raskere, uten å måtte vente til de trykker på "Send" -knappen.

Og husk, validering bør ikke bare fortelle brukere hva de gjorde galt; Det bør også fortelle dem hva de gjør riktig. Dette gir brukerne mer tillit til å bevege seg gjennom skjemaet.

Persille er et utmerket JavaScript-skjema valideringsbibliotek. Det er åpen kildekode og UX-fokusert, slik at du kan overstyre nesten alle standardadferdene for å passe dine eksakte behov. I den følgende koden er et enkelt persille valideringseksempel for et "meldings" -felt. Feltet skal være minst 20 tegn, men ikke mer enn 100.

 & lt; etikett for = "melding" & gt; melding (20 tegn min, 100 maks): & lt; / label & gt;
& lt; textarea id = "melding" class = "form-control" navn = "melding" data-persille-trigger = "tastatur" data-persille-minlength = "20" data-persille-maxlength = "100" data-persille -MinLength-Message = "Kom igjen! Du må skrive inn minst en 20 tegns kommentar." Data-persille-validering-terskel = "10" & gt; & lt; / textarea & gt;

Du kan Finn den komplette kodeprøven her .

09. Unngå faste inngangsformater

Den vanligste årsaken til å tvinge et fast format er valideringsskriptbegrensning (bakenden kan ikke bestemme formatet det trenger), som i de fleste tilfeller er et implementeringsproblem. I stedet for å tvinge formatet på noe som et telefonnummer under brukerinngang, bør du gjøre det mulig å forvandle hva brukeren går inn i formatet du vil vise eller lagre.

10. Ikke bruk Tilbakestill knapper

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Litt bra kom fra, inkludert en reset-knapp rett ved siden av Send-alternativet

En tilbakestillingsknapp hjelper nesten aldri brukere. Det er vanskelig å forestille seg at noen vil ha en knapp som angir alt sitt arbeid, enn si at de vil ha den knappen å sitte ved siden av knappen som sparer den. Internett ville være et lykkeligere sted hvis nesten alle tilbakestillingsknappene ble fjernet.

Vil du vite hvordan brukerne svarer på nettstedet ditt? En anstendig Web Hosting. Tjenesten vil gi deg analyset du trenger.

Denne artikkelen opprinnelig dukket opp i nett , magasinet for profesjonelle webdesignere og utviklere. Abonner på nettet her .

Relaterte artikler:

29 Webdesign verktøy for å øke hastigheten på arbeidsflyten din
De 41 beste gratis webfontene
13 beste biter av brukertesting programvare

10 Regler for å lage brukervennlige webskjemaer

01. Bare spør hva som kreves

02. Bestil feltene logisk

03. Hold etikettene korte

04. Ikke dupliserende felt

05. Fremhev valgfrie felt

06. Vær forsiktig med standardinnstillinger

07. Minimer behovet for å skrive

08. Bruk real-time validering

09. Unngå faste inngangsformater

10. Ikke bruk Tilbakestill knapper

hvordan - Mest populære artikler

Hvordan rengjør pensler: Den endelige veiledningen

Hvordan slå Wordpress til en visuell byggherre

10 fantastiske ting du kan gjøre med lag

Lag skyer med fumefx for 3ds maks

Lag en meteor dusj i 3ds maks

Hvordan lage 3D-bokstaver i Illustrator

Den ultimate guiden til å komponere bilder i Photoshop

Hvordan lage manga med en Wild West Twist

Kategorier