10 Regler för att göra användarvänliga webbformulär

Feb 4, 2026

Hur

Illustration of web forms on an iMac and tablet

Trots utvecklingen av human-dators interaktion är formulär fortfarande en av de viktigaste typerna av interaktion för användare. Människor som använder din ansökan eller hemsida har ett visst mål, och ofta är det enda som står mellan användaren och deras mål. Varje dag använder vi dem för våra väsentliga aktiviteter - för att slutföra inköp, att anmäla sig till sociala nätverk, för att ge feedback på en produkt som vi köpt, och mer - de är en stor del av användarupplevelse .

Som ett resultat är det mycket viktigt för oss att kunna slutföra onlineformer snabbt och utan förvirring. Ju mindre ansträngning vi måste spendera, den lyckligare vi är. Som designers och utvecklare, bör vi sträva efter att producera snabbare, enklare och mer produktiva utlänningar för våra användare.

I den andra av mina två artiklar som utforskar hur man bygger bättre former ( hitta den första här ), här är mina 10 tips för designformulär som är användarvänliga. Inte riktigt vad du letar efter? Du kanske behöver våra guider till toppen Website Builder eller molnlagring service.

01. Fråga bara vad som krävs

Skärande mängden nödvändig information gör formuläret enklare att fylla i. Du bör alltid fråga varför och hur informationen du begär används. Försök att minimera antalet fält så mycket som möjligt, eftersom varje fält du lägger till i ett formulär påverkar dess omvandlingsfrekvens. Begränsa antalet frågor och fält gör din blankett mindre laddad, speciellt när du begär en hel del information från dina användare.

02. Beställ fälten logiskt

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Tänk på din form som en konversation; Du vill gruppera och beställa fälten i en order som är vettig för användaren

Det är bra att tänka på en form som liknar en konversation. Precis som alla normala konversationer, bör den representeras av en logisk kommunikation mellan två parter: en person och din app. Detaljer bör begäras i en order som är logisk ur användarens perspektiv, inte det för ansökan eller databasen. Det är till exempel ovanligt att be om någons adress före namnet.

Det är också mycket viktigt att gruppera relaterade frågor i block, så flödet från en uppsättning frågor till nästa kommer bättre likna en konversation. Gruppering av relaterade områden hjälper också användarna att känna av den information de måste fylla i.

Pictured ovan är exempel på två registreringsformer. Långa former kan känna sig överväldigande om du inte grupperar relaterade fält - jämför formuläret till vänster till den förbättrade versionen till höger.

Gruppering måste utföras visuellt såväl som i koden. Till exempel kan du använda & lt; fältset & gt; och & LT; Legend & GT; Elements för att associera relaterade formulära kontroller:

 & lt; fältset & gt;
  & LT; Legend & GT; Personlig information: & LT; / Legend & GT;
  & lt; div & gt;
    & LT; Etikett för = "First_Name" & GT; Förnamn & LT; / Label & GT;
    & LT; Input Type = "Text" Namn = "First_Name" ID = "First_Name" & GT;
  & lt; / div & gt;
  & lt; div & gt;
    & LT; Etikett för = "Last_Name" & GT; Efternamn & LT; / Etikett & GT;
    & lt; Input Type = "Text" Namn = "Last_Name" ID = "Last_Name" & GT;
  & lt; / div & gt;
    & LT; Etikett för = "Kön" & GT; Profession & LT; / Etikett & GT;
    & LT; Input Type = "Text" Namn = "Profession" ID = "Profession" & GT;
  & lt; / div & gt;
& LT; / Fieldset & GT;

03. Håll etiketter kort

Fältetiketter berättar för användare vad motsvarande inmatningsfält betyder. Clear Label Text är ett av de primära sätten att göra UI mer tillgänglig. Etiketter berättar användaren syftet med fältet, men de hjälper inte texter. Därför är att det är en prioritet - du bör designa kortfattade, korta och beskrivande etiketter (behåll dem till ett ord eller två).

04. Duplicera inte fält

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Gör inte dina användare skriver in information två gånger - du kommer bara att frustrera dem genom att slösa sin tid

Detta problem är särskilt vanligt för registreringsformulär: Nästan alla har kommit över ett formulär som kräver att du skriver en e-postadress eller ett lösenord två gånger. Historiskt sett var detta utformat för att förhindra misstag fel. Men de flesta användare kopierade helt enkelt det nödvändiga fältet när appen tillåter det. Och om det ursprungliga fältets data innehöll ett fel, duplicerades det.

05. Markera valfria fält

Helst är det bäst att inte ha några valfria fält. I linje med regel nummer 1, om en bit information inte är nödvändig, finns det ingen mening att slösa en användares tid. Men om du använder dem, bör du tydligt skilja vilka inmatningsfält som inte kan lämnas tomma. Vanligtvis är ett litet märke som en asterisk (*) eller "valfri" etikett tillräckligt.

06. Var försiktig med standardvärdena

Undvik att inkludera en statisk standard om du inte tror att en stor del av dina användare (t.ex. 90 procent) väljer det värdet - särskilt om det är ett obligatoriskt fält. Varför? Med detta tillvägagångssätt kommer du sannolikt att introducera fel eftersom folk skannar bildar snabbt online. Antag inte att de tar tid att analysera genom alla val. De kan blitht hoppa över något som redan har ett värde.

Det enda undantaget för denna punkt är smarta standardvärden - som de som förutsätter användarens land baserat på deras geolokeringsdata - vilket kan slutföra formuläret snabbare och mer exakt. Men du borde fortfarande använda dessa med försiktighet, eftersom användarna tenderar att lämna förutbestämda fält som de är.

07. Minimera behovet av att skriva

Att skriva är en långsam och felaktig proposition, och det är särskilt smärtsamt på en mobil, där användarna står inför begränsningarna för begränsad skärmgård. Och med fler och fler personer som använder små skärmar, kommer allt som kan göras för att förhindra onödig typsättning att förbättra användarupplevelsen. Om så är lämpligt kan du använda funktioner som AutoComplete och Prefill för data, så användarna behöver bara skriva in den minsta mängden information.

Att fylla i din adressinformation är ofta den mest besvärliga delen av ett online-registreringsformulär, tack vare flera fält, långa namn, och så vidare. Spara dina användare från att skriva in hela sin adress genom att implementera förpackningar för dessa fält. Bibliotek som Google Maps erbjuda en enkel javascript api för att uppnå detta. Du kan Hitta en arbetslösning här .

08. Använd validering i realtid

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Alert användare omedelbart om de gör ett fel - gör dem inte vänta tills de har slutfört hela formuläret

I en idealisk värld fyller användarna i formulär med nödvändig information och avslutar sitt jobb framgångsrikt, men i den verkliga världen gör människor ofta misstag. Det är frustrerande att gå igenom processen att fylla i en helt formulär för att ta reda på på den punkt som du har gjort ett fel.

Rätt tid att informera någon om framgången eller misslyckandet av de data som de har lämnat är strax efter att de lämnat in informationen. Det är där validering i realtid kommer i spel. Det varnar användarna att misstänka och gör det möjligt för dem att rätta till dem snabbare, utan att behöva vänta tills de trycker på "Skicka" -knappen.

Och kom ihåg att validering inte bara ska berätta för användarna vad de gjorde fel; Det borde också berätta för dem vad de gör rätt. Detta ger användarna mer förtroende att flytta genom formuläret.

Persilja är ett utmärkt Javascript-formulärvalideringsbibliotek. Det är öppen källkod och UX-fokuserad, så du kan åsidosätta nästan alla standardbeteende för att passa dina exakta behov. I följande kod är ett enkelt persilja-valideringsexempel för ett "meddelande" -fält. Fältet ska vara minst 20 tecken, men högst 100.

 & LT; Etikett för = "Meddelande" & GT; Meddelande (20 CHARS MIN, 100 MAX): & LT; / Etikett och GT;
& LT; TEXTAREA ID = "MESSAGE" CLASS = "FORM-CONTROL" NAME = "MESSAGE" DATA-PARSSLEY-trigger = "KeyUp" data-persley-minlength = "20" Data Persley-MaxLength = "100" Data persilja -Minlength-Message = "Kom igen! Du måste ange minst en 20 tecken-kommentar." Data-persilja-validering-tröskel = "10" & GT; / LT; / TextArea & GT;

Du kan Hitta det fullständiga kodprovet här .

09. Undvik fasta ingångsformat

Den vanligaste orsaken till att ett fast format är valideringsskriptbegränsning (baksidan kan inte bestämma det format som behövs), vilket i de flesta fall är ett implementeringsproblem. I stället för att tvinga formatet på något som ett telefonnummer under användarinmatning, bör du göra det möjligt att omvandla vad användaren går in i det format du vill visa eller lagra.

10. Använd inte återställningsknappar

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Lite bra kom någonsin från att inkludera en återställningsknapp intill alternativet Skicka

En återställningsknapp hjälper nästan aldrig användare. Det är svårt att föreställa sig att någon skulle vilja ha en knapp som ångrar hela sitt arbete, än mindre att de skulle vilja att den ska sitta bredvid knappen som sparar den. Webben skulle vara en lyckligare plats om nästan alla återställningsknappar togs bort.

Vill du veta hur dina användare svarar på din webbplats? Ett anständigt webbhotell Tjänsten kommer att ge dig den analytik du behöver.

Denna artikel uppträdde ursprungligen i netto , tidningen för professionella webbdesigners och utvecklare. Prenumerera på nätet här .

Relaterade artiklar:

29 Webbdesignverktyg för att påskynda ditt arbetsflöde
De 41 bästa gratis webbfonterna
13 bästa bitar av användarprogramvara

10 Regler för att göra användarvänliga webbformulär

01. Fråga bara vad som krävs

02. Beställ fälten logiskt

03. Håll etiketter kort

04. Duplicera inte fält

05. Markera valfria fält

06. Var försiktig med standardvärdena

07. Minimera behovet av att skriva

08. Använd validering i realtid

09. Undvik fasta ingångsformat

10. Använd inte återställningsknappar

Hur - Mest populära artiklar

Hur man drar muskler

Hur man skapar en appikon i Illustrator

Hur man målar en färgstark zombie

Hur man betonar kontaktpunkten för en bild

brudgummen en oemotståndligt furig varelse

Den ultimata guiden för att kompositera bilder i Photoshop

Kom igång i Amazon Lumberyard: Ställa in

Topptips för att förfina dina handritade illustrationstekniker

Kategorier