10 regler for at lave brugervenlige webformularer

Sep 14, 2025

hvordan

Illustration of web forms on an iMac and tablet

På trods af udviklingen af human-computer interaktion forbliver formularer stadig en af de vigtigste typer interaktion for brugerne. Folk, der bruger din ansøgning eller hjemmeside, har et bestemt mål, og ofte er den eneste ting, der står mellem brugeren, og deres mål er en form. Hver dag bruger vi dem til vores væsentlige aktiviteter - at afslutte køb, for at tilmelde sig sociale netværk for at give feedback om et produkt, vi har købt, og mere - de er en stor del af brugererfaring .

Som følge heraf er det meget vigtigt for os at kunne færdiggøre onlineformer hurtigt og uden forvirring. Jo mindre indsats vi skal bruge, jo lykkeligere vi er. Som designere og udviklere bør vi stræbe efter at producere hurtigere, lettere og mere produktive formoplevelser for vores brugere.

I det andet af mine to artikler, der udforsker, hvordan man bygger bedre former ( Find den første her ), Her er mine 10 tips til designformer, der er brugervenlige. Ikke helt, hvad du leder efter? Du har måske brug for vores vejledninger til toppen Website Builder. eller Sky lagring service.

01. Spørg kun, hvad der kræves

At skære mængden af nødvendige oplysninger gør formularen lettere at udfylde. Du bør altid stille spørgsmålstegn ved, hvorfor og hvordan de oplysninger, du anmoder om, bliver brugt. Prøv at minimere antallet af felter så meget som muligt, fordi hvert felt du tilføjer til en formular, vil påvirke dets konverteringsfrekvens. Begrænsning af antallet af spørgsmål og felter gør din formular mindre indlæst, især når du beder om en masse oplysninger fra dine brugere.

02. Bestil felterne logisk

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Tænk på din formular som en samtale; du vil gruppere og bestille felterne i en ordre, der giver mening til brugeren

Det er nyttigt at tænke på en form som ligner en samtale. Som enhver normal samtale skal den være repræsenteret ved en logisk kommunikation mellem to parter: en person og din app. Detaljer skal bedes om i en ordre, der er logisk fra et brugers perspektiv, ikke for applikationen eller databasen. For eksempel er det usædvanligt at bede om en persons adresse før deres navn.

Det er også meget vigtigt at gruppere relaterede spørgsmål i blokke, så strømmen fra et sæt spørgsmål til den næste vil bedre ligne en samtale. Gruppering af beslægtede felter hjælper også brugere med at give mening om de oplysninger, de skal udfylde.

Afbildet ovenfor er eksempler på to registreringsformularer. Lange former kan føle sig overvældende, hvis du ikke grupperer relaterede felter - sammenlign formularen til venstre til den forbedrede version til højre.

Gruppering skal udføres visuelt såvel som i koden. For eksempel kan du bruge & lt; fieldset & gt; og & lt; Legend & GT; Elementer til at knytte relaterede form kontroller:

 & lt; Fieldset & GT;
  & lt; Legend & GT; Personlige oplysninger: & lt; / Legend & GT;
  & lt; div & gt;
    & lt; etiket for = "First_Name" & GT; Fornavn / lt; / Etiket & GT;
    & lt; input type = "tekst" navn = "FIRST_NAME" ID = "FIRST_NAME" & GT;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; etiket for = "Last_Name" & gt; efternavn & lt; / label & gt;
    & lt; input type = "tekst" navn = "Last_Name" ID = "Last_Name" & GT;
  & lt; / div & gt;
    & lt; etiket for = "køn" & gt; professionel & lt; / label & gt;
    & lt; input type = "tekst" navn = "Profession" ID = "Profession" & GT;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. Hold etiketter kort

Feltmærkerne fortæller brugere, hvad de tilsvarende inputfelter betyder. Clear Label Text er en af de primære måder at gøre UIS mere tilgængelig på. Etiketter fortæller brugeren formålet med feltet, men de er ikke hjælp til tekster. Derfor sikrer de at scanne nemt er en prioritet - du bør designe kortfattet, korte og beskrivende etiketter (hold dem til et ord eller to).

04. Du må ikke kopiere felter

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Lad ikke dine brugere indtaste oplysninger to gange - du vil kun frustrere dem ved at spilde deres tid

Dette problem er særligt almindeligt for registreringsformularer: Næsten alle har stødt på en formular, der kræver, at du indtaster en e-mail-adresse eller en adgangskode to gange. Historisk set var dette designet til at forhindre mistypingfejl. Men de fleste brugere blot kopierer det nødvendige felt, når appen tillod det. Og hvis det oprindelige felts data indeholdt en fejl, blev den dupliceret.

05. Fremhæv valgfrie felter

Ideelt set er det bedst at have ingen valgfrie felter. I overensstemmelse med regel nummer 1, hvis et stykke information ikke er påkrævet, er der ingen mening om at spilde en brugers tid. Men hvis du bruger dem, skal du tydeligt skelne, hvilke inputfelter der ikke kan efterlades tomt. Normalt er et lille mærke som en asterisk (*) eller 'valgfri' etiket nok.

06. Pas på med standardindstillinger

Undgå at inkludere en statisk standard, medmindre du mener en stor del af dine brugere (f.eks. 90 procent) vælger denne værdi - især hvis det er et obligatorisk felt. Hvorfor? Med denne tilgang vil du sandsynligvis introducere fejl, fordi folk scanner formularer hurtigt online. Antag ikke, at de vil tage sig tid til at analysere gennem alle valgene. De kan blithely springe over noget, der allerede har en værdi.

Den eneste undtagelse for dette punkt er SMART-standardindstillinger - ligesom dem, der forudsætter brugerens land baseret på deres geolocation-data - som kan gøre færdiggørelsen hurtigere og mere præcise. Men du bør stadig bruge disse med forsigtighed, fordi brugerne har tendens til at forlade forudvalgte felter, som de er.

07. Minimer behovet for at skrive

Typing er en langsom og fejlprone proces, og det er særligt smertefuldt på en mobil, hvor brugerne står over for begrænsningerne i begrænset skærm. Og med flere og flere mennesker, der bruger små skærme, vil alt, hvad der kan gøres for at forhindre unødvendig typing, forbedre brugeroplevelsen. Hvis det er relevant, kan du bruge funktioner som AutoComplete og Prefill for Data, så brugerne skal kun indtaste det vigtigste minimumsbeløb.

Udfyldning af din adresseoplysninger er ofte den mest besværlige del af enhver online registreringsform, takket være flere felter, lange navne og så videre. Gem dine brugere fra at skulle skrive hele deres adresse ved at implementere præfyldninger for disse felter. Biblioteker som Google Maps tilbyde en simpel JavaScript API for at opnå dette. Du kan Find en arbejdsløsning her .

08. Brug real-time validering

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Alert-brugere straks, hvis de foretager en fejl - lad dem ikke vente, indtil de har gennemført hele formularen

I en ideel verden udfylder brugerne formularer med nødvendige oplysninger og afslutter deres job med succes, men i den virkelige verden laver folk ofte fejl. Det er frustrerende at gå igennem processen med at udfylde en hel form kun for at finde ud af på det tidspunkt, hvor du har lavet en fejl.

Det rigtige tidspunkt til at informere nogen om succes eller fiasko af de data, de har angivet, er lige efter at de sender oplysningerne. Det er her, hvor real-time validering kommer i spil. Det advarer brugere at fejl straks og gør det muligt for dem at rette dem hurtigere uden at skulle vente, indtil de trykker på 'Send' knappen.

Og husk, validering bør ikke kun fortælle brugerne, hvad de gjorde forkert; Det skal også fortælle dem, hvad de gør rigtigt. Dette giver brugerne mere tillid til at bevæge sig gennem formularen.

Persille er et glimrende JavaScript form valideringsbibliotek. Det er åben kilde og UX-fokuseret, så du kan tilsidesætte næsten alle standardadfærd for at passe dine nøjagtige behov. I den følgende kode er et simpelt persille valideringseksempel for et "meddelelsesfelt. Feltet skal være mindst 20 tegn, men ikke mere end 100.

 & lt; etiket for = "besked" & gt; besked (20 tegn min, 100 max): & lt; / label & gt;
& lt; Textarea ID = "Meddelelse" klasse = "Form-control" navn = "Meddelelse" Data-persille-trigger = "Keyup" Data-Parsley-Minlength = "20" Data-Parsley-MaxLength = "100" Data-persille -MinLength-message = "Kom igen! Du skal indtaste mindst en 20 tegn kommentar." Data-Parsley-Validation-THRESHLOLD = "10" & GT; & LT; / Textarea & GT;

Du kan Find den komplette kodeprøve her .

09. Undgå faste inputformater

Den mest almindelige årsag til at tvinge et fast format er validering scriptbegrænsning (bagenden kan ikke bestemme det format, det har brug for), hvilket i de fleste tilfælde er et implementeringsproblem. I stedet for at tvinge formatet af noget som et telefonnummer under brugerindgangen, skal du gøre det muligt at omdanne, hvad brugeren kommer ind i det format, du vil vise eller gemme.

10. Brug ikke nulstil knapper

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Lidt god nogensinde kom fra at inkludere en nulstillingsknap lige ved siden af indsendelsesindstillingen

En nulstillingsknap hjælper næsten aldrig brugere. Det er svært at forestille sig, at nogen vil have en knap, der fortryder alt deres arbejde, endsige, at de vil have, at knappen vil sidde ved siden af knappen, der sparer den. Internettet ville være et lykkeligere sted, hvis næsten alle nulstillede knapper blev fjernet.

Vil du vide, hvordan dine brugere reagerer på dit websted? En anstændig Web Hosting. Tjenesten vil give dig den analytics, du har brug for.

Denne artikel optrådte oprindeligt i net , bladet til professionelle webdesignere og udviklere. Abonner på nettet her .

Relaterede artikler:

29 Web Design Tools til at fremskynde din workflow
De 41 bedste gratis web skrifttyper
13 bedste stykker af brugertestsoftware

10 regler for at lave brugervenlige webformularer

01. Spørg kun, hvad der kræves

02. Bestil felterne logisk

03. Hold etiketter kort

04. Du må ikke kopiere felter

05. Fremhæv valgfrie felter

06. Pas på med standardindstillinger

07. Minimer behovet for at skrive

08. Brug real-time validering

09. Undgå faste inputformater

10. Brug ikke nulstil knapper

hvordan - Mest populære artikler

Procreat Tutorial: Sådan maler du som de gamle mestere

Affinity Designer: Sådan bruger du begrænsninger

Opret skyer med FUMEFX til 3DS MAX

Sådan illustrerer du dyres øjne

Sådan tegner du en stor kat med pasteller

Mal et udtryksfuldt stilleben i akryl

Sådan maler man en traditionel British Village Scene

Sådan opretter du et stiliseret 3D-tegn til spil

Kategorier