Et formularfelt føles ikke som en lille ting, når du selv udfylder det. Det er øjeblikket, hvor du beslutter, om du går videre eller forlader siden. Og det øjeblik afhænger helt af, om feltet er tydeligt, om vejledningen er let at følge, og om fejlbeskederne giver mening, når noget går galt.
Undersøgelser viser, at 67 % af folk dropper formularer, fordi de er svære at finde rundt i. Det meste af besværet handler ikke om, at du spørger om for mange oplysninger. Det handler om, hvordan oplysningerne bliver vist i det enkelte felt. En enkelt uklar label, en forvirrende pladsholder eller en vag fejlbesked kan stoppe nogen i at gøre en formular færdig, som de faktisk gerne vil udfylde.
Her gennemgår vi de praktiske regler uden teori, der gør formularfelter fra besvær til værktøj for konvertering. Du lærer, hvordan labels skal virke, hvorfor pladsholdere svigter, når designere stoler på dem, og hvordan beskeder ved validering afgør, om brugerne stoler på din formular eller dropper den. Når du kan de detaljer, forstår du, hvorfor nogle virksomheder får 80 % til at gøre formularen færdig, mens andre kæmper for at nå 50 %.
Hvad får et formularfelt til at føles let, og hvad får det til at føles overvældende?
Et formularfelt er mere end en indtastningsboks. Det er en samtale mellem dit brand og den besøgende. Feltet stiller et spørgsmål, labelen forklarer, hvad du vil vide, og pladsholderen giver et vink. Beskeden ved validering svarer, når noget ikke er helt rigtigt. Alle dele arbejder sammen om at skabe en følelse.
Følelsen kan være "Jeg ved præcis, hvad jeg skal gøre, og jeg stoler på det her" eller "Jeg ved ikke, hvad der skal stå her, og formularen virker ødelagt." Forskellen er ikke held. Den er opbygning.
Når felter er lette, føles de ubesværede. Labelen fortæller dig, hvilke oplysninger der hører til i feltet, før du klikker. Selve feltet har plads nok til at skrive i. Hvis du laver en fejl, fortæller fejlbeskeden dig præcis, hvad der gik galt, og hvordan du retter det. Du bevæger dig gennem formularen med sikkerhed.
Når felter er svære, skaber de besvær. Labelen mangler måske eller er uklar. Du begynder at skrive, og en pladsholder forsvinder, så du glemmer, hvad du skulle skrive. En fejl dukker op uden at sige, hvad problemet er, så du må gætte. Hvert felt bliver en lille gåde. Efter tre eller fire af dem går folk.
Labels i formularer: gør dem tydelige og altid synlige
En label er ikke pynt. Den er vejledningen, der fortæller, hvilke oplysninger der hører til i et felt. De bedste labels er tydelige, beskrivende og altid synlige. Ikke skjult. Ikke forsvindende. Altid der.
Det viser forskningen. Når en label står lige over et felt og forbliver synlig, mens brugeren skriver, bliver flere formularer gjort færdige. Når labels bliver erstattet af pladsholdere, der forsvinder, så snart nogen begynder at skrive, falder andelen. Grunden er enkel. Folk har brug for at huske, hvad de har skrevet, tjekke for tastefejl og kontrollere deres arbejde, før de sender. Forsvinder labelen, kan de ikke gøre noget af det.
Labelen skal beskrive feltet, så den svarer på ét spørgsmål. Hvilke oplysninger skal der stå her? "E-mailadresse" gør mere arbejde end "E-mail". "Telefonnummer" er tydeligere end "Telefon". "Firmanavn" slår "Firma". Disse små forskelle i, hvor præcis man er, gør forskellen på at forstå det med det samme og et øjebliks tøven.
Undgå labels, der skjuler oplysninger. Brug ikke vage labels som "Andet", "Yderligere info" eller "Detaljer". De tvinger brugeren til at klikke eller holde musen over for at forstå, hvad feltet er til. En præcis label som "Hvordan hørte du om os?" eller "Hvad er din største udfordring?" gør arbejdet på forhånd og holder folk i gang.
Påkrævede og valgfrie felter skal kunne ses på forskel, men uden forklaring i ord. De fleste formularer skriver "Påkrævede felter er markeret med en stjerne" og forventer så, at folk husker reglen. Marker i stedet påkrævede felter synligt (en stjerne eller en prik), og gør valgfrie felter tydelige med en lille tekst "(valgfrit)". Så kan folk med et blik se, hvad der skal udfyldes, og hvad der ikke skal.
Lange eller komplekse formularer har gavn af en kort hjælpetekst under labelen. Det er ikke en vejledning for livet. Det er en enkelt sætning, der gør det klart, når det er nødvendigt. Spørger du om et telefonnummer og har brug for et bestemt format, så tilføj én linje under labelen: "Skriv landekode med. Vi ringer ikke til dig uden at spørge først." Den ene linje forhindrer fejl i formatet og skaber tillid. Men hold den kort. Afsnit af hjælpetekst under hvert felt får formularen til at føles overvældende.
Vil du se nærmere på, hvordan valg af layout påvirker, hvordan formularer opleves, så læs vores guide om principper for formulardesign: layout, afstand og visuelt hierarki.
Derfor svigter pladsholdere, og hvad du kan bruge i stedet
En pladsholder er tekst inde i et formularfelt, der forsvinder, så snart nogen klikker på det. Det ser hjælpsomt ud. Det føles som et vink. I praksis er det den mest almindelige fejl i formulardesign.
Sådan går det, når nogen stoler på pladsholdere i stedet for labels. En besøgende kommer til formularen. Pladsholderen siger "john@example.com" for at vise, hvilket format der forventes. De klikker på e-mailfeltet og begynder at skrive. Pladsholderen forsvinder. Nu kan de ikke se, hvilket format der blev forventet, så de spekulerer på, om de gør det rigtigt. De skriver færdigt. De går videre til næste felt med tabulator. Nu kan de ikke huske, om de skrev deres e-mail rigtigt, men de kan ikke gå tilbage og tjekke, fordi feltet ikke længere viser pladsholderen. Så de sletter deres svar og skriver det igen. Det gentager sig for hvert felt, der kun har en pladsholder som vejledning. Andelen, der gør formularen færdig, styrtdykker.
Forskningen er overvældende. Pladsholdere skader, at formularer bliver gjort færdige, skader tilgængeligheden (oplæsningsprogrammer har svært ved dem) og skaber besvær for folk med kognitive vanskeligheder og for alle, der udfylder en formular hurtigt, mens de er adspredte. Når du fjerner pladsholdere som den vigtigste vejledning og tilføjer synlige labels, stiger andelen, der gør formularen færdig, målbart.
Det her virker: brug labels til vejledning og pladsholdere kun til eksempler. Et felt med labelen "E-mailadresse" og pladsholderen "dit.navn@firma.dk" virker rigtig godt. Labelen fortæller brugeren, hvad der hører til i feltet. Pladsholderen viser formatet uden at skjule vejledningen. Når brugeren klikker, og pladsholderen forsvinder, ved de allerede, hvad feltet er til, fordi de har en synlig label.
Ikke alle felter har brug for en pladsholder. Enkle felter som "Fornavn" eller "Firmanavn" har kun brug for en label. Pladsholderen er nyttig til felter, hvor formatet betyder noget (telefonnumre, datoer, URL'er), eller hvor brugeren måske ikke ved, hvilket eksempel de skal skrive (brugernavn på sociale medier, kode fra en henvisning).
Er du fristet til at bruge en pladsholder i stedet for en label for at spare plads, så byg formularen med labels alligevel, og lad dem stå oven på hinanden. En formular med synlige labels og uden pladsholdere slår altid en formular med flydende labels og skjulte pladsholdere. Brugerne gør formularer hurtigere færdige, laver færre fejl og stoler mere på formularen.
Beskeder ved validering: gør fejl til vejledning
Validering er det, der sker, når nogen udfylder et felt forkert. En fejlbesked dukker op. I det øjeblik føler brugeren noget. Enten føler de, at formularen er ødelagt og forvirrende, eller også føler de, at formularen hjælper dem med at få det rigtigt.
Dårlige beskeder ved validering er vage. De siger "Ugyldigt input" eller "Fejl" og ikke mere. Brugeren ved ikke, hvad der gik galt. Var formatet forkert? Var det for kort? Brugte de et tegn, der ikke er tilladt? De må gætte og prøve igen.
Gode beskeder ved validering er præcise og kan handles på. I stedet for "Ugyldigt" skal du skrive "Adgangskoden skal have mindst 8 tegn og indeholde ét stort bogstav og ét tal." Det fortæller brugeren præcis, hvad der gik galt, og hvad de skal gøre for at rette det. Formularen føles ikke længere ødelagt. Den føles hjælpsom.
Tidspunktet betyder også noget. Validering kan ske på to måder. Validering i realtid tjekker feltet, når brugeren er færdig med at skrive, og viser en fejl med det samme. Det føles responsivt og hjælper med at fange fejl, før formularen sendes. Validering af hele formularen sker, når nogen klikker på indsend, og alle fejl vises på én gang. Det føles mindre responsivt, men fungerer fint til enkle formularer. Kombinér begge, når du kan. Validering i realtid til de vigtige felter (e-mail, adgangskode, telefonnummer) og validering af hele formularen ved indsendelse til alt andet.
Placeringen af fejlbeskeder afgør, om folk kan rette dem. Fejlteksten skal stå lige under det felt, der skabte problemet, ikke øverst i formularen på en liste. Når fejlen står under feltet, kan brugeren læse fejlen og se feltet samtidig. De kan se, hvad de har skrevet, forstå, hvad der gik galt, og rette det med det samme. Når fejlen står øverst i formularen på en liste, må de rulle op igen, finde feltet og huske, hvad fejlen var.
Farve alene er ikke nok til at vise en fejl. Stol ikke kun på en rød kant eller rød tekst. Nogle brugere kan ikke se forskel på farver. Tilføj et ikon (et X, et advarselstegn) og en støttende tekst, så fejlen er tydelig for alle. Oplæsningsprogrammer har også brug for tekst til at læse fejlen op, ikke kun en ændring af farve.
Tonen i fejlbeskeder betyder noget for, hvordan folk har det med din formular. En hård besked som "Du har skrevet en ugyldig e-mail" får folk til at føle, at de har gjort noget forkert. En hjælpsom besked som "Vi kunne ikke genkende formatet på den e-mail. Tjek for tastefejl, og prøv igen" får dem til at føle sig hjulpet. Den anden besked gør det samme arbejde, men får oplevelsen til at føles mere som samarbejde end som dom.
Vil du vide mere om at bygge formularer, der føles tilgængelige for alle brugere, så læs vores artikel om tilgængeligt design af formularer.
Sådan påvirker afstand mellem felter, om en formular virker indbydende
En formular er et visuelt miljø. Pladsen omkring hvert felt, afstanden mellem labels og felter og mellemrummet mellem grupper af felter sender alle signaler om, om formularen er til at overskue, eller om den er overvældende.
Tæt afstand får ti felter til at ligne tredive. Hvert felt kæmper om opmærksomheden. Brugeren ved ikke, hvilke felter der hører sammen. Labels sidder tæt på felterne under dem, og den næste label sidder få pixel længere nede. Hele formularen føles trang og overvældende. Folk dropper, før det første felt er udfyldt.
Rigelig afstand mellem felter, der hører sammen, og større mellemrum mellem grupper af felter får de samme ti felter til at føles som et kort, ordnet forløb. Først udfylder du oplysninger om betaling. Så et tydeligt mellemrum. Så oplysninger om levering. Så endnu et mellemrum. Betalingsoplysninger. Formularen føles opbygget, ikke kaotisk. Det er ikke spildt hvidt rum. Det er informationsarkitektur, der fører brugeren gennem forløbet.
Formularer på mobil har brug for særlig opmærksomhed på afstand. På en telefonskærm kan man ikke bruge en trang formular. Hvert felt skal have nok lodret plads til, at en finger kan trykke på det uden at ramme et nabofelt. En formular på mobil med rigelig lodret afstand og tydeligt adskilte afsnit giver markant flere konverteringer end en, der er lavet til computer og krympet til mobil. Pladsen er ikke spildt. Den har en funktion.
Placeringen af labels påvirker også oplevelsen af afstand. Labels skal stå lige over felterne, ikke ved siden af. Når labels står til venstre, bliver afstanden mellem label og felt større, og det skaber forvirring om, hvilket felt der hører til hvilken label. Det gælder især på mobil, hvor labels til venstre tvinger tekst til at brække eller blive krympet til størrelser, der ikke kan læses. Labels over felterne hænger sammen med deres felt og ser renere ud.
Markering af påkrævede og valgfrie felter, så den virker
Hvert felt er enten påkrævet (skal udfyldes) eller valgfrit (kan springes over). Brugeren skal med et blik kunne se, hvad der er hvad, uden at læse hjælpetekst eller vejledning.
Den traditionelle metode markerer påkrævede felter med en stjerne og skriver "Påkrævede felter er markeret med en stjerne". Det virker kun, hvis brugerne husker reglen. Mange gør ikke. De skimmer formularen og ser stjerner uden at forstå, hvad de betyder.
En bedre metode markerer påkrævede felter synligt (stjerne eller farvet prik) og skriver udtrykkeligt "(valgfrit)" ved siden af labelen på valgfrie felter. Nu fortæller et hurtigt blik brugeren, om hvert felt er nødvendigt. Påkrævede felter ser normale ud med en markering. Valgfrie felter har en tydelig label. Det fjerner behovet for at huske en regel.
Nogle formularer bruger farve til at skelne påkrævede felter fra valgfrie. Det kan virke, men det kræver høj kontrast og bør kombineres med tekst i labels, ikke bruges alene. En rød stjerne ved siden af labelen virker bedre end en rød baggrund i feltet, fordi baggrunden i feltet kan gøre det sværere at se, hvad der står.
Betingede felter og kun at vise det, der er brug for
Nogle felter skal først vises, når en bruger har truffet et valg i et tidligere felt. Et afkrydsningsfelt for "Jeg bor i USA" kan vise en rullemenu med delstater. Hvis du vælger "Virksomhed" i et felt for kontotype, kan et felt for firmanavn dukke op. Betingede felter gør det lettere at overskue, fordi de kun viser de felter, brugeren faktisk skal udfylde.
Når betingede felter dukker op, skal de gøre det jævnt og tydeligt. Hvis de pludselig er der uden animation, kan det forskrække. En tone ind eller en glidende bevægelse nedad gør ændringen tydelig. Det nye felt skal have sin egen label og validering, ligesom et almindeligt felt. Antag ikke, at brugeren forstår, hvad de skal gøre, bare fordi feltet dukkede op.
Betingede felter virker bedst, når de dukker op under det felt, der udløste dem, ikke over eller ved siden af. Brugeren træffer et valg, og lige under valget dukker nye felter op, som hører til valget. Det holder vejen lineær og mindsker forvirring.
Sådan hjælper WEMASY med design af formularfelter
WEMASYs formularbygger har felter, du kan tilpasse, regler for validering og fejlbeskeder i realtid. Du kan sætte felter til påkrævede eller valgfrie, lave bestemte regler for validering til forskellige felttyper og styre præcis, hvilke fejlbeskeder der vises, og hvornår. Det betyder, at du kan bygge formularer, der følger al god praksis i denne artikel, uden at du skal kode.
Du kan også styre layout, afstand og placering af labels med WEMASYs designværktøjer til formularer. Byg formularer, der føles tydelige, professionelle og lette at gøre færdige.
Se, hvilke funktioner der er med i hver WEMASY-plan.