Tag en hvilken som helst virksomheds formular, og du finder sandsynligvis designfejl, der koster dem leads. De fleste tænker på, hvad de spørger om, og ikke på, hvordan de viser det. Men dem, der konverterer? De kender en hemmelighed: Måden, du placerer felterne på, afstanden mellem dem og den visuelle vægt af hvert element gør forskellen på let og besværligt.
Den forskel er stor. Forskellen på 50 % og 85 % gennemførelse kommer ofte ned på bare tre ting.
Principper for formulardesign er de praktiske regler, der styrer den usynlige oplevelse. Layout, afstand og visuelt hierarki arbejder sammen om at lede dine besøgende gennem formularen helt naturligt, uden friktion og forvirring. Mestrer du disse tre, vil hver formular, du bygger, føles let at udfylde.
I denne guide lærer du præcis, hvordan du bruger hvert princip. Ingen teori. Ingen fyld. Kun en ramme, du kan handle på, der gør forvirrende formularer til konverteringer.
Hvad er principper for formulardesign?
Principper for formulardesign er de regler for opbygning og visning, der får formularer til at virke. De handler ikke om pynt eller smag. De handler om, hvordan brugerne opfører sig. Hvordan scanner øjet en formular? Hvordan grupperer hjernen oplysninger, der hører sammen? Hvilke signaler fortæller, at et felt er vigtigt, valgfrit eller hænger sammen med et andet felt? Det er de spørgsmål, formulardesign besvarer.
De bedste principper for formulardesign gælder for alle typer formularer. Uanset om du designer en kontaktformular, en betalingsformular eller en tilmelding til en begivenhed, gælder de samme regler for layout, afstand og hierarki. Principperne bygger på, hvordan folk faktisk behandler visuel information og træffer valg, når hjernen er presset.
Når principper for formulardesign ignoreres, falder gennemførelsen kraftigt. Undersøgelser viser, at formularer med dårlig afstand har 20 til 40 % flere afbrud end formularer med god afstand. Et uklart visuelt hierarki får brugerne til at springe vigtige felter over eller udfylde valgfrie felter, de ikke ville. Et dårligt layout får en formular med fem felter til at føles som tyve.
Derfor har principper for formulardesign betydning for din virksomhed
Hver formular på din hjemmeside er et sted, hvor folk konverterer. Det er her, interesserede bliver til leads, kunder gennemfører køb, og data bliver samlet. Hvis dine formularer er svære at bruge, mister du direkte omsætning.
Tænk på, hvad der sker, når nogen lander på din formular. De har allerede besluttet, at de vil handle med dig. De vil gerne udfylde formularen. Det eneste, der står i vejen, er friktion i designet. De kan ikke se, om et felt er obligatorisk eller valgfrit. De forstår ikke, hvorfor der spørges om en oplysning. De kan ikke let se, hvor de skal klikke næste gang. Så går de.
Principper for formulardesign påvirker direkte dine forretningstal. Virksomheder, der bruger stærke designprincipper i deres formularer, ser højere gennemførelse, færre afbrud og bedre datakvalitet. En tech-virksomhed, der forbedrede afstanden og det visuelle hierarki i formularen, så gennemførelsen stige fra 62 % til 84 %. En netbutik, der ændrede layoutet i betalingsformularen, nedbragte afbrud i kurven med 23 %.
Det er ikke teori. Sådan afgør brugerne, om din formular er deres tid værd.
De tre grundprincipper for formulardesign: layout, afstand og visuelt hierarki
Formulardesign hviler på tre søjler. Hver har sit formål. Sammen skaber de en formular, der føles enkel og guider brugerne fra start til slut.
Princip 1: Formularens layout
Layout er, hvordan du organiserer oplysningerne på siden. Det er den fysiske placering af felter, etiketter, knapper og afsnit. Et stærkt layout gør det med det samme klart, hvordan formularen skal udfyldes, og i hvilken rækkefølge.
Det mest effektive layout har én kolonne. Det er ikke en designtrend, men bygger på, hvordan folk læser. Øjet bevæger sig oppefra og ned på en side. Når du sætter formularfelter i én kolonne, bevæger brugerne sig naturligt gennem dem uden at skulle se til venstre og højre eller tilbage for at tjekke, om de har misset noget.
Formularer med flere kolonner tvinger øjet til at arbejde hårdere. Brugeren skal vælge, om de skal udfylde venstre kolonne først eller den højre. De skal huske, hvor de var. Selv en formular med to kolonner øger den mentale belastning og antallet af afbrud. Formularer med én kolonne konverterer markant bedre, nogle gange med 20 % eller mere.
Inden for den ene kolonne skal felter, der hører sammen, grupperes visuelt. En formular til leveringsadresse skal have alle adressefelter samlet (vej, by, region, postnummer). Et afsnit til fakturering skal være visuelt adskilt fra et afsnit til levering. Grupperne fortæller brugerne, at felterne hører sammen og kan udfyldes som en enhed. Felter uden gruppering føles tilfældige og uordentlige, selv om oplysningerne giver mening.
Etiketter styrer også layoutet. Hver etiket skal stå lige over sit indtastningsfelt og ikke til venstre. Når etiketter står til venstre for felterne, vokser afstanden mellem etiket og felt, og det bliver uklart, hvilket felt der hører til hvilken etiket. Etiketter over felterne holder forholdet tydeligt. Det er især vigtigt på mobil, hvor etiketter og felter side om side er umuligt.
Placeringen af knappen har også betydning. Din vigtigste knap med en opfordring skal stå nederst i formularen, lige under det sidste felt. Den skal være tydelig, fremtrædende og det første, øjet lander på, når brugeren er færdig med at udfylde. Mindre vigtige knapper (som "Gem som kladde" eller "Annuller") skal være mindre eller stå under hovedknappen, så de ikke distraherer fra den vigtigste handling.
Princip 2: Afstand i formularer
Afstand er tom plads. Det er afstanden mellem felter, mellem afsnit og mellem en etiket og dens felt. Afstand føles ikke som et "princip". Den føles usynlig. Men den gør det vigtigste arbejde i dit formulardesign.
God afstand gør to ting. Den skaber klarhed om, hvad der hører sammen, og den giver luft, så formularen føles mindre overvældende.
Reglen er enkel. Felter, der hører sammen, skal have lille afstand. Et felt til "Fornavn" og et til "Efternavn" skal have 8 til 12 pixel lodret afstand imellem sig. Det er tæt nok til, at de føles som et par. Når du er færdig med én gruppe (som et afsnit om navn), skal du øge afstanden før næste gruppe til 24 til 32 pixel. Det visuelle mellemrum fortæller brugeren, at et nyt afsnit begynder.
Tænk på afstand som tegnsætning. Lille afstand siger "disse hører sammen". Stor afstand siger "nu kommer en ny tanke". Brugerne læser de signaler med det samme.
Sådan går det, hvis afstanden er for lille overalt. En formular med ti felter, der er presset sammen uden luft, føles som en mur af indtastningsfelter. Brugeren føler sig overvældet, før de overhovedet er begyndt. Hjernen kan ikke se, hvilke felter der hører til hvilke andre. Afbrud sker, før det første felt er udfyldt.
Sådan går det, hvis afstanden er god. Den samme formular med ti felter føles overkommelig. Brugeren kan se, at nogle felter hører sammen (faktureringsadresse), så kommer et mellemrum, og så en anden gruppe (leveringsadresse). Formularen føles kortere, fordi den er delt i bidder, der er lette at tage ind.
En undersøgelse fra 2024 af formularers brugeroplevelse fandt, at formularer med god afstand og gruppering har 32 % højere gennemførelse end de samme formularer med et trangt layout. Det eneste, der var ændret, var afstanden.
Formularer på mobil skal have mere plads og ikke mindre. Skærme på mobil er små, og fingre er store. At presse felter sammen på mobil dræber konverteringen. Hvert felt skal have nok luft omkring sig til, at brugeren kan trykke på det uden at ramme felterne ved siden af. Det er ikke luften inde i feltet (selv om den også har betydning). Det er pladsen mellem felterne. En formular på mobil med rigelig lodret afstand og én kolonne konverterer markant bedre end en, der er bygget til computer og skrumpet ned til mobil.
Princip 3: Visuelt hierarki i formularer
Visuelt hierarki er den rækkefølge, øjet og hjernen behandler det, de ser, i. I en formular er det forskellen på et "obligatorisk" felt, der springer i øjnene, og et, der forsvinder i baggrunden. Det er forskellen på en tydelig send-knap, der ser klikbar ud, og en mindre vigtig annullér-knap, der ligner tekst.
Visuelt hierarki i formularer skabes med fire hovedværktøjer. Størrelse, farve, kontrast og placering spiller hver en rolle i at lede brugerens opmærksomhed.
Størrelse viser, hvad der er vigtigt. En fremtrædende etiket i 16 px er vigtigere end hjælpetekst i 12 px. En stor send-knap føles mere betydningsfuld end en lille "Nulstil"-knap. Markeringen af obligatoriske felter skal være lidt mere fremtrædende end valgfrie etiketter. Gør ikke forskellen åbenlys. Gør den bare lidt mere synlig. Den diskrete forskel i størrelse leder øjet uden at råbe.
Farve skaber hierarki gennem kontrast. En mørk etiket på hvid baggrund har høj kontrast og skiller sig ud. Lysegrå hjælpetekst har lavere kontrast og træder i baggrunden. En klar blå send-knap i en formular med grå indtastningsfelter har kontrast med det samme og trækker øjet til sig. En mindre vigtig knap i samme grå som formularens baggrund træder tilbage. Øjet lander først på hovedhandlingen, præcis hvor du vil have det.
Begrænsningen er vigtig. Brug ikke mere end tre visuelle vægte i en enkelt formular. En vægt kan være en farve, en størrelse, en nuance eller en stil (fed mod almindelig). Hvis alt er lysende, er intet lysende. Hvis du har fem forskellige tekstfarver, ved brugeren ikke, hvad de skal lægge mærke til. Tre niveauer af visuel vigtighed er nok til at lede opmærksomheden uden forvirring. Det er den regel for hierarki, de fleste formularer bryder, og det viser sig som "jeg vidste ikke, at det var valgfrit" eller "jeg troede, at knappen var inaktiv".
Placering skaber også hierarki. Det første felt, brugeren ser, er det mest fremtrædende. Knappen med hovedhandlingen nederst er det sidste, de ser, og det er den handling, der oftest bliver gennemført. Markering af obligatoriske felter, hjælpetekst og fejlmeddelelser skal alle placeres, så de er tydelige uden at forstyrre.
"Misse-øjne-testen" viser, om dit visuelle hierarki virker. Slør øjnene (eller misse bogstaveligt) mod din formular. Hvad ser du først? Hvis du ser de vigtigste felter og knappen med hovedhandlingen, virker dit hierarki. Hvis øjnene går til tilfældige steder eller bliver i tvivl om, hvad de skal gøre, skal dit hierarki forbedres.
Sådan bruger du principperne for formulardesign i alle typer formularer
De tre principper gælder for hver formular på din hjemmeside. En kontaktformular bruger de samme regler for layout, afstand og hierarki som en betalingsformular, en tilmeldingsformular eller en tilmelding til en begivenhed. Forskellen ligger ikke i principperne selv. Forskellen er, hvilke felter der har mest betydning for den type formular.
For at bruge principperne i dine formularer skal du starte med layout. Vælg én kolonne, oppefra og ned. Gruppér felter, der hører sammen, og læg større mellemrum mellem grupperne.
Så skal du bruge afstand. Brug ensartet afstand mellem felter i en gruppe (8 til 12 px). Brug større afstand mellem grupper (24 til 32 px). Test på mobil og sørg for, at hvert felt er let at trykke på.
Til sidst skal du lave visuelt hierarki. Find ud af, hvad brugeren skal lægge mærke til først. Er det formularens overskrift? Er det markeringen af obligatoriske felter? Er det knappen med hovedhandlingen? Sørg for, at det element er visuelt fremtrædende. Lad alt andet spille en støttende rolle.
Resultatet er en formular, der føles intuitiv. Brugerne behøver ikke tænke. De udfylder den og sender.
Sådan hjælper WEMASY dig med at bygge bedre formularer
WEMASY har en formularbygger, der starter med disse designprincipper indbygget. Layout med én kolonne er standard. Afstanden er sat op på forhånd efter reglen om 8 px og 24 px. Visuelt hierarki bygger på færdige stilarter til formularfelter, der holder etiketter, markering af obligatoriske felter og indtastningsfelter rigtigt koblet.
Du kan tilpasse farver, skrifttyper og knaptekst, så de passer til dit brand. Den underliggende struktur forbliver sund. Det betyder, at du får en formular, der ligner din og virker godt.
Se formularbyggeren i brug og se priserne på WEMASY for at se, hvilken plan der har formularbygger og muligheder for tilpasning.